Package Exports

@antv/g-ecs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@antv/g-ecs) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

English | 简体中文

g-ecs

a simple ECS implement for G

Architecture

A typical ECS architecture(borrow from ecsy), we use Matcher instead of Query:

Usage

import { Container } from 'inversify';
import { Component, System, World, containerModule } from '@antv/g-ecs';

// create a container
const container = new Container();
// load ECS module
container.load(containerModule);

// create a world
const world = container.get(World);

// register components
class C1 extends Component {
  static tag = 'c1';
  p1: number;
}
class C2 extends Component {
  static tag = 'c2';
}
class C3 extends Component {
  static tag = 'c3';
}
world.registerComponent(C1).registerComponent(C2).registerComponent(C3);

// register systems
class S1 extends System {
  static tag = 's1';

  trigger() {
    return new Matcher().allOf(C1);
  }

  execute(entities: Entity[]) {
    entities.forEach((entity) => {
      const c1 = entity.getComponent(C1);
      c1.p1++;
    });
  }
}
world.registerSystem(S1);

// create an entity
const entity = world.createEntity();
entity.addComponent(C1, { p1: 2 }).addComponent(C2).addComponent(C3);

// make a loop
let lastTime = performance.now();
const run = () => {
  const time = performance.now();
  const delta = time - lastTime;
  // run all the systems
  world.execute(delta, time);

  lastTime = time;
  requestAnimationFrame(run);
};
run();

World

A world is the container of ECS. We get a world from container instead of creating it manually.

import { Container } from 'inversify';
import { World, containerModule } from '@antv/g-ecs';

// create a container
const container = new Container();
// load ECS module
container.load(containerModule);

// create a world
const world = container.get(World);

createEntity

Create a new entity:

const entity = world.createEntity();

registerComponent

class C1 extends Component {
  static tag = 'c1';
  p1: number;
}
class C2 extends Component {
  static tag = 'c2';
}
class C3 extends Component {
  static tag = 'c3';
}
world.registerComponent(C1).registerComponent(C2).registerComponent(C3);

registerSystem

class S1 extends System {
  static tag = 's1';

  trigger() {
    return new Matcher().allOf(C1);
  }

  execute(entities: Entity[]) {
    entities.forEach((entity) => {
      const c1 = entity.getComponent(C1);
      c1.p1++;
    });
  }
}
world.registerSystem(S1);

Entitiy

addComponent

We can add a component and its initial data to an entity:

entity.addComponent(C1, { p1: 2 }).addComponent(C2).addComponent(C3);

removeComponent

We can remove a component from an entity:

entity.removeComponent(C1);

@antv/g-ecs