Getting a Console Experience on the Web

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.

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?

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.

Build New Games

Getting a Console Experience on the Web

Controllers

What does the open web need?

What’s currently available?

What tools do I use?

Getting it up and running

What’s next?

Profiles

What does the open web need?

What’s currently available?

What tools can I use?

What’s next?

Marketplace

What does the open web need?

What’s currently available?

What tools can I use?

Google Chrome Web Store

Registration

Pricing

Platforms

Facebook App Center

Registration

Pricing

Platforms

Mozilla Marketplace

Registration

Pricing

Platforms

OpenAppMkt

Registration

Pricing

Platforms

Kongregate

Registration

Pricing

Platforms

Wrapping up

Comments