ecsy-babylon
ecsy-babylon is an experimental implementation of ECSY in babylon.js.
Example
In the spirit of learning-by-doing lets walk through how a simple babylon app would be converted to ecsy-babylon.
Vanilla babylon.js
Consider the following code:
// initialize the core elements
const canvas = document.getElementsByTagName("canvas")[0];
const engine = new BABYLON.Engine(canvas, true);
const scene = new BABYLON.Scene(engine);
// create objects to inhabit the scene
const camera = new BABYLON.ArcRotateCamera("camera",
-Math.PI / 2, Math.PI / 2.5, 3, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas, true);
const light = new BABYLON.HemisphericLight("light",
new BABYLON.Vector3(0, 1, 0), scene);
const box = BABYLON.MeshBuilder.CreateBox("box", {}, scene);
// set variables
const freq = Math.PI; //0.5 Hz
const amp = 0.1;
// apply behaviour on each frame
engine.runRenderLoop(() => {
box.position.y = Math.sin(Date.now() * 0.001 * freq) * amp;
scene.render();
});We create a scene and then a box to bob up and down within it. At the moment our app is fairly simple but as it expands we will need to consider how to manage the increasing complexity.
ecsy-babylon
ECS design will help us to write more organized apps by introducing some strict rules as to how they shall be structured:
- Conceptual elements of the app are organized into entities
- All game state and data are fields of components
- All behaviour exists in systems
For more information please check out the ECSY architecture docs.
In keeping with rule 1, lets use ecsy-babylon to convert our existing objects to components on entities.
import {
ArcRotateCamera,
BabylonCore,
Box,
components,
HemisphericLight,
Parent,
Position,
systems,
World,
} from 'ecsy-babylon';
import { Vector3 } from '@babylonjs/core/Maths/math.vector';
import { Component, Types, System } from 'ecsy';
// ...
const world = new World();
components.forEach((component) => world.registerComponent(component));
systems.forEach((system) => world.registerSystem(system));
world.registerComponent(BoxMoveComponent).registerSystem(BoxMoveSystem);
world.createEntity('singleton').addComponent(BabylonCore, {
world,
canvas: document.getElementsByTagName('canvas')[0],
});
world
.createEntity('camera')
.addComponent(Parent)
.addComponent(ArcRotateCamera, {
alpha: -Math.PI / 2,
beta: Math.PI / 2.5,
radius: 3,
target: new Vector3(0, 0, 0),
});
world
.createEntity('light')
.addComponent(Parent)
.addComponent(HemisphericLight, {
direction: new Vector3(0, 1, 0),
});
world
.createEntity('box')
.addComponent(Parent)
.addComponent(Position)
.addComponent(Box)
.addComponent(BoxMoveComponent, {
freq: Math.PI, // 0.5 Hz
amp: 0.1,
});
world.execute(0, 0);Now we need to implement our BoxMoveComponent
class BoxMoveComponent extends Component<BoxMoveComponent>{
freq!: number
amp!: number
static schema = {
freq: {
type: Types.Number,
default: Math.PI * 2
},
amp: {
type: Types.Number,
default: 1
}
}
}Finaly our BoxMoveSystem will manage state
class BoxMoveSystem extends System {
execute(): void {
this.queries.movableBoxes.results.forEach(entity => {
const boxMove = entity.getComponent(BoxMoveComponent)!;
const position = entity.getMutableComponent(ecsyBabylon.Position)!
position.value.y = Math.sin(Date.now() * 0.001 * boxMove.freq) * boxMove.amp;
})
}
static queries = {
movableBoxes: {
components: [BoxMoveComponent, ecsyBabylon.Position]
}
}
}A couple of notes regarding the above example:
- Every ecsy-babylon app requires a singleton entity with a
BabylonCorecomponent - All objects placed in the scene require a
Parentcomponent
Feel free to check out the demo's complete source code.