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 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
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.
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.
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.
- ImplementationHow to Use BSP Trees to Generate Game MapsTimothy Hely
- Procedural Content GenerationCreate a Procedurally Generated Dungeon Cave SystemCaptainKraft
- ImplementationGenerate Random Cave Levels Using Cellular AutomataMichael Cook
- ImplementationBake Your Own 3D Dungeons With Procedural RecipesMarcin Seredynski
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!
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 adds
gulp-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.
The only structural requirement beside the size limit is that you must have the
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 previous years, 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.
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.
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