1- # Eco Entity Component System
1+ # Eco Entity Component Framework
22
3- Eco is an entity component system for JavaScript/HTML5 games that lets you
3+ Eco is an entity- component framework for JavaScript/HTML5 games that lets you
44define your components and game logic as decoupled POJO objects and functions.
55You can use it as part of a custom game engine, and also as a glue layer to
66keep your game logic decoupled from the game framework and libraries of your
77choice.
88
9- The framework is under development, but below is the API it is planned to
10- implement.
9+ The framework is under development, but the API currently described below is
10+ feature complete.
11+
12+ ## Overview
13+
14+ // Add position and movement vector components with default values
15+ eco.addComponent('position', { x: 0, y: 0 });
16+ eco.addComponent('vector', { x: 0, y: 0 });
17+
18+ // Create an entity and add these components to it
19+ eco.entity()
20+ .add('position', { x: 100 })
21+ .add('vector', { x: 1 });
22+
23+ // In your game update loop
24+ eco.filter(['position', 'vector'], function (position, vector) {
25+ // For each entity that has both the 'position' and 'vector' components,
26+ // update entity position based on the movement vector
27+ position.x += vector.x;
28+ position.y += vector.y;
29+ });
1130
1231## Components
1332
14- Components are data structures. They don't need to contain any logic, so you
15- can define them either as simple objects containing default values, or as a
16- function that returns the object data.
33+ Components are data structures that don't need to contain any logic. Eco lets
34+ you define multiple types using the eco.addComponent() method:
35+
36+ ### Simple components
37+
38+ Defining a component with just a name creates a component that stores whatever
39+ data is passed to it.
1740
18- var eco = new Eco( );
41+ eco.addComponent('foo' );
1942
20- eco.createComponent(
21- 'position', // the name of the component
22- { // the component's default values
23- x: 0,
24- y: 0
25- }
26- );
43+ eco.entity()
44+ .add('foo', 'bar')
45+ .get('foo') // 'bar'
2746
28- You can also define a component constructor function. The function is called
29- each time a component is added to an entity so you can define a component as
30- a class and return a new instance from the function.
47+ eco.entity()
48+ .add('foo', { bar: 'baz' })
49+ .get('foo') // { bar: 'baz' }
3150
32- // Define a class
33- var Vector = function(x, y, speed) {
51+ ### Factory components
52+
53+ Defining components with a function creates a factory component. When a
54+ component is added to an entity, the data will be passed to the given
55+ function and the returned data will be stored.
56+
57+ // Create a class
58+ function Vector(x, y) {
3459 this.x = x || 0;
3560 this.y = y || 0;
36- this.speed = speed || 1;
37- }
38-
39- // Define methods
40- Vector.prototype.getVectorX = function() {
41- return this.x * this.speed;
4261 }
4362
44- // The function will be called each time a component is added to an entity
45- // Each entity will therefore have a new instance of Vector
46- eco.createComponent('vector', function(data) {
63+ // Define a factory component that returns an instance of the class
64+ eco.addComponent('vector', function (data) {
4765 return new Vector(data.x, data.y);
4866 });
4967
68+ var entity = eco.entity()
69+ .add('vector', { x: 1, y: 0 });
70+
71+ (entity.get('vector') instanceof Vector) // true
72+
73+ ### Object template components
74+
75+ Defining components with an object literal defines a default set of values.
76+ When a component is added to an entity, the data is shallow merged into the
77+ defaults and the result is stored.
78+
79+ eco.addComponent('position', {
80+ x: 0,
81+ y: 0
82+ };
83+
84+ var entity = eco.entity()
85+ .add('position', { x: 100 });
86+
87+ entity.get('position').x // 100
88+ entity.get('position').y // 0
89+
90+ ### Constant components
91+
92+ Defining a component with a primitive value (string, number, boolean) will
93+ treat the value as a constant that is returned for all instances.
94+
95+ eco.addComponent('isPlayer', true);
96+
97+ eco.entity()
98+ .add('isPlayer')
99+ .get('isPlayer') // true
100+
101+ eco.entity()
102+ .add('isPlayer', 'foo')
103+ .get('isPlayer') // true (note: 'foo' was ignored)
104+
50105## Entities
51106
52107Entities are simply a collection of components. Components can be added and
@@ -56,35 +111,38 @@ removed at runtime allowing behaviour to be changed dynamically.
56111 .add('isPlayer')
57112 .add('position', { x: 0, y: 0 })
58113 .add('vector', { x: 0, y: 0 })
59- .add('friction', { value: -1 })
60- .add('gravity', { value: -1 });
114+ .add('friction', { value: 1 })
115+ .add('health', { amount: 1 })
116+ .add('gravity', { value: 1 });
61117
62118 // Add components
63- entity.add('foo', { bar: 'baz' });
119+ entity.add('gravity');
120+ entity.has('gravity'); // true
64121
65122 // Remove components
66123 entity.remove('gravity');
67124 entity.has('gravity'); // false
68125
69- // Access components
126+ // Get components
70127 entity.get('health').amount = 100;
71128
72129 // Create an entity proxy for a given id
73- eco.entity(123).getId(); // 123
130+ eco.entity(123)
131+ .getId(); // 123
74132
75133Note: Eco doesn't store entity instances, only component data for entity ids.
76134For convenience, the returned entity instances are proxy objects providing
77135methods to work with a given entity id, and so equality comparisons should
78- compare the ids rather than the proxy instances themselves
136+ compare the ids rather than the proxy instances themselves.
79137
80138 eco.entity(123) === eco.entity(123); // false
81139 eco.entity(123).getId() === eco.entity(123).getId(); // true
82140
83141## Systems
84142
85- Systems are your game logic and behaviour. Eco doesn't handle these, but
86- provides methods to iterate through entities that have certain combinations of
87- components.
143+ Systems are your game logic and behaviour so it's up to you how you want to
144+ implement them. Eco provides methods that let you iterate over entities
145+ containing certain combinations of components.
88146
89147 // Iterate through entities with 'position' and 'vector' components
90148 eco.filter(['position', 'vector'], function(position, vector, entity) {
@@ -100,9 +158,9 @@ components.
100158 */
101159 });
102160
103- /**
104- * Get an array of entities that have at least one component.
105- * Eco only stores component data, so entities without any
106- * components won't be returned
107- * /
161+ /**
162+ * Get an array of entities that have at least one component.
163+ * Eco only stores component data, so entities without any
164+ * components won't be returned
165+ */
108166 eco.getEntities();
0 commit comments