Earlier this year Spil Games asked us to create a new mobile HTML5 version of their classic Mahjong-inspired game, Dream Pet Link. If you know anything about HTML5 game development you’re probably aware that there’s some controversy over whether it is now, or ever will be, a viable platform for game development, especially mobile game development. This article isn’t about that, though the debate will continue.
We want to convey real, practical, information to game developers who are thinking about making games in HTML5, which is the new lingua franca for the multiplatform web software. If cross-platform HTML5 games become popular, life will become easier for game studios that currently spend a lot of resources making different versions of games for every single platform. We know it can be done, because we’ve done it. In this post we’ll show you (at least at a high level) what we did with the hope that it will encourage you to take the next step and start building great HTML5 games. (Note the HTML5 Developers conference is coming up Oct. 22 and Oct. 23 in San Francisco).
[aditude-amp id="flyingcarpet" targeting='{"env":"staging","page_type":"article","post_id":823413,"post_type":"guest","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"games,","session":"B"}']
Above: Dream Pet Link
Challenges of HTML5
In porting any game to mobile, you need to consider things like adapting mouse or keyboard inputs to touch and support for different screen sizes and orientations. Porting from Adobe’s Flash format to HTML5 presents additional challenges.
Flash is mature platform that is extremely consistent across different web browsers, but the HTML5 platform is still evolving and can vary by implementation. Although we are seeing very good implementations from several phone makers on modern devices, there are still many legacy devices in market. Supporting these devices isn’t easy.
The two biggest problems we encountered were poor rendering performance and audio capabilities.
While there are multiple ways to render graphics in an HTML5 game, the one most familiar and accessible to game developers is the Canvas applications programming interface (API). Much like other 2d graphics APIs, the Canvas API provides a drawing surface in which to render graphics primitives (e.g lines, rectangles and text) as well as draw prerendered bitmap images. Some platforms provide hardware acceleration for canvas rendering operations by offloading drawing tasks to the GPU (graphics processing unit). Unfortunately, not all mobile platforms have hardware acceleration available and others don’t accelerate all drawing operations.
Screen sizes and CPU performance also vary widely across mobile devices. Some devices have a slow CPU with a large screen. This is the worst case scenario since blitting performance is a function of the number of pixels that need to be copied.
In order to overcome these challenges we created multiple resolutions of our graphics assets. This allows us to show optimal resolution graphics while not wasting cycles copying more pixels than a particular device can handle. We also took advantage of CSS scaling (typically hardware accelerated) to allow the game to fill the screen even if the graphics didn’t exactly match the screen resolution.
Audio support was an even bigger challenge. There are essentially two ways to play audio on mobile HTML5 browsers. The “old” way is to use HTML5 audio (also known as the <audio> tag). This method is widely supported but provides limited audio capabilities, the most severe of which is the inability to play simultaneous sounds. A newer API called the Web Audio API provides advanced audio support, including the ability to precisely time sound playback and play simultaneous sounds. It is not yet widely supported for Android mobile devices, though it’s rapidly gaining ground and is notably available on iOS 6 and better devices.
Editor’s note: Developers! If you’re good and want to be great, our upcoming DevBeat conference, Nov. 12-13 in San Francisco, is a hands-on event packed with master classes, presentations, Q&As, and hackathons, all aimed at boosting your code skills, security knowledge, hardware hacking, and career development. Register now.
[aditude-amp id="medium1" targeting='{"env":"staging","page_type":"article","post_id":823413,"post_type":"guest","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"games,","session":"B"}']
In order to avoid a lowest common denominator approach, we support both HTML5 audio and the Web Audio API. We detect at runtime if Web Audio is available and, if not, fall back to HTML5 audio. If we only have HTML5 audio we avoid playing sound effects over music. We also recently implemented support for audio sprites to work around some of the latency issues with mobile HTML5 audio implementations.
By adapting the graphics to the rendering performance of the device and supporting multiple audio playback methods we were able to work around a large number of problems that we’ve seen with other HTML5 mobile games.
Benefits of working with HTML5
With those issues behind us we were able to leverage some of the benefits of working with HTML5.
[aditude-amp id="medium2" targeting='{"env":"staging","page_type":"article","post_id":823413,"post_type":"guest","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"games,","session":"B"}']
One of the first things we noticed was that HTML5 allowed us to iterate extremely rapidly. We were able to make a code, graphics, or audio change and see the effects of the change immediately by just reloading the game in the browser. The impact of this on our development process was massive. It meant we could iterate multiple times on a feature or effect in the space of a few minutes. The ability to do this meant huge improvements in the overall design and production quality of the game.
Another benefit of working in HTML5 for mobile is that you can develop and test 95 percent of the game using a desktop browser. You still need to do mobile device specific testing, but the desktop gets you pretty far. With native mobile development you must test on device or use an emulator. Using a desktop browser for testing and debugging is faster and more convenient than using an emulator. The Android emulator is particularly slow and painful to work with. Modern desktop browsers not only have full HTML5 support, they also provide advanced debugging environments which are invaluable when doing any advanced work. These are some of the reasons both Spil Games and Amazon have embraced HTML5 as a platform.
Game design
If you want to make a great game it is essential to make it fun. No set of tools and technologies, no matter how good, can make a bad game good. I’ve seen many bad games built in HTML5. Some were bad because of the way they used (or misused) the technology, but most suffered from poor game design.
The core mechanic of Dream Pet Link is a Mahjong matching game, where tiles need to be “linked” in order to be removed from the board. The first playable of the game was fun and much more cerebral than we had first thought it would be — there’s a quite bit of strategy involved in making links in the right order.
[aditude-amp id="medium3" targeting='{"env":"staging","page_type":"article","post_id":823413,"post_type":"guest","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"games,","session":"B"}']
Once we had validated the core mechanic, we proceeded to enhance the game with additional features such as power ups, distinct sound effects for the tiles sliding and clicking, floating graphical effects to provide positive reinforcement for scoring moves, pictograms in some of the level designs (that look like pixelated versions of the pets in the game), theme levels containing different colors of only one or two pets, blitz levels with different background music to build tension, and more. We polished and iterated over and over until we felt we had the right experience.
This kind of attention to design detail and iterative polishing is required no matter what the development platform. Unfortunately, I’ve seen it ignored too often with HTML5 games. Don’t skip it!
Takeaways
Above: Craig Robinson
While there are some challenges, it is possible to create a fun and engaging game for mobile devices using HTML5. Don’t let the current limitations of the platform be an excuse. Work through the graphics performance and audio issues, take advantage of the benefits working in HTML5 offers and pay attention to game design. If you do these things you’ll surely have a winner on your hands.
Craig Robinson is the co-founder of Absolute Hero, an independent game studio based in Seattle, Washington. He previously built games for FlowPlay, GameHouse, and RealArcade. Dream Pet Link can be found on any of Spil Games’ mobile portals such as m.zibbo.com or m.gamesgames.com and is playable on iOS and Android devices directly in the mobile browser.
[aditude-amp id="medium4" targeting='{"env":"staging","page_type":"article","post_id":823413,"post_type":"guest","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"games,","session":"B"}']