Posted onJul 24, 2022 • Edited onAug 22, 2022

Creating A Game With ECS - Part 1

#javascript #beginners #gamedev

In this tutorial series I will try to introduce you to the basic concepts of ECS by building a game with an ECS Game Framework.

What is ECS?

ECS or Entity-Component-System is a Game Development Architecture that is used for developing highly efficient games. It comprises of 3 Elements -

1. Entity

it refers to a Game Object/Entity composed of various components. Systems "query" these entities to perform various functions. They store the "data" that is used by the systems to ascertain the current state of the Entity and perform operations accordingly.

2. Component

A Component is nothing but data or property. An Entity can have multiple Components like Health, Position, Shape, etc.

3. System

A System is the place where things start moving. You can think of them as a function which are called on every tick/update. They perform specialised functions like Rendering Entities, Physics, Collision, etc. They "query" the components they are interested in (those who have a certain set of components that the system needs) and update the game.

Query

Another important component of ECS is a Query. You can think of it as a Set/Array of names of components. Systems use these queries to get a list of entities that have those components. It is similar to how you query DOM elements using CSS Queries.

The Beginning

We will be usingSquare - An ECS Framework written in Javascript.

Project Structure

/game - queries.js - components.js - systems.js - main.js

queries.js
It will contain Queries that our systems will use.

exportconstRenderable=['@position','@size','@shape'];

components.js

exportclassPositionComponent{constructor(x=0,y=0){this.x=x;this.y=y;}}exportclassSizeComponent{constructor(width=0,height=0){this.width=width;this.height=height;}}exportclassShapeComponent{staticRECTANGLE='rectangle';}

systems.js

import{ShapeComponent}from'./components.js';exportfunctionRenderingSystem(app){constcanvas=document.createElement('canvas');constcontext=canvas.getContext('2d');app.on('init',()=>document.body.appendChild(canvas));app.on('update',()=>{context.clearRect(0,0,canvas.width,canvas.height);app.emit('render',canvas,context);});}exportfunctionShapeRenderer(app){app.on('render',(_canvas,ctx)=>{constentities=app.query('@shape');entities.forEach(entity=>{if(entity.shape===ShapeComponent.RECTANGLE){ctx.fillRect(entity.position.x,entity.position.y,entity.size.width,entity.size.height);}});});}

main.js

// importing the libraryimport{Application}from'https://unpkg.com/square-ecs@latest';// importing various parts of our gameimport{RenderingSystem,ShapeRenderer}from'./systems.js';import{PositionComponent,SizeComponent,ShapeComponent}from'./components.js';// creating an instance of the gameconstapp=newApplication({// shared data that our game will use,// it can contain any kind of datadata:{},// systems of our gamesystems:[RenderingSystem,ShapeRenderer]});app.on('init',()=>{constentity=app.entityPool.getEntity();// borrow an entity from the entity pool// attach various componentsentity.attach('shape',ShapeComponent.RECTANGLE).attach('position',newPositionComponent(100,100)).attach('size',newSizeComponent(50,50));// add it to the worldapp.add(entity);});// start the gameapp.start();

Output

Yeah! We have successfully rendered a Square.

In the next article, things will start moving.

Jai Shree Ram!

Top comments(2)

Calin Baenen

I'm Calin Baenen – AKA KattyTheEnby – a programmer born October 30th, 2006.I love programming, it has been my passion since I was a kid, and will forever be my passion.