KROOG - @Js13kGames entry

Posted on September 2, 2012 | 4 minute read

My game for Js13kGames is finally complete. Well, complete in the sense that I’m just about ready to submit it, not in the sense that it’s actually submitted because I’m going to get you guys to be my lab rats (hopefully) and give me some feedback (especially on bugs and performance. That would be great).

The game is called KROOG (Russian for “circle”) and can be played at http://liza.io/KROOG

Here’s a (fast forwarded in the middle) video:

http://www.youtube.com/watch?v=zv6dr2av71w≈=%2526fmt%3D22

The GitHub repository with commented code can be found here.

I’m sure I’ve got some pretty blatant bad practices and inefficiencies in the code, which is why I’m especially curious about how this runs on different browsers. Someone said that key presses were not registering for them in Safari, but I wasn’t able to reproduce this on my Mac. The thing is I’ve been staring at this thing for so long that I don’t even know what’s what anymore.

The idea

I heard about the Js13kGames challenge on the 14th of August, on the train, when Daniel mentioned it to me. I wasn’t going to partake, but figured what the heck. It’ll be fun and how long could a 13kb game possibly take to make?

I had a simple idea (“What if you’re a circle and you collect blue circles while avoiding red circles”) and the main mechanics done on the train (I wish I took screenshots, it looked completely different), and from there this thing that was only meant to take a few days dragged on for over three weeks.

The file size

The entire project, when minified and zipped up, can take up no more than 13kb. Originally I had a Twitter logo and two tiny sound effects , but they were taking up too much room. I ended up clumsily drawing the Twitter logo in canvas myself and used this super handy as3fxr synth port for the audio, getting rid of all media files. There was a bug of some sort with the sound at first, but thankfully the creator dealt with my confused Twitter musings about the issue (originally I thought I was doing something wrong) and fixed it straight away when he saw what was up (thanks!)

The testing

The process of letting people see the game and review it went something like this:

  • One person after a few days of work

  • A couple of other friends a couple of weeks later

  • /r/gamedev

  • Let’s Make Games showcase

  • Another group of programmers

  • A few Twitter people whose opinion I value

  • A few people at yesterday’s board game day

  • You

I got really great feedback and suggestions at every stage (/r/gamedev was the first “group” of people that I’d shown this to and they brought up some very valid thoughts and ideas).

Things I learned

About the process

  • 13kb is actually quite a lot of space for a game if you can manage to not use any images or audio files

  • Even if the main mechanics are done in a day, there is so much peripheral stuff that can drag the project on for weeks

  • Feedback is important, and feedback from different people. A pair of fresh eyes can see things that you don’t even notice anymore after staring at something for hours/days/weeks/whatever

About JavaScript

  • Making canvas resize on the fly to fit the browser dimensions

  • Generating random colors

  • HTML5 canvas gradients

  • Drawing shapes on canvas

  • Drawing two canvases on top of each other and refreshing relevant canvas

  • Making a game without an engine

  • Key binding

  • Detecting collision on HTML5 canvas arcs

  • Saving and restoring canvas drawing states (granted I did this in a really makeshift trial and error way)

  • And much, much more

I’m sure I’ll look back on this code a month from now and find a whole range of things that I should have done differently, and after a short JS break as I get into (attempting to) learn C++ I plan to go back and work on this some more, polish it up, etc.

This concludes our broadcast. The rest of the night is dedicated to Guild Wars 2.




Categories:game dev dev games
comments powered by Disqus