Gaming

A PubNub-Powered Game for ImpactJS

3 min read Stephen Blum on Nov 23, 2011

warning

We’ve updated our SDKs, and this code is now deprecated.

Good news is we’ve written a comprehensive guide to building a multiplayer game. Check it out!

ImpactJS is an HTML5 mobile and web games framework for building games quickly. PubNub has the ability to add Multi player Connectivity for your ImpactJS games. We want to make it super easy to provide and power your multi player games with PubNub. That’s why today we’re helping you get off the ground with a tutorial and basic plugin. Watch on YouTube: http://youtu.be/mTQqSIaH7Lg

Multiplayer Game State

First, a note on the concept of state. State provides a difficult problem when it comes to making multiplayer games. The problem at hand is keeping track of where each on-screen entity is, including the values for the entity’s attributes. In some situations, it may be ok to have each client blast out information and have the other clients update accordingly. But what if two clients disagree? Who’s right? To get around this, we need a authoritative middle-man. A server. In the context of PubNub, that’s really a ‘super client’. Nonetheless, we provide you a basic Node.js based server to accompany our plugin. In our case, we use the same Node.js instance that hosts the http server for ImpactJS to also be this server.

Multiplayer Collision Detection

But what about collision detection? This provides another challenge, because the server is not able to run the same canvas-based game code that the clients can in a browser. Despite Node.js being javascript-based, it requires a window object not present on the server. Our solution for the time being is the notion of player “ownership” of certain entities. When you define a entity in PubNub, you indicate whether an item always is controlled by a certain player, or if it is variable. Let’s take the example of a pong game. Each player is responsible for one paddle and during the game that will not change. Player 1 will never be able to say where Player 2’s paddle is located, and vise-versa. The puck, however, will be a variable entity. When ever the puck moves, the server calculates which non-variable entity is the closest. That entity’s owner will be in charge of the puck. In the case of pong, that occurs when the puck crosses the screen half-way point. In this way, collisions between variable entities and non-variable entities will always occur locally to the relevant player. It’s not a perfect solution, and certainly it’s susceptible to cheating, but for this early stage it suffices. Impact2 Before you get started, we’re assuming you have a license and a copy of the ImpactJS code. You can grab them from the ImpactJS website. Once you get that, you’ll need our plugin, which is located here. Finally, you’ll want our tutorial code, located here. Drop the ImpactJS code in as /lib/impact in the root example directory (we intentially omited it, you’ll need a license!) and drop the plugin as /lib/plugins/pubnub . Got everything in the right place? Great. Now you’ll need node.js installed for the basic server components, and a few modules. But like any true open-source hacker, you can get those easily enough. You’ll write your game logic in /lib/game/main.js. Here, you’ll make your game extend PubNub Game like so:

ig.module(

‘game.main’ ) .requires( ‘impact.game’, … ‘plugins.pubnub.game’ ) .defines(function(){ MyGame = ig.PubNubGame.extend({ …   Similarly, you’ll extend your entities to be PubNubEntities like this:

EntityPuck = ig.PubNubEntity.extend({ ...

It’s easy! When you do this, you get some PubNub stuff out of the box, for free:

  1. Presence. When a client connects to your game, you’ll want to know whether or not he’s still there or it has disconnected. Just call initPlayer(PLAYERID) on the server side.
  2. Entity Auto-Update. After you run startGame(ARRAY_OF_PLAYERS, INITIAL_POSITIONS) , all entities will automatically update other entities with their current location and velocity.
  3. Appropriate Collision Detection also from startGame(…), clients will handle collisions that are local to their controlled entities.

Just a Starting Point

What we’re releasing today is intended to help you get off the ground making a multiplayer games. There are some significant challenges when it comes to games. All canvas-based game frameworks render things using RequestAnimationFrame and not based on real time measurements. This means coordinating between two devises with different framerates is very challenging. We will continue to support our developer network in this area. We want PubNub to be the no-brainer choice when it comes to powering your next multiplayer game.

0