Hacking The Ad Break: making a full 3D racing game with VW

We were approached by digital agency Tribal DDB to create a modern mobile game to promote Volkswagen’s new Golf GTI. Rather than an app or a standard HTML5 game they wanted something that was fast, slick, full 3D, and yet instant loading and playable within the browser…

The Volkswagen adverts were going to be shown as the first slot in a TV commercial ad-break across Australia, telling viewers to play the game during the ad break to compete with other players across the country, and with a chance to win a Golf GTI. Access would be via a QR code shown on screen, and since the average ad-break is only 3 minutes long the game had to be near-instant loading while still meeting Volkswagen’s production values.

So the brief was a full 3D racing game showcasing the new Golf GTI in all its glory over 4 different tracks, near-instant loading, slick presentation, playable on a wide range of devices, linked to lead capture for the giveaway promotion, timed races which aligned with when the adverts were shown on TV, leaderboards, and all hosted on a scalable cloud solution which could cope with the spikes in use TV commercials tend to produce. It was a tall order, but we were up for the challenge!

Technology Stack

Phaser 3 is our current preferred javascript game engine, but since it’s 2D only we decided to use ThreeJS to render the 3D, with Phaser as a wrapper to handle the HUD and pre/post game screens. We wrote an interface between the 2 libraries allowing them to work seamlessly together and used Cannon-es (a maintained fork of Cannon.js) for the physics.

This combination allowed us to build a working prototype quickly using placeholder assets which we used to dial in the car physics and player controls, while our art team worked on the visual assets in the background.

Visuals

One of the most important things to get right were the visuals. VW wanted 4 tracks, each with a very different theme. We settled on a futuristic city for the race events, inspired by movies like Blade Runner and Tron, filled with neon signs - bright lights, big city!

Finding a balance between a high quality and accurate model, that was low-poly and light-weight enough to load quickly.

Three separate practice tracks, playable even when the TV commercial events were not running, showcased the Australian outback, snowy mountains, and coast. At the same time, the star of the show, the new Golf GTI, had to be showcased front and center. That meant finding a balance between a high quality and accurate model, that was low-poly and light-weight enough to load quickly and allow for high frame rates across a wide range of mobile devices.

We teamed up with our good friends at Lumberfly for much of the 3D modelling, and they did a fantastic job. Their experience is more in high poly modelling and rendering for TV, so the first thing we did was build a custom file viewer which they could test their models in, with the same render settings we’d be using in the final game. This allowed us to iterate fast, find and eliminate problems early on, and dial in light and camera settings during asset creation.

As well as focussing on the car, Lumberfly also used procedural generation to take our track designs and create models for the tracks, barriers and other assets which mapped to the track outlines. This saved a lot of valuable time early in the project, as we were able to change outlines quickly without having to edit everything by hand, and tweak things to flow well based on early play testing.

We used an interactive process to craft a fun experience, which required a lot of testing and tweaking right from the start. A driving game needs to find a balance between reality and playfulness. We wanted to give the player the feeling of driving fast around the track, and we also wanted the car to feel grounded in reality, but we were also limited to touch controls not a steering wheel and brake pedals so a lot of time was spent testing and tweaking the inputs, the physics, and the track layouts to find the sweet spot. The game needed to provide a challenge, but not to frustrate the players, and had to reward players who practiced and played well. We were looking for most players to be able to complete each track on their first attempt, but to get to consistently better with each session, and to be flowing freely around the track after a few goes. The classic “quick to learn, hard to master” approach is generally a winner!

Once the track layouts were locked in, it was time to populate the environments. Static objects like buildings, road signs, billboards and trees were combined with animated elements like birds flying overhead and rotating windmills which brought the world to life. We quickly discovered that adding all of the scenery was going to be a huge amount of work, so we created an in game editing system. Sometimes it’s more efficient to build a tool to get a job done faster, and this was certainly one of those cases, allowing us to lay out elements around the track and then tweak them as we played, switching seamlessly from driving around to zooming the camera out and adding another tree, or moving a building with just a few keystrokes.

It wasn't always easy I'm sure, but you guys delivered an excellent game that the client was delighted with!

Kenny McLeod, Business Director Tribal DDB

Heading to the races

The 3 practice tracks could be played at any time, but to add some suspense and a feeling of competition the client wanted the city track (the one players had to compete on to win the car) to be available only during “races” tied to the TV commercials. This added a complication, since there are 3 time zones in Australia with the commercials being shown across all states, and we could easily run into caching issues if we simply queried a setting on the server.

We had already decided on Google’s Cloud Platform for hosting, and our hosting partners at Snapfrozen worked closely with us to set up not only the hosting and backend for the leaderboards and lead capture, but also a cache-busting system which would allow us to turn “win mode” on and off from an online control panel on Google’s platform.

Performance

