Console Experience on the Web for Developers

This article recently appeared on BuildNewGames.com, a collaboration by the teams at Bocoup and Internet Explorer.

Every new generation of consoles has brought with it services such as marketplaces, achievements and gamer profiles, which have made it easier for players to instantly connect with friends, as well as being able to discover, purchase and find new ways to enjoy games.

In this article I will be discussing 3 main features of traditional gaming systems, and compare them with the offerings of the open web, and discussing how you can leverage these offerings to bring in new audiences for your games.

Controllers

What kind of console game doesn’t support controllers? Analog input can make most games, from platformers to racers, easier and undoubtedly more fun to play. Games like Super Meat Boy or FIFA, while supporting keyboards, are designed to be played with controllers. The social, couch-based gaming of traditional consoles required a method of input that was simple, unobtrusive and ergonomic.

What does the open web need?

An interface that allows players (and their friends) to simply plug in any existing controller and be able to start a game without downloading any special drivers, browsers, or plugins. Unfortunately, there are a few problems with that ideal situation:

• Most controllers require driver installations on almost every platform out there (The exception is XBOX Controller for Windows)
• Some controllers flat-out refuse to work on certain platforms
• Input values vary by controller
• Not all browsers support/are working on Game Controller APIs

What’s currently available?

Clearly the folks at Mozilla and Google see the need for HTML5 to catch up to consoles, as their rapid work on Gamepad-specific APIs shows. Mozilla Firefox has a special Gamepad build. All Chrome builds require a change in chrome://flags before you can read controller input.

In terms of controller support, here’s what you can use:

Windows

• XBOX360 Controller for Windows (works best)
• PLAYSTATION DualShock3 controller – can trick Windows into reading it as XBOX360 controller using MotionInJoy
• Logitech Gamepads such as the F310, F510 and F710
• As a rule of thumb: any controller which emulates the XBOX360 controller should work.

Linux

• Controllers in the Windows list above should all work.
• Due to the variety of distributions and kernel versions out there, it’s hard to provide a concrete list of supported controllers, but anything using the USB HID interface should work.

Mac

• PLAYSTATION DualShock3 controller is supported out-of-the-box
• XBOX360 Controller for Windows, using special software from Colin Munro

What tools do I use?

There are a few libraries out there that ease the pain of having to customize button assignments and API calls across Firefox and Chrome.

• Gamepad.js is clean, works well, and is super simple to work with
• Input.js is another one that tries to abstract away the Gamepad API. It’s built by a Mozilla Engineer and is being developed as part of their Paladin gaming initiative.
• Raw API calls. It isn’t too hard, but you’ll have to worry about button mapping across a variety of controllers.

Getting it up and running

Let’s build a game that requires controller input. We’ll be using a PLAYSTATION DualShock3 controller, tweaked via MotionInJoy to mimic an XBOX360 Controller for Windows. For the Gamepad API, we’ll be using the gamepad.js library. The live demo is here.

• First, include gamepad.js in your html file. This contains all the interfaces you’ll need to work with controllers.
• Check if the browser supports controllers using if (Gamepad.supported)
• Assign the controller data to a variable with var pads = Gamepad.getStates();
• Loop through the available controllers with for (var i = 0; i < pads.length; ++i)
• Check if the current controller (in the case of multiple controllers) is connected with if (pads[i])
• Read input values using the simple interface LEFT_STICK_X = pads[i].leftStickX;

Here’s some sample code:

if (Gamepad.supported) {
// Ready to rock!
} else {
// Fallback or encourage user to bug their browser vendor
} var pads = Gamepad.getStates(); for (var i = 0; i < pads.length; ++i) {
if (pads[i]) { console.log(pads[i].leftStickX + “, “ + pads[i].leftStickY); if(pads[i].faceButton0) { console.log(“button0 pressed”); } } }

What’s next?

If you do try the live demo or build your own Gamepad web game, you’ll notice a bit of lag when the controllers are being used. Browser Gamepad API support is still in the experimental stage, and isn’t intended for consumer use at the moment. There’s still some time until we get smooth, plug-and-play controller-based games on our browsers, but development is well underway and these features should be shipping in browsers by next year.

