Bubble Burst Bernie

Brief

Bubble Burst Bernie is a browser-based game for desktop and mobile platforms created for The Late Show with Stephen Colbert. The game was made in five days working closely with an artist and a writer at the show, and was based on a video created by their animation department.

Implementation

The game was built using Phaser, an open source HTML5 game framework. Lip synching was achieved by using Gentle, an open source neural-network-powered audio alignment tool which combined Sanders interview footage with transcripts of the interviews to extract word-level timing information about the audio, which then drove a simple animation engine in Phaser. Bernie's noodly arm is a highly performant HTML5 canvas draw of a simple Bezier curve where both control points are locked to the same position and tied to a physics object that slowly follows the hand object's position in the physics engine.

Post Mortem

This was a really intense project—it popped up out of nowhere with a one week deadline. Fortunately it was a huge success. The client was extremely responsive (we would request assets from their artist and turnaround was often less than an hour), and Phaser was a well-documented and easily customizable tool. The one hiccup was embedding the game into the client's advertising template as an iframe. This wasn't hard but it took more time than estimated. Next time we'll know to ask about embedding upfront and plan for it.