Simplifying Google Play Games API

Previously we covered Using Google Play Games on the Web and how Google Play Games services[3] can be used for web games[1]. There was a lot of interest on that article, mostly about providing UI components, which is a project that I have started, when I am not working on the refactor of Gaming Engine - Snake Demo v2. However, before building a UI, the API needed to be cleaned up, making the authentication easier and chainable callbacks without needing function nesting. The whole framework will be available on github[2] as I work on it, but for starters lets explore version 0.1, The API Improvements.

How do it…

From Using Google Play Games on the Web we setup a page with the necessary meta tag variables and a login button:

<meta name="google-signin-clientid" content="YOUR_CLIENT_ID_HERE" />
<meta name="google-signin-cookiepolicy" content="single_host_origin" />
<meta name="google-signin-approvalprompt" content="auto" />
<meta name="google-signin-callback" content="YOUR_JS_CALLBACK_FUNCTION" />
<meta name="google-signin-scope" content="" />

<span id="signinButton"><span class="g-signin"></span></span>

And then add in the following JavaScript from the github project[2]:

<script src="{PATH_TO_JS}/underscore.js"></script>
<script src="{PATH_TO_JS}/api.js"></script>
<!-- This is dumb, but the callback function must be directly attached to window. -->
<script>YOUR_JS_CALLBACK_FUNCTION = GoogleGamesApi.authCallback;</script>
<script src=""></script>

Using the following method to wait for authentication:

