ECS training

I love makin’ little games, and I also like making little interactive web things. Web is pretty much unparalleled in making a thing that works on everyone’s device and for throwing a UI together really quickly - if you want a button, you can just have one and it’ll be a thing that works on pretty much any device that someone’s likely to use.

But I also like building games using the Entity-Component-System pattern (ECS). It’s a really common architecture for games, very handy and flexible, but web browsers don’t come with one built in and ready to use like they do with UI systems. It’s pretty straightforward to roll a simple one, but why bother when there are plenty of sophisticated ones available.

I’ve done a bit of research¹ and landed on geotic, which looks like it vibes really well with the way I prefer to work, plus it has some handy features like built-in serialisation, and its readme includes a shout-out to Caves of Qud which is one of my all-time favourite games.

So this post is just going to be a quick thing to see if geotic’s nice to work with, see if I can prototype something cute in an evening.

The experiment

I’m going to simulate a little train station, why not.

• Passengers will wait at the station with a destination in mind
• Each destination has a train servicing it
• Trains will come and go from the station
• Passengers will board trains matching their destination
• Departing passengers will decide on a different destination while away, or leave forever
• Sometimes passengers will just show up at the station
• That’s probably complex enough to get a vibe for the system

Here we go:

And, yeah, that’s a really nice dev experience! It took me like 90 mins and I found it super easy to add new components as the requirements for them became clear.

The components ended up being:

• Train components:
  • Train: including the line/destination of a train
  • DistanceFromStation: including how long til the train will arrive here
  • AtStation: including how long before the train will depart
• Passenger components:
  • Person: including which face icon a person has
  • Boarding: including the delay between a train arriving and the person boarding it
  • Traveller: including where a person wants to go
  • Disembark: including the delay between a train arriving and the person leaving it
  • OnTrain: including whether the person is on a train right now

The architecture and naming is kind of weird as I was playing pretty fast and loose with it, and obviously I didn’t take advantage of any of the flexibility stuff I mentioned earlier, but the goal here was just to get a vibe of geotic (nice!) and also think about trains for a bit (also nice).