Home

Awesome

PicoES

Build Status Coverage Status Documentation Status

Table Of Contents

About

Pico Entity System for JavaScript (ES6+).

Read up on what an ECS is here: https://en.wikipedia.org/wiki/Entity_component_system

Features

Terminology

License

MIT

Author

Eric Hebert

Instructions

Setup

You'll normally want to install PicoES as a dev dependency, and have it transpiled into the build of your application. PicoES uses features such as import/export syntax, so you may need updated tools to use it. It has been used successfully with node 14+ and parcel 2+.

Yarn

yarn add --dev picoes

NPM

npm i -D picoes

Documentation

The full reference documentation can be found here:

PicoES Documentation

Examples

Unregistered components and queries

import { World } from 'picoes'

// Create a world to store entities in
const world = new World()

// Create a player entity with health component
const player = world.entity().set('health', { value: 100 })

// Create enemies
world.entity().set('damages', 10)
world.entity().set('damages', 30)

// Apply damage to player from enemies
world.each('damages', ({ entity, damages }) => {
  player.get('health').value -= damages
  entity.remove('damages')
})

// Player now has reduced health
console.assert(player.get('health').value === 60)

System and component registration

import { World } from 'picoes'

// Create a reusable vector component
class Vec2 {
  constructor(x = 0, y = 0) {
    this.x = x
    this.y = y
  }
}

// Define a system for handling movement
class Movement {
  run(dt) {
    this.world.each('position', 'velocity', ({ position, velocity }) => {
      position.x += velocity.x * dt
      position.y += velocity.y * dt
    })
  }
}

// Create a world, register components and systems
const world = new World({
  components: { position: Vec2, velocity: Vec2 },
  systems: [Movement],
})

// Create an entity at (0,0) with a velocity
const entity = world.entity().set('position').set('velocity', 10, 10)

// Run the systems (typically would use a ticker and pass dt)
world.run(16)

// See that the entity has moved
const { x, y } = entity.get('position')
console.log(x, y) // 160 160

For more information, refer to the full documentation.