The js13kGameJam experience: tips and tricks

This year I had the opportunity to participate in the js13kGameJam, a JavaScript/HTML5/CSS competition that is organised every year since 2012. This was a great personal experience as was the first time I joined this kind of competitions alone and I found it really enriching. If you don’t know what I’m talking about, I recommend you to visit this post where I explain what is a Game Jam and all the good things of them.

What I most enjoyed of this one was the particularity of having to build a game that, when zipped, it can be a maximum of 13KB size. Let me put things into perspective: 13K Bytes are 13312 Bytes and that is 106496 bits, so 106496 digits with two possible states. That sounds like too much, but if you are into computers, you’ll know that size is nowadays ridiculous. For instance, my CV in PDF is 264KB, a random chat voice of 20 seconds that I sent through Telegram is 47.4KB, this photo on the left of Ginger (that has already bad quality) is 87.6 KB… the right one is about 12.2KB, so imagine to fit a full game in there:

So, what I’m trying to say is that this Jam is a real challenge 🙂 but that’s the point of a Jam, right?

Planning a 13KB game

As a summary, this is the key list of thing you have to take into account:

• 13KB of zipped file.
• 1 Month.
• Theme of the year: Back (2019).
• Valid languages and technologies: JS, HTML5 and CSS.
• Libraries are permitted, but you need to add them into the project, you cannot use online third-parties.
• Categories: Desktop, Mobile, Webxr (virtual reality) and Web Monetization.

The first thing you need to decide is the category that you are aiming for, depending on that you can change a lot your mindset of your game, the mechanics and so on. You can do a multi-platform game of course, but I’d prefer to keep things simple as we have high restrictions in size and time.

Secondly, think about the theme and how can you apply it to your game. Again, don’t over complicate things here as you don’t have the enough space to build a big story. A good tip on this is to just search the theme word in Google and inspire yourself just by looking the several meanings that the word has. In my case, I decided to use a phrasal verb to guide the whole game development: Lights Back On. The title was my keystone to develop all the graphics, sounds, even the gameplay.

Lastly, meditate about what technologies you want to use. There are not so many possibilities, but you can still look for a really light-weight library game engine or you can use TypeScript for the development (just bear in mind that you need to compile the project in JS when it’s done).

Check the rest of the rules carefully and create a working plan to tackle the project. You can use free tools like Trello to organize your working items during the month.

Reducing the size of your game

Assets

Assets will be your main problem if you don’t think how to efficiently use them.

• Images: I’d use already compressed image format as PNG. With a image editor as Gimp or Photoshop, you can compress your image until you think is reasonable.
• Backgrounds: instead of creating big images, you can generate your maps by code with simple assets. Take a look at canvas element of HTML5, you can use it to draw multiple elements of your world. I also used Tiled to easily generate maps and export them later into XML files, doing so you can render complex backgrounds with 2 or 3 simple PNG images.
• Sounds: I used simple MP3 with a high level of compression, this online tool can help you to do that. Try to use samples in a loop to compose more complex music, in this way you’ll earn more space.

You’ll need to keep in eye in the size of all your assets while your game grow and, sometimes, there will be some sacrifices in your way. Be brave and remove those extra resources, there is always a way to make a playable game with less assets.

Code

Normally, it’s not the code what is size-expensive, but when playing with only 13K even the code can cause you some trouble. Luckily, you can reduce the size of your code easily with these tricks:

• Minify: compressing your code is simple if you minify it, there are several webs where you can just copy and paste your code and it’ll generate the reduced file. In my case, I used Closure Compiler by Google that you can access from this page. Notice that there are several modes of optimization, use whichever you want (the simple one works like a charm!).
• Obfuscation: with this process you can make your code unintelligible, something that is not useful for a GameJam. The real advantage of this is that some obfuscation tools offers a decent level of compression of the code. There are also several pages where you can do it online, check them and decide if it’s worth for you.
• Procedural generation: there are other techniques that you can use to reduce the size of your final files, one of them is procedural generation. With this technique you can generate different kinds of content for your game and it can enhance the gameplay due it’s randomness nature.

Zipping

There are no miracles here, but you can always use the best algorithms of compressions to scratch every bite you can. To make it clear, the file should has a .zip extension and it should be unzippable in any platform. You can standard tools as WinZip or 7-Zip with the best compression options. Do this often at least to check that you can still adding stuff to your game or not.

Resources

In the page of js13kGames you can find a section of resources. Those utilities where added year by year in each competition and were tested by the own participants. Believe me when I say that most of the resources are extremely useful and it’s worth to spend some time just exploring them. You will find from engines and resources to tutorials and post-mortens of past years.

My Experience: Lights Back On

Lights Back On was my game entry for 2019. It’s a 2D platform with elements of memorization and skill. The idea is that you have the mission of reaching the fuse to get the lights back. You’ll play the level in the darkness, but you’ll have a lamp that you can use it once.

It was the first time that I was participating alone in a GameJam (well, that’s not technically correct, because my girlfriend was helping me with some assets) and I was really busy during that month, even I had to travel one week for work, but in general I’m really proud of what I could achieve during that time.

In terms of difficulty, I was surprised with the power of the standard elements that HTML5 offers. I didn’t start the project from scratch, but I used some code as an engine to implement the basic physics. Then, it was a matter of adding my own mechanics, designing the levels, creating the assets and compress everything as much as possible.

You can check out my game in Github, where you can find the Post-morten post in the Readme file. Also, you can play the game in Itch.io or directly from the js13kGameJam page.