Profiles

An essential, social aspect of today’s game consoles is the ability to personalize your own gaming experiences. Features like avatars, achievements, and save games are only possible when each player possesses a unique, individual gaming profile. Add the ability to create groups of friends and relatives, and developers have a goldmine of consumer interaction. With the rise of social gaming, the need for player profiles and a social network for open web gaming has never been greater.

What does the open web need?

Like PlayStation, XBOX and Steam, the open web needs a centralised system for storing and accessing player data across a variety of compatible games. This system should work across browsers, OSes and devices and provide seamless integration between them.

Unfortunately, there are a few problems with that ideal situation:

• This requires users to set up yet another account; something they won’t be inclined to do
• A central system of profiles will proverbially “put everyone’s eggs in one basket”, leaving users’ private information open to anyone able to successfully hack the system.
• Getting developers on board is always a tough task for a new platform.

What’s currently available?

Kongregate and Newgrounds are a couple of platforms already set up to allow player achievement tracking, as well as social features like friends lists. Google+ and Facebook have their respective Social APIs that developers can leverage. Third-party tools such as AppMobi’s PlayMobi SDK give developer easy access to social features that take advantage of Facebook connect, simplifying the development process.

BrowserID (or Mozilla Persona) is an alternative method of user authentication that makes it easy for users of existing email IDs to login to a website, without sharing their passwords with it. By signing in through BrowserID, the user only has to remember one email ID and password combination. For more information on BrowserID, read the docs at Mozilla’s Developer Network.

What tools can I use?

Each of the currently available solutions has its own techniques for getting your players authenticated. It’s generally advisable to integrate an existing SDK, which will be generally be of high quality and will save you time.

• Facebook Social APIs
• Google+
• AppMobi’s PlayMobi SDK
• Socialize

As a general note, gamers hate having to create new logins unless there’s a strong incentive to do so, like peer-pressure or exclusive rewards. You should use whatever authentication suits your playing audience. If it’s a casual game that would be popular with the Farmville crowd, your best bet is to stick with Facebook. The rising popularity of Twitter authentication has also worked for some games.

What’s next?

Since HTML5 is still growing, it may be some time until we notice market leaders in the development of a Gaming Profile solution. Until there is a system that spans across browsers and devices, and carries an incentive to join, the current platform fragmentation due to browser and device differences will likely require developers to utilise multiple solutions for player profiles.

Marketplace

Digital distribution has quickly ramped up in popularity to overtake traditional, brick-and-mortar stores in terms of games sold. By eliminating the costs of physical production, digitally distributed games can earn their developers more money with less effort, giving them more time to polish the game.

What does the open web need?

Users need a storefront that distributes their favourite titles, from AAA blockbusters like Bulletstorm to Indie gems like Bastion. It should be accessible from every browser, regardless of OS or device. Since these games will be using HTML5 and open web technologies, there is no reason why they shouldn’t be compatible with any reasonably powerful device. In the case of resource-intensive games (or if the game requires a certain type of interaction) the store should only display games that can be played on the user’s device. Games should present a playable demo and trailer that shows off the main features of the game. Purchasing games should be quick and simple, and should be possible on any device. Like Steam, strong social connections will enhance player experiences through community forums and game-related fan groups.

What’s currently available?

Google started the HTML5 marketplace trend with the launch of their Chrome Web Store in December 2010. Since then, app marketplaces such as Facebook App Center, OpenAppMkt, and the recent launch of Mozilla’s Marketplace have consolidated HTML5 as a viable platform for developers. Even Kongregate (a dominant Flash game portal) has recently started accepting HTML5 game submissions.

The social aspect of the open web is a powerful factor in its ability to deliver successfully as a platform. As we’ve seen with Facebook games such as Farmville, games that integrate with social networks and leverage connections between people are generally successful in creating and maintaining a strong user base. This trend is also spreading to the mobile space, with games like Draw Something utilising the appeal of social gaming to engage a wide audience. With the rise of casual and “freemium” games, popularity of games is now dictated through the amount of social “buzz” created, rather than the traditional means of advertising and media reviews.

