Blog: Post

Hi and a Happy Festive Season to you!

I hope you’ve had a great Christmas and managed to avoid eating quite as much as I have (did someone say “January detox”? No? Just my conscience? Ah…).

I thought I’d share with you a little game I made for friends and family to say “HAPPY CHRISTMAS” at this time of year:

How to Play It

You need to move Ernie Elf left and right along a platform, in order to catch falling letters. Each letter you collect is added to a special festive message written along the bottom of the screen. Avoid the bombs or you have to start again!

Some Thoughts on Making the Game…

Before I set off on this project over the weekend, I wanted to make sure I created a cross between an eCard and a simple computer game. Something which:

• Was fun
• Was simple
• Looked cute
• Felt festive
• Could be personalised

I also wanted to make something purely using JavaScript, so I could build on what I’d learned and developed at Seb Lee-Deslisle’s brilliant CreativeJS workshop last week and really get comfortable doing HTML5 games.

So that’s what I set out to do. The graphics were all drawn in Illustrator using my trusty Wacom Cintiq to create a hand-drawn yet vectorised/cute feel to them before exporting out to PNG/JPEG. The sounds were, uh, improvised by me (with apologies and thanks to Chris Rea). The code was 100% JavaScript. No Flash to be seen on this occasion, which was quite daunting, but really quite interesting!

I built on a number of the things learned on the CreativeJS course, but the key elements were the particle systems I created to generate the snow effect and the falling/caught snow balls / bombs. I performed some funky text-string-to-object-array manipulation to create the snow balls / letters, plus various object states and a “waiting to fall” array (thanks Seb for the tip!) to easily manage those snow balls caught, falling and neither falling or caught.

The text-string-to-object-array code allowed me to easily edit the letters in the snow balls being collected just by editing a single string variable. This meant I could easily make special versions for family members, which was a key intention in the first place. In fact, I went as far as adding a sneaky bit of PHP so that the JavaScript code never had to be altered. I’m such a nerd.

Graphics-wise, there were various smoothing/easing techniques used to make sure everything on screen always had a fluid/smooth feel to it – I wanted it to feel “alive”:

• When the bomb blows up, each on-screen snowball jettisons to the top of the screen (rather than just vanishing).
• When a snow ball is caught, it “slides” into place in the message at the bottom.
• When all snow balls are caught, they slide to the top half of the screen and the background smoothly moves down to reveal the sky.
• The snow balls gently sway once caught, using some simple yet effective Sine wave calculations.
• Ernie Elf has a smooth bobbing motion as he’s moved across the screen, again using Sine/Cosine waves.

I’ll be talking more about the use of Sine/Cosine in making pleasant movements in a future post. It’ll be about platforms. There will be trig. Bring a bean bag.

And sounds? Urrrrgh, sounds:

The sounds use the basic HTML5 Audio class, and works in IE/FF/Chrome at least. HTML5 audio is a mess, so it probably won’t work everywhere (what sort of class returns “Maybe” or “Probably” when being asked “Do you support this audio format?”. Clearly a standardised audio codec/format is FAR too much to ask.).

Well, that was a LOT of random waffling and not much detail. But don’t worry: in future, I’ll be talking more about specific cool things in terms of game coding, development and theory.

But for now I’m going to go back to nursing my food-baby.

Happy Chrimbo Time and I hope you enjoyed the game!

Toodles,

FPat