{
  "attachments": [],
  "title": "Parsec Patrol Diaries: Entity Component Systems",
  "author": "lmorchard",
  "layout": "post",
  "permalink": "/2013/11/27/entity-component-system",
  "dsq_thread_id": [
    2003369569
  ],
  "categories": [
    "Uncategorized"
  ],
  "tags": [
    "html5",
    "parsecpatrol",
    "webdev"
  ],
  "year": "2013",
  "month": "11",
  "day": "27",
  "isDir": false,
  "slug": "entity-component-system",
  "type": "entry",
  "date": "2013-11-27T19:00:00.000Z",
  "postName": "2013-11-27-entity-component-system",
  "html": "<div id=\"toc_container\" class=\"toc_wrap_right no_bullets\">\n  <p class=\"toc_title\">\n    Contents\n  </p>\n  \n  <ul class=\"toc_list\">\n    <li>\n      <a href=\"#Background\"><span class=\"toc_number toc_depth_1\">1</span> Background</a>\n    </li>\n    <li>\n      <a href=\"#Entities\"><span class=\"toc_number toc_depth_1\">2</span> Entities</a>\n    </li>\n    <li>\n      <a href=\"#Components\"><span class=\"toc_number toc_depth_1\">3</span> Components</a>\n    </li>\n    <li>\n      <a href=\"#Systems\"><span class=\"toc_number toc_depth_1\">4</span> Systems</a>\n    </li>\n    <li>\n      <a href=\"#Putting_it_together\"><span class=\"toc_number toc_depth_1\">5</span> Putting it together</a>\n    </li>\n    <li>\n      <a href=\"#Having_fun_with_it\"><span class=\"toc_number toc_depth_1\">6</span> Having fun with it</a>\n    </li>\n  </ul>\n\n\n</div>\n\n\n\n<p>The <strong>Entity</strong>, <strong>Component</strong>, &amp; <strong>System</strong> design pattern is old hat for many game developers. But, keep in mind that I’m a web developer, and mostly on the server side of things for the past decade or so. One of my last big revelations was discovering the Model, View, &amp; Controller way of doing things. Apropos of that, this ECS thing seems to be a Big Deal of similar proportions.</p>\n<!--more-->\n\n\n\n<p>When I first started working on <a href=\"https://github.com/lmorchard/parsec-patrol\">Parsec Patrol</a>, I started sketching out a plain vanilla class hierarchy. You know, the kind I saw when I first started learning about Object Oriented Programming.</p>\n<p>I started with an <code>Entity</code>, which begat a <code>RenderableEntity</code>, which begat things like a <code>SpaceShipWithThrustersRenderableEntity</code>. I built a game loop that iterated through all the objects in the universe, calling a <code>tick()</code> method on each in turn. Simple, just like things I’d seen in textbooks.</p>\n<p>As I started trying to pile things in, though, I flirted with <a href=\"http://en.wikipedia.org/wiki/Multiple_inheritance#The_diamond_problem\">multiple inheritance</a> and primitive <a href=\"http://en.wikipedia.org/wiki/Composite_pattern\">composite patterns</a> and everything just got messy and slow. Performance sucked, and <a href=\"http://blog.artillery.com/2012/10/browser-garbage-collection-and-framerate.html\">garbage collection</a> went wild. So, I figured I must be Doing It Wrong, and started on a Google quest into game engine design to maybe absorb some modern thinking on these matters. Eventually, I stubbed my brain on the notion of an “entity/component system”.</p>\n<h2 id=\"background\"><span id=\"Background\">Background</span></h2>\n<p>Plenty of other blog posts &amp; articles out there have done a great job of describing how an ECS design works:</p>\n<ul>\n<li><a href=\"http://t-machine.org/index.php/2007/09/03/entity-systems-are-the-future-of-mmog-development-part-1/\">Entity Systems are the future of MMOG development</a> (Sep 2007)</li>\n<li><a href=\"http://cowboyprogramming.com/2007/01/05/evolve-your-heirachy/\">Evolve Your Hierarchy</a> (Jan 2007)</li>\n<li><a href=\"http://www.richardlord.net/blog/why-use-an-entity-framework\">Why use an entity system framework for game development?</a> (Feb 2012)</li>\n<li><a href=\"http://www.chris-granger.com/2012/12/11/anatomy-of-a-knockout/\">Anatomy of a Knockout</a> (Dec 2012)</li>\n<li><a href=\"http://www.gamedev.net/page/resources/_/technical/game-programming/understanding-component-entity-systems-r3013\">Understanding Component-Entity-Systems</a> (April 2013)</li>\n<li><a href=\"http://gamadu.com/artemis/tutorial.html\">Artemis Entity System Framework</a></li>\n<li><a href=\"http://www.ashframework.org/\">Ash entity framework</a></li>\n</ul>\n<p>I don’t want to totally reinvent the wheel here. But, let’s see if I can’t break it down a little, if only to convey my excitement with discovering this design pattern and the fun I’ve had with it.</p>\n<h2 id=\"entities\"><span id=\"Entities\">Entities</span></h2>\n<p>First, you’ve got the <strong>Entity</strong>: Everything in the game universe is an <strong>Entity</strong> – ships, rocks, missiles, the works. In my naive OOP world, Entities were instances of classes from my tangly, thorny hierarchy.</p>\n<p>But, in this ECS world, an <strong>Entity</strong> is a database ID – just a string, really.</p>\n<div id=\"attachment_1143\" style=\"width: 650px\" class=\"wp-caption alignnone\">\n  <a href=\"http://blog.lmorchard.com/wp-content/uploads/2013/11/pp-entities.jpg\"><img class=\"size-large wp-image-1143\" alt=\"Entities\" src=\"http://blog.lmorchard.com/wp-content/uploads/2013/11/pp-entities-1024x577.jpg\" width=\"\" height=\"\"></a><p class=\"wp-caption-text\">\n    Entities: OOP &amp; ECS\n  </p>\n</div>\n\n\n\n<p>Wait, what? Yeah, that was the first thing that bruised my lobes. This design pattern turns everything inside out. An ECS framework is better understood as a data-oriented system than an object-oriented system. In fact, <a href=\"http://t-machine.org/index.php/2009/10/26/entity-systems-are-the-future-of-mmos-part-5/\">a blog post describing an ECS system in relational database terms</a> really drove it home for me.</p>\n<h2 id=\"components\"><span id=\"Components\">Components</span></h2>\n<p>So, given that an <strong>Entity</strong> is an ID in a system that looks like a SQL database from a certain angle, what’s in the database?</p>\n<p><strong>Components</strong> are in the database. Specifically, <strong>Component</strong> types correspond to tables and <strong>Component</strong> instances correspond to rows. Structurally, a <strong>Component</strong> is a collection of properties – not unlike the columns in a row in a table in a database.</p>\n<div id=\"attachment_1145\" style=\"width: 650px\" class=\"wp-caption alignnone\">\n  <a href=\"http://blog.lmorchard.com/wp-content/uploads/2013/11/2013-11-27-10.14.50.jpg\"><img class=\"size-large wp-image-1145\" alt=\"Parsec Patrol Components\" src=\"http://blog.lmorchard.com/wp-content/uploads/2013/11/2013-11-27-10.14.50-1024x577.jpg\" width=\"\" height=\"\"></a><p class=\"wp-caption-text\">\n    Components: OOP &amp; ECS\n  </p>\n</div>\n\n\n\n<p>In case it doesn’t quite make sense yet, here are some sample <strong>Components</strong>:</p>\n<ul>\n<li><a href=\"https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/components.coffee#L86\"><strong>Sprite</strong></a> – <em>width, height, shape</em></li>\n<li><a href=\"https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/components.coffee#L26\"><strong>Position</strong></a> – <em>x, y, rotation</em></li>\n<li><a href=\"https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/components.coffee#L33\"><strong>Motion</strong></a> – <em>dx, dy, drotation</em></li>\n<li><a href=\"https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/components.coffee#L40\"><strong>Thruster</strong></a> – <em>accel_per_second, max_speed</em></li>\n<li><a href=\"https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/components.coffee#L110\"><strong>Seeker</strong></a> – <em>target_entity_id, rotation_per_second</em></li>\n<li><a href=\"https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/components.coffee#L201\"><strong>Health</strong></a> – <em>max_health, current_health</em></li>\n<li><a href=\"https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/components.coffee#L201\"><strong>BeamWeapon</strong></a> – <em>max_power, current_power, recharge_per_second</em></li>\n<li><a href=\"https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/components.coffee#L137\"><strong>MissileWeapon</strong></a> – <em>number_turrets, reload_delay</em></li>\n</ul>\n<p>Imagine each of those as schema for database tables, each with the <strong>Entity</strong> ID as primary key. Given an <strong>Entity</strong> ID, you can query across all the tables and assemble a set of <strong>Components</strong> that completely describe an <strong>Entity</strong> in the game universe.</p>\n<p>Note that any given <strong>Entity</strong> can be composed of any combination of these <strong>Components</strong>: A spaceship might be described by <strong>Shape</strong>, <strong>Position</strong>, <strong>Motion</strong>, <strong>Thruster</strong>, <strong>Health</strong>, and <strong>BeamWeapon</strong>. Meanwhile, an asteroid drifting in space might only offer <strong>Shape</strong>, <strong>Position</strong>, and <strong>Motion</strong>.</p>\n<p>(Also, just to be pedantic: This doesn’t <em>really</em> have to live in a SQL database. In fact, I currently just use an ad-hoc in-memory key-value store – i.e. <a href=\"https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/entities.coffee#L9\">a set of heavily-abused JavaScript objects</a>.)</p>\n<h2 id=\"systems\"><span id=\"Systems\">Systems</span></h2>\n<p>So, where’s the stuff that makes things go? In an OOP design, this would live in the methods of the objects, bundled by classes to go alongside the data. In the ECS design, <strong>Entities</strong> are <em>just</em> IDs and <strong>Components</strong> are <em>just</em> data – neither methods nor code implementing game logic live in either of those artifacts.</p>\n<p>This is where <strong>Systems</strong> come in: <strong>Systems</strong> are modular mini-game loops. The <a href=\"https://github.com/lmorchard/parsec-patrol/blob/master/app/scripts/worlds.coffee#L62\">“master” game loop</a> holds a list of available systems and runs a <code>tick()</code> method on each of those in turn. Each <strong>System</strong> performs a query against the <strong>Component</strong> database – usually for all instances of a particular type – and crunches through updating the properties for each.</p>\n<div id=\"attachment_1146\" style=\"width: 650px\" class=\"wp-caption alignnone\">\n  <a href=\"http://blog.lmorchard.com/wp-content/uploads/2013/11/2013-11-27-10.47.11.jpg\"><img class=\"size-large wp-image-1146\" alt=\"Systems: Most confusing diagram ever?\" src=\"http://blog.lmorchard.com/wp-content/uploads/2013/11/2013-11-27-10.47.11-1024x577.jpg\" width=\"\" height=\"\"></a><p class=\"wp-caption-text\">\n    Systems: Most confusing diagram ever?\n  </p>\n</div>\n\n\n\n<p>Consider a <a href=\"https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/systems.coffee#L793\"><strong>MotionSystem</strong></a>:</p>\n<ul>\n<li>Fetch all the <strong>Motion</strong> components from the database</li>\n<li>For each <strong>Motion</strong>, look up a <strong>Position</strong> for the same <strong>Entity</strong>.</li>\n<li>Update the <code>x</code>, <code>y</code>, and <code>rotation</code> properties of the <strong>Position</strong> using the <strong>Motion</strong> properties.</li>\n</ul>\n<p>Consider a <a href=\"https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/systems.coffee#L1136\"><strong>SeekerSystem</strong></a>:</p>\n<ul>\n<li>Fetch all the <strong>Seeker</strong> components.</li>\n<li>For each, find the <strong>Motion</strong> and <strong>Position</strong> components for the corresponding <strong>Entity</strong>.</li>\n<li>Also find <strong>Motion</strong> &amp; <strong>Position</strong> for the <strong>Entity</strong> identified as the <code>target_entity_id</code>.</li>\n<li>Calculate the angle between seeker &amp; target, update <strong>Motion</strong> to steer toward the target.</li>\n</ul>\n<p>Notice that each system deals only with data directly relevant to the job at hand. Rather than loading up a full representation of an <strong>Entity</strong>, each <strong>System</strong> only touches the specific <strong>Components</strong> needed. For instance, <strong>MotionSystem</strong> and <strong>SeekerSystem</strong> touch <strong>Motion</strong> and <strong>Position</strong> - but never <strong>Shape Components</strong>.</p>\n<p>This adds some efficiencies for data stored entirely in memory. But, I expect this will have <em>huge</em> implications for data that might someday come from a database or over a network. I’m also thinking that this pattern lends well to shuffling certain systems off onto background threads or Web Workers – the need for data coordination is limited to just the relevant <strong>Components</strong> when needed.</p>\n<h2 id=\"putting-it-together\"><span id=\"Putting_it_together\">Putting it together</span></h2>\n<div id=\"attachment_1149\" style=\"width: 650px\" class=\"wp-caption alignnone\">\n  <a href=\"http://lmorchard.github.io/parsec-patrol/sketches/sprites.html\"><img class=\"size-large wp-image-1149 \" alt=\"Parsec Patrol Dancing Sprites\" src=\"http://blog.lmorchard.com/wp-content/uploads/2013/11/Screenshot-2013-11-27-11.16.42-1024x714.png\" width=\"\" height=\"\"></a><p class=\"wp-caption-text\">\n    Parade! Of! Sprites!\n  </p>\n</div>\n\n\n\n<p>These <strong>Systems</strong> feel a lot like <a href=\"html5hub.com/build-a-javascript-particle-system/\">particle systems</a>: Tight, focused code working close to the metal with data, skipping a lot of overhead and object juggling. <strong>Components</strong> get modified in place and are rarely discarded – that seems to save me from a lot of <a href=\"http://buildnewgames.com/garbage-collector-friendly-code/\">garbage collection issues</a>. And, if a particular <strong>Component</strong> is not actually used by any existing <strong>Entity</strong>, the <strong>System</strong> looking for it just won’t perform any work.</p>\n<p>For the most part, <strong>Systems</strong> act independently &amp; are very loosely coupled. They can cooperate through shared <strong>Component</strong> data – consider how the <strong>SeekerSystem</strong> modifies the <strong>Motion</strong> <strong>Component</strong>, and the <strong>MotionSystem</strong> uses that data to move the <strong>Position</strong> <strong>Component</strong>. I’m also playing with <a href=\"https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/worlds.coffee#L38\">a crude pub/sub messaging system</a> for things like <a href=\"https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/systems.coffee#L1583\">transmitting damage</a> from one <strong>Entity</strong> to another, but I suspect that might be the wrong approach.</p>\n<p>And, once I was freed from my tangled class hierarchy, things started to get fun. The mental cost for adding a new layer to the system dropped fast: Add a new <strong>Component</strong> or two, add a new <strong>System</strong> – and suddenly <strong>Entities</strong> can do new things!</p>\n<h2 id=\"having-fun-with-it\"><span id=\"Having_fun_with_it\">Having fun with it</span></h2>\n<p>And, the most fun part? I get to describe things in the game world like a five-year-old and not give a crap about serious programming stuff:</p>\n<div id=\"attachment_1148\" style=\"width: 650px\" class=\"wp-caption alignnone\">\n  <a href=\"http://blog.lmorchard.com/wp-content/uploads/2013/11/2013-11-27-11.06.12.jpg\"><img class=\"size-large wp-image-1148\" alt=\"Spaceship doodles\" src=\"http://blog.lmorchard.com/wp-content/uploads/2013/11/2013-11-27-11.06.12-1024x577.jpg\" width=\"\" height=\"\"></a><p class=\"wp-caption-text\">\n    Spaceship doodles\n  </p>\n</div>\n\n\n\n<p>I’ve got <a href=\"https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/sketches/radar.coffee#L103\">a bad guy space ship</a>! And it’s <a href=\"https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/systems.coffee#L660\">shaped like an arrow</a>! And it’s got <a href=\"https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/systems.coffee#L1193\">rocket thrusters</a>! And it <a href=\"https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/systems.coffee#L1193\">chases the good guy</a>! And it has <a href=\"https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/systems.coffee#L1271\">missile launchers</a>! And <a href=\"https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/systems.coffee#L1574\">it blows up when the hero shoots it a lot</a>!</p>\n<p>Oh, and I’ve got <a href=\"https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/sketches/radar.coffee#L47\">a good guy ship</a>! And it’s <a href=\"https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/systems.coffee#L646\">shaped like a cool thing different than an arrow</a>! And it’s also got <a href=\"https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/systems.coffee#L1193\">rocket thrusters</a>! And <a href=\"https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/systems.coffee#L1245\">it goes where you click</a>! And <a href=\"https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/systems.coffee#L1435\">it has lots of laser beam guns</a>!</p>\n<p>Oh, and <a href=\"https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/sketches/fields.coffee#L95\">there are rocks</a>! They kind of spin a bit and drift around! They <a href=\"https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/systems.coffee#L803\">bounce when they run into things</a>! Sometimes <a href=\"https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/systems.coffee#L1608\">they blow up</a>!</p>\n<p>That’s almost exactly the running dialog in my head when I write the code. It’s pretty cool.</p>\n",
  "body": "<div id=\"toc_container\" class=\"toc_wrap_right no_bullets\">\n  <p class=\"toc_title\">\n    Contents\n  </p>\n  \n  <ul class=\"toc_list\">\n    <li>\n      <a href=\"#Background\"><span class=\"toc_number toc_depth_1\">1</span> Background</a>\n    </li>\n    <li>\n      <a href=\"#Entities\"><span class=\"toc_number toc_depth_1\">2</span> Entities</a>\n    </li>\n    <li>\n      <a href=\"#Components\"><span class=\"toc_number toc_depth_1\">3</span> Components</a>\n    </li>\n    <li>\n      <a href=\"#Systems\"><span class=\"toc_number toc_depth_1\">4</span> Systems</a>\n    </li>\n    <li>\n      <a href=\"#Putting_it_together\"><span class=\"toc_number toc_depth_1\">5</span> Putting it together</a>\n    </li>\n    <li>\n      <a href=\"#Having_fun_with_it\"><span class=\"toc_number toc_depth_1\">6</span> Having fun with it</a>\n    </li>\n  </ul>\n</div>\n\nThe **Entity**, **Component**, & **System** design pattern is old hat for many game developers. But, keep in mind that I&#8217;m a web developer, and mostly on the server side of things for the past decade or so. One of my last big revelations was discovering the Model, View, & Controller way of doing things. Apropos of that, this ECS thing seems to be a Big Deal of similar proportions.\n\n<!--more-->\n\nWhen I first started working on [Parsec Patrol][1], I started sketching out a plain vanilla class hierarchy. You know, the kind I saw when I first started learning about Object Oriented Programming.\n\nI started with an `Entity`, which begat a `RenderableEntity`, which begat things like a `SpaceShipWithThrustersRenderableEntity`. I built a game loop that iterated through all the objects in the universe, calling a `tick()` method on each in turn. Simple, just like things I&#8217;d seen in textbooks.\n\nAs I started trying to pile things in, though, I flirted with [multiple inheritance][2] and primitive [composite patterns][3] and everything just got messy and slow. Performance sucked, and [garbage collection][4] went wild. So, I figured I must be Doing It Wrong, and started on a Google quest into game engine design to maybe absorb some modern thinking on these matters. Eventually, I stubbed my brain on the notion of an &#8220;entity/component system&#8221;.\n\n## <span id=\"Background\">Background</span>\n\nPlenty of other blog posts & articles out there have done a great job of describing how an ECS design works:\n\n*   [Entity Systems are the future of MMOG development][5] (Sep 2007)\n*   [Evolve Your Hierarchy][6] (Jan 2007)\n*   [Why use an entity system framework for game development?][7] (Feb 2012)\n*   [Anatomy of a Knockout][8] (Dec 2012)\n*   [Understanding Component-Entity-Systems][9] (April 2013)\n*   [Artemis Entity System Framework][10]\n*   [Ash entity framework][11]\n\nI don&#8217;t want to totally reinvent the wheel here. But, let&#8217;s see if I can&#8217;t break it down a little, if only to convey my excitement with discovering this design pattern and the fun I&#8217;ve had with it.\n\n## <span id=\"Entities\">Entities</span>\n\nFirst, you&#8217;ve got the **Entity**: Everything in the game universe is an **Entity** &#8211; ships, rocks, missiles, the works. In my naive OOP world, Entities were instances of classes from my tangly, thorny hierarchy.\n\nBut, in this ECS world, an **Entity** is a database ID &#8211; just a string, really.\n\n<div id=\"attachment_1143\" style=\"width: 650px\" class=\"wp-caption alignnone\">\n  <a href=\"http://blog.lmorchard.com/wp-content/uploads/2013/11/pp-entities.jpg\"><img class=\"size-large wp-image-1143\" alt=\"Entities\" src=\"http://blog.lmorchard.com/wp-content/uploads/2013/11/pp-entities-1024x577.jpg\" width=\"640\" height=\"360\" /></a><p class=\"wp-caption-text\">\n    Entities: OOP & ECS\n  </p>\n</div>\n\nWait, what? Yeah, that was the first thing that bruised my lobes. This design pattern turns everything inside out. An ECS framework is better understood as a data-oriented system than an object-oriented system. In fact, [a blog post describing an ECS system in relational database terms][12] really drove it home for me.\n\n## <span id=\"Components\">Components</span>\n\nSo, given that an **Entity** is an ID in a system that looks like a SQL database from a certain angle, what&#8217;s in the database?\n\n**Components** are in the database. Specifically, **Component** types correspond to tables and **Component** instances correspond to rows. Structurally, a **Component** is a collection of properties &#8211; not unlike the columns in a row in a table in a database.\n\n<div id=\"attachment_1145\" style=\"width: 650px\" class=\"wp-caption alignnone\">\n  <a href=\"http://blog.lmorchard.com/wp-content/uploads/2013/11/2013-11-27-10.14.50.jpg\"><img class=\"size-large wp-image-1145\" alt=\"Parsec Patrol Components\" src=\"http://blog.lmorchard.com/wp-content/uploads/2013/11/2013-11-27-10.14.50-1024x577.jpg\" width=\"640\" height=\"360\" /></a><p class=\"wp-caption-text\">\n    Components: OOP & ECS\n  </p>\n</div>\n\nIn case it doesn&#8217;t quite make sense yet, here are some sample **Components**:\n\n*   [**Sprite**][13] &#8211; *width, height, shape*\n*   [**Position**][14] &#8211; *x, y, rotation*\n*   [**Motion**][15] &#8211; *dx, dy, drotation*\n*   [**Thruster**][16] &#8211; *accel\\_per\\_second, max_speed*\n*   [**Seeker**][17] &#8211; *target\\_entity\\_id, rotation\\_per\\_second*\n*   [**Health**][18] &#8211; *max\\_health, current\\_health*\n*   [**BeamWeapon**][18] &#8211; *max\\_power, current\\_power, recharge\\_per\\_second*\n*   [**MissileWeapon**][19] &#8211; *number\\_turrets, reload\\_delay*\n\nImagine each of those as schema for database tables, each with the **Entity** ID as primary key. Given an **Entity** ID, you can query across all the tables and assemble a set of **Components** that completely describe an **Entity** in the game universe.\n\nNote that any given **Entity** can be composed of any combination of these **Components**: A spaceship might be described by **Shape**, **Position**, **Motion**, **Thruster**, **Health**, and **BeamWeapon**. Meanwhile, an asteroid drifting in space might only offer **Shape**, **Position**, and **Motion**.\n\n(Also, just to be pedantic: This doesn&#8217;t *really* have to live in a SQL database. In fact, I currently just use an ad-hoc in-memory key-value store &#8211; i.e. [a set of heavily-abused JavaScript objects][20].)\n\n## <span id=\"Systems\">Systems</span>\n\nSo, where&#8217;s the stuff that makes things go? In an OOP design, this would live in the methods of the objects, bundled by classes to go alongside the data. In the ECS design, **Entities** are *just* IDs and **Components** are *just* data &#8211; neither methods nor code implementing game logic live in either of those artifacts.\n\nThis is where **Systems** come in: **Systems** are modular mini-game loops. The [&#8220;master&#8221; game loop][21] holds a list of available systems and runs a `tick()` method on each of those in turn. Each **System** performs a query against the **Component** database &#8211; usually for all instances of a particular type &#8211; and crunches through updating the properties for each.\n\n<div id=\"attachment_1146\" style=\"width: 650px\" class=\"wp-caption alignnone\">\n  <a href=\"http://blog.lmorchard.com/wp-content/uploads/2013/11/2013-11-27-10.47.11.jpg\"><img class=\"size-large wp-image-1146\" alt=\"Systems: Most confusing diagram ever?\" src=\"http://blog.lmorchard.com/wp-content/uploads/2013/11/2013-11-27-10.47.11-1024x577.jpg\" width=\"640\" height=\"360\" /></a><p class=\"wp-caption-text\">\n    Systems: Most confusing diagram ever?\n  </p>\n</div>\n\nConsider a [**MotionSystem**][22]:\n\n*   Fetch all the **Motion** components from the database\n*   For each **Motion**, look up a **Position** for the same **Entity**.\n*   Update the `x`, `y`, and `rotation` properties of the **Position** using the **Motion** properties.\n\nConsider a [**SeekerSystem**][23]:\n\n*   Fetch all the **Seeker** components.\n*   For each, find the **Motion** and **Position** components for the corresponding **Entity**.\n*   Also find **Motion** & **Position** for the **Entity** identified as the `target_entity_id`.\n*   Calculate the angle between seeker & target, update **Motion** to steer toward the target.\n\nNotice that each system deals only with data directly relevant to the job at hand. Rather than loading up a full representation of an **Entity**, each **System** only touches the specific **Components** needed. For instance, **MotionSystem** and **SeekerSystem** touch **Motion** and **Position** - but never **Shape Components**.\n\nThis adds some efficiencies for data stored entirely in memory. But, I expect this will have *huge* implications for data that might someday come from a database or over a network. I&#8217;m also thinking that this pattern lends well to shuffling certain systems off onto background threads or Web Workers &#8211; the need for data coordination is limited to just the relevant **Components** when needed.\n\n## <span id=\"Putting_it_together\">Putting it together</span>\n\n<div id=\"attachment_1149\" style=\"width: 650px\" class=\"wp-caption alignnone\">\n  <a href=\"http://lmorchard.github.io/parsec-patrol/sketches/sprites.html\"><img class=\"size-large wp-image-1149 \" alt=\"Parsec Patrol Dancing Sprites\" src=\"http://blog.lmorchard.com/wp-content/uploads/2013/11/Screenshot-2013-11-27-11.16.42-1024x714.png\" width=\"640\" height=\"446\" /></a><p class=\"wp-caption-text\">\n    Parade! Of! Sprites!\n  </p>\n</div>\n\nThese **Systems** feel a lot like [particle systems][24]: Tight, focused code working close to the metal with data, skipping a lot of overhead and object juggling. **Components** get modified in place and are rarely discarded &#8211; that seems to save me from a lot of [garbage collection issues][25]. And, if a particular **Component** is not actually used by any existing **Entity**, the **System** looking for it just won&#8217;t perform any work.\n\nFor the most part, **Systems** act independently & are very loosely coupled. They can cooperate through shared **Component** data &#8211; consider how the **SeekerSystem** modifies the **Motion** **Component**, and the **MotionSystem** uses that data to move the **Position** **Component**. I&#8217;m also playing with [a crude pub/sub messaging system][26] for things like [transmitting damage][27] from one **Entity** to another, but I suspect that might be the wrong approach.\n\nAnd, once I was freed from my tangled class hierarchy, things started to get fun. The mental cost for adding a new layer to the system dropped fast: Add a new **Component** or two, add a new **System** &#8211; and suddenly **Entities** can do new things!\n\n## <span id=\"Having_fun_with_it\">Having fun with it</span>\n\nAnd, the most fun part? I get to describe things in the game world like a five-year-old and not give a crap about serious programming stuff:\n\n<div id=\"attachment_1148\" style=\"width: 650px\" class=\"wp-caption alignnone\">\n  <a href=\"http://blog.lmorchard.com/wp-content/uploads/2013/11/2013-11-27-11.06.12.jpg\"><img class=\"size-large wp-image-1148\" alt=\"Spaceship doodles\" src=\"http://blog.lmorchard.com/wp-content/uploads/2013/11/2013-11-27-11.06.12-1024x577.jpg\" width=\"640\" height=\"360\" /></a><p class=\"wp-caption-text\">\n    Spaceship doodles\n  </p>\n</div>\n\nI&#8217;ve got [a bad guy space ship][28]! And it&#8217;s [shaped like an arrow][29]! And it&#8217;s got [rocket thrusters][30]! And it [chases the good guy][30]! And it has [missile launchers][31]! And [it blows up when the hero shoots it a lot][32]!\n\nOh, and I&#8217;ve got [a good guy ship][33]! And it&#8217;s [shaped like a cool thing different than an arrow][34]! And it&#8217;s also got [rocket thrusters][30]! And [it goes where you click][35]! And [it has lots of laser beam guns][36]!\n\nOh, and [there are rocks][37]! They kind of spin a bit and drift around! They [bounce when they run into things][38]! Sometimes [they blow up][39]!\n\nThat&#8217;s almost exactly the running dialog in my head when I write the code. It&#8217;s pretty cool.\n\n [1]: https://github.com/lmorchard/parsec-patrol\n [2]: http://en.wikipedia.org/wiki/Multiple_inheritance#The_diamond_problem\n [3]: http://en.wikipedia.org/wiki/Composite_pattern\n [4]: http://blog.artillery.com/2012/10/browser-garbage-collection-and-framerate.html\n [5]: http://t-machine.org/index.php/2007/09/03/entity-systems-are-the-future-of-mmog-development-part-1/\n [6]: http://cowboyprogramming.com/2007/01/05/evolve-your-heirachy/\n [7]: http://www.richardlord.net/blog/why-use-an-entity-framework\n [8]: http://www.chris-granger.com/2012/12/11/anatomy-of-a-knockout/\n [9]: http://www.gamedev.net/page/resources/_/technical/game-programming/understanding-component-entity-systems-r3013\n [10]: http://gamadu.com/artemis/tutorial.html\n [11]: http://www.ashframework.org/\n [12]: http://t-machine.org/index.php/2009/10/26/entity-systems-are-the-future-of-mmos-part-5/\n [13]: https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/components.coffee#L86\n [14]: https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/components.coffee#L26\n [15]: https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/components.coffee#L33\n [16]: https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/components.coffee#L40\n [17]: https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/components.coffee#L110\n [18]: https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/components.coffee#L201\n [19]: https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/components.coffee#L137\n [20]: https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/entities.coffee#L9\n [21]: https://github.com/lmorchard/parsec-patrol/blob/master/app/scripts/worlds.coffee#L62\n [22]: https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/systems.coffee#L793\n [23]: https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/systems.coffee#L1136\n [24]: html5hub.com/build-a-javascript-particle-system/\n [25]: http://buildnewgames.com/garbage-collector-friendly-code/\n [26]: https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/worlds.coffee#L38\n [27]: https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/systems.coffee#L1583\n [28]: https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/sketches/radar.coffee#L103\n [29]: https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/systems.coffee#L660\n [30]: https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/systems.coffee#L1193\n [31]: https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/systems.coffee#L1271\n [32]: https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/systems.coffee#L1574\n [33]: https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/sketches/radar.coffee#L47\n [34]: https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/systems.coffee#L646\n [35]: https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/systems.coffee#L1245\n [36]: https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/systems.coffee#L1435\n [37]: https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/sketches/fields.coffee#L95\n [38]: https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/systems.coffee#L803\n [39]: https://github.com/lmorchard/parsec-patrol/blob/7d2f01eae28d8c687fb4e97a556e0c4a05a87ef4/app/scripts/systems.coffee#L1608\n",
  "parentPath": "./content/posts/archives/2013",
  "path": "2013/11/27/entity-component-system",
  "thumbnail": "http://blog.lmorchard.com/wp-content/uploads/2013/11/pp-entities-1024x577.jpg",
  "summary": "The Entity, Component, & System design pattern is old hat for many game developers. But, keep in mind that I’m a web developer, and mostly on the server side of things for the past decade or so. One of my last big revelations was discovering the Model, View, & Controller way of doing things. Apropos of that, this ECS thing seems to be a Big Deal of similar proportions.",
  "needsBuild": true,
  "prevPostPath": "2013/11/19/parsec-patrol-diaries-hello-world",
  "prevPostTitle": "Parsec Patrol Diaries: Hello World",
  "nextPostPath": "2014/01/18/ppd-avoidance",
  "nextPostTitle": "Parsec Patrol Diaries: How To Avoid Smashing Into Things"
}