Staccato, the making of

Staccato was my contribution to the 2013 edition of js13kgames. It ranked #8 in the desktop category. This series of articles describe how it was made and the inner workings of the game.

Overview and context

The initial sources of inspiration were Supercars and Skidmarks and my intent was to create a challenging yet permissive, top-view racing game with an oldschool feeling. Failing to get a bend right should not spoil the fun. Seeing that back from now, I reckon that the simulation sacrificed a bit too much to realism, steering gets a while to master and you need to seriously slam on the brakes before any bend to avoid skidding (managing your way through a sharp turn at 180 km/h is so arcade anyway ...)

So, the starting point is a top-view racing game, with bridges and underpasses. Every single track in Supercars crossed itself at least once, and it gave a special feeling to the game. This feature was a must-have for me, and it took many additional lines of code and a couple headaches to manage properly. The game had to offer several short tracks, at least four of them, and each race should not last more than a few minutes. The genre should definitely be arcade rather than simulation, meaning that the learning curve has to be as flat as possible : grab the controls, wait for the green light, floor it. Since I mention the controls, as a user of a non-english keyboard, I am quite upset each time a game relies on WASD with no possibility to change those. The keys therefore had to be customizable.

Lower on the feature list came car add-ons such as missiles, nitro, traps on the road, stuff for the scenery such as rocks, buildings, extra cars ... 13kb was the limit and it ended up being very close to earth. At that point, I only had a faint - and incorrect - idea of what would fit into that cramped space.

A design constraint - I wanted the code to strictly follow the MVC (Model - View - Controller) pattern, this actually saved me time making refactors and changes easier. The articles will also keep to that order, as some elements of the game are needed to understand others.

1. Track model, timing
2. Car Physics
3. CPU cars
4. Collisions
5. Rendering : 2D vs WebGL, context layering
6. Rendering : preparing geometry
7. Rendering : matrices, shaders, texture atlas
8. Application loop