Grant Skinner–Building fun with the Atari Arcade at #R2BCreative

Grant opened his session with an admission – he doesn’t normally like talking about client work, it’s not very interesting to the audience. BUT this time he’s made an exception, because this time the client is Atari. As a self –confessed ‘games nerd’ who remembers sitting in front of his first Atari paying Pong for hours on end, how could you not get excited by this project?

The client brief (the clients being Atari and Microsoft) was straightforward: to build retro games in HTML5 – essentially to ‘design and develop a small library of games that demonstrate the best that HTML5 has to offer in touch-enabled Internet Explorer 10’. Why HTML5? Why not? He started playing around with HTML5 a couple of years ago – he still works with Flash but uses more than one tool; “Technology is a tool, not a religion”. Wise words.

“Microsoft was cool to work with, they’re committed to doing something well, building something that’s best for the web, rather than just IE.”

The project objectives included:

  • Celebrating Atari’s 40th birthday
  • Make developer content and an SDK available so other developers can build games for the site
  • Exactly reproduce the classic Atari arcade games
  • Build it for touch first on the device and the desktop
  • Show off IE10

Although there were very aggressive timelines…. it’s Atari! So he jumped right in. What was the concept? Atari gave Grant and his team tonnes of assets like cabinet art and posters and old marketing proofs, to get a real feel for the authentic games. They were given operation and service manuals to understand how the games should be played. What helped the most was playing the games (shame, that). He downloaded the Atari classics iPad/iOS emulator, which is essentially the arcade hardware to enable gameplay with a joystick. He looked up forums to understand strategy and loopholes in gameplay.

From this research he determined that reproducing the games exactly the way they were wasn’t the right strategy, they’re old and not so much fun after a few minutes of play. How do they make sense on a touch screen versus joysticks or track balls? So he counter-pitched to “…keep the soul of the games, but enhance the flesh”. the client agreed and work began.

Grant and his team started fleshing out the concept of an arcade on the web in more detail. there were some disagreements – Atari said ‘no retro’, Grant and team ‘shed an 8-bit tear’ and moved on. They started to explore the idea of stacking blocks and after lots of testing the idea of the 3d cassettes was born (check them out in ‘real life’ here: http://arcade.atari.com).

image

Grant wanted to make the arcade so it was very familiar to people, fun to play and something people hadn’t necessarily seen before. It supports interactions like the scroll wheel and touch plus you get to play the game within the framework.

image

The team learned lots along the way (including ‘train your clients as you go’), but the end result is what’s on the Atari Arcade now – head over to http://arcade.atari.com and check out the games and the developer centre http://atari.com/arcade/developers/ where you can get tear-downs, access the CreateJS libraries and start building games that you can submit directly to Atari!

jQuery was used as the backbone and underscore of the build. GitHub was used for all the code, which made it really easy to keep the client updated and You Track was used for all bug tracking.

RESOURCES

 

Published by Sara Allison

Sara is the editor of Ubelly - when not heads down scouring Ubelly articles for typos (and not always catching them), she's scouting for new writing talent. Give her a shout @SaraAllison if you've got something to say about development/design and want to be heard.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>