📜JavaScript developer.
🐲RPG fan.
📚Storyteller and 🕹game developer.
👨Father and Husband.
Published
Edited
Sep 20, 2021
1 star
{
// first, create a world
const world = bitECS.createWorld();
// give it a name
world.name = "TempestWorld";
addToConsole(world);
// add an entity - it's just an ID - a number
const entity001 = bitECS.addEntity(world)
addToConsole(entity001);
// add a component - components are just data structures
// first create a new type - it's just data with types.
// this is a reusable thing we can assign to a component shortly
const Vector3 = {
x: bitECS.Types.f32,
y: bitECS.Types.f32,
z: bitECS.Types.f32
}
addToConsole(Vector3)
// create a few components using this type
const Position = bitECS.defineComponent(Vector3)
const Velocity = bitECS.defineComponent(Vector3)
addToConsole(Position);
addToConsole(Velocity);
// create a list component via shorthand
const List = bitECS.defineComponent({
values: [bitECS.Types.f32, 3]
}) // [type, length]
// uncomment to see - takes a long time to render.
// addToConsole(List)
// a generic container
const Tag = bitECS.defineComponent()
addToConsole(Tag)
// add these components to our entity - entity001
bitECS.addComponent(world, Position, entity001)
bitECS.addComponent(world, Velocity, entity001)
bitECS.addComponent(world, List, entity001)
bitECS.addComponent(world, Tag, entity001)
// set the velocity of our entity via the components. Each value in a component is an array of the entities that posess it.
Velocity.x[entity001] = 1;
Velocity.y[entity001] = 1;
// note entity001 has not changed. It's just that the value in the Velicity.x array with that entity ID now has those values.
addToConsole(Velocity.x) //look at first item in array - it has a value of 1 now.
// next let's create a query into the world. Return to us all the entities that have a Position and a Velocity
const movementQuery = bitECS.defineQuery([Position, Velocity])
// it has no meaning until associated with a world
const ents = movementQuery(world)
addToConsole(ents); // returns the ID of the only entity in the world
// add concept of time. Just a plain attribute of the world.
world.time = { delta: 0, elapsed: 0, then: performance.now() }
addToConsole(world)
// add a system - a way to update some component values
const movementSystem = (world) => {
const ents = movementQuery(world)
for (let i = 0; i < ents.length; i++) {
const eid = ents[i]
Position.x[eid] += Velocity.x[eid]
Position.y[eid] += Velocity.y[eid]
Position.z[eid] += Velocity.z[eid]
}
return world
}
// add a "time" system to keep track of time
const timeSystem = world => {
const { time } = world
const now = performance.now()
const delta = now - time.then
time.delta = delta
time.elapsed += delta
time.then = now
return world
}
// a pipeline to run the systems
const pipeline = bitECS.pipe(movementSystem, timeSystem)
//now run the pipleline ever 1000 msec
setInterval(() => {
pipeline(world);
console.log("Position", Position.x[entity001])
scanner.querySelector("#xpos").innerHTML = Position.x[entity001]
console.log("tobj", JSON.stringify(world.time))
timeview.querySelector("#tobj").innerHTML = JSON.stringify(world.time);
}, 1000)
}
con = html`<div style="border: 1px solid green; height: 200px; overflow: scroll;"></div>`
scanner = html`<div> Entity001 current x position: <b id="xpos"></b></div>`
timeview = html`<div>Time obj: <pre id='tobj'></pre></div>`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
