$ npm install @antv/g-ecs
English | 简体中文
A typical ECS architecture(borrow from ecsy), we use Matcher
instead of Query
:
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();
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);
Create a new entity:
const entity = world.createEntity();
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);
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);
We can add a component and its initial data to an entity:
entity.addComponent(C1, { p1: 2 }).addComponent(C2).addComponent(C3);
We can remove a component from an entity:
entity.removeComponent(C1);
© 2010 - cnpmjs.org x YWFE | Home | YWFE