Rainbow Balance JS13K Post-Partum
Note that this is a post-partum (after birth), which I’d rather use instead of post-mortem (after death). After all, I did finish the game and get it out to the world, so it’s born.
In early September, I was looking at game contests to enter a game I’d been developing, Lord of the Swarm, which used a new RTS mechanic, where you play as a god and try to keep teams in balance for as long as possible. This was inspired by how, when I watch sports, I always end up hoping that the team that’s behind will catch up. When I found the JS13K contest, whose rules are that you have to build a game that runs in the browser, and that compresses to less than 13KB, I decided to participate, with its theme for this year of “Unicorns and Rainbows.” It had already been going on for almost 3 weeks of the month it was running when I found out, but I have spent a lot of time trying to build small code, starting with some 12k Java-based interactive banner ads I wrote back in 1996-7.
I wrote it from scratch, per the contest’s rules, but since I had an idea of the gameplay from my other game, I decided to start with the core balance mechanic from Lord of the Swarm. There would be two sides, the Sunicorns and the Rainicorns, and since rainbows only come when there is both sun and rain, I used a rainbow as the balance indicator: a double rainbow would form when they were perfectly balanced, and the rainbow would fade away from whichever side was winning. I have used GLSL shaders a lot in my projects, so decided to make it WebGL-based. A rainbow is easy, and for clouds and grassy hills, I looked to shadertoy.com for inspiration. Then the unicorns used shaders with SDF (signed distance functions) to make them look 3D, as did the castles.
Since this was now a lot of GLSL, I looked into shader compressors, and found two: shader-minifier, written in .NET, and spglsl, written in C++. I tried using spglsl due to its prior JS13K connection, but it had some parse errors on my code, and I thought it would be nice to have a JS-only pipeline, so I got Claude to port shader-minifier to JS, using its test cases and structure, and pulled in the best ideas from spglsl. For a JS environment, shader-minifier-js is simpler to run and install, and compresses 2-5% smaller than either of the compressors it draws from.
Now I had three whole days to get the actual game working: spawning, movement, castle capture, combat, veterans, player powers (sparklify, freeze, turncoat, berserk and ninja), fighter and magician unicorn classes, a tech tree to speed the game up as it progressed, and the spawning of additional castles over time. Plus some very basic sound effects, high scores, and play/pause, and we were at 13KB. I didn’t get time to fine-tune the sound, and never got to a proper soundtrack, which is where I would have spent my time next if I’d had more. As it was, I got it complete and submitted exactly by 13:00 on the 13th, when it was due.
It was a lot of fun participating, especially under severe time and work pressure. In order to work this quickly, I had to rely on my co-worker Claude who implemented many of the details. At least I was able to draw from my previous experience in mobile game development so that I could manage my agent tightly and keep them very on-target with what I needed them to do.
The game is up on the submission page, and I am also hosting it permanently at (http://rainbowbalance.tom.to).