The Vue.js website needed to allow the kids to:

• Change the main characters appearance (skin & hair colour)
• Make their own cave painting drawing, which would then feature in the animation
• Choose from a range of assets (emoticons, headsets, animals)
• Record mammoth noises that would then play during the animation when the mammoth appeared

The animation was created by Rumpus in Adobe Animate, which was then exported into a javascript animation powered by JSON. Our job was to take this and change it to allow it to be manipulated, so that when the video played it was different every time, altered by the choices and input of the kids before the video played.

Many challenging technical aspects was discovered and overcome during the development of the prototype. For example, when the hair colour choice was made, behind the scenes the system had to process huge JSON files, finding and replacing all references to a particular colour value, and ensure this was done by the time the kids hit the play button.

Spending time watching the children using the app in pilot schemes was hugely rewarding. Especially when the majority started the app again from the start as soon as the animation was over!

This project was both great fun, and very challenging. Using Vue.js, Phaser.js and Json animation (powered by Pixi.js) allowed us to create something truly unique; working with Heather and the animation team was a joy and the result is something we were all very proud of.