Published on

Build a Basic ECS in TypeScript - Part 1

Authors

In this series we're going to create a basic Entity Component System (ECS) using TypeScript. The goal will be to strengthen our understanding of this pattern by creating a small library and simple demo.

This will be the final result

Impressive I know, but even this will showcase some nice features of an ECS.

What is an ECS

Let me start by saying there are many ways to implement an ECS. You might be very strict with the structure of components for ease of serialization over the network. For example, no methods, just raw scalar data. You might only use an ECS for certain parts of your engine that tend to touch every entity in your game, such as physics or rendering.

We'll keep things simple for now. I found it was best to let my understanding of an ECS grow with me and the problems I was trying to solve. Whether those be games or something else.

For starters, let's break the acronym down for our intents:

  • Entity: A unique identifier - number (integer) in our case
  • Component: A data structure (class) holding data representing something like a position (x, y)
  • System: A function/method working with a view of entities and their components to perform some operation, such as movement

I've always really liked the analogy to a database table:

EntityIdPositionVelocityColorComponent N ...
1x, yx, y'red'
2x, yx, y'blue'

The entity id being the row id, and all other columns representing components. Systems then working with views of interest based on this table.

WIP ⚠