A Christmas Game Built With Impact

It’s that time of the year again. I thought I’d celebrate by making my first foray into the world of HTML5 games development by putting together a quick Christmas game.

I first looked around for a suitable JavaScript game framework. Certainly it’s possible to write a game from the ground up, but why reinvent the wheel? Most programmers approaching the development of a new website would rather start with an established framework like John Resig’s excellent jQuery library than expend hours of effort developing their own cross-browser approach. Why should games development be any different?

Having surveyed the numerous libraries out there, I opted for Impact. This is not free, but it does seem well supported, with a large, active user base. Impact sets up a canvas and a set of entities and establishes a game loop, which consists of an update phase, in which entities are updated based on player input or the physics model, and a draw phase in which they are positioned on the canvas in the correct z-order. This will be familiar to anyone who has worked with other game libraries or frameworks. Having this core functionality allows you to focus your time and energy on building the game mechanics.

This game was only really intended as a means of learning more about HTML5 games development and as a bit of silly fun for family and friends. The concept was simple one – to stage a snowball fight with Santa’s elves. Here’s a screenshot of the game in action:


Impact also comes with an excellent tool called Weltmeister, for building levels. As this game is not level based but based around a single background, I didn’t have need for it on this occasion, but I may explore it for a future post.

Impact comes with several example games, so getting a feel for how the library is used did not take too long. The first real technical issue I had to solve was the snowballs. The snowballs that are thrown by the player need to look like they are flying into the screen. Correspondingly the snowballs thrown by the elves need to look like they are flying out towards the player. My first thoughts on how to do this were by scaling the snowball sprite as it flies. Impact allows you to set a scale for the entire game, but there didn’t seem to be a built in way of scaling individual entities. Fortunately, because Impact uses a pseudo class structure, you can override the inherited draw method for each entity. Furthermore, in the draw method you can safely manipulate the canvas drawing context directly, as long as it is saved before you make changes and then restored before the draw function returns. I was able to use this to directly change the canvas scale before drawing the snowball entity:

This worked well. The next surprise was that Impact has no button class, but having seen that Impact can co-exist quite happily with code that writes directly to the canvas, I used a similar approach to draw outlines for buttons.

Because the snowballs appear to move in and out of the screen, one thing I had to be careful of with this game was z-ordering. Once an elf had thrown a snowball, I needed this to remain above other entities, even those that are subsequently added to the scene. Impact keeps track of live entities in an array. Any new entities that are spawned are simply pushed to the end of the array. During the draw routine the array is iterated in order, so the last entities added are the last to be drawn and appear above the other entities. However, it is possible to give each entity a z-order and then re-sort the array by z-order during the update phase. This is exactly the approach I took initially – I would give the elf snowball an arbitrarily high z-order and then call the function to re-sort the array. This seemed to work fine, until I tested it on Google Chrome. For some reason, Chrome does not like that sort function at all – sprites would flicker, disappear and appear for no apparent reason.

The solution was, once again, to implement some custom behaviour. So I implemented my own mini-sort that simply looks for the elf snowball in the array, snips it out of it’s current position (if it’s not already the last element) and pushes it back to the top of the array. It’s a testament to how robust Impact is that it tolerated this “interference” without any problems.

Well here’s wishing everybody a merry Christmas and a Happy New Year and if you’d like to try it, here’s a link to the game.

This entry was posted in Games, HTML5 and tagged , , , , . Bookmark the permalink.

One Response to "A Christmas Game Built With Impact"

Leave a reply