The game was designed to be mobile only, and focussed on modern devices. We decided on iPhone7 as our target low-end device on the iOS side based on stats from our client about their target audience, and equivalent powered/aged devices on Android. We originally developed the game to be for Windows/Mac as well, but the decision was made to drop that in order to keep a more level playing field for users (i.e. everyone would be on a mobile screen and touch controls) Of course we needed to let computer users coming to the game know it was mobile only, so we detected them and redirected to a landing page with a QR code and a message to scan the code on their mobile device to play the game.

We wanted to hit a solid 60FPS on our target devices and keep loading times to an absolute minimum so from early in the development process we worked tirelessly to keep polygon and model counts low, and keep textures to reasonable sizes. We drew on our experience with Facebook’s “Instant Games” platform and used dynamic loading to get the player into the experience as quickly as possible, and heavily optimized the code, visual assets, and audio to keep the asset sizes themselves small.

Being selective in placement of buildings and other objects around tracks enabled us to give the impression of large and interesting environments, while keeping things light weight. Then carefully adding a few flourishes, like the gulls on the coastal loop, or the kangaroo which bounds across the track in the outback, added a level of polish and depth without bloating the build.

The game is part Volkswagen Australia’s ‘Everyday Escape’ campaign with DDB and tribal to launch the new Golf and Golf GTI. The crux of the campaign was the Golf Ad Break championship, a digital activation that hijacked the ad break by giving viewers the chance to race the new Golf GTI live against everyone also watching.

What we learned

Don’t reinvent the wheel!

While we did have to create some of our own tools on this project (such as the file viewer for our art team, and an editor for laying out the buildings and other scenery) we leveraged existing libraries. The Cannon library meant we didn’t have to roll our own physics, and Google’s Cloud Platform took a lot of the headache out of setting up the hosting and the race windows. Finding and using the right tools on a project like this makes all the difference, especially when working to a tight deadline.

Build the tools you need

Abraham Lincoln famously said “give me six hours to chop down a tree and I will spend the first four sharpening the axe.” When the tools you need aren’t available, sometimes you do need to roll your own… The time we invested in developing the in-game editing system paid for itself over and over again, and it allowed anyone in our team to make quick and easy edits right from within the browser. It’s an approach we’ve used on a number of projects in the past, and it really helps not only to speed up development but also to make development more collaborative and gets the whole team’s input.

When the tools you need aren’t available, sometimes you do need to roll your own

Decide on limitations early on

In an ideal world we could create a game that would run on every platform, anywhere, all the time. In reality, there is always a balance to be struck. Decide what the lowest end devices you want to support are as early as possible, and test to ensure your project will run on those devices with the performance you want. Failure to do so will inevitably mean wasted time on optimizations towards the end of the project, or moving goal posts. And where possible, add a graceful way to handle unsupported devices by detecting them and either with a cut-down “lite” version, or at least showing a message telling the user their device is unsupported.

Technologies

The game itself was built with Three.js for 3D rendering, Phaser for the 2D HUD and wrapper, and Cannon-es for physics.

3D asset creation was done in Houdini or the tracks and other procedural generation, and Blender for other models.

Hosting and backend for the leaderboards, lead capture, and race timings was all done on Google’s Cloud Platform.

Art Of Play Games

Art Of Play Games is an award winning game development studio trusted with some of the biggest brands in entertainment. We focus on creating fun, high quality games across all platforms from web to consoles, and have earned a reputation for creativity, delivery and reliability.

Credits

Ash Nicholls producer, designer and 2D artist, Billy Deakin developer and designer, Henry Bullen 3D vehicle and environment artist, Josh Thomas 3D environment artist, Clark Abound music and audio engineer.

Client: Volkswagen Group Australia

Rowena Kanna – Marketing Communications Manager

Hayley Phillips – Brand Communications Manager

Tully Challen – Digital Customer Acquisition and Retention Manager

Stephanie Overton – Digital & E-commerce Manager

DDB Group Sydney

DDB Sydney

Chief Creative Officer – Ben Welsh

Executive Creative Director – Matt Chandler

Creative Director – Tommy Cehak

Creative Director – Tim Woolford

Creative Director – David Jackson

Art Director – Sam Raftl

Copywriter – Tom Lawrence

Managing Partner – Mandy Whatson

Senior Business Director – Nicole Drabsch

Business Manager – Izzy Crohan

Planning Director – James Davis

Chief Strategy Officer – Fran Clayton

Head of Integrated Content – Renata Barbosa

Senior Lead Producer – Tania Jeram

Junior Producer – Emily Wood

Senior Producer – John Wood

tribal

National Managing Director – David Rennie

Group Business Director – Kenny McLeod

Technical Programme Director – Emma Fyfe

Project Manager – Sebastian Bennett-Leat

Senior Producer – Georgina Hardy

Business Manager – Alasdair Kay

Designer Director – Fabien Clemency

Digital Designer – Andy Lee

Digital Designer – Vinny Salinos