Skip to main content

HTML5 Game Case Study

Animated Parrots and CreateJS

An HTML5 game focused on phonics for the primary education market.

Image of animated parrot on createjs canvas

Game Features

Engaging Features, Engaging Game

From the interactive phoneme frame through to the colourful backgrounds and animated characters. This game has a tonne of nice features to engage the minds of the target audience - Key Stage 1 in the UK.

Image of html5 game in action
icon of checkmark

Interactive virtual phoneme frame

icon of checkmark

Engaging sound effects

icon of checkmark

Plays on all devices from tablets to interactive whiteboards

icon of checkmark

Colourful animated characters

icon of checkmark

Draggable letters with sounds

icon of checkmark

Undo last previous option

icon of checkmark

Scoreboard tracks progress

icon of checkmark

Instructional screen

icon of checkmark

Repeat game functionality

icon of checkmark

Set words from variables for easy replication

icon of checkmark

Uses CreateJS javascript library

I am a big fan of the HTML5 CreateJS javascript framework. I’ve built a ton of content using it. Including this latest game that focuses on phonics for the primary education market.

As well as reviewing the game, I’d like to discuss, briefly, CreateJS and its current status. And outline, what tools we might explore next… if at all.

Yes, this 2D game has animated parrots! Hence the title! Let’s explore more about this game.

1. The learning aim

The game supports the teaching of phonics in the classroom. Specifically, the teaching of vowel digraphs. Our parrot, Mango, is feeling tired but still wants to go flying! Spell the words and her friends will take her for a spin through the skies.

It also has some other great features. Including…

2. The virtual phoneme frame

I’m especially pleased with the outcome with the phoneme frame. ‘What is a phoneme frame?’ I hear you ask. It’s a physical tool used in classrooms, particularly in the UK. Children can use it to create words by placing letters (or better to say ‘phonemes’) on it.I wanted to create a virtual phoneme frame.

It had to be centre stage and take up most of the game. Big and bold… Tick! Achieved! As you can see, it dominates the game. I hate ed games where the learning is blurred by developers focusing on the arcade aspect too much.

It had to be animated! Tick! Achieved! Each element of the phoneme frame animates into position. Phonemes are dragged to it and any phonemes undone fly away to their original position.

It had to have sounds! I wanted the phonemes dragged into the frame to be audible. So when the child drags the phoneme into the frame, the draggable object says the sound. Also, once the sound is inside the frame then the user can click the sound again to confirm their choice.

It had to have clues to help the children get their phonics right! Tick! Achieved! I wanted the virtual phoneme frame to provide hints on which phoneme to place. I did this using different heights, widths and how it was placed on the line.This is harder than you might think!

It all had to line up on the line! Children need to know where letters sit in relation to the line. Very important for writing skills. So I wanted the virtual frame to be pixel perfect when placing letters.

3. The animated characters

As with all our games there are animated characters in them.

This game includes:

  • Mango the parrot: who hops, sits, and achieves a variety of expression through her wings and face!
  • Mango’s friends: lucky parrot! She has a heap of friends who are quite happy to lift her basket up into the sky.
  • Background: To show the height achieved by flying with her friends, the backgrounds are animated.
  • Undo bee: Just buzzing for this game… sometimes, loops the loop but only when feeling like it!

4. Buttons and banners!

Please note the nicely drawn banners throughout the game that are crafted from leaves and twigs!

It also has…

  • Bright background with great use of gradients
  • Rounds
  • A nice set of UI sound effects
  • Scoring

You can check out the game here

5. The javascript framework discussion

There are quite a few javascript frameworks for controlling the canvas tag. These include:

  • CreateJS - the one that this game uses
  • PhaserJS
  • PixiJS
  • … and there are more out there

CreateJS is a mature option and certainly does everything that I need it to do. The only issue I have with it is this… the [original] development team have moved on. Many argue that CreateJS is so well evolved it doesn’t need any further development… But, I feel the problem is that browser tech is moving at a fast pace. There could be bugs that arise in the future associated with new browsers… will it still perform?

The alternative is to jump ship to one of the other js frameworks. I really love CreateJS and would hate to leave. Since, I would need to re-tool somewhat.But I also need to safeguard the content of my clients and mine.

Probably time to explore other options and see how complex migration is. But I’m in no rush!

If you want to know more HTML5 2D games for education then please contact us.

Image of guiding lighthouse

Helping you navigate the complex world of web and apps

Helpful guidance, profitable solutions

Get started on a project with Pendigital