The Design

For LD44 I was determined to make a fun game, even if it wasn't the most creative interpretation of the theme, rather than struggle and fail to think of a brilliant idea. For the theme "your life is currency", I came up with the idea of an RTS where the life force that powered your units could be exchanged for different units or various buildings and upgrades. Since a full RTS was totally out of scope, I decided to focus on just the building aspect and let the player drop units directly into the slots for different tasks, like in a worker-placement board game.

Because the game is about waiting for workers to generate resources so you can build structures, it resembles an idle game, but I wanted to keep the experience snappy and engaging because LD voters have a lot of games to get through. I tried to tune it so that there’s value in keeping a close eye on things and actively shifting resources around, but you can also play at a more relaxed pace. Another part of keeping the game "short and sweet" was creating a clear victory condition so that the game has a satisfying ending.

The Tech

The game is written in TypeScript, HTML, and CSS. At the beginning of the weekend, I tried to set up the UI using Angular, which I was interested to try out. It looked good at first but I ran into trouble trying to figure out the "Angular way" to handle the dragging and interaction. Saturday afternoon I scrapped the Angular components and went back to manipulating the DOM directly. I should have heeded the advice not to try out a new technology during a jam!

As far as the code itself, it turned out very simple. There are only 3 types of objects in the game: Structures, like the Sawmill or Quarry, have Slots which can hold Stacks of resources, including wood, stone, and workers. Each Stack only knows its resource type and count, and can be dragged by the mouse. Each Slot accepts exactly one type of resource and handles a new Stack being dropped by merging it with its existing Stack. Each Structure manages its various lists of Slots: it can be built or upgraded only when its upgrade slots are full; it starts production only when its worker slots and input slots are full; and during production, it creates new resource stacks in its output slots.

This system has very few special cases and almost no dependency between objects other than the Structure > Slot > Stack relationship. Thanks to this, I probably spent the least time debugging of any game jam I’ve done ever - which helped make up for the time I wasted on Angular!

Other than a few sprites, the visuals are all done with CSS, and mostly kept separate from the functionality. This jam really opened my eyes to the power of CSS for decorating game elements in a modular way. For example, each div that contains slots is tagged with the appropriate class, like 'input' or 'output'. In the CSS, slots in an ‘input’ div are given a different appearance than those in an ‘output’ div - and the slot itself never needs to know whether its an input or output slot!

The Future

I'm happy with the game design and code of Soul Builder. The aspect that I most wish I could have improved is the overall look of the game, since the gray boxes don’t make the game look very appealing in screenshots. If I have time, I’d love to make a new version with a more colorful board-game-inspired look. I’m also working on fixing some of the messiest parts of the code so I can share that.

Some commentors have mentioned that they’d like to play a longer version, which is always great to hear, but I’m not sure what I would add to the gameplay if I did continue to work on it. If you played the game and have ideas, let me know! If not, you can play and rate it here: https://ldjam.com/events/ludum-dare/44/soul-builder