Miniplex ECS

Technique

miniplex-react

Entities

Key Concepts

• Entity type defines all possible components as optional properties

• world.with('prop1', 'prop2')

  creates typed queries

• world.add()

  and

  world.remove()

  for entity lifecycle

• world.addComponent()

  and

  world.removeComponent()

  for component lifecycle

• <Entities in={query}>{Component}</Entities>

  renders entities reactively
• Entity props are passed directly to child components

What NOT to Use

• onEntityAdded

  /

  onEntityRemoved

  - Prefer using data and systems to trigger things (e.g., timers, flags)

• .where()

  - Don't use predicate-based filtering

Preferred Methods

• world.add(entity)

  - Add a new entity

• world.remove(entity)

  - Remove an entity

• world.addComponent(entity, 'component', value)

  - Add component to existing entity

• world.removeComponent(entity, 'component')

  - Remove component from entity

• world.with('prop1', 'prop2')

  - Create queries

Queries

// ecs/queries.ts
export const characterQuery = world.with('position', 'isCharacter')
export const enemyQuery = world.with('position', 'isEnemy')
export const movingEntities = world.with('position', 'velocity')

// In a system file
import { movingEntities } from './ecs/queries'

Usage

type Entity = {
  position?: { x: number; y: number }
  isCharacter?: true
}

const world = new World<Entity>()
const characters = world.with('position', 'isCharacter')

// Add entity
world.add({ position: { x: 0, y: 0 }, isCharacter: true })

// Render
<Entities in={characters}>{Character}</Entities>