GoogleGamesApi.runWhenAuthenticated(function(oApi) {
  // Your code here.

Now methods on the API can be called to fetch data:

GoogleGamesApi.runWhenAuthenticated(function(oApi) {
  oApi.leaderboards.list(function(oResponse) {
    // Do something with the response.
  oApi.quests.list(function(oResponse) {
    // Do something with the response.

Or dependant requests can be chained on each other:

GoogleGamesApi.runWhenAuthenticated(function(oApi) {
  var oAchievementInstanceMap = {};
  var oPlayer;
  oApi.players.get(function(oResponse) {
    oPlayer = oResponse;
  }, {playerId: 'me'})
      .achievements.definitions(function(oResponse) {
        _.each(oResponse.items, function(oAchievementDefinition) {
          oAchievementInstanceMap[] =
      }).achievements.instances(function(oResponse) {
        _.each(oResponse.items, function(oAchievementInstance) {
          var oAchievementDefinition = oAchievementInstanceMap[];
          console.log('You have ' + oAchievementInstance.achievementState
              + ' the achievement ' +;
      }, {playerId: 'me'});

How it works…

The API is still a little rough, but I am pretty happy with how much easier it is to use than the original. The only part of the API that I am not happy with is integrating the authentication callback function with Google. Since the Google API requires the auth callback be attached directly to window and not another object on window (you cannot use GoogleGamesApi.authCallback directly). Consequently, GoogleGamesApi.authCallback must be set to a globally available variable and that global variable set to the google-signin-callback meta.

When the user authenticates, Google will automatically call GoogleGamesApi.authCallback and it will handle authentication. Calling any of the APIs when not authenticated will throw an GoogleGamesApi.ApiUnauthenticatedException error. The GoogleGamesApi.runWhenAuthenticated should be passed a callback function, which will execute as soon as the API authenticates or immediately when already authenticated. The callback will be passed a single argument, the GoogleGamesApi object for ease of use, instead of forcing the developer to call the global variable (GoogleGamesApi).

Inside the GoogleGamesApi.runWhenAuthenticated callback all API calls are available on oApi or GoogleGamesApi. These are the same object, so they can be used interchangeable, but be consistent. Calls to the API simply execute the underlying Google Play Games API. At the time of this writing, the first argument of all methods is the callback function (to pass the response into) and the second argument is an optional object for passing required/optional arguments to the Games API (these are defined on the API website[3]). I point this out, because while this makes most sense now, I may change the API signature if it something else makes more sense after more adoption, so check the github documentation. If a required parameter is not included, the underlying Games APIs will throw an exception.

Using the GoogleGamesApi object will make all API calls asynchronous, each returning as soon as the data is available. However, each API call also returns a new instance of itself, which can be chained (as shown in the last example). When chaining methods they use a promise-like system, waiting for the call to complete (and the callback executed), before running the next API call. This is useful when you have data in a dependant API call that references something from another API call (usually object definitions and instances, or a player object). This is one of the main failings of the Games API.

There’s more…

This is just the groundwork for building an Android inspired web UI. There is a lot to build still, and improvements to be added to the API layer. Some things that I expect to add soon are better authentication error handling (at least documenting a good auth recovery pattern), additions to the promise layer (such as a fail function), and possibly better caching. For the latter, the API currently leverages the browser URL caching, but there is probably room for an in memory map or a local storage technology. Anyway, there is loads more to come, but I wanted to start the project and share it with the community.


  1. Snake V3 w/ Google Games API
  2. Google Play Games Web UI Project
  3. Google Play Games API

Using EMCAScript 6 Today

I have been avoiding writing about ECMAScript 6 (E6)[6] for the past couple of years. This is mostly because the standard was not finalized, and consequently most browsers/engines were implementing different and often unstable versions of the various new features. With the E6 spec stabilizing almost a year ago now[1] and the final release date scheduled sometime later this year[1], I expected most browsers/engines would have implemented much of it, with bake ...

Karma Test Runner with QUnit in 10 Minutes

This is a ten minute primer for using Karma and QUnit to unit test JavaScript.

Getting ready

Install Karma[1], plugins, and Qunit[2].
 # Install Karma npm install karma --save-dev # Install plugins npm install karma-qunit karma-phantomjs-launcher --save-dev # Add global CLI npm install -g karma-cli # Install QUnit npm install --save-dev qunitjs 

How do it…

In your project directory, run the Karma initialization script:
 karma init ...

Object Pool Pattern in JavaScript

Now that we understand the Recycler Object for Object Pool Pattern, we can build the logic for managing the object pool. An object pool is a simple API that manages recycling and fetching recyclable objects. There are two common models for object pools, one with a fixed number of objects that errors if too many objects are requested, and the other (more flexible approach) is to use the object pool for a fixed number ...

JavaScript Low Resolution Image Replacer

This is a handy, yet very simple, widget I was hacking on to replace loading or low resolution images with higher resolution ones once the document has finished loading.

How do it…

The widget is built using the jQuery plugin system and here is the complete code:
 (function($) { var isLoaded = false, REPLACEMENT_CLASS = "replacement-class", REPLACEMENT_RCLASS = "replacement-rclass", REPLACEMENT_URL = "replacement-img", TIMER = 500; $(window).load(function() { isLoaded = true; }); function ...

Network Information API Polyfill

One of the many new HTML5 APIs slowly being implemented by browsers is the Network Information API[2]. It exposes information about the type of network that the connecting device is using. In theory, this allows developers to optimize content around the connection speed of the user. However, as with most HTML5 APIs it is supported only by some browsers with/without prefixes, and has a legacy implementation, so a polyfill is useful when working with ...

Detecting Object Mutations by Counting Properties

Have you ever included a library and wonder, "how much did this library add to the window object", or passed an object into a function and asked yourself, "did that function modify my object"? Instead of reading the source code, this article shows a quick trick for answering these questions.

How do it…

For starters we need a function to count the number of properties on an object:
 function fnCountProperties(o) { var ...

Using Google Play Games on the Web

As many of you know, I now work for Google on the Play Games Team. We provide APIs for game developers, implementing useful features like leaderboards and achievements, so the developer doesn't have to. While many Android developers are using our services, adoption on the web could be better, so lets take a look at how to integrate the Google Play Games Services achievements into a web game.

Getting ready

Become a Google developer ...

Event Bubble & Capture Phases

One of the less understood, but powerful feature of browser events are their phases. According to the W3C level 2 spec there are three phases[1]: AT_TARGET=2, BUBBLING_PHASE=3, and CAPTURING_PHASE=1. Most browsers also implement a fourth phase[2]: NONE=0.

Getting ready

Just a quick note that everything discussed in this article is for modern browsers (all browsers except IE <9). Prior to IE 9, Internet Explorer used its own event system, instead of conforming ...

Passing Objects into addEventListener Instead of Functions

I was reviewing the browser event stack the other day and was reminded of a rarely used feature of addEventListener that allows developers to autobind the execution context object, instead of requiring a call to bind or using a library, that is worth sharing, if you weren’t already aware.

How do it…

Typically, when attaching an event, we write:
 var myObj = { handleEvent: function (evt) { // 'this' will be scoped ...