JECS.js

The Entity Component System library for modern HTML5 games - Easy to use and dependency free.

Lightweight 💾

3.80kb minified

Simple API ⚡

OOP & Procedural methods

No Dependencies 🥤

0 external libraries used

TypeScript Support 🤝

Type defintions provided

Documentation 📄

Documentation for every method

Checkout the source

Components

You first write your data structures (in ECS terms called components)

          const PositionComponent = {
  name: "position",
  state: {         
    x: 0,
    y: 0
  }
}

ECS.addComponent(PositionComponent)
const MassComponent = {
  name: "mass",
  state: {
    mass: 1.5,
    velocityX: 0,
    velocityY: 0
  }
}

ECS.addComponent(MassComponent)
        

Processors

You then write your processors that will handle the logic

          const GravityProcessor = {
  name: "gravity_processor",
  required: ["position", "mass"],
  update(entity, components, processor) {
    const [position, mass] = components
    const gravity          = 2
    const result           = mass.state.mass * gravity
    
    mass.state.velocityY += result
    position.state.y += mass.state.velocityY
  }
}

ECS.addProcessor(GravityProcessor)
        

Entities

With the added components and processors we can now compose entities

          const Player = ECS.createEntity("Player", ["position", "mass"], ["gravity_processor"])

ECS.addEntity(player)
          
        

One method to rule them all

You now call the libraries update method and watch you entities do fancy things

          const gameloop = () => {
  // this is your game loop

  // input ...
  ECS.update()
  // render ...

  requestAnimationFrame()
}

gameloop()