.gitignore

node_modules
dist

index.ts

import { World, System, TagComponent } from 'ecsy';

import * as PIXI from 'pixi.js'

const app = new PIXI.Application();

// add the canvas to the (empt) HTML document that the html-webpack-plugin
// generated. You can customize the HTML document if you want:
// https://github.com/jantimon/html-webpack-plugin#options
document.body.appendChild(app.view);

const graphics = new PIXI.Graphics();
app.stage.addChild(graphics);

graphics.beginFill(0xFFFF00);
graphics.drawRect(20, 20, 300, 200);

class Velocity {
  x: number;
  y: number;

  constructor() {
    this.x = this.y = 0;
  }
}

class Position {
  x: number;
  y: number;

  constructor() {
    this.x = this.y = 0;
  }
}

class MovableSystem extends System {
  queries = {
    moving: {
      components: [Velocity, Position],
      results: [],
    }
  };

  // This method will get called on every frame by default
  execute(delta: number, time: number) {
    // Iterate through all the entities on the query
    this.queries.moving.results.forEach((entity: any) => {
      var velocity = entity.getComponent(Velocity);
      var position = entity.getMutableComponent(Position);
      position.x += velocity.x * delta;
      position.y += velocity.y * delta;

      if (position.x > 800) position.x -= 800;
      if (position.x < 0) position.x += 800;
      if (position.y > 600) position.y -= 600;
      if (position.y < 0) position.y += 600;
    });
  }
}

const world = new World();
world.registerSystem(MovableSystem);

const getRandomPosition = () => ({ x: Math.random() * 800, y: Math.random() * 600 });
const getRandomVelocity = () => ({ x: Math.random() * 50, y: Math.random() * 50 });
      
for (let i = 0; i < 20; i++) {
  world
    .createEntity()
    .addComponent(Velocity, getRandomVelocity())
    .addComponent(Position, getRandomPosition());
//    .addComponent(Renderable)
}

package.json

{
  "scripts": {
    "start": "webpack-dev-server -w",
    "build": "rm -rf dist && NODE_ENV=production webpack --config ./webpack.config.js --mode production --progress --colors"
  },
  "dependencies": {
    "ecsy": "^0.2.2",
    "pixi.js": "^5.2.1"
  },
  "devDependencies": {
    "html-webpack-plugin": "^3.2.0",
    "ts-loader": "^6.2.1",
    "typescript": "^3.7.5",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.2"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "sourceMap": true,
    "target": "es6",
    "moduleResolution": "Node"
  }
}

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  context: __dirname,
  entry: './index.ts',
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.ts?$/,
        exclude: /node_modules/,
        use: 'ts-loader',
      },
    ]
  },
  resolve: {
    extensions: ['.ts', '.js']
  },
  plugins: [
    new HtmlWebpackPlugin({ title: 'titlegoeshere' }),
  ],
}