Advertise here via BSAThis article recently appeared on the Atari Arcade Developer Center, a collaboration by the teams at gskinner.com , Atari and Internet Explorer.
The Atari Arcade: a true game portal showcasing what’s possible...
Advertise here via BSAThis article recently appeared on the Atari Arcade Developer Center, a collaboration by the teams at gskinner.com , Atari and Internet Explorer.
The Atari Arcade: a true game portal showcasing what’s possible with web standards like HTML5, CSS3, and JavaScript. Slick graphics, fast, multi-player gameplay, and platform agnostic. Initially only targeting desktop and tablet-based browsers, we’ve now endeavored to bring the arcade to mobile.
Choosing a Target
By limiting to desktops and tablets in the first release, we narrowed our scope considerably, and were able to provide a semi-responsive layout with a single game size. Our reach included most standard resolution monitors, plus tablet form-factors like Surface and iPad.
But we quickly learned that we were missing something by not targeting the huge number of users on mobile devices. That is, a vast market that now accounts for about 12% of all global internet traffic, spanning all kinds of dimensions, resolutions, and processors. Our next task was identifying an approach to bring the arcade to the mobile web. We wanted to support a variety of resolutions, including higher DPIs in new devices like Windows Phone 8 and iPhone 5.
This article discusses the goals to mobilize the arcade, as well as some approaches, the issues we encountered, and some tips and tricks where we found value.
Taking Aim
We spent a good deal of time determining what was possible on different platforms to establish a feature set that was appropriate for mobile.
Our goal was to build a site that:
Could re-use the majority of the site framework we had already built
Scaled fabulously on any resolution
Performed awesomely on newer devices
Was intuitive to navigate with touch
Could include some of our games at launch, and all of our games shortly after
Could be extended to third party developers!
With this game plan, we set upon re-architecting the front-end of the site, and making the games elastic to support the resolutions we needed.
What Works?
The first task: eliminate platforms that just won’t work. With the wide array of platforms and models of phones, we did some focused testing on the following points:
Technology. Some devices don’t have adequate canvas, JavaScript, CSS, or HTML support.
Touch capabilities. All of the games are already touch-enabled, so we eliminated any candidates with only single-input touch support.
Adequate resolution. Older browsers tack on a ton of browser chrome on mobile devices, and we needed enough real estate for our games to look great and display touch controls when required.
Performance. Once it looked right, and functioned properly, we focussed on performance and monitored frame rates.
We tested a number of devices – the primary targets being Microsoft’s Windows 8 devices (to highlight the technical capabilities of the platform), and iPhones (to reach the widest market). We also tested on a number of Android phones to see what we could support.
The results were surprising. Not all phones are created equally, but the arcade ran quite well on almost everything we tested with.
We got incredible performance on Windows Phone 8. It had the highest frame-rates, the site rendered as expected, and the multi-touch worked great. Unfortunately, we could only get our hands on a WVGA device (800×480) for launch, but we expect the WXGA and 720p devices will have no problems.
The site and games performed great on the new iPhones, but it was clear from the start that Mobile Safari’s chrome consumed too much real estate. In order to support iOS5 in mobile Safari, the arcade needs to be pinned to the home screen to run in fullscreen. We then discovered that iOS5 and below have no hardware support in pinned site mode, so although we can support it, not all games perform well.
We got mixed results on various Android devices we tested, including phones as well as a Nexus 7 tablet. The site and games mostly perf