Making a game in less than 13kb part 3 – final

This is the final part of how Shield Maiden was made. This was a really fun experience, really enjoyed making this game. My only regret was due to js13kGames and Ludum Dare  being the same month I had to split my time between the them. Really nothing I could do about it.

Now, back to the making of.

Music

This was the first item I worked. From my past experience, music can consume quite a lot of the precious 13 kb, so I researched for ways to generate the music at running time. I did found something really interesting, a post that claimed to use just 140 bytes to generate music. I was amazed! Music in just 140 bytes by evaluating functions. Spent a lot of time playing with this new knowledge and this was the thing that kept me interested. If music could be generated in only 140 bytes, 13kb was more than enough to make a full game!

I just added the player, hide it from the user and autostart it on load.

Sound Effects

As with music, having a file for each sound effect consumes a lot of precious space. Fortunately, Jack Rugile had already found a way around it by using as3fxr + jsfxr. By using as3fxr generated some sounds and saved them in a js object:

var sounds = {
 "test" : [0,,0.1812,,0.1349,0.4524,,0.2365,,,,,,0.0819,,,,,1,,,,,0.5],
 "start" : [0,,0.0911,0.4779,0.434,0.5016,,,,,,0.3504,0.6396,,,,,,1,,,,,0.5],
 "dirt" : [3,,0.1337,0.3709,0.0896,0.0379,,0.2476,,,,,,,,0.4619,0.1879,-0.1484,1,,,,,0.5],
 "hp" : [0,,0.3722,,0.407,0.3215,,0.4808,,,,,,0.2295,,0.6552,,,1,,,,,0.5],
 "horse" : [0,,0.3239,,0.4899,0.3072,,0.1272,,,,,,0.2305,,0.7536,,,1,,,,,0.5],
 "treasure": [1,,0.3429,,0.2116,0.2116,,0.2249,,,,,,,,,,,1,,,,,0.5],
 "enemy" : [1,,0.0919,,0.2654,0.5705,,-0.3563,,,,,,,,,,,1,,,,,0.5],
 "move" : [1,,0.0458,,0.1652,0.442,,0.1422,,,,,,,,,,,1,,,,,0.0]
}

Create the player:

var player = new Audio();
player.src = jsfxr(sounds.start);

And then just update the src with the desired sound effect and play it:

player.src = jsfxr(sounds.start);
 player.play();

Menus

After the main part of the game was made, it was time to make it look more like a regular game with an ending/starting screen. Not much space left and making a complete image for them was not feasible. I had to use in some way what I already had. I will use the same tiles to make pixel-like text. Used google docs spreadsheet to create the grid and “draw” on it:

Screen Shot 2014-09-17 at 9.41.08 PM

Exported then to CVS and formatted into a 2-D js array:

var shield_maiden_title = [[0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8],
 [0.8,0,0,0,0.8,0,0.8,0,0.8,0,0.8,0,0,0.8,0,0.8,0.8,0,0,0.8,0.8,0.8],
 [0.8,0,0.8,0.8,0.8,0,0.8,0,0.8,0,0.8,0,0.8,0.8,0,0.8,0.8,0,0.8,0,0.8,0.8],
 [0.8,0,0,0,0.8,0,0,0,0.8,0,0.8,0,0,0.8,0,0.8,0.8,0,0.8,0,0.8,0.8],
 [0.8,0.8,0.8,0,0.8,0,0.8,0,0.8,0,0.8,0,0.8,0.8,0,0.8,0.8,0,0.8,0,0.8,0.8],
 [0.8,0,0,0,0.8,0,0.8,0,0.8,0,0.8,0,0,0.8,0,0,0.8,0,0,0.8,0.8,0.8],
 [0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8],
 [0,0,0,0,0,0.8,0,0,0,0.8,0,0.8,0,0,0.8,0.8,0,0,0.8,0,0,0],
 [0,0.8,0,0.8,0,0.8,0,0.8,0,0.8,0,0.8,0,0.8,0,0.8,0,0.8,0.8,0,0.8,0],
 [0,0.8,0.8,0.8,0,0.8,0,0,0,0.8,0,0.8,0,0.8,0,0.8,0,0,0.8,0,0.8,0],
 [0,0.8,0.8,0.8,0,0.8,0,0.8,0,0.8,0,0.8,0,0.8,0,0.8,0,0.8,0.8,0,0.8,0],
 [0,0.8,0.8,0.8,0,0.8,0,0.8,0,0.8,0,0.8,0,0,0.8,0.8,0,0,0.8,0,0.8,0],
 [0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8],
 [0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8],
 [0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8,0.8]
 ];

Then draw the tiles just the same as the background and use the 2-d array as the alpha values:

for (var r = 0; r < canvas.height/tileSize; r++) {
   for (var c = 0; c < canvas.width/tileSize; c++) {
       var tile = hardWallIndex;
       var tileRow = (tile / imageNumTiles) | 0;
       var tileCol = (tile % imageNumTiles) | 0;
       ctx.drawImage(tilesetImage, (tileCol * tileSize), (tileRow * tileSize), tileSize, tileSize, ((c) * tileSize), ((r) * tileSize), tileSize, tileSize);
       ctx.fillStyle = "rgba(0, 0, 0,"+shield_maiden_title[r][c]+")";
       ctx.fillRect(c*tileSize, r*tileSize, tileSize, tileSize);
   }
}

Procedural World Generation

During the development of Shield Maiden found the awesome site jsfiddle. In this site you can write code, import libraries and run in the same page. It is great.

I had the idea of using cellular automata for cave type levels and found this. It was almost what I had in mind, so I read the code to understand how it worked and adapted it to what I required.


 

Participating in js13kGames was a great experience and I learned a lot. Having a whole month was a nice time frame to program with not a ton of pressure like most of the game jams I have participated. I did had fun and enjoyed showing friends and coworkers what can be made with just 13kb. Looking forward for the next year competition!

I hope this explanation on the parts that made up the game is a nice complement to the source code in my github. Also you can take a look at the game in the js13kgames site.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s