Breaking Development: Mobile Browser Games

by Luke Wroblewski April 7, 2013

In his presentation at Breaking Development in Orlando FL Stefan Baumgartner shared lessons learned trying to build a rich game experience on modern Web browsers. Here's my notes from his talk on Mobile Browser Games.

  • Gone are the days of developing for Internet Explorer only. Instead of developing for certain browsers, we should develop for certain features.
  • Animation in the browser: DOM manipulation with Javascript is often too complex for mobile browsers. Your other options are Canvas and CSS anmiations & transitions.
  • Canvas support in modern browsers is pretty good. However performance is not even across all browsers and you currently can't test for frame rate per second. iOS works the best. Internet Explorer 9 is good but Android Webkit support is poor.
  • The solution: feature test for CSS transitions, if a browser has them use CSS transitions otherwise use canvas for animations. This gives you support across a large set of modern browsers.
  • Device orientation can be detected with Javascript. This will provide the degree of orientation. However, 0 degrees is set different on different devices. Its better to use matchMedia to check orientation but support of this is not great on Android. So once again you can resort to a hack looking at he positioning of an element on the screen.

Web Audio

  • The basic Web audio api allows you to play files, look at properties like duration, and fire events for things like ended.
  • Mobile Webkit only allows audio playback on touch to prevent automatic downloads of audio files. To playback multiple sounds, you have to download one audio file then playback different parts of it. This is essentially an audio version of a Web sprite.
  • You need to make the first sound file played first in the track because you can't access other parts of the file. So set up your experience accordingly.
  • Media.io is a service that outputs multiple audio formats for files. If you use this service, you may end up with an audio file with a variable bitrate. iOS does not work well with variable bitrate. Compress with average bitrate and this fixes things.
  • Internet Explorer does not allow you to access parts of a sound sprite. But you can play different sound files (unlike Webkit). To manage both, check to see if you can play an audio file, if so use the separate files. If not, use the sound sprite.

Additional Tips

  • Test in the wild on devices you don't have access to.
  • Prototype everything. Use basic tests to see what works. This will allow you to uncover browser inconsistencies quickly.
  • The native Android (2+) Webkit browser has been disappointing. But it is unlikely that this browser will go away anytime soon.