563 lines
13 KiB
HTML
563 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="js csstransforms3d">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="generator" content="Hugo 0.55.6" />
|
|
<meta name="description" content="">
|
|
|
|
|
|
<link rel="icon" href="/images/favicon.png" type="image/png">
|
|
|
|
<title>ECS :: Encompass Docs</title>
|
|
|
|
|
|
<link href="/css/nucleus.css?1558486144" rel="stylesheet">
|
|
<link href="/css/fontawesome-all.min.css?1558486144" rel="stylesheet">
|
|
<link href="/css/hybrid.css?1558486144" rel="stylesheet">
|
|
<link href="/css/featherlight.min.css?1558486144" rel="stylesheet">
|
|
<link href="/css/perfect-scrollbar.min.css?1558486144" rel="stylesheet">
|
|
<link href="/css/auto-complete.css?1558486144" rel="stylesheet">
|
|
<link href="/css/atom-one-dark-reasonable.css?1558486144" rel="stylesheet">
|
|
<link href="/css/theme.css?1558486144" rel="stylesheet">
|
|
<link href="/css/hugo-theme.css?1558486144" rel="stylesheet">
|
|
|
|
<link href="/css/theme-encompass.css?1558486144" rel="stylesheet">
|
|
|
|
|
|
<script src="/js/jquery-3.3.1.min.js?1558486144"></script>
|
|
|
|
<style type="text/css">
|
|
:root #header + #content > #left > #rlblock_left{
|
|
display:none !important;
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
<body class="" data-url="/why/architecture/ecs/">
|
|
<nav id="sidebar" class="">
|
|
|
|
|
|
|
|
<div id="header-wrapper">
|
|
<div id="header">
|
|
<img src="/images/logo.png" width="100" height="100">
|
|
|
|
</div>
|
|
|
|
<div class="searchbox">
|
|
<label for="search-by"><i class="fas fa-search"></i></label>
|
|
<input data-search-input id="search-by" type="search" placeholder="Search...">
|
|
<span data-search-clear=""><i class="fas fa-times"></i></span>
|
|
</div>
|
|
|
|
<script type="text/javascript" src="/js/lunr.min.js?1558486144"></script>
|
|
<script type="text/javascript" src="/js/auto-complete.js?1558486144"></script>
|
|
<script type="text/javascript">
|
|
|
|
var baseurl = "http:\/\/example.org\/";
|
|
|
|
</script>
|
|
<script type="text/javascript" src="/js/search.js?1558486144"></script>
|
|
|
|
|
|
</div>
|
|
|
|
<div class="highlightable">
|
|
<ul class="topics">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li data-nav-id="/why/" title="Why?" class="dd-item
|
|
parent
|
|
|
|
|
|
">
|
|
<a href="/why/">
|
|
<b>1. </b>Why?
|
|
|
|
</a>
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li data-nav-id="/why/the_hard_way/" title="The Hard Way" class="dd-item
|
|
|
|
|
|
|
|
">
|
|
<a href="/why/the_hard_way/">
|
|
The Hard Way
|
|
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li data-nav-id="/why/architecture/" title="Architecture" class="dd-item
|
|
parent
|
|
|
|
|
|
">
|
|
<a href="/why/architecture/">
|
|
Architecture
|
|
|
|
</a>
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li data-nav-id="/why/architecture/mess/" title="The Messy Basement" class="dd-item ">
|
|
<a href="/why/architecture/mess/">
|
|
The Messy Basement
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li data-nav-id="/why/architecture/oop/" title="OOP" class="dd-item ">
|
|
<a href="/why/architecture/oop/">
|
|
OOP
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li data-nav-id="/why/architecture/ecs/" title="ECS" class="dd-item active">
|
|
<a href="/why/architecture/ecs/">
|
|
ECS
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li data-nav-id="/why/architecture/hyper_ecs/" title="Hyper ECS" class="dd-item ">
|
|
<a href="/why/architecture/hyper_ecs/">
|
|
Hyper ECS
|
|
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
|
|
<section id="footer">
|
|
<p>Built with <a href="https://github.com/matcornic/hugo-theme-learn"><i class="fas fa-heart"></i></a> from <a href="http://getgrav.org">Grav</a> and <a href="http://gohugo.io/">Hugo</a></p>
|
|
|
|
</section>
|
|
</div>
|
|
</nav>
|
|
|
|
|
|
|
|
|
|
|
|
<section id="body">
|
|
<div id="overlay"></div>
|
|
<div class="padding highlightable">
|
|
|
|
<div>
|
|
<div id="top-bar">
|
|
|
|
|
|
<div id="breadcrumbs" itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
|
|
<span id="sidebar-toggle-span">
|
|
<a href="#" id="sidebar-toggle" data-sidebar-toggle="">
|
|
<i class="fas fa-bars"></i>
|
|
</a>
|
|
</span>
|
|
|
|
<span id="toc-menu"><i class="fas fa-list-alt"></i></span>
|
|
|
|
<span class="links">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a href='/'>Encompass</a> > <a href='/why/'>Why?</a> > <a href='/why/architecture/'>Architecture</a> > ECS
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</span>
|
|
</div>
|
|
|
|
<div class="progress">
|
|
<div class="wrapper">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div id="head-tags">
|
|
|
|
</div>
|
|
|
|
<div id="body-inner">
|
|
|
|
<h1>
|
|
|
|
ECS
|
|
</h1>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<p>ECS stands for <strong>Entity-Component-System</strong>. It is based on two fundamental principles:</p>
|
|
|
|
<ul>
|
|
<li>There should be complete separation between data and logic.</li>
|
|
<li>Objects should be created via <em>composition</em> and not inheritance.</li>
|
|
</ul>
|
|
|
|
<p><strong>Components</strong> are the most basic element. They are simply containers of related data. In a 2D game we could have a PositionComponent with an <em>x</em> and <em>y</em> value. Components do not contain logic, though they might have callbacks to deal with side effects, for example creating or destroying bodies in a physics simulator.</p>
|
|
|
|
<p><strong>Entities</strong> are generic objects, which have a unique ID and a collection of Components. Entities have no inherent behavior or properties of their own, but are granted these by Components. We can add, remove, or modify Components of Entities as necessary during the simulation.</p>
|
|
|
|
<p><strong>Systems</strong> are responsible for reading and modifying Entities and Components. For example, a MotionSystem might look at Entities that have both a PositionComponent and VelocityComponent, and update the PositionComponent based on the information in the VelocityComponent.</p>
|
|
|
|
<p>Notice, in our above example, that this gives us a tremendous amount of flexibility. We can completely remove the VelocityComponent from an Entity while the game is running, and the Entity will simply stop moving - nothing else will break, because nothing has to rely on an Entity specifically containing a VelocityComponent! This is the power of composition and de-coupling at work.</p>
|
|
|
|
<p>Unfortunately, ECS is not without its problems.</p>
|
|
|
|
<p>Suppose we have a game where the player character can move left or right, and also has a special ability that lets them teleport forward over a short distance. We could put all of this logic in the same System, but most Entities that move around are not going to have this behavior, so it makes sense to have a separate system. In other words, we have introduced multiple systems that need to manipulate the position of objects.</p>
|
|
|
|
<p>We could have a TeleportSystem that immediately sets the <em>x</em> and <em>y</em> value of the PositionComponent so it is in front of the player’s current position. But if the TeleportSystem runs before our regular Motion System, the Position Component will be overwritten by the regular Motion System and we will not see the teleportation behavior occur, even though the system is running!</p>
|
|
|
|
<p>This kind of bug is known as a <em>race condition</em>. Race conditions are one of the worst kinds of bug to handle, because it is incredibly hard to trace values being over-written by other values. In my experience, race conditions are probably a good 80% of what game programmers deal with. No wonder we are so frustrated all the time!</p>
|
|
|
|
<p>In my opinion, being forced to think about the order in which Systems run is a form of tight coupling, because it means you have to consider the behavior of other systems when writing a new system to avoid introducing bugs.</p>
|
|
|
|
<p>This example also illustrates another problem with ECS: in Systems that have similar behavior, we don’t really have a nice structure to share that behavior.</p>
|
|
|
|
<p>I have created a variant of ECS that intends to address these and other problems. Let me tell you about it.</p>
|
|
|
|
|
|
<footer class=" footline" >
|
|
|
|
</footer>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<div id="navigation">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a class="nav nav-prev" href="/why/architecture/oop/" title="OOP"> <i class="fa fa-chevron-left"></i></a>
|
|
|
|
|
|
<a class="nav nav-next" href="/why/architecture/hyper_ecs/" title="Hyper ECS" style="margin-right: 0px;"><i class="fa fa-chevron-right"></i></a>
|
|
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
|
|
<div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
|
|
</div>
|
|
<script src="/js/clipboard.min.js?1558486144"></script>
|
|
<script src="/js/perfect-scrollbar.min.js?1558486144"></script>
|
|
<script src="/js/perfect-scrollbar.jquery.min.js?1558486144"></script>
|
|
<script src="/js/jquery.sticky.js?1558486144"></script>
|
|
<script src="/js/featherlight.min.js?1558486144"></script>
|
|
<script src="/js/html5shiv-printshiv.min.js?1558486144"></script>
|
|
<script src="/js/highlight.pack.js?1558486144"></script>
|
|
<script>hljs.initHighlightingOnLoad();</script>
|
|
<script src="/js/modernizr.custom-3.6.0.js?1558486144"></script>
|
|
<script src="/js/learn.js?1558486144"></script>
|
|
<script src="/js/hugo-learn.js?1558486144"></script>
|
|
|
|
<link href="/mermaid/mermaid.css?1558486144" type="text/css" rel="stylesheet" />
|
|
<script src="/mermaid/mermaid.js?1558486144"></script>
|
|
<script>
|
|
mermaid.initialize({ startOnLoad: true });
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html>
|
|
|