Entity Systems - Speaker Deck

Slide 1

Slide 1 text

Entity Systems Jason Frame | http://(twitter|github).com/jaz303 Saturday, 1 June 13

Slide 2

Slide 2 text

Entity Systems • Origins in MMORPGs • Collection of architecture patterns used to organise a game “world” • No ﬁxed deﬁnition Saturday, 1 June 13

Slide 3

Slide 3 text

Entity Systems • Decrease Coupling • Increase (runtime) ﬂexibility • Separate data from behaviour Saturday, 1 June 13

Slide 4

Slide 4 text

Traditional Inheritance Player() Player Class Saturday, 1 June 13

Slide 5

Slide 5 text

Traditional Inheritance Player(sprite) Player Class Saturday, 1 June 13

Slide 6

Slide 6 text

Traditional Inheritance Player(sprite,position,direction,speed) Player Class Saturday, 1 June 13

Slide 7

Slide 7 text

Traditional Inheritance Player(sprite,position,direction,speed,health) Player Class Saturday, 1 June 13

Slide 8

Slide 8 text

Traditional Inheritance Player(sprite,position,direction,speed,health) Item(sprite,position,weight) Add Items Saturday, 1 June 13

Slide 9

Slide 9 text

Traditional Inheritance GameObject(sprite,position) Player(direction,speed,health) Item(weight) Refactor Saturday, 1 June 13

Slide 10

Slide 10 text

Traditional Inheritance GameObject(sprite,position) Player(direction,speed,health) Item(weight) Enemy(direction,speed,health,treasure) Add Enemies Saturday, 1 June 13

Slide 11

Slide 11 text

Traditional Inheritance GameObject(sprite,position) LivingEntity(direction,speed,health) Player() Enemy(treasure) Item(weight) Refactor Saturday, 1 June 13

Slide 12

Slide 12 text

Traditional Inheritance GameObject(sprite,position) LivingEntity(direction,speed,health) Player() Enemy(treasure) Item(weight) Trigger(position) Triggers Saturday, 1 June 13

Slide 13

Slide 13 text

Traditional Inheritance GameObject(position) RenderableGameObject(sprite) LivingEntity(direction,speed,health) Player() Enemy(treasure) Item(weight) Trigger() Refactor Saturday, 1 June 13

Slide 14

Slide 14 text

Traditional Inheritance GameObject(position) RenderableGameObject(sprite) PhysicsObject(direction,speed,mass) LivingEntity(health) Player() Enemy(treasure) Item(weight) Trigger() Add Physics Saturday, 1 June 13

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Traditional Inheritance GameObject(position) PhysicsObject(direction,speed,mass) RenderableGameObject(sprite) LivingEntity(health) Player() Enemy(treasure) Item(weight) Trigger() “I need that trigger to move” Saturday, 1 June 13

Slide 19

Slide 19 text

Traditional Inheritance GameObject(position,isMoveable,direction,speed,mass) RenderableGameObject(sprite) LivingEntity(health) Player() Enemy(treasure) Item(weight) Trigger() “I need that trigger to move” - Refactor! Saturday, 1 June 13

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Traditional Inheritance GameObject(position,isMoveable,direction,speed,mass,isDrawable,sprite) LivingEntity(health) Player() Enemy(treasure) Item(weight) Trigger() “I need that trigger to look like a spotlight” Saturday, 1 June 13

Slide 22

Slide 22 text

Traditional Inheritance • Elaborate object hierarchies are inﬂexible • Functionality gradually bubbles to the top • Wasted memory • Increased complexity Saturday, 1 June 13

Slide 23

Slide 23 text

Composition Implement each facet of an entity in its own class: Saturday, 1 June 13

Slide 24

Slide 24 text

Composition class GameObject { public Health health = null; public Physics physics = null; public Position position = null; public Inventory inventory = null; } player = new GameObject(); player.health = new PlayerHealth(100); player.physics = new DefaultPhysics(); player.position = new Position(mkvec2(0,0)); Implement each facet of an entity in its own class: Saturday, 1 June 13

Slide 25

Slide 25 text

