JS13K games is Javascript golfing competition that runs for a month between August 13th and September 13th every year. The game jam has one main characteristic - the entire game (source code, graphics, sounds etc.) must be contained in a 13 kilobytes ZIP archive, as constrained by the creator of the compo, Andrzej Mazur (@end3r).
My participation in the Compo over time
JS13K first took place in 2012, and at that time there were a total of 61 submissions. I'm participating for the fourth time in a row now; the competition has been more popular lately, with around 250 submissions in the last three editions of the compo. I wrote an article about the Lightweight JavaScript Libraries prepared beforehand and, along my first entry "Skip'n Glitch", which I submitted in 2016. One of the classes included there is a 900-bytes Tweener used for animation, timed callbacks, and various DOM manipulations. My first three submissions were non-real-time games, and the tweener came in handy for them as I used a lot of DOM elements. The game that stood with unique mechanic was my 2017 submission "Formation Absent". In my latest submission "Super Bunny Strikes Back!" I relied on HTML5 Canvas and went for old school platformer with high FPS demand. Each year I'm trying to increase the quality and complexity of my entries, and I also tried to incorporate this year's theme "Back" in greater depth... but more about that later. Here are my compo submissions:
The 13,312-byte limit may sound pretty tight, considering that even a tiny image can occupy dozens of kilobytes, but it's actually enough to compress quite a large chunk of text, i.e., Javascript code. Depending on the code density, you can pack from 32 kB up to 128 kB of Javascript. There are a lot of tricks you can use to save space. For 2D games, image spritesheets must be compressed with tools like TinyPNG or Compress-Or-Die... On the other hand, I have seen participants using CSS techniques extensively, or the SVG vector format. Not to mention that every year there are more and more 3D games utilizing advanced WebGL techniques. I prefer to compact the game into a single index.html file, cutting the multiple file overhead. If you have multiple files, they can increase your archive file size by a lot. Images can be inlined as Base62 encoded strings, but for the purpose of the JS13K compo, here is a great way of storing the image data:
Image Encryptor
For my latest two entries, I used eight colored (3-bit) images. They are stored as text strings, encoded specifically to not use special ASCII characters. This makes the data suitable for archiving. The method for storing was invented by one of the jam participants, @xem. I extended his miniPixelArt tool and made it possible to load image files:
Tip: open the Image Encryptor in a new window in order to maintain a history of the loaded images.
Graphics
In Super Bunny Strikes Back I have two playable main characters and they comprise significant portion of the sprites used in the game. I knew there won't be much space and decided not to cut from their 6-frame jumping animations, but rather reduce the enemy creatures count and diverse them with different color pallets (changing colors is quite trivial if you use the Image Encryptor).
The sprites have 7 colors and transparency. In addition I use a special approach to mimic a contour by applying a drop shadow filter on all images. This comes with a bit of limitation on what can be drawn with the sprites - for example you can't place two pixels of contour vertically next to each other. But with a little effort this can be walked around with suitable pixel art.
