Case study

HTML5 Nickelodeon Peppa Pig game.

Nickelodeon had been looking to do more HTML5 games, but didn’t have a supplier base that enabled them to deliver against the demand from the public.

The Challenge

In order to create a seamless experience, we needed to combine TV episode footage with animation and scripting that we created - all in browser, all working on older devices.

Kids don't generally have up to date devices

Kids don't generally have up to date devices

They needed to set out their stall as a forward looking, innovative,  entertainment company who brought the best brands and the best experiences to their audience, no matter what device they were using. Since Peppa Pig is one of their most treasured brands, particular attention fell on our project to reach new, mobile audiences.

The game needed seamless video, on apple devices (uh, oh)

The game needed seamless video, on apple devices (uh, oh)

Video on Apple devices is particularly hard as it takes over the browser, we had to be sneaky and devious to integrate real video with the animations we created.

Re-usable and extensible.

Re-usable and extensible.

We're always keen to create an extensible system that's larger than just a single game, we worked with Nickelodeon, E-One and ABD to create a system that could then create game after game, quickly and easily.

The Solution

We broke new ground, and created HTML5 character rigs whereby we could swap elements and make characters on the fly

Careful, fun script and storyboard

Careful, fun script and storyboard

We used every step of the process to squeeze every inch of possibility out of the project. Right from the scripting process, we were looking for ways to deliver a game that would work on slower and older devices, without compromising quality and fun.

HTML5, on-the-fly character rigs

HTML5, on-the-fly character rigs

To give us the most amount of flexibility and performance across all screens, we recreated all the character designs using vectors, and then attached this to a dynamic HTML5 rig. This allowed us to basically ‘drop' any character we wished into any scene, and have them controlled by the user.

Come on, it's Peppa - it's got to be fun!

Come on, it's Peppa - it's got to be fun!

Furthermore, we added experience led game mechanics including levels, humourous ‘fail' clips and interactions and a number of silly and fun interactions to keep the little ones entertained.

The Result

The technical achievement cannot be underestimated, and the script, animation and gameplay were well loved by kids across the country.

Massive success

Massive success

The game was a massive success, launching at a time when the technology was still very nascent and required a lot of R&D from our JS teams. Furthermore it helped blaze a path for in-browser animation for us and the wider industry.

Delighted young audiences

Delighted young audiences

The game delighted the young audiences of Peppa Pig, and for them, blurred the line between "sitting back" episodes, and "get involved" episodes - helping to inform the future phases of interactive TV and video shows.

We made a system, not just a game

We made a system, not just a game

Further, we delivered a responsive, extensible framework for Nickelodeon that allows them to spin up Peppa Pig games, animations and interactives quickly and easily, vastly decreasing their time to market when they wish to commission new games and experiences.

Like what you see?

View more work

Got a project in mind?

Contact us