Creators & Innovators of Unforgettable Experiences

HTML5 Game Publishing

Building games with web-based technology provides game developers with many advantages. Here is an overview of some of those advantages:

Multiplatform Distribution.
Web technology is meant to be multiplatform. Your game can be written once but target a wide array of devices – increasing your audience reach. This also provides the advantage of having a unified team rather than separate ones building for different platforms. By choosing this route, more focus can be spent on the creative aspect of game development.

Instant Updates
Fixes and game updates can be instantaneous. If the game is served through a native wrapper, you can push updates through the web, allowing the user to benefit from the update immediately. This can include everything from bug fixes, season-based styling, and even introducing new features.

Instant Play and Promotion
It’s much easier to promote your game through social media using a link that goes straight into the game, removing the need for the user to search for the game in an app store or download it on their device. This increases the likelihood of users playing your game. You can also deep link into the game within an installed app and promote the app without necessarily requiring the user to download.

Mobile devices are where HTML5 content shows its greatest advantages. It is fully multiplatform and any developer that understands JavaScript can quickly pick up game development, making it efficient and cost effective for a development shop.

However, building the game is only half the battle.

Once the game is built, you need to have a way to distribute it across multiple platforms. To make it downloadable in popular marketplaces, the game needs to be packaged. You also need to be flexible to allow your game to be easily distributed across a variety of web-based publishers that each have their own way of deploying content.

This challenge requires a significant amount of thought that must take place early on. It introduces hurdles in the process that force developers to become distracted by chores rather than the game development itself. This may also disrupt the creative process.

Consider the many avenues for distributing a game:

HTML5 games are essentially like any other website; upload it to a server, give it a domain, and promote it. However, you have to consider a deployment strategy to deliver updates and to facilitate additional features such as social sharing, analytics, etc. Deployment can be either complex or simple, depending on the nature of the game and how it is hosted.

HTML5 games can be distributed through portals and other publishers. For example, games that involve TV characters from kids’ shows would make sense to be distributed on a variety of fan sites or the show or network’s website to provide additional content for the audience. All of these websites have their own strategy around deploying content and each is built in their own way.

If the deployment strategy is overlooked, it will limit the distribution possibilities of the game and can add extra effort on the part of the development team. It’s a common challenge of television network sites to be able to distribute HTML5 games because of such a variety of different techniques used in game development as well as conflicts with libraries that may exist on the host website. This is a challenge that if not considered thoroughly, can limit how easily the game is distributed.

App Stores
For maximum audience reach, you will want your game to be available through marketplaces like the Apple Store or Google Play. Therefore, you will need to have a way to be able to package your game using a native wrapper such as CocoonJS, Crosswalk, or PhoneGap. You will also most likely want a way to be able to push instant updates to stay consistent with web updates.

Each of these avenues of distribution pose countless pain points for development. This takes the focus away from the creative process, which is the most important.

The popularity of a game can increase over time, therefore new avenues of distribution can become available. Catering to these new open doors will prove to be a nightmare if the new avenue doesn’t fit in with the current deployment plan.

If only there was a ready-made solution that addresses some of these pain points.

Turns out there is: SpringRoll!

SpringRoll is an ecosystem of tools that make all of the above easy so that developers can focus on game development instead of the chores around distribution. Since it’s primary focus is on distribution, it ships with all the necessary features that developers require to be able to seamlessly distribute the game. Giving developers a solid foundation right from the beginning.

SpringRoll is also open-source. Use it on all your projects, make edits to make it suit your needs, and contribute on github.

SpringRoll consists of four core tools:

  1. SpringRoll Studio
  2. SpringRoll Container
  3. Bellhop
  4. SpringRoll Connect

SpringRoll Studio
SpringRoll Studio is essentially a scaffolding tool. Unlike the web development tool ‘Yo’, Studio provides a graphical user interface so that more design-oriented developers are comfortable with HTML5 game development. It also makes it easier for those not familiar with the command line. In addition, it enables developers to test their game and run build tasks directly in Studio. It sets up a simple web server that developers can connect to with their phone for the purpose of testing. On top of scaffolding, task running, and testing, Studio also provides an interface to manage voice-over audio for the game.

SpringRoll Container
SpringRoll Container is a library that allows for interfacing the game with the host, whether the host is a native wrapper or another website. Container facilitates the communication between the host and the game to allow for pausing, focus, and audio mute functionality as well as hooking into gamification libraries or authentication libraries which are important for kids’ games.

Bellhop compliments Container as a line of communication between the game and the host. SpringRoll games are typically hosted in an iframe on a separate domain. Bellhop is a library that provides the communication between a site and an iframe cross-domain using postMessage API.

SpringRoll Connect
SpringRoll Connect is the flagship of the SpringRoll toolset.

Considering the many ways to distribute games and the chaos around it, SpringRoll Connect provides control over that chaos. It provides a single platform from which games can be distributed while managing different releases.

By using SpringRoll Connect, you are able to use a variety of methods to distribute to all the necessary platforms from a centralized location. It provides an embeddable iframe that can simply be included in any website.

The API can be used to bundle games to be distributed to almost any medium that may not be able to use an iframe. It’s especially useful if you want to bundle a game into a native wrapper. The API allows you to download games directly into your native app. This way you don’t have to resubmit your native app every time you add or update a game.

The PBS Kids Games app, for example, uses SpringRoll Connect to provide access to dozens of games, but allows the games to be downloaded on demand.

The best part about SpringRoll Connect is the ease of use to manage not only releases, but separate environments such as development, Quality Assurance (QA), and production.

SpringRoll Connect references the game repository so that you are able to move a code commit all the way through the release process from a development version to a production version. SpringRoll Connect provides the ability to reference not only versions but environments as well. For example, you may set up your staging version of your website to point to the QA version of the game while your production website continues to reference the production version. Once that commit has been flagged as a production release, the production website will seamlessly display the new version of the game.

SpringRoll Connect also allows the entire deployment process to be fully automated.

Given the challenges faced in distributing HTML5 content, particularly games, the tools that SpringRoll provides take away the pain points of the process, allowing developers and game designers to do what they do best: build awesome games.