It’s been a long time since my last post… However, I haven’t been lazy, but worked on multiple things over the last few month. The funniest project in the last weeks/months was my entry for js13kgames called Cubi. In this post I want to present the game and some nice tweaks I added for achieving the right file size.

js13kgames

"Js13kGames is a JavaScript coding competition for HTML5 game developers. The fun part of the compo is the file size limit set to 13 kilobytes". Also the main theme of the entries is the number 13. The rules of the competition are pointing out, that everything that fits into 13kb can be used, including frameworks and so on. The only thing that developers are getting for free is the lib prefixfree.

Cubi

The game itself is a tower defense game in exactly 11938 bytes. At the time of submitting it to the contest, it had 13 different types of monsters, 3 kind of towers and only one set of surface graphics. The major goal of that game is to kill all the monsters approaching you via choosing the right amount of towers.

You can play the game hereand see the code here.

Scripts/Tools

One of the first things I wrote for that project was a script that creates me a bundled package. I chose to put my scripts into a subfolder and to alias them in a package.json, so that they can be executed via npm run smth. So, after writing the script that creates a bundled version of my game, I wrote another one that utilized the build script and which zipped the resulting folder. Using the size of that zip file it printed the remaining free bytes. Pretty handy :)

Optimizations

In that build script I added over time a handful of optimizations. The first step was to uglify each file and to concatinate them afterwards. This already saved some bytes, but turned out to be quite unefficient. As a colleague of mine told me (and what is quite obvious if you think about it :D), it makes more sense to concatinate the files first and compress them afterwards. Doing so saved a whole bunch of kilobytes!

The very next steps was the compression of css, which was done via the YUICompressor. As the game has only ~280 lines of css code this wasn’t super efficient but still resulted in some improvements.

After those two things I went on with coding the logic of the game. After some time I was quite close to an acceptable extent and decided to add some more towers and monsters to the game. The disappointing thing was that I already slightly crossed the allowed file size. So I decided to stop and submit the game. While I was improving my build script I got the idea to do some minor changes in the build script. In the first place I moved all assets directly into the folder where the index.html was lying. This saved some bytes due to the removal of the subfolders. The second and due to the first change mandatory thing was to change the paths in the index.html file which saved some chars (the subfolder’s names). While modifying the file I got the idea of modifying the CSS as well.

So I started to look into the CSS and tried to replace the images in there with the base64 encoded equivalents. After some struggle this turned out to be super efficient and saved almost 4KB of data. Doing that with node.js was pretty easy. You basically just read the file, put it into a buffer and let it transform the data into a base64 string. You might want to check the relevant lines. Simple :)

prefixfree

After optimizing the game for Chrome I tested some other browsers and noticed, that the bullet animation isn’t available. The reason for that was the missing cross browser compatibility of the transition attribute. As the competition gave us the prefixfree library for free, I just required that specific js file in my index.html and my problem was solved. Furthermore I was afterwards able to remove some webkit specific css!

gh-pages

One of the best choices for the project, was to switch from the master branch to gh-pages branch and to set it as default. Doing so, I got a webserver via github for free and was able to send around the link to the game!