My 8 Week Game Entry!


For the last 8 weeks I’ve been beavering away on a game to enter into the 8 week game competition! The last one (back in 2010) I won! (with Manic Spaceman, a Manic Miner clone, set in.. you guessed it… space)! So the pressure is on this time round with more competitors, some of which have experience in the games industry.

You can try out “The Distant Future (The Year 2000)” Here!

As last time, I had the choice of either XNA windows game, or a browser based html5/javascript/canvas effort- I went for the latter. I decided to make a game in the vein of the original classic Syndicate from the Amiga made by bullfrog. The competition states you have to do all the coding yourself, but other assets are up to you, which is great because I suck at trying to draw little people and animate them; so I managed to get the original sprites from Syndicate, along with some sound effects- for the levels I decided to use real cities, suing imagery from Bing Maps (which, to my surprise, were actually much better than the Google maps photography). I built a very basic level editor using jQuery, knockout and EaselJS allowing me to define walkable and non-walkable regions, and also define where buildings were so my game could make the levels pseudo-3d, where your characters would appear to walk behind buildings and trees etc and produce JSON data which could be dropped into the main game. (You can have a play with that here, there’s not a great deal you can do with it to be honest, but it was a great help during development).

The game’s main mechanic, from a technical standpoint, is taking the flat 2d Bing Map and making it into a 3d city your guys can walk around. This is achieved by taking the buildings as defined in the level editor, then snipping those pieces of the map out and placing them onto a separate layer, then it’s just a matter of figuring out what order to draw everything in- should each little guy be in front of or behind each building- I think it’s quite effective at giving the illusion of depth, though could do with a little refining, given more time!

As a base for the game, unlike my last 8 week game where everything was written from scratch, I used the CreateJS set of libraries to underpin everything. This is a great set of open source libraries which covers a whole bunch of stuff but the parts I used were EaselJS for the canvas itself, SoundJS to handle html5 audio, and PreloadJS which handles the preloading of various assets. This made it a bit more of a level playing field with the XNA guys who have a lot of this great stuff built into the framework. I found create js to be a great library, abstracting out lots of repetitive bits of code which are boring to write, but while still letting you manipulate the canvas directly when you need to. (EaselJS in particular has some great bitmap caching features in there too which let you dynamically build up textures as you go which I put to good use with the blood splatters and bullet holes!)

Getting the guys to find their way round the city proved quite complex- I used Dijkstra’s algorithm for this which used my array of non-walkable regions built in the level editor as the node graph and calculates the shortest region. I actually ported some code from C to JavaScript for this- the original being written by Darel Finley and had to make some adjustments to allow it to read from my data structures. This also proved to be quite an expensive calculation which would freeze the browser for a moment so I employed Web Workers, which are new to HTML5 and effectively bring threading to JavaScript for the first time, which solved this issue.

Everything else was pretty straight forward- the interface is all built with HTML5/ CSS/ jQuery and utilises a class I wrote called layout manager which reshuffles all the little grey boxes to fit together when they all change size. I also reused my Mini Map class to generate the level previews you see on the briefing screen.

The competition is judged by voting on the Facebook event page which is open to the general public next week- 11th Feb 2013 onwards. You can check out the competition details and the other entries on the Facebook page found at www.facebook.com/events/165946213543847

  1. No comments yet.
(will not be published)