javascript-entity-component-system
Version:
A simple JavaScript entity-component-system for games
136 lines • 26.8 kB
HTML
<html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>javascript-entity-component-system</title><meta name="description" content="Documentation for javascript-entity-component-system"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="assets/style.css"/><link rel="stylesheet" href="assets/highlight.css"/><script defer src="assets/main.js"></script><script async src="assets/search.js" id="tsd-search-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar">
<div class="tsd-toolbar-contents container">
<div class="table-cell" id="tsd-search" data-base=".">
<div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z" fill="var(--color-text)"></path></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div>
<div class="field">
<div id="tsd-toolbar-links"></div></div>
<ul class="results">
<li class="state loading">Preparing search index...</li>
<li class="state failure">The search index is not available</li></ul><a href="index.html" class="title">javascript-entity-component-system</a></div>
<div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg></a></div></div></header>
<div class="container container-main">
<div class="col-content">
<div class="tsd-page-title">
<h2>javascript-entity-component-system</h2></div>
<div class="tsd-panel tsd-typography"><a id="md:entity-component-system-for-javascript" class="tsd-anchor"></a><h1><a href="#md:entity-component-system-for-javascript">Entity Component System for Javascript</a></h1><p><a href="https://www.npmjs.com/package/javascript-entity-component-system"><img src="https://badgen.net/badge/npm/v2.0.0/blue" alt="npm version"></a>
<a href="https://www.npmjs.com/package/javascript-entity-component-system"><img src="https://badgen.net/badge/downloads/100%20%2F%20week/green" alt="npm downloads"></a></p>
<p>JECS (javascript-entity-component-system) is a easy to use <a href="https://en.wikipedia.org/wiki/Entity_component_system">Entity Component System</a> for JavaScript. JECS will help you to easier develop your games by making composable pieces of code, mixing and remixing them with entities to your liking.</p>
<a id="md:installation" class="tsd-anchor"></a><h2><a href="#md:installation">Installation</a></h2><pre><code><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-0">i</span><span class="hl-1"> </span><span class="hl-0">javascript</span><span class="hl-1">-</span><span class="hl-0">entity</span><span class="hl-1">-</span><span class="hl-0">component</span><span class="hl-1">-</span><span class="hl-0">system</span>
</code><button>Copy</button></pre>
<a id="md:features" class="tsd-anchor"></a><h2><a href="#md:features">Features</a></h2><ul>
<li>⚡ <strong>Simple API</strong> - JECS has a very simple and easy to use API with a mix of object-oriented and prodecural style of methods. </li>
<li>🥤 <strong>No Dependencies</strong> - JECS is built with TypeScript and compiled to JavaScript without the need of any external libraries. The source code is only ~400 lines long.</li>
<li>💾 <strong>Lightweight</strong> - JECS is a lightweight library. The minified version sits at 3.80kb.</li>
<li>🤝 <strong>TypeScript support</strong> - JECS is built and is best used with TypeScript. Type defintions and hinting are provided naturally.</li>
<li>📄 <strong>Documentation</strong> - JECS has documentation for every method and often examples on how to use them.</li>
</ul>
<a id="md:live-demo-deprecated-will-be-updated-soon" class="tsd-anchor"></a><h2><a href="#md:live-demo-deprecated-will-be-updated-soon">Live Demo (DEPRECATED, WILL BE UPDATED SOON)</a></h2><p><a href="https://jsbin.com/bunetigumo/edit?html,output">JS BIN</a></p>
<a id="md:getting-started" class="tsd-anchor"></a><h2><a href="#md:getting-started">Getting started</a></h2><p>In essence it works like this:</p>
<ol>
<li>You write components and processors and register them in the system.</li>
<li>You compose entities and register those in the system.</li>
<li>You call the libraries update function <code>ECS.update()</code> in your gameloop.</li>
<li>Profit</li>
</ol>
<a id="md:import-the-module" class="tsd-anchor"></a><h3><a href="#md:import-the-module">Import the Module</a></h3><p>ES Modules / TypeScript</p>
<pre><code class="language-TypeScript"><span class="hl-2">import</span><span class="hl-1"> {</span><span class="hl-0">EntityComponentSystem</span><span class="hl-1">} </span><span class="hl-2">from</span><span class="hl-1"> </span><span class="hl-3">"javascript-entity-component-system"</span><span class="hl-1"> </span><span class="hl-4">// CLASS</span><br/><span class="hl-2">import</span><span class="hl-1"> {</span><span class="hl-0">Component</span><span class="hl-1">, </span><span class="hl-0">Entity</span><span class="hl-1">, </span><span class="hl-0">Processor</span><span class="hl-1">} </span><span class="hl-2">from</span><span class="hl-1"> </span><span class="hl-3">"javascript-entity-component-system"</span><span class="hl-1"> </span><span class="hl-4">// TYPES</span><br/><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">ECS</span><span class="hl-1"> = </span><span class="hl-5">new</span><span class="hl-1"> </span><span class="hl-7">EntityComponentSystem</span><span class="hl-1">()</span>
</code><button>Copy</button></pre>
<p>CommonJS / JavaScript</p>
<pre><code class="language-JavaScript"><span class="hl-5">const</span><span class="hl-1"> {</span><span class="hl-6">EntityComponentSystem</span><span class="hl-1">} = </span><span class="hl-7">require</span><span class="hl-1">(</span><span class="hl-3">"javascript-entity-component-system"</span><span class="hl-1">) </span><span class="hl-4">// CLASS</span><br/><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">ECS</span><span class="hl-1"> = </span><span class="hl-5">new</span><span class="hl-1"> </span><span class="hl-7">EntityComponentSystem</span><span class="hl-1">()</span>
</code><button>Copy</button></pre>
<a id="md:step-1-components-and-processors" class="tsd-anchor"></a><h3><a href="#md:step-1-components-and-processors">Step 1: Components and Processors</a></h3><a id="md:components" class="tsd-anchor"></a><h4><a href="#md:components">Components</a></h4><p>Let's start with <strong>components</strong>. Components are basically just containers with data. In Computer Science terms we call those <code>Data Structures</code>. This is the basic structure:</p>
<pre><code class="language-TypeScript"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">PositionComponent</span><span class="hl-1">: </span><span class="hl-8">Component</span><span class="hl-1"> = {</span><br/><span class="hl-1"> </span><span class="hl-0">name:</span><span class="hl-1"> </span><span class="hl-3">"position"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-0">state:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-0">x:</span><span class="hl-1"> </span><span class="hl-9">0</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-0">y:</span><span class="hl-1"> </span><span class="hl-9">0</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">}</span>
</code><button>Copy</button></pre>
<pre><code class="language-TypeScript"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">MassComponent</span><span class="hl-1">: </span><span class="hl-8">Component</span><span class="hl-1"> = {</span><br/><span class="hl-1"> </span><span class="hl-0">name:</span><span class="hl-1"> </span><span class="hl-3">"mass"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-0">state:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-0">mass:</span><span class="hl-1"> </span><span class="hl-9">1.5</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-0">velocityX:</span><span class="hl-1"> </span><span class="hl-9">0</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-0">velocityY:</span><span class="hl-1"> </span><span class="hl-9">0</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">}</span>
</code><button>Copy</button></pre>
<p>The name property is <strong>required</strong>. It will define the name of the component and is important because processor will use it to check if an entity has the required component.</p>
<p>The state property is <strong>required</strong> too. However, sometimes you don't need any state. In that case you just put in an empty object:</p>
<pre><code class="language-TypeScript"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">OnDeathFadeComponent</span><span class="hl-1">: </span><span class="hl-8">Component</span><span class="hl-1"> = {</span><br/><span class="hl-1"> </span><span class="hl-0">name:</span><span class="hl-1"> </span><span class="hl-3">"on_death_fade"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-0">state:</span><span class="hl-1"> {}</span><br/><span class="hl-1">}</span>
</code><button>Copy</button></pre>
<p>It works the same way as with state, except your processor won't have any data to use. Sometimes that's enough for a processor to do it's job. This is uncommon though.</p>
<a id="md:processors" class="tsd-anchor"></a><h4><a href="#md:processors">Processors</a></h4><p>Now that we have components defined, we can get on to <strong>Processors</strong>.
The structure of them is similar:</p>
<pre><code class="language-TypeScript"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">GravityProcessor</span><span class="hl-1">: </span><span class="hl-8">Processor</span><span class="hl-1"> = {</span><br/><span class="hl-1"> </span><span class="hl-0">name:</span><span class="hl-1"> </span><span class="hl-3">"gravity_processor"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-0">required:</span><span class="hl-1"> [</span><span class="hl-3">"position"</span><span class="hl-1">, </span><span class="hl-3">"mass"</span><span class="hl-1">],</span><br/><span class="hl-1"> </span><span class="hl-7">update</span><span class="hl-1">(</span><span class="hl-0">entity</span><span class="hl-1">: </span><span class="hl-8">Entity</span><span class="hl-1">, </span><span class="hl-0">components</span><span class="hl-1">: </span><span class="hl-8">Component</span><span class="hl-1">[], </span><span class="hl-0">processor</span><span class="hl-1">: </span><span class="hl-8">Processor</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-4">// This will be called for every entity that has a position and mass component</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">}</span>
</code><button>Copy</button></pre>
<p>All properties are <strong>required</strong>. The first one is the name of the processor and the second one are the required components this processor will need. In this case it needs a <code>position</code> and <code>mass</code> component.</p>
<p>The third property is the update function, that's where all the logic will happen. This function will be called automagically for every entity that has a <code>position</code> and <code>mass</code> component attached. This is very nice because you can focus solely on the logic:</p>
<pre><code class="language-TypeScript"><span class="hl-7">update</span><span class="hl-1">(</span><span class="hl-0">entity</span><span class="hl-1">: </span><span class="hl-0">Entity</span><span class="hl-1">, </span><span class="hl-0">components</span><span class="hl-1">: </span><span class="hl-0">Component</span><span class="hl-1">[], </span><span class="hl-0">processor</span><span class="hl-1">: </span><span class="hl-0">Processor</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-5">const</span><span class="hl-1"> [</span><span class="hl-6">position</span><span class="hl-1">, </span><span class="hl-6">mass</span><span class="hl-1">] = </span><span class="hl-0">components</span><span class="hl-1"> </span><span class="hl-4">// The components hold the state of the entity -> change those!</span><br/><br/><span class="hl-1"> </span><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">gravity</span><span class="hl-1"> = </span><span class="hl-9">2</span><span class="hl-1"> </span><span class="hl-4">// Arbitrary gravity force</span><br/><span class="hl-1"> </span><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">result</span><span class="hl-1"> = </span><span class="hl-0">mass</span><span class="hl-1">.</span><span class="hl-0">state</span><span class="hl-1">.</span><span class="hl-0">mass</span><span class="hl-1"> * </span><span class="hl-0">gravity</span><br/><br/><span class="hl-1"> </span><span class="hl-0">mass</span><span class="hl-1">.</span><span class="hl-0">state</span><span class="hl-1">.</span><span class="hl-0">velocityY</span><span class="hl-1"> += </span><span class="hl-0">result</span><br/><span class="hl-1"> </span><span class="hl-0">position</span><span class="hl-1">.</span><span class="hl-0">state</span><span class="hl-1">.</span><span class="hl-0">y</span><span class="hl-1"> += </span><span class="hl-0">mass</span><span class="hl-1">.</span><span class="hl-0">state</span><span class="hl-1">.</span><span class="hl-0">velocityY</span><br/><br/><span class="hl-1">}</span>
</code><button>Copy</button></pre>
<p>This processor will calculate the gravity force using the entities mass and apply that to it's velocity. To update it's position, we will then add the velocity to it's y position, resulting the entity to move down a bit. This function will be called every frame (inside your gameloop) e.g. it will look like gravity is pulling down on this entity.</p>
<a id="md:register-components-and-processors" class="tsd-anchor"></a><h4><a href="#md:register-components-and-processors">Register components and processors</a></h4><p>Before we can compose entities we need to register the components and processors in the system:</p>
<pre><code class="language-TypeScript"><span class="hl-4">// Register Component</span><br/><span class="hl-6">ECS</span><span class="hl-1">.</span><span class="hl-7">addComponent</span><span class="hl-1">(</span><span class="hl-0">PositionComponent</span><span class="hl-1">)</span><br/><span class="hl-6">ECS</span><span class="hl-1">.</span><span class="hl-7">addComponent</span><span class="hl-1">(</span><span class="hl-0">MassComponent</span><span class="hl-1">)</span><br/><br/><span class="hl-4">// Register Processor</span><br/><span class="hl-6">ECS</span><span class="hl-1">.</span><span class="hl-7">addProcessor</span><span class="hl-1">(</span><span class="hl-0">GravityProcessor</span><span class="hl-1">)</span>
</code><button>Copy</button></pre>
<a id="md:step-2-entities" class="tsd-anchor"></a><h3><a href="#md:step-2-entities">Step 2: Entities</a></h3><p>So after we registered our components and processors, we can now compose our entity:</p>
<pre><code class="language-TypeScript"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">Player</span><span class="hl-1">: </span><span class="hl-8">Entity</span><span class="hl-1"> = </span><span class="hl-6">ECS</span><span class="hl-1">.</span><span class="hl-7">createEntity</span><span class="hl-1">(</span><span class="hl-3">"Player"</span><span class="hl-1">, [</span><span class="hl-3">"position"</span><span class="hl-1">, </span><span class="hl-3">"mass"</span><span class="hl-1">], [</span><span class="hl-3">"gravity_processor"</span><span class="hl-1">])</span>
</code><button>Copy</button></pre>
<p>After that you register it in the system:</p>
<pre><code class="language-TypeScript"><span class="hl-6">ECS</span><span class="hl-1">.</span><span class="hl-7">addEntity</span><span class="hl-1">(</span><span class="hl-0">Player</span><span class="hl-1">)</span>
</code><button>Copy</button></pre>
<a id="md:step-3-let-the-magic-happen" class="tsd-anchor"></a><h4><a href="#md:step-3-let-the-magic-happen">Step 3: Let the magic happen</a></h4><p>You're soo close. Call the update function <code>ECS.update()</code> inside the gameloop.</p>
<pre><code class="language-TypeScript"><span class="hl-4">// You should do this every frame. preferably inside your gameloop.</span><br/><span class="hl-6">ECS</span><span class="hl-1">.</span><span class="hl-7">update</span><span class="hl-1">()</span>
</code><button>Copy</button></pre>
<a id="md:what39s-next" class="tsd-anchor"></a><h3><a href="#md:what39s-next">What's next?</a></h3><p>Well the only thing you have to worry about now is to make more components and processors that act upon them.</p>
<p>In a ECS, components and processors are your bread and butter. You write those to have effects on your entities. It's starts to become real fun when you realize that you can mix and match components and processors to your liking. This flexiblity is the real strength of an ECS. That's why it's such a often used pattern in game development. Enjoy :)</p>
<a id="md:documentation" class="tsd-anchor"></a><h2><a href="#md:documentation">Documentation</a></h2><p><a href="https://stuhl.github.io/javascript-entity-component-system/">Docs</a></p>
<a id="md:roadmap" class="tsd-anchor"></a><h2><a href="#md:roadmap">Roadmap</a></h2><ul>
<li>v2.1.0<ul>
<li>Implement .freeze() and .unfreeze() to make one-time effects possible</li>
<li>Better error handling</li>
</ul>
</li>
</ul>
</div></div>
<div class="col-sidebar">
<div class="page-menu">
<div class="tsd-navigation settings">
<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg>Settings</h3></summary>
<div class="tsd-accordion-details">
<div class="tsd-filter-visibility">
<h4 class="uppercase">Member Visibility</h4><form>
<ul id="tsd-filter-options">
<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li>
<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li>
<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li>
<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></form></div>
<div class="tsd-theme-toggle">
<h4 class="uppercase">Theme</h4><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div>
<details open class="tsd-index-accordion tsd-page-navigation"><summary class="tsd-accordion-summary">
<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg>On This Page</h3></summary>
<div class="tsd-accordion-details">
<ul>
<li>
<ul>
<li><a href="#md:entity-component-system-for-javascript"><span>Entity <wbr/>Component <wbr/>System for <wbr/>Javascript</span></a></li>
<li>
<ul>
<li><a href="#md:installation"><span>Installation</span></a></li>
<li><a href="#md:features"><span>Features</span></a></li>
<li><a href="#md:live-demo-deprecated-will-be-updated-soon"><span>Live <wbr/>Demo (DEPRECATED, WILL BE UPDATED SOON)</span></a></li>
<li><a href="#md:getting-started"><span>Getting started</span></a></li>
<li>
<ul>
<li><a href="#md:import-the-module"><span>Import the <wbr/>Module</span></a></li>
<li><a href="#md:step-1-components-and-processors"><span>Step 1: <wbr/>Components and <wbr/>Processors</span></a></li>
<li>
<ul>
<li><a href="#md:components"><span>Components</span></a></li>
<li><a href="#md:processors"><span>Processors</span></a></li>
<li><a href="#md:register-components-and-processors"><span>Register components and processors</span></a></li></ul></li>
<li><a href="#md:step-2-entities"><span>Step 2: <wbr/>Entities</span></a></li>
<li>
<ul>
<li><a href="#md:step-3-let-the-magic-happen"><span>Step 3: <wbr/>Let the magic happen</span></a></li></ul></li>
<li><a href="#md:what39s-next"><span>What's next?</span></a></li></ul></li>
<li><a href="#md:documentation"><span>Documentation</span></a></li>
<li><a href="#md:roadmap"><span>Roadmap</span></a></li></ul></li></ul></li></ul></div></details></div>
<div class="site-menu">
<nav class="tsd-navigation"><a href="modules.html" class="current"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-namespace)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-4-path"></rect><path d="M9.33 16V7.24H10.77L13.446 14.74C13.43 14.54 13.41 14.296 13.386 14.008C13.37 13.712 13.354 13.404 13.338 13.084C13.33 12.756 13.326 12.448 13.326 12.16V7.24H14.37V16H12.93L10.266 8.5C10.282 8.692 10.298 8.936 10.314 9.232C10.33 9.52 10.342 9.828 10.35 10.156C10.366 10.476 10.374 10.784 10.374 11.08V16H9.33Z" fill="var(--color-text)" id="icon-4-text"></path></svg><span>javascript-<wbr/>entity-<wbr/>component-<wbr/>system</span></a>
<ul class="tsd-small-nested-navigation">
<li><a href="classes/EntityComponentSystem.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-class)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-128-path"></rect><path d="M11.898 16.1201C11.098 16.1201 10.466 15.8961 10.002 15.4481C9.53803 15.0001 9.30603 14.3841 9.30603 13.6001V9.64012C9.30603 8.85612 9.53803 8.24012 10.002 7.79212C10.466 7.34412 11.098 7.12012 11.898 7.12012C12.682 7.12012 13.306 7.34812 13.77 7.80412C14.234 8.25212 14.466 8.86412 14.466 9.64012H13.386C13.386 9.14412 13.254 8.76412 12.99 8.50012C12.734 8.22812 12.37 8.09212 11.898 8.09212C11.426 8.09212 11.054 8.22412 10.782 8.48812C10.518 8.75212 10.386 9.13212 10.386 9.62812V13.6001C10.386 14.0961 10.518 14.4801 10.782 14.7521C11.054 15.0161 11.426 15.1481 11.898 15.1481C12.37 15.1481 12.734 15.0161 12.99 14.7521C13.254 14.4801 13.386 14.0961 13.386 13.6001H14.466C14.466 14.3761 14.234 14.9921 13.77 15.4481C13.306 15.8961 12.682 16.1201 11.898 16.1201Z" fill="var(--color-text)" id="icon-128-text"></path></svg><span>Entity<wbr/>Component<wbr/>System</span></a></li>
<li><a href="types/Component.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-type-alias)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-4194304-path"></rect><path d="M11.31 16V8.224H8.91V7.24H14.79V8.224H12.39V16H11.31Z" fill="var(--color-text)" id="icon-4194304-text"></path></svg><span>Component</span></a></li>
<li><a href="types/Entity.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-4194304-path"></use><use href="#icon-4194304-text"></use></svg><span>Entity</span></a></li>
<li><a href="types/Processor.html"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-4194304-path"></use><use href="#icon-4194304-text"></use></svg><span>Processor</span></a></li></ul></nav></div></div></div>
<div class="tsd-generator">
<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div>
<div class="overlay"></div></body></html>