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.
- 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.
- 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.
- 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.