Mixins function GameObject() { } GameObject.prototype = { addPhysics: function(props) { props = props || {}; this.x = props.x || 0.0; this.y = props.y || 0.0; this.vx = props.vx || 0.0; this.vy = props.vy || 0.0; this.inverseMass = 1 / (props.mass || 1); this.distanceFrom = function(rhs) { // calculate distance from rhs and return } } } Great for dynamic languages! Saturday, 1 June 13

Slide 26

Slide 26 text

Mixins var obj = new GameObject(); obj.addPhysics({x: 0, y: 0, }); Great for dynamic languages! Saturday, 1 June 13

Slide 27

Slide 27 text

Mixins - Pros • No longer carrying around a bunch of extra cruft on objects that don't need it • Can craft any type of object on the ﬂy • Don't need concrete classes for each combination Saturday, 1 June 13

Slide 28

Slide 28 text

Mixins - Cons • In the absence of a powerful type system still need to check what we're dealing with: function gameUpdate(delta) { allGameObjects.forEach(function(obj) { if (object.hasPhysics) { // do stuff } if (object.hasAI) { // do stuff } }); } Saturday, 1 June 13

Slide 29

Slide 29 text

The Problem • Fundamental mismatch • Object bigotry? • Not every object needs a bit of everything • Is there a better way of thinking about this? Saturday, 1 June 13

Slide 30

Slide 30 text

Autopoietic (Social) Systems • Inﬁnitely chaotic environment • Systems operate on environment • Systems extract information from environment • Systems are operationally closed Saturday, 1 June 13

Slide 31

Slide 31 text

Systems • Implement one single game task • Maintains a collection of components • Acceptance check • update(delta) method • e.g. Physics, rendering, AI etc. Saturday, 1 June 13

Slide 32

Slide 32 text

Entities • Represents any game object • e.g. player, door, trigger, monster, gun-turret • Just a (unique) integer ID Saturday, 1 June 13

Slide 33

Slide 33 text

Components • Describes a single facet of a single entity • Usually a map of key/value pairs • Max of one component of each type per entity • Data only - no behaviour/logic Saturday, 1 June 13

Slide 34

Slide 34 text

Components positionComponent = {x:0, y:0} physicsComponent = {vx:0, vy:0, inverseMass:1} healthComponent = {health:100} Saturday, 1 June 13

Slide 35

Slide 35 text

Entities & Components positionComponent {x:0, y:0} physicsComponent {vx:0, vy:0, inverseMass:1} healthComponent {health:100} •Entity is bag of components •Entity uses ID as primary key to look up components EID 1 => Still just data! Saturday, 1 June 13

Slide 36

Slide 36 text

World • Container • Query methods • Lifecycle methods • Message bus Saturday, 1 June 13

Slide 37

Slide 37 text

What is an Entity System? Replace object-centric approach with data-centric approach Saturday, 1 June 13

Slide 38

Slide 38 text

Entity System Beneﬁts • Flexible component composition • Tooling • Serialisation • Parallelism • Runtime modiﬁcation Saturday, 1 June 13

Slide 39

Slide 39 text

Runtime Modiﬁcation • Remove item’s Position component • Add CarriedItem component to item Pick Up Item Saturday, 1 June 13

Slide 40

Slide 40 text

Runtime Modiﬁcation • Remove Health component • Remove Inventory component • Change Animation component to Death animation • Create new entity with existing Inventory/Position components Entity Death Saturday, 1 June 13

Slide 41

Slide 41 text

Example - Bootstrapping world = new World(); world.addSystem(new PlayerInputSystem(world)); world.addSystem(new PhysicsSystem(world)); world.addSystem(new RenderingSystem(world)); Saturday, 1 June 13

Slide 42

Slide 42 text

Example - Entity Creation entityId = world.createEntity(); world.addComponent(entityId, { type:'physics', x:0, y:0, vx: 0, vy: 0, mass: 1 }); world.addComponent(entityId, { type: 'playerInput' }); world.addComponent(entityId, { type: 'render', sprite: 'paddle' }); Saturday, 1 June 13

Slide 43

Slide 43 text

Example - Add Entity to World world.addEntity(entityId); Saturday, 1 June 13

Slide 44

Slide 44 text

Example - World Lifecycle Events • Adding entity to world triggers lifecycle event • Inform all systems of new entity • Other lifecycle events: delete entity, change entity, enable/disable entity Saturday, 1 June 13

Slide 45

Slide 45 text

Example - Game Update setInterval(function() { world.update(40); }, 40); Saturday, 1 June 13

Slide 46

Slide 46 text

Example - Game Update world.update = function(delta) { this._systems.forEach(function(system) { system.update(delta); }); } Saturday, 1 June 13

Slide 47

Slide 47 text

Example - Physics System function update(delta) { this._entities.forEach(function(entity) { var physics = this._manager.getComponent( entity, 'physics'); physics.x += physics.vx * delta / 1000; physics.y += physics.vy * delta / 1000; physics.vx *= physics.damping; physics.vy *= physics.damping; }); // resolve collisions } Saturday, 1 June 13

Slide 48

Slide 48 text

Inter-System Communication • `PhysicsSystem` detects car hits wall at speed; `DamageSystem` must react • `DamageSystem` detect character is dead. `InventorySystem` should drop treasure and `AnimationSystem` should play death animation Saturday, 1 June 13

Slide 49

Slide 49 text

Inter-System Communication • Systems neither know about nor understand other systems • Decouple systems • Message passing Saturday, 1 June 13

Slide 50

Slide 50 text

Example - Inter-system Communication function PhysicsSystem() { var self = this; this.update = function(delta) { var collisions = []; // do physics mojo... // ... // ... collisions.forEach(function(c) { // `c` is collision event object self.emit('collision', c); }); } } Saturday, 1 June 13

Slide 51

Slide 51 text

Example - Inter-system Communication function DamageSystem(world) { var self = this; world.on('collision', function(collisionEvent) { if (collisionEvent.speed > DAMAGE_THRESHOLD) { var cmp = self._manager.getComponent( collisionEvent.entity, 'health'); cmp.health -= 10; if (cmp <= 0) { self.emit('entityDead', { ... }); } } }); } Saturday, 1 June 13

Slide 52

Slide 52 text

Revisiting Entities • Entities as IDs is a throwback to statically- typed languages • In Javascript, we can make entity an object •Do not allow logic to seep in Saturday, 1 June 13

Slide 53

Slide 53 text

Entities as Objects function Entity(id, manager) { this.id = id; this._manager = manager; } Entity.prototype.addComponent = function(name, cmp) { this[name] = cmp; // notify observers } entity.addComponent('physics', ...); // check for component if ('physics' in entity) { Saturday, 1 June 13

Slide 54

Slide 54 text

Entities as Objects entity.hasComponent(); entity.removeComponent(); entity.removeAllComponents(); Helper methods: Saturday, 1 June 13

Slide 55

Slide 55 text

Entities as Objects entity.getHealth(); entity.attackCreature(jason); entity.setCombatBehaviour(Behaviour.FLEE); DON’T DO THIS: Saturday, 1 June 13

Slide 56

Slide 56 text

Attribute/Behaviour Systems • Again, entity is just an ID • No systems or components • Instead, attributes and behaviours Saturday, 1 June 13

Slide 57

Slide 57 text

Attribute Observable key/value pair Saturday, 1 June 13

Slide 58

Slide 58 text

Attribute function makeAttribute(name, type, value) { var observers = []; function notify(ov, nv) { for (var i = observers.length - 1; i >= 0; --i) { observers[i].onMessage({ type: ‘attributeChange’, attribute: attr, oldValue: ov, newValue: nv }); } } var attr = { name: name, type: type, get: function() { return value; }, set: function(v) { var oldValue = value; value = v; notify(oldValue, value); }, addObserver: function(b) { observers.push(b); }, removeObserver: function(b) { observers.splice(observers.indexOf(b), 1); }, }; return attr; } Saturday, 1 June 13

Slide 59

Slide 59 text

Behaviour • Object that responds to a 2 methods • onUpdate(delta) • onMessage(message) • May have private internal state Saturday, 1 June 13

Slide 60

Slide 60 text

Game Update Loop function update(delta) { var behaviour = rootBehaviour; while (behaviour) { behaviour.update(delta); behaviour = behaviour.next; } } Saturday, 1 June 13

Slide 61

Slide 61 text

Managing Determinism • Synchronisation Points • Queues • Asynchronous/synchronous events Saturday, 1 June 13

Slide 62

Slide 62 text

Optimisation Saturday, 1 June 13

Slide 63

Slide 63 text

Optimisation - Caching function PhysicsSystem() { this._entities = {}; this.update = function() { for (var entityId in this._entities) { var physicsComponent = this._entities[entityId].getComponent('physics'); // integrate position } // resolve collisions } this.entityAdded = function(entity) { this._entities[entity.id] = entity; } // entityRemoved // entityChanged } Saturday, 1 June 13

Slide 64

Slide 64 text

Optimisation - Caching function PhysicsSystem() { this._entities = {}; this.update = function() { for (var entityId in this._entities) { var physicsComponent = this._entities[entityId]; // integrate position } // resolve collisions } this.entityAdded = function(entity) { // store the physics component directly this._entities[entity.id] = entity.getComponent('physics'); } // entityRemoved // entityChanged } Saturday, 1 June 13

Slide 65

Slide 65 text

Optimisation - Component Querying function systemAcceptsEntity(entity) { return entity.hasComponent('physics') && entity.hasComponent('render') && entity.hasComponent('damage'); } Method call + hash lookup for each test Saturday, 1 June 13

Slide 66

Slide 66 text

Optimisation - Component Querying Components = { PHYSICS: 1, DAMAGE: 2, RENDER: 4, ... }; entity = world.createEntity(); entity.addComponent(Components.PHYSICS,{ ... }); entity.addComponent(Components.RENDER, { ... }); function Entity() { this._components = {}; this._componentMask = 0; } Entity.prototype.addComponent = function(type, props) { this._components[type] = props; this._componentMask |= type; } Idea: represent each type of component with a single bit. Saturday, 1 June 13

Slide 67

Slide 67 text

Optimisation - Component Querying Entity.prototype.hasComponent = function(mask) { return (this._componentMask & mask) == mask; } // check for a single component entity.hasComponent(Components.PHYSICS); // check for multiple components entity.hasComponent(Components.PHYSICS | Components.DAMAGE | Components.RENDER); Idea: represent each type of component with a single bit. Saturday, 1 June 13

Slide 68

Slide 68 text

Optimisation - Bit mask limitations • Limited by the number of bits in the underlying data type • In Javascript, bitwise operations operate on 32 bits • 32 bits => 32 components max • Array/object abstraction? Saturday, 1 June 13

Slide 69

Slide 69 text

Optimisation - Event Handling Events = { COLLISION_DETECTED: 1, PLAYER_DIED: 2, SOUND_EMITTED: 4 ... } Saturday, 1 June 13

Slide 70

Slide 70 text

Optimisation - Event Handling • Introduce event categories • Each event belongs to single category • Split up the bitﬁeld • Each category gets unique bit • Each system speciﬁes its category mask • Use remaining bits for Event ID Saturday, 1 June 13

Slide 71

Slide 71 text

Optimisation - Event Handling Role <-- Category ---> <--------- Event -----------> Bit 16 15 14 13 12 11 10 09 08 07 06 05 04 03 02 01 In Javascript, 16 bits for category + 16 bits for event number == 16 * (2^16) == 1M event types Saturday, 1 June 13

Slide 72

Slide 72 text

Optimisation - Exploit V8 • Assemble objects in deterministic order Saturday, 1 June 13

Slide 73

Slide 73 text

Entity Systems - Drawbacks • Overhead • Hierarchical data problem • “Framework” required Saturday, 1 June 13

Slide 74

Slide 74 text

Beyond Games • Simulations/data visualisations • Chris Granger’s Light Table project uses a component-entity system behind the scenes • Useful anywhere custom objects must be composed dynamically at runtime Saturday, 1 June 13

Slide 75

Slide 75 text

Thank you! Saturday, 1 June 13