Building HTML5 Games with GSN Games

HTML5 is ready for mobile Open Web games. Flash is absent or disappearing on mobile devices. Meanwhile, in the US and the UK, 20% of Internet users are mobile-only, and in some markets more than half of Internet users are mobile-only. It is widely held that the next two billion people coming online in the developing world will be on mobile phones.

So far the big mobile hits have been native, but making native games for the forthcoming wave of new mobile device platforms will continue to be expensive, painful, and gated by third-party app stores that take a cut of revenue.

All these factors suggest that HTML5 games are the next big thing. In fact, there are already tons of awesome HTML5 games out there, as well as brilliant resources for building them.

We have been lucky enough to work with GSN Games, the mobile, social, and online games division of Game Show Network, to bring competitive games with cash rewards to the mobile web. This work has been on mission for us at Bocoup because it offers the mobile Open Web a new viable business model for independent monetization. Moreover, our work with GSN Games gave us the opportunity to develop the kinds of new Open Web technologies that we love to work on here.

Over the past year, our work with GSN Games included Open Web infrastructure development for the new cross-device WorldWinner site, and the development of specific games on that platform, including HTML5 Solitaire Rush and HTML5 Wheel of Fortune.

In preliminary test releases, with no marketing, these mobile Open Web games have performed incredibly well in sample populations. Daily active users and growth are at the level of GSN’s most popular games. One of the business analysts we spoke with told us that people seem to “organically like” playing on their mobile browsers. This is really exciting in the shadow of years of no monetization strategy on the Open Web.

This article will discuss the tools we used and developed to make these mobile Open Web games.

Server and Network

The Node.js server platform makes a lot of sense for HTML5 games. Node has tons of useful libraries and tools. Even with all that power, it is very quick to get up and running and very easy to be productive.

GSN’s HTML5 games are now backed by Node, using Socket.io for client-server communication. This means that the games use WebSockets on devices that support them (which is a lot of mobile browsers nowadays) but they transparently fall back to older transports when needed.

After repeating our approach to Node game development a few times with GSN Games and on other projects, we built Cloak. Cloak is a network layer specifically for HTML5 games that handles client/server messaging, rooms and lobbies, and so forth. We are looking forward to building more Open Web games using Cloak, and we encourage you to do the same.

Client-side JavaScript Frameworks

Client-side JavaScript has seen an explosion of new frameworks for building large-scale apps. With strong contenders like Backbone.js, Ember, and AngularJS, there are a lot of great options. With games, there are even more choices: there is no shortage of game-specific frameworks such as Crafty, Impact, and Enchant.js.

Since Solitaire Rush largely involves entities that animate and get dragged around, a game engine made sense. We used Crafty, which is a component-based framework. We were really happy about the built-in 2D API.

Automating Tasks with Grunt

Nothing has improved our web development productivity as much as Grunt. Since Grunt makes it trivial to automate tasks such as running tests, error-checking, and minification, we can focus on making awesome games.

All of GSN’s HTML5 games are beautifully organized for ease-of-development. A src directory contains JavaScript broken out into module-specific files. An html directory contains templates that are precompiled at build time by Grunt. Grunt builds our Less stylesheets into cross-browser CSS. All this is compiled into a ready-to-deploy minified bundle at the press of a button.

Responsive Design

Writing one piece of software for many different platforms and devices was a big appeal for GSN Games’ adoption of the Open Web. Accommodating different screen sizes and resolutions has been a major part of this. Very little work has been done for games here: most just have different assets for different resolutions and are often “letterboxed”. As a lover of responsive design, letterboxing just isn’t good enough for me, and so our team didn’t settle for that. It was a matter of applying best practices from website and web application design to games. The big challenge was that games tend to have static layouts. Using SVG assets, which are now supported on all current mobile platforms was a huge help here. We also published ios-reorient as a fix to iOS limitations when doing responsive design for static layouts.

Conclusion

The Open Web platform is ready for high quality commercial games. We’ve been thrilled to work with GSN Games to make these games a reality and move the state-of-the-art forward, as games are madeto do. Building and publishing open source tools means that it’s even easier for the next project. Here’s to the future of awesome games on the Open Web!