Although Goblin Tower 13k has already been submitted into Steem Monsters + Js13kGames jams, I would like to present how it was done from scratch. Project is maintained in spirit of free and open-source software. Anybody can look into the code and investigate last weeks development progress.
https://github.com/mys/goblin-tower-13k
Two Game Jams at once
Luckily there were 2 interesting competitions that started in the same time. They are Steem Monsters Invitational and Js13kGames HTML5 and Javascript Game Development Competition in just 13 kB.
Steem Monsters Game Jam is one week competition where developers create a game in theme of Splinterlands and card game characters.
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. It lasts for 4 weeks.
I have decided to create simple minigame that could fit in both challenges. Let it be my own challenge to do so ;)
Requirements I had set
Goblin Tower 13k should be a clone of an old retro game called Xjump / Icy Tower. 2D platform game where player jumps up through the platforms to get as high as possible.
Main character is Goblin (Sorcerer). He travels through changing levels of Splinterworlds and meets other characters from Steem Monsters world. To fit the 13kB file size restriction, its graphics should be low-resolution and pixelized in the "feel" of retro-game. Codebase is pure HTML5+Javascript.
ETA: 1-2 weeks.
Game engine
During research I had dilemma whether should I create my own game engine or use existing one. Finally realized that there is no time to think about engines and chosed kontra.js as as base. There is good presentation about the statement "Coding own game engine is the worst idea in the world" by Michał Budzyński. Author says we should decide if we want to make game engine OR make a game.
Kontra.js is lightweight JavaScript gaming micro-library created specifically for game jams like Js13kGames. Sounds perfect to me.
What kontra.js gives me at start:
- game loop with 60 fps
- game sprites, assets and vector usage
- sprite sheet and animation
- buildin collisions between objects
- keyboard control
Scene composition
There are 3 scenes in the game: Main menu, Credits menu and Game scene.
Let's partition the game scene, because it is where the user plays. Game scene is composed of objects (sprites) where each of it has its own parameters, if needed. In each frame whole screen is being redrawn in order: background, walls, platforms, character, monsters and text labels. It is worth to mention there are 60 frames per second being rendered. Everything is painted on <canvas> board.
Game logic
With created object sprites all I needed was to connect them with logic physics and reactions.
Also camera speed, score system and random generations 12 parts.
Graphics generation
Low resolution sprites
To achieve small file size of the game, most of the graphics should be generated in realtime. However I wanted to use some of the monsters low-resolution sprites to achieve Steem Monsters theme. Few days before deadline 
 |  |  |
|---|---|---|
 |  |
Main character is small green Goblin. The art was taken from opengameart.org authored by Stephen "Redshrike" Challener under CC-By license.
 |  |  |
|---|---|---|
 |  |  |
This is set of my own drawings. They are 16x16 px platform blocks for each of Splinterlands. Sticked together they form groundline.
Pixel font and dualism effect
For this type of retro game I wanted to use pixelized font. However I couldn't use any external .ttf file because their size weights kilobytes even up to megabytes! Luckily there exists library for drawing PixelFont point by point on canvas. Additionally it lengths only 300 hundred lines. With compression should be what I need.
At above screenshot there are 2 different sizes set. By drawing two text labels with offset by 1-2 pixels, we get nice looking shadow.
Take a look at second text line. By using odd size of "font" at low-resolution canvas we get some kind of filter raised on the letters.
Generating bricks and dithered background
Same filtering technique appears at drawing walls "bricks". In fact they are just double-rendered rectangles with offset by 1-2 pixels. Low resolution gives us illusion of fugue between cells.
Background dithering is rendered simple close. Firstly a color of Splinterland's color is being drawn(). Then each pixel line's brightness is lowered down by manipulation of hex color. This technique let us render very beautil things. People of demoscene art are masters of it :)
Crisp pixel
There is one gimmick that should be used when drawing retro pixel art games. Modern browsers are blurring low-resolution images if upscaled by default. This should be turned off if we want to achieve 'pixelized' mood.
https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look
Code needed to apply in canvas css style:
canvas {
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-crisp-edges;
image-rendering: pixelated;
image-rendering: crisp-edges;
}
13 kilobyte size restriction
Going under 13312 bytes distribution size (compressed, uh!) is tough restriction.
Js13kGames standard allows to minify and compress source code files. However it has to be done properly to maximize results. For help comes gulpfile.js configuration. While building game specific actions does compress our code:
- minification of html/css/javascript files
- optimization of images
- compress to zip
- verify if we exceed 13*1024 size
> gulp build
[21:49:58] Using gulpfile /gulpfile.js
[21:49:58] Starting 'build'...
[21:49:58] Starting 'cleanDist'...
[21:49:58] Finished 'cleanDist' after 60 ms
[21:49:58] Starting 'buildHTML'...
[21:49:58] Starting 'buildCSS'...
[21:49:58] Starting 'buildJS'...
[21:49:58] Starting 'copySounds'...
[21:49:58] Starting 'optimizeImages'...
[21:49:58] Finished 'buildCSS' after 549 ms
[21:49:58] Finished 'copySounds' after 575 ms
[21:49:58] Finished 'buildHTML' after 608 ms
[21:50:00] Finished 'buildJS' after 2.66 s
[21:50:01] gulp-imagemin: Minified 12 images (saved 5.23 kB - 51.5%)
[21:50:01] Finished 'optimizeImages' after 2.92 s
[21:50:01] Starting 'zip'...
[21:50:01] Size of game.zip: 13 KB
[21:50:01] Finished 'zip' after 88 ms
[21:50:01] Finished 'build' after 3.08 s
> stat zip/game.zip
File: 'zip/game.zip'
Size: 13312 Blocks: 32 IO Block: 4096 regular file
Exactly 13312 bytes length. Perfect!
What could be done better
The contest ended and my project reached perfect 13kB size so I take it as finished. Especially that Steem Monsters Game Jam closed 2 days ago. However if I had more time, could consider trying to work at below:
- compose more efficient wav sound
- draw even lower resolution monster sprites to pack more of them
- merge sprites into one image
- optimize text labels drawing
- reorganize javascript code for better minification and compression
- after done above, add new effects, features, scenes or even simple music
Gameplay
The game is playable under GitHub pages link:
https://mys.github.io/goblin-tower-13k/
Source code history
The game has beed done in <2 weeks. Every commit is verifiable.
https://github.com/mys/goblin-tower-13k/commits/master
Links
- GitHub repository https://github.com/mys/goblin-tower-13k
- GitHub commits https://github.com/mys/goblin-tower-13k/commits/master
- GitHub game https://mys.github.io/goblin-tower-13k/
- zipped 13kB archive https://github.com/mys/goblin-tower-13k/blob/master/zip/game.zip