As you may know, the third edition of the js13kGames competition is here: the official start is set for August 13th, 13:00 CEST. Js13kGames is a competition for HTML5 game developers where the fun and challenging part of the compo is keeping your entire game under 13KB.
This article should be a great starting point if you want to learn how to generate the assets, and minify and compress the code, so you can meet the requirements for the competition. I'll also provide you with tools that can help you in your day-to-day projects if you need to keep your resources light.
What Exactly is the js13kGames Competition?
The js13kGames competition is dedicated to the HTML5 game developers and JavaScript programmers who want to test their skills in battle with other developers, follow the rules, stick to the deadline, and win some prizes. The competition runs from August 13th till September 13th—you have the whole month to code and submit your entry. No external libraries or resources like Google Fonts are allowed, though; everything you want to use in your game must fit into 13 kilobytes of a ZIP package. The competition is free for all, but the source code has to be hosted on GitHub so that others can learn from it in the future.
The 13 kilobyte limit is very restrictive, but limitations often spawn creativity: you have to carefully think about how to implement your ideas, as every byte really counts.
Why Take Part?
The main purpose of the compo is fun. The deadline helps to keep it fun, because you have to end the project at some point and can't keep slaving away at it forever.
Taking part in the competition improves your skill, helps you manage your time spent on the project, and gives you the opportunity to cooperate with the community. Plus there's a chance you can win lots of interesting prizes, become well known, and eventually earn a bucket load of money being a game developer. What else do you need?
Tips and Tricks
Let's go through the specific tips and tricks you can use to minify your game's source code and all the assets used, from JavaScript minification, through cutting image sizes, to procedural level and audio generation.
General Tips
You have a whole month to code your game, so you don't have to spend sleepless nights through the weekend drinking coffee and energy drinks to compete with others. You can work at your own pace, whenever you have the time and whenever you feel like it.
Due to the tight restrictions on the size of the final package, it's almost impossible to use any framework. Of course, if you can prepare a small set of helper functions that will fit into the 13 kilobyte limit, you're more than welcome to do that.
The same goes with the images—screenshots of the games are often bigger than the games themselves, so you have to be smart. You'll probably generate everything on your own anyway, or use very small, compressed assets; that's the best way to fit the whole game into the size limit.
JavaScript Code Minification
The main core of your JavaScript game is the source code—you may be able to generate absolutely everything, without using any other resources like images or sounds, so optimizing this code is very important.
The easiest thing to do is to minify the code, which means it will be stripped of whitespace (tabs, spaces, newlines, and so on), without the code itself being changed.
You can take this further by using other tools that will modify your original source code to compress its size as much as possible, by using shorter variable names and other such tricks. As a side effect, these tools will also hide the source code and make it unreadable—called obfuscation. One of the main competition rules is that you have to have a readable version of your submission on GitHub anyway, so squeezing every byte by making the code in the zipped package unreadable is totally fine.
Tools like Google Closure Compiler, YUI Compressor or UglifyJS, and online services like Compressor Rater, JSMini or JSObfuscate, can help you compress your code as much as possible. Use them to your advantage.
Image Compression
There won't be many image files in your game if you want to fit it into 13 kilobytes, but still, if you want to use an image you'll have to compress it as much as possible. There are online tools like TinyPNG and Optimizilla, installable applications like ImageOptim, command line tools, and build scripts to do that, so you'll be able to find something to fit your workflow.
You could also code your game in low resolution with small images and then scale everything up, or throw away all the images and generate everything on the canvas from scratch.
Procedural Level Generation
Given the limited space available, it would be wise to think about randomizing the levels in your game. The best way to keep the high replay value of your game is to generate your levels procedurally, so that instead of having one or two fixed levels, you can deliver a different experience each time the game is played.
The best examples in that category are roguelikes that use mazes and dungeons for their levels. You can generate a vast world from only a few small pieces, and it can be different every time you start the game. Thanks to this approach, your players won't get bored too quickly.
![]()
Game DesignCreate a Procedurally Generated Dungeon Cave System![]()
ImplementationHow to Use BSP Trees to Generate Game Maps![]()
ImplementationBake Your Own 3D Dungeons With Procedural Recipes![]()
ImplementationGenerate Random Cave Levels Using Cellular Automata
Audio generation
Adding audio to your game boosts the overall experience, but with songs typically weighing in at 5MB or more, how can you fit any into your js13k entry? Jsfxr to the rescue!
Instead of shrinking an MP3, you can generate your own music and sound effects. Jsfxr is a JavaScript port of the sfxr library, and was widely used by the participants of last year's competition, which means it's battle tested and gives great results.
Build System
Beside the tools already mentioned, you can help yourself by automating some of the tasks you have; build systems like Grunt or Gulp can make preparing all your assets much easier.
If you're a fan of Gulp, there's a whole variety of build tasks to pick from: Jack Rugile suggests a Gulp combo of gulp-uglify + gulp-htmlmin + gulp-zip + gulp-filesize while Csaba Csecskedi addsgulp-imagemin to this collection. You don't have to use it if you're not feeling comfortable with Gulp or just want to work the good old way, but this set can greatly improve your overall workflow for your js13kGames entry.
Boilerplate Code
The only structural requirement beside the size limit is that you must have the index.html file in the main directory of the package—everything else is optional. You can structure your code how you like, include folders for JavaScript, CSS and image files separately, or just put everything inside the HTML file and forget about everything else. You can do everything by hand, or use browserify, enhance your CSS using LESS or SASS, or even lint your code with ESLint. (That's what Florent Cailhol prepared in his experimental js13k boilerplate repository on GitHub.) Again: this could all help you, but none of it is required.
Choose the Right Type of Game
This might be obvious, but don't forget about carefully choosing a suitable type of game to fit in 13 kilobytes, because some of the games are harder to build (and to keep small) than others. I'm not saying you can't create a 3D first person shooter, real time strategy, city simulator, 3D racing game, traffic lights manager, or even jogging naked yellow block game like some crazy developers did in past years, but the vast majority of the entries are about simple games with one core mechanic that you wrap your game around, some generated images, and sometimes simple sound.
Remember that finishing anything is better than having a huge, unfinished project that people will never see. Follow the One Game a Month initiative, stick to the deadline and try to finish your entry in time. Keep it small in scope as well as size; if you're happy with the working prototype and have some free space available, you can always add new features to the game later on. Polish your project as much as possible and you'll be able to win the competition by building games like SpacePi or Radius Raid.
Learn From Others
These are the basic tips and techniques that can help you code your game for the js13kGames competition—but you don't have to use them. There are many tools you can use in your game to keep it in the size limit; it depends on your preferences. If you don't have any experience, though, the best thing to do is to learn from others.
You can check the source code of the entries from the previousyears, play the games and see what's possible within the limit, dig through the blog posts explaining people's experiences, and read their source code and learn from it. Ask questions through social media, discuss your ideas and problems with others. That's the beauty of a competition—you're not alone; you can cooperate with others, form teams, and level up your skills in no time.
Summary
All the tools and services listed in this article should help you prepare for the js13kGames competition. It is important to not fix your attention on the tools alone; you should also look at what others are doing, learn from their experiences, and be part of the community.
If you have different ways to prepare yourself for the competition, please share them in the comments! Let's all benefit, learn and help each other. After all, the competition was started to be fun and entertaining, with a little bit of learning along the way.
Resources
Check out these additional resources for the competition:
- 13 simple steps to create a compo slides from onGameStart 2012
- Arcade Audio for js13kGames by Jack Rugile
- Triskaidekaphobia, a game created to promote js13kGames
- Official rules and requirements
- List of this year's judges and prizes
- Entries from 2012 and 2013
- Gamedev.js Weekly newsletter with compo updates
- Twitter hashtags: #js13k or #js13kGames
- Other initiatives worth mentioning: js1k, Ludum Dare, 1GAM
- Find jams and competitions: compohub.net, indiegamejams.com
