You won't believe this 3D web game doesn't use Flash

I can't believe it's not Flash. That's likely to be the reaction when you sit down and feast your eye balls on Super Spice Dash. It's a fixed perspective racing game, created to market McDonald's Spicy McBites. The bright, brash and blisteringly fast site uses web standards to create a sensation of speed that is truly remarkable. We sit down with Cyril Louis, creative director at Razorfish, and John Denton and Mat Groves from Goodboy, and discover what makes them and the site tick (so quickly).

Hello! Thanks for making time to speak to us. Why don't you introduce Razorfish and Goodboy?

CL: Razorfish London is a full-service digital agency, founded in London in 1995 with the mission of bringing technology, creativity and media together. We're now 280 people strong and experts at creative, design, social media, digital media, analytics, technology, innovation, service operations and user experience.

GB: Goodboy are new kids on the block in agency terms, although as individuals we've been in the industry for… ever. We're the 'I can't believe it's not Flash' agency, founded to make rich, entertaining content that reaches everyone, everywhere. We take a tech-first approach to creative meaning that aesthetics and performance are intrinsically linked.

And the McDonald's Super Spice Dash, can you describe the project?

CL: Super Spice Dash is an evolution of the McBites launch and a big step up. The need to reach the burgeoning iOS market meant if we wanted to keep everything 'in-browser', we'd need to start from scratch.

GB: With this in mind, we started looking into possible games that might fit with the new product. We ended up with two key approaches. One was a more simple 'legacy device' friendly 'pitch and put' type of mini-golf game. The other was the pedal-to-the-metal-bleeding-edge-action-fest. We weren't 100 per cent certain how far we'd be able to take the second option and keep everything looking and playing great. So with a mountain to climb, we all settled on option two.

How did you land the job and what was the client brief?

CL: Razorfish is the digital agency of record for McDonald's UK and responsible for most of the digital campaigns. We asked our friends at Goodboy to partner after the initial creative idea.

What is McDonald's like as a client?

CL: They're very smart and effective and commission a great number of campaigns every year. Super Spice Dash was one of them, used to launch the spicy version of the popular chicken McBites.

How did you prototype the project and communicate your ideas?

GB: Once we had settled on the loosest of game styles, we went directly to starting on proof of concept as, more than ever, we needed to prove the concept could actually work at all!

Why did you opt for a gaming angle as opposed to another experience?

CL: The product is a very playful one by nature, and this spicy edition even more. We wanted to illustrate the adventures that the McBites went through to become so hot and spicy, in a fun, viral and sharable way. We wanted to combine an epic and immersive gaming experience with advertising in a playful way.

In pure technical terms, which tools, technologies and platforms did you use to build the site?

GB: Lots! I mean, there really was a lot of tech in SSD. There were regular tools such as perennial coder favourite Sublime Text 2 for getting the code down. The development team took place on a Bitbucket repo managed with SourceTree. The game's 3D was so specialised for device performance that we developed our own super lightweight engine. HUD and UI was handled by our own open source engine, Pixi.js. Flash got a look in too as, once again, we used it (well its IDE) as a convenient level editor, publishing spitting track data out direct to our server for instant cross device testing.

There was even a bit of tech applied to the visuals we created. We used a great iPad app called Tres by The So3, which allowed us to create the low-poly-style backdrops and in-game assets. It's actually a really cool app, and outputs either high-res PNG or SVG assets.

What were the biggest technical challenges that needed to be overcome?

GB: Getting the game to run on a range of mobile devices including Android and iOS phones and tablets. Oh, and of course, Internet Explorer always likes to throw in a few curve balls. The simple answer would be 'all of the browsers'.

Making a 'one-size-fits-all' solution that fits lots of patently different sizes is no easy task. Responsive design is one thing, but SSD had to dynamically cope with pretty much everything! Responsive, layout, gameplay, performance and control method. The whole nine yards.

iOS also had its own specific challenges. Namely the curse of the WebView. It will probably come as a surprise to more than just us quite how severe this issue is. Basically, any WebView that isn't iOS Safari is subject to a 3.3 times performance hit. There is no trick around it or anything like that. Only Safari gets the Nitro JavaScript engine, and when it comes to a high performance mobile browser game, that's a very big deal!

Looking over the horizon, which web technologies are you looking forward to experimenting with?

GB: As a borderline institutionalised Apple fanboy I've got to admit that the browser performance of devices like the HTC One really has been an eye opener. Not so much on this game, but seeing it throw around WebGL content with ease is quite a thing to behold! WebGL and in particular its application to 2D content is something we think has really amazing scope.

What's the feedback from the client and its customers been like?

CL: The game was very well received by the clients, and the public. The customers spent an average of more than seven minutes playing with many coming back for more fun later.

What's the secret of a good burger?

CL: Two beef patties and three-part bun.

GB: Three slices of cheese.

This article originally appeared in net magazine issue 253.