HTML5 Game for Scion Debuts in The Onion’s New iPad Edition

Posted on 12. May, 2011 by Martin Biela in Digital Campaign

The Scion College Rebate Rally game developed completely in-house at ATTIK is now appearing as an interstitial ad in the June iPad edition of The Onion through Scion’s month-long sponsorship program. In the game, players launch cartoon versions of Scion cars at four targets in three increasingly difficult levels. Points are awarded for destroying the level’s targets and other items, and for completing levels using fewer Scions.

Together, with ATTIK and Scion, we were able to create a new kind of entertaining advertising experience,” said Michael Greer, CTO at The Onion. “This is a fun, new technology for us and it is always great to collaborate with brands who share an interest in pushing the limits to produce something innovative and exciting.

We wanted to find a fun, engaging, interactive way to inform Scion’s target audience about its new rebate program,” said Simon Needham, ATTIK’s co-founder and executive creative director. “Although I understand that the iPad’s javascript engine is typically a challenge for animation, by using a physics engine and CSS3, our digital creative director Jacob Ford, principal design technologist Paul Hulett, and senior interactive art director Jeff Fang, have produced amazing visuals and interaction for this iPad game. Even though it’s built in HTML5, we feel it compares very well to full apps… and technology aside, we are very proud of the creative ideas, approach and strategy on this latest client-driven initiative.

To create the game, Fang and a team of designers produced key animations of the game levels, emphasizing fun and embodying college experiences, while Hulett and his colleagues quantified the animation as real objects for simulation in the Box2D physics engine behind many popular mobile and iPad games.

To access The Onion and its iPad edition, please visit www.theonion.com or download it from the iTunes store here

Display on the iPad was the biggest challenge,” Hulett explained. “Typical animation routines didn’t run well at all, so I had to go back to the drawing board. Thanks to a tip from the guys at The Onion, I started using the 3D transforms that are available in CSS3. After that, I rebuilt everything piece by piece to optimize the animation.

Continuing, Hulett said:

The Rebate Rally pushes the boundaries of what’s possible in HTML5, and we hope people will take notice. We are big believers in gamification, and feel that this game and our other recent projects demonstrate our leadership in creating ads that are smart, approachable and engaging. With ads moving out of flash containers and into integrated browser experiences, and needing to engage customers more than ever, we are ready to lead the revolution.

Our College Graduate Rebate Program allows qualifying graduates to get a $1,000 rebate towards the purchase or lease of a new Scion,” said Jack Hollis, Vice President Scion. “The Onion is an extremely popular source of entertainment for our target audience, and engaging them with an immersive experience that closely aligns with The Onion’s tone and character was very important.

Tags: Game AD, iPad, Scion