Battle Crackers

Battle Crackers is familiar festive fun adapted for the digital age.

Internal Project

We decided to reimagine a staple holiday tradition to flex our creative muscles and develop new skills within the studio. Combining new techniques and technologies whilst window-dressing our project in a pretty non-traditional way meant we weren’t going be sick of Christmas by the time the advent calendar was empty! 

Once you have defeated your opponent within the game there are, of course, the spoils of victory. In this case, animated jokes and interactive toys and games. And the best part? Not a paper hat in sight. 

3D rendering of cracker model used in Battle Crackers

Styling it out

We knew we didn’t want reindeer patterns or pixel-tinsel as an aesthetic tone. Instead we embraced a neon, sugar-coated graphic style that hinted at a Japanese pop-culture and a vintage arcade sensibility. Paired with this, our animation was squeaky clean and bouncy to underscore transitions. Meanwhile our audio emulated an 8-bit gaming soundtrack and maybe even a nod to a certain Italian plumber..

Making fun

Our digital treats were modelled in Blender and Cinema4D so they could be explored enjoyed and played with in a 3D environment. Try them out here:

3D rendered prize - pig

MR Squeakerson

View on CodePen

3D rendered prize - ring

Blingin’ Ring

View on CodePen

3D rendered prize - drum

Drum-Roller

View on CodePen

3D rendered prize - record-player

Staakophone

View on CodePen

3D rendered prize - toy car

MatchboxDinky

View on CodePen

3D rendered prize - whistle

The Blower

View on CodePen

Technical Build

Being a two-player battle (obviously), web sockets were at the heart of the experience to unite our festive warriors. Our cutesy-pie animations were brought to life using Bodymovin to deliver SVG animations directly from After Effects. We also harnessed the power of Greensock to animate UI elements along with objects in our 3D world. We used THREE.JS to render the main game elements and all our different prizes. Some also included a physics engine (Cannon.js), to simulate real-world effects.

Battle Crackers played on an iPhone
Play now button

Drop us a message and let's make something amazing together.

Get in touch

Websites

You name, we do it - and we do it well.

Drop us a message and let's make something amazing together.