Now is the best time to publish HTML5 games; the market is relatively new, there isn’t much in terms of competition, and all eyes are eagerly on the segment. Like with Apple’s App Store in 2008-09, now is the time we’ll be seeing new developers strike it big in these new markets.

What tools can I use?

Here’s a run-down of some of your options as a HTML5 game developer. Due to the evolving nature of marketplaces, I’ve only listed some of the major players.

Note: For all marketplaces, you are free to utilise an external In-App Billing API for purchases, which (in most cases) won’t require revenue sharing.

Google Chrome Web Store

Registration

A one-time $5 fee for registering with the store in order to prove your authenticity. This helps weed out any fradulent submissions, and has resulted in a generally positive and high-quality store catalog.

Pricing

No extra charges for publishing free apps. For paid apps, Google takes 5% of the sale price, per transaction. If you take advantage of their tightly-integrated payments system, you have to use Google Checkout.

Platforms

Web Store is only available for Chrome and Chromium running on Windows, Mac, and Linux running on desktops and laptops. No mobile support is currently available.

Facebook App Center

Registration

All you need is a Facebook account. No registration charges apply.

Pricing

Facebook App Center does not handle payment processing. If you wish for users to pay for your game, you must utilize a separate payment service like Google’s In-App Payments API.

Platforms

Facebook App Center runs on any browser, as well as on its mobile devices running Android, iOS and other operating systems. Mobile apps on Facebook App Center may be built for specific devices, but all webapps will be usable.

Mozilla Marketplace

Registration

Currently in a developer-only “preview” phase, the service is only open for invitees. Developers have access to publishing for free.

Pricing

The Marketplace offers free publishing of apps. Mozilla will be offering an In-App Payment API for use in games, however, they will keep 30% of any revenue generated by an app, whether IAP or sale price. PayPal is the only payment processor officially supported at the moment, although that could change in the future.

Platforms

Obviously the Mozilla Marketplace will be geared towards Firefox users, however, with the impending launch of Firefox OS (previously known as Boot2Gecko), Mozilla is aiming for a connected experience across devices. The Marketplace is slated to launch “later this year”, presumably coinciding with Mozilla’s “Kilimanjaro” event in September 2012 which consolidates the release of Firefox OS as well.

OpenAppMkt

Registration

Free for developers to sign up. Since the content is curated by the community, there is little reason for a barrier to entry.

Pricing

Submitting a free app does not require any payment. Paid apps are subject to a 80/20 split. Payment threshold for paid apps is USD150 (after they take their 20% cut), after which you can receive payment. Payment is possible via PayPal, Check, or Bank Transfers.

Platforms

OpenAppMkt runs on top of existing mobile platforms such as Android and iOS.

Kongregate

Registration

As a free games community, they encourage submissions. However, their traditional method of ad-based income might not be for you.

Pricing

All games give the developer a 25% cut of any ad-based revenue. Upon integrating with the Stats and Challenges API, developers get a further 10%. If the game is a Kongregate-exclusive, you can earn another 15%, bringing it up to a maximum of 50% of ad revenue.

Platforms

Kongregate is one of the most popular Flash game portals. As such, you can play games on any device with a Flash-enabled browser. Also, they have launched an Android portal that offers a number of high-quality titles.

Wrapping up

While the open web may not have all the features necessary to prompt a mass-migration of users from traditional consoles, there are more than enough methods for you to implement a game experience that caters to the traditional forms of gaming. As the open web is constantly evolving,

more features will find their way to this rapidly growing market. Hopefully in a few more years, consoles will become obsolete and we’ll be seeing big budget AAA titles release on the open web for anyone to play on any web browser.

About the Author

Nikhil is working towards getting into the Game Development industry by building unique, inclusive and polished games for a variety of platforms, and is also a huge open-web enthusiast.