Game Developer Case Study

I particularly loved making this HTML5 game. I ported it from Flash for use on mobile tech. Thousands of children have already played it on all kinds of devices. This includes Chrome books (the preferred machine for schools now?), iPads and more.

So, what do I love about this game? In no particular order…

1. It's fun!

Zara the wildebeest is asleep and dreaming of becoming a wildenaut. Help her to spell her tricky words and she’ll explore space collecting space objects as she goes. Simples!

2. Meeting learning objectives

The HTML5 game helps support UK teachers meet the curriculum.

The user plays rounds of different tricky words to spell. Each round is composed of:

• Hearing and reading the word
• Then a chance to drag and drop letters to spell it correctly
• Then marked when the child feels the answer is correct

Throughout the round there’s a chance to undo the answers. An undobot robot helps you to undo any letters dragged to the wrong place accidentally.

Get the answer right and you zoom off through space. Get the answer wrong, and you’re given a chance to read and hear the word again.

3. Graphics

I created these in Adobe Animate. I remember taking particular care of each space object. I’m also especially proud of the background with some great use of gradients to achieve a night sky. The drawing tools of Adobe Animate are great - I much prefer them over Illustrator.

For information, I used Texture Packer to create the sprite sheets. It’s great software that takes the output from Animate and sorts the sheets and JSON for CreateJS. The latter being the JS framework that I used to create the game.

4. Animations

Simple animations that don’t dominate. Remember that this is a game for education! There needs to be a balance between the arcade side of things and learning. I.e. not too distracting.

So we have:

• Wildenaut: Zara flys through space with her animated JetPac finding randomised space objects. Probably inspired by the original ZX Spectum JetPac!
• Background: when the game starts the background animates into a space dream.
• UndoBot: A space robot that undoes the last answer, whilst animating.
• Fuel tank: Get the answers correct and you refuel.
• Letters: Letters tween into place for each word.

5. Scoring

The game keeps track of the rounds. There’s a scoreboard showing the user where their position is in the game.

Each round is auto-scored. The game detects when the round completes and then decides what to do next.

6. Sound

There’s all kinds of UI type sounds for clicks and drags. As well as some background ambience noise. All sounds are coming from .mp4 files and have a .ogg file for falling back to.

I use SoundJS to manage the sounds. Everything preloads before the game starts.

7. Customizable

It’s easy to extend the game to more words. It’s based on a set of configurable variables. In fact, on www.roythezebra.com, a Jekyll static site, all you have to do is edit the front matter variables.I.e. within the content management system of your choice.

8. Javascript framework

I built the game using the CreateJS javascript framework. This includes: EaselJS, PreloadJS, SoundJS and TweenJS. It’s a great framework to use to create content like this. PixiJS and PhaserJS could also have been used!Mental note: I would really like to try PixiJS.

9. Device compatibility and quick to load

You can play the game on many devices. This includes:

• iPads
• Chrome books
• Android tablets
• Desktops - PC and MAC
• And it’s also very happy on an interactive whiteboard

The game is quick to load too!

10. Amazon Web Services - AWS

To reduce the costs running this game. I host the assets in an S3 bucket on Amazon web services.

11. Play it here

You can play the game here. Remember to bring a 6-year-old to help! Have fun playing it.

If you’d like to discuss our coding services for HTML5 games then please don’t hesitate to get in contact.