Js13kGames is a JavaScript coding competition for JavaScript Game Developers. The fun part of the compo is the file size limit set to 13 kilobytes. The competition started on 13th August and ended on 13th September 2020. The theme for 2020 was 404.
I managed to participate in the competition for the fourth time in a row, this year I teamed up with an elite team of game jammers and friends: agar3s, mapedorr and QuietGecko. We ended up creating a robot dancing game. You can play online here. Source code is here. There’s also a gameplay video.
The Story
This year I had two goals in mind: First off, I wanted to do something using a palette based sprite renderer, so that I could create a visually rich game under the size limit. The basic idea is, instead of drawing image files directly, have image data encoded to a more optimal (and lightweight) format and then using that data to manipulate what is displayed in the end (more details below).
The other thing I had clear was I was not going to jump on it alone; I had been talking with agar3s the months prior to the competition, entertaining the idea of joining forces for this year. Once the compo had begun we started brainstorming ideas and technical aspects and decided it would be nice to have a good pixel artist on board in order to make the best use of all the technical stuff we were doing under the hood, so we invited Mr. Mateo Robayo to join. He was a bit hesitant at first since it seems he didn’t enjoy his previous js13k participation a lot, but since this time he’d focus on the pixel art, he accepted to join.
As the first days passed, we considered doing some kind of action “roguelite” (ugh) with a robot exploring an abandoned factory looking for the correct URL, but as Mateo started coming up with art for the robots, and I implemented a basic “idle” animation with the parts we had, I thought it would be great to have a dancing game. We invited sound and music artist QuietGecko (with whom I’ve done a lot of work in NovaMundi and Emerald Woods), to create some cool tracks and SFX for the robots to dance.
In reality, I had a secret plan to have these 3 guys work back in a game together, but that’s not the kind of things you mention in a blog post.
I was able to do most of my contributions during the first week, luckily the guys were there to push through including the final days which required some big effort to close the scope, integrate everything and deliver an exceptional entry IMO.
The Sprite Renderer
There are many components on this entry, but my main contributions in the coding side I believe were aligned to what I was pursuing with my participation; I’ve always wanted to do a NES or GB emulator, this comes from back when I used to do some simple sprite ROM hacking, and reading about how graphics work in these kind of consoles. js13k seems like a perfect opportunity to use similar techniques for displaying visually rich content using as little storage as possible, and I bet I’m not the first one to think so, but I had never jumped into doing it.
So, with the fundamentals of the idea on my head, I jumped into it and together with agar3s we were able to put it together working great, this a summary of how it works (not that it’s something ground breaking, but I figure someone might find it interesting).
I aimed to support indexed 8 colors sprites, so we had each pixel take up 3 bits, and thus the entire pixel data (128×112 pixels) would fit about 5KB before any encoding or compression. We used a PNG file as the source of image data, thus allowing Mateo to work in whatever tool he wanted (I believe Aseprite is his weapon of choice); this file is then processed by a nodejs script which reads the image data into an array of bytes, encodes the array and exports it to a JS file used by the game.
Encoding the byte array was a bit tricky; my initial ideas worked but the string representations I was able to create ended up using special characters which wound up taking 2 bytes instead of one; as I thought on some workarounds for this, to restrict the symbols to safe 1 byte printable ASCII, we also did some research and ended up following xem’s latin-1 string trick.
On runtime, this data is decoded by the game, and then the renderer displays a sprite by crossing the data from a given palette of RGB values and the index defined in the sprite, thus allowing 24bit color depth display, without having to store the color data for each pixel.
In order for this to perform well, however, the pixels should be rendered “offscreen” using an image data buffer and writing to its pixel data directly, and then putting the entire image data on every frame.
Besides potential savings in storage space, this also allowed us to use palette animation effects (Mateo seems to have had a lot of fun with this) and to include variety in the game.
Ultimately, my contributions to this were mostly infrastructure work; the rest of the team did a great job extending and actually applying it into the game!
Soundworks
This being a dancing game, music and sound effects were bound to have an important part on it. As QuietGecko joined he struggled a lot first with the tools, trying out different trackers trying to make the JS conversion plugins work.
All I could do was recommending using Soundbox, the tool I used for my past two entries which worked great to me; however, everything changed when Keith Clark, the author of ZzFXM, released the beta version of ZzFXM Tracker. Everything worked perfectly from there, and as a plus, the code that was exported made a lot of sense and was much easier to work with.
I’m not sure what happened during the final hours, but in the end we had great SFX too. But you cannot expect less from the QuietGecko.
In his own words:
Having to convert .mod files to .js and translating synths was very difficult until Keith Clark released his tracker, although I experimented creating synths using his sfx creator and it ended up being very helpful. Also, having the issues with the instruments was a bit frustrating at first but it gave me a chance to try different trackers and strengthen the composing muscle which was useful when the time to rush came.
Additionally, having to use 64 note sequences seemed to be a bit too constraining, I wanted to test smaller sequences so we could have a procedural approach but it would be something to revisit next time.
I like that we ended up having a cohesive retro style sound even though I wished to have it more balanced mix wise. I really liked it. I would also have wanted to have a way to teach or suggest rhythm or patterns to players other than beat subdivision.
QuietGecko, September 2020
Discarded Gameplay Ideas
As I mentioned, I could not contribute a lot of code after the first week… besides being stuck with a lot of work in other projects, I also felt kind of stalled regarding the game. In spite of being the one who proposed we went that route, I had never made a rhythm game, and I didn’t think I could contribute a lot to the design so in a way I decided to see what the rest of the team could come up with.
However, one of the things I experimented with after seeing how the game was evolving, was making it so that instead of pressing sequences of random (but varied) letters, you had to do some patterns that would be translated into special moves into the game and give you bonus points. The idea was you would find out about these moves from your opponents, and would replicate them using your individual robot-part movements.
While it technically worked, it was pretty hard! almost impossible as the BPM went up. So we decided not to integrate it in the end, may be it could work for a different kind of robot dancing game.
What Went Right?
Teamwork worked great but this was no coincidence. We are no strangers to game jams and we have worked together in many projects, so everybody knew how to contribute and we also let the project evolve organically with all our ideas. Again, it was great to know the project was going to be completed because the guys were serious about taking it to the finish line.
Besides making the pixel art for the game, Mateo ended up coding a lot of the GUI, as well as the palette animations. I already mentioned QuietGecko’s contributions, and agar3s…. well, let’s say besides contributing a lot of build, tooling and engine infrastructure, he made sure everything worked together and extended the engine towards what we needed. I hope he manages to write down his experience so I can link it here.
What Went Wrong?
Now, if we evaluate the end result, maybe we didn’t really integrate the 404 theme a lot into the game; it ended up being a shallow aspect, when you miss a beat you get the 404, if you don’t find your rhythm, you fail.
Onboarding was also not great, I didn’t like the key layout a lot (D, F, J, K ?), but I was told that’s what people uses nowadays especially on laptops. How the bonus mechanics work inside the game is also not very explicit, but on the other hand it can be deduced after some game play so I don’t think it’s a big deal (as it was in Lost in Asterion).
Overall, one could think if we had a clearer vision of the game design from the beginning, we could have integrated the theme better, and polished the mechanics, but I actually feel the journey of exploring different gameplay ideas was a good experience, and was in a way more fun and exciting than just following a set plan.
The Future
This is one of these rare jam entries for which I don’t feel there needs to be any further development; not that it’s a perfect game, but I believe it’s just as good as it should be for a js13k entry (If anything, we could add support for mobile, and that would not be a big deal).
Slashie's Journal 