Benefits of working with HTML5
With those issues behind us we were able to leverage some of the benefits of working with HTML5.
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.
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.