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
Tee hee, Happy Christmas Paaaaaaatrick xx