If anyone remembers the Obama vs Romney presidential campaign back in 2012, it was one of the most heated rivalries in the history of the US General Election.
We were asked to build a fun, satirical game to mirror the current news events, within a short period of time. The client was NextMedia Animation, a company with over 3000 employees. They shot to fame with the hit 2009 Tiger Woods video.
One of the main reasons we decided on HTML5 was the extremely short timeframe of the project. With a development period of less than 7 days, there was no room for iOS submission processes. With HTML5, it would be really easy for marketing teams to distribute the game link via social media. There was no need to download the game - simply clicking on the link was enough to start.
HTML5 removes all barriers of entry to distribution channels, allowing content to work on the browsers of desktop and mobile devices. That means, a user playing the game on desktop will get the same experience on mobile devices too, without going through walled gardens built by the App Store and Google Play.
The game concept was simple - place both presidential candidates in a boxing ring, and let them duke it out! Winner of 2 of 3 rounds, wins the election. It's a simple and catchy concept - who wouldn't want to smack the other guy?
From a technical standpoint, using 3D artwork within a HTML5 game is tricky. We had to build a lot of workarounds to ensure that the games would run smoothly. We had to ensure that the animation made sense, the movement fluid and the game easy enough for casual news-readers to actually play.
The other tricky part was video. Did HTML5 mature to the point where videos are possible? The answer is yes. Thanks to some magic hands, our tech team managed to include an opening and two ending cutscenes. The opening cutscene is the face-off between Obama and Romney. It would pre-load and last for 10 seconds. Here's a screenshot:
Before starting the match, the player simply had to choose between Obama and Romney. Notice how the symbol of a donkey versus an elephant is displayed at the ringside. These are unique requests by the client.
Here's how the game looks like, in action. You can see Romney avoiding a jab by Obama:
Notice how an in-game advertisement is inserted, being carried around by a ringside girl. This ad was scheduled to display once per boxing round. One of the side objectives of the game was to boost subscriptions to our client's Youtube channel.
Back to more screenshots. Here's how the opponent reacts, when hit:
Depending on who wins the boxing match, a custom cutscene would be generated. Here's a snapshot of the video where Romney does a Gangnam Style victory dance upon defeating Obama in the boxing match:
We even had a professional voice actor imitate the voices of Obama and Romney. Everytime the player smacks his opponent, clips of their famous quotes would play, giving re-inforcement to avid news followers. They heard the quotes in the debates and news, now they're experiencing it within the game.
For metrics and player scores, we developed a backend server system to count the scores, and display it at the end of the match. The technology we have within the company for backend systems have matured to the point, where it's able to handle player logins, scores, leaderboards and much more. After some number-crunching, the players will see the 'real in-game election results':
As far as social media footprint went, the results were pretty amazing. The game got picked up by Breibart, a leading news and opinion website in the US with over 1.5 million unique visitors per month. It solidified our client's positioning in the entertainment news division. Our client's Youtube channel subscriptions were also boosted by the game, due to effective use of the in-game ad.
This news-themed game project is a perfect example on how HTML5 technology can generate massive positive exposure for brands. We managed to create an immersive experience that tied-in very well with the target audience.
To inquire more about this project, view a demo, or request a quote for a similar project, please contact us.
|Building a HTML5 game to promote TV viewership||04-25-2017|
|Beat Bozza: HTML5 Game for Lead Generation||04-18-2017|
|Teen Titans Go! Food Fight!||04-10-2017|
|Working with Ford||02-24-2017|
|Driving Game for 2017 Cadillac Escalade Marketing Campaign||02-14-2017|
|A Puzzle Game for a Global Healthcare Company||02-14-2017|
|Branding a Match 3 game with Warner Bros Flintstones||02-14-2017|
|The Tom and Jerry Show Cheese Run||02-14-2017|
|A Holiday Game for Wall Street||12-19-2016|
|A HTML5 game for IT Managers||12-14-2016|
|O2 Business Builders: A HTML5 endless runner game with a leaderboard||10-10-2016|
|Thunderbirds Are Go: Moon Base Defence||09-26-2016|
|Thunderbirds Are Go: A high-speed chase game||09-12-2016|
|Angry Birds Coloring Book||08-29-2016|
|Ice Age Collision Course: Planet Pool||08-04-2016|
|Lino Grad: A HTML5 game built for a multi billion dollar food company||07-02-2016|
|Betadine Germ Smash: A HTML5 game||06-06-2016|
|Digital signage games in trains||05-30-2016|
|Toyota NHRA: A digital signage game built with HTML5||05-30-2016|
|A HTML5 puzzle game for Mercedes-Benz||05-03-2016|
|Tissot RBS 6 Nations Rugby Game||02-18-2016|
|Scooby Doo Mahjong||02-18-2016|
|A Plinko Game for Kia Motors||01-04-2016|
|Helping a global supermarket chain launch HTML5 games||11-15-2015|
|Thunderbirds Are Go: A HTML5 endless runner game||11-15-2015|
|Disney: Phineas and Ferb Backyard Defense||07-11-2015|
|Disney: Randy Cunningham Saves Norrisville High||07-11-2015|
|American Honey: Escape the Office||03-04-2015|
|Doraemon Gadget Rush||03-01-2015|
|Budlight Beer Bottle Cap Game||02-26-2015|
|HTML5 and Kinect for Instant Win Games||01-12-2015|
|Sunny Boy Chimney Challenge: a christmas HTML5 game||12-07-2014|
|Pest Detective: an educational game built with HTML5||10-22-2014|
|Taiwanese Cultural Event: a game built with HTML5||10-11-2014|
|Green Monday: a shopping game built in HTML5||10-11-2014|
|AT&T Match 3 Memory Game built with HTML5 in 3 days||10-06-2014|
|Sort The Bugs: A Kids Educational Game||09-23-2014|
|Cupcake Vineyards: a wine app built with HTML5||06-10-2014|
|Citibank and Hilton Hotels Match3 Memory Game||06-10-2014|
|FIFA Coca-Cola® Chrome App: built with HTML5||05-07-2014|
|Tic Tac Mints: a marketing experience built with HTML5||04-15-2014|
|Click and Match: a HTML5 Valentine's day dating web-app||01-30-2014|
|Guess the Artist, a HTML5 quiz game with Electrolux||01-19-2014|
|Oddbods Claw Crane, a 3D Animated HTML5 Game||01-13-2014|
|Citibank HTML5 Game||01-09-2014|
|Obama vs Romney HTML5 Game Campaign||01-08-2014|