Boj – Twitchlet Frenzy

A fun, fast-paced kid’s game where players have to feed the right foods to as many hungry Twitchlets as possible before the timer runs out.

Originally a bonus game as part of larger Unity app Boj Smoothies, Twitchlet Frenzy was designed to be a quick fire round to challenge the player’s shape-matching and coordination skills. The game was so popular with the clients that they asked if we could replicate it as a HTML5 game to promote the app.

As the game was already built within Unity, the challenge was replicating the experience within the browser. We also wanted to reuse as much of the Unity assets and animation as possible.

Art assets weren’t a problem as they were straightforward images, but the animation was built using Spine2D, a program that outputs just the data and rig information and rebuilds it in a Unity runtime. As we were no longer using Unity, and the HTML5 engine we use doesn’t have support for Spine2D, it would mean re-animating large chunks of work.

Our solution was to simply build our own Spine2D runtime within CreateJS using Spine’s JavaScript API. This not only gave us a Spine runtime for future projects, but also means we can use the same animations between Unity and HTML5.

Boj-a-boom Music Maker

A fun music game for kids to experiment with instrument sounds and create their own musical medleys with preschool TV characters Boj, Mimi and Pops.

With most music games, the player lays down various instruments onto a grid while a character moves across the screen in time with the music. However, we wanted to design a game that epitomised the Boj brand and made the player feel like they were directing the characters in their own scene from an episode.

Bypassing the grid layout, we designed a game that saw the characters burrowing across the panning background of Giggly Park, popping above and below ground in time to play the instruments the player has laid out.

This design required lots of animation for all three characters while keeping the download size down, so we used Spine2D, a program that outputs just the data and rig information, and user our custom Spine renderer in CreateJS to output the animations onto a HTML5 canvas.

This allowed us to have as many animations we wanted without the large chunks of data that pre-rendered image sequences would have introduced. We also benefited from Spine’s ability to merge animations together at real time, allowing the characters to transition smoothly from instrument to instrument.

Toot – Wayne the Crane Game

A shape and colour matching game for kids, featured on the Toot the Tiny Tugboat website.

We were asked by Lupus Films to create a HTML5 game for the Toot website, and saw the potential for a game within the character Wayne the Crane, whose job is to stack boxes on the dockside in the television show.

Incorporating this Tetris-style stacking idea, we designed the game to feel like a scene from a Toot episode, with Marge the Barge sailing onto screen with the crates and the player choosing which boxes Wayne should stack, based on shape and colour matching. The game is level based and gets progressively harder with different shapes and more variety to encourage learning.

We also created an algorithm for the game that ensured the puzzles to be solved were procedurally generated, so the boxes would be required to be stacked in different ways every time the game was played.

Using CreateJS as a HTML5 rendering engine, we built our own framework around this engine to manage and build the game. This framework is still in use and we build many of our games from it.

Cyw – Cyw painting

After creating the official Cyw website for S4C, we were commissioned to design a painting game to feature on the site.

Our aim was create a game that was intuitive enough for children to use with little parental supervision, as well as allowing a great deal of creativity and self-expression.

To ensure that the game had something for kids of all preferences and abilities, we built a painting API that could draw to a HTML5 canvas, and applied it to three painting modes: a blank canvas free colouring space, digital colouring sheets of scenes and characters, and a click-and-point paint by numbers option. We developed a selection of art tools and effects – paint brush, pencil, rubber, stamps and stickers – so that players could really customise their work and have fun experimenting with lots of different options.

Using angularJS, we were able to create a one page website that could constantly update its content, including features such as appealing screen wipes. We also wanted to make the game responsive for all screen sizes, so with HTML5 and CSS we ensured consistent button sizes and preserved the bright, colourful UI across all devices.