Skip to main content

Component Functions

Introduction​

Components can be added, modified, and removed at runtime. Built-in components and custom components use the same interface for managing component data.

Referencing a Custom Component​

The following example shows how to share a reference to a custom component between different code files.

tip

Make sure you export the Component before attempting to import or use it anywhere.

/custom-component.ts
import * as ecs from '@8thwall/ecs'

const CustomComponent = ecs.registerComponent({
  ...
})

export {CustomComponent}
/another-component.ts
import * as ecs from '@8thwall/ecs'
import {CustomComponent} from './custom-component'

ecs.registerComponent({
  name: 'Another Custom Component',
  stateMachine: ({world, eid, schemaAttribute, dataAttribute}) => {
    ecs.defineState('default')
      .initial()
      .onEnter(() => {
        const entity = world.createEntity()

        CustomComponent.set(world, entity, {
          displayName: 'Jini'
        })
      })
  },
})

Functions​

Component functions allow you to perform different actions on a component and its data in relation to an entity.

Get​

Returns a read-only reference.

Example

ecs.CylinderGeometry.get(world, component.eid)

Set​

Ensures the component exists on the entity, then assigns the (optional) data to the component.

Example

ecs.CylinderGeometry.set(world, component.eid, {
  radius: 1,
  height: 1
})

Mutate​

Perform an update to the component within a callback function. Return true to indicate no changes made.

Example

ecs.CylinderGeometry.mutate(world, component.eid, (cursor) => {
  cursor.radius += 1;
  cursor.height *= 2;
  return false;
})

Remove​

Removes the component from the entity.

Example

ecs.CylinderGeometry.remove(world, component.eid)

Has​

Returns true if the component is present on the entity.

Example

ecs.CylinderGeometry.has(world, component.eid)

Reset​

Adds, or resets the component to its default state.

Example

ecs.CylinderGeometry.reset(world, component.eid)

Advanced Functions​

Cursor​

Returns a mutable reference. Cursors are reused so only one cursor for each component can exist at a time.

Example
ecs.CylinderGeometry.cursor(world, component.eid)

Acquire​

Same behavior as cursor, but commit must be called after the cursor is done being used.

Example
ecs.CylinderGeometry.acquire(world, component.eid)

Commit​

Called after acquire. An optional third argument determines whether the cursor was mutated or not.

Example
ecs.CylinderGeometry.commit(world, component.eid)
ecs.CylinderGeometry.commit(world, component.eid, false)

Dirty​

Mark the entity as having been mutated. Only needed in a specific case where systems are mutating data.

Example
ecs.CylinderGeometry.dirty(world, component.eid)