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.
Interactive virtual phoneme frame
Engaging sound effects
Plays on all devices from tablets to interactive whiteboards
Colourful animated characters
Draggable letters with sounds
Undo last previous option
Scoreboard tracks progress
Instructional screen
Repeat game functionality
Set words from variables for easy replication
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.
