What is an ECS?

Preface#

This series is intended to be a simple walkthrough of building an ECS-based game engine in TypeScript. It’s based off my work on Fallgate, a small 2D action-adventure game I built with my friend Cooper over about two years of evenings and weekends.

So, what is an ECS?#

ECS stands for entity component system. It is a design pattern used when programming games.

It works this way: you have Entities, Components, and Systems. (I’ll capitalize these throughout.)

• Entities represent any game object, like the player, or a tree, or a spell. Each entity is just an ID number, like 42.

• Components are data associated with Entities. For example, the player Entity might have several Components, like a Position Component that holds its world coordinates, a PlayerInput Component that stores the latest controller input, and a Sprite Component that holds data for how to draw the player. Think of Components as bags of data, like JSON files.

  Later on, we’ll break this rule of “Components are just data” and squeeze some a little bit of code into them. But “Components are just data” is the right conceptual model.

• Systems are the actual code. They contain the game logic. Each System—and this is the important bit—selects all Entities which contain at least the set of required components. For example, a Renderer System could select all entities that have both a Position and a Sprite Component, and would draw each Sprites at the Position.

  You might already see why a System may be interested in additional Components. For example, the Renderer System may check whether the Entity also has a Damaged Component on it, indicating the Entity has recently taken damage. If so, it could render the Sprite with a red tint.

ECS Visualization#

This ECS visualization demonstrates the core concept of Systems: selecting Entities that Contain at least their required Components. Under-the-hood, the visualization is powered by the ECS that we’ll build in this series.

Controls:

• Click on “add/remove entity” to randomly generate/remove entities.

• Hover over the bottom “System” areas to show the Systems selecting all Entities that match their set of required Components.