Integrated Facebook Open Graph in Tic Tac Toe Extended

My recent thoughts is to deeply integrate social networking with gethugames.in. As part of the mission, I already added FB Like, +1, tweet button to almost all pages / apps including blog posts. Last week I added custom Open graph obejct (badge) and actions (earn) to the game Tic Tac Toe Extended. Since the game already had a collectible like item namely badges, the task turned out to be very simple.

Open Graph Earn / Badge Architecture:

The goal is to let the player `earn` a `badge` object at the end of each game, where the badges are ranked based on IQ level. Or in other words, to make feed story that says `User has earned Student badge on Tic Tac Toe Extended`. The procedure will look complex for first timer, but its very simple as long as we rightly follow the docs correctly. I will explain things that I done step by step:

  1. Create pages that represent badge objects.
  2. Create an app @ Facebook Developers Apps.
  3. Configure earn action and badge object.
  4. Call OpenGraph API from in-game.

1. Page for Badge objects

I wrote a simple PHP scriptto map to 10 different in-game badges. The badge pages have the following meta tags for the facebook to identify them as Open Graph objects.

<meta property="fb:app_id" content="<app-id>" />
<meta property="og:type" content="ggtestapplication:badge"/>
<meta property="og:url" content="http:/localhost/ttt/badge.php?rank=10"/>
<meta property="og:title" content="Amoeba"/>
<meta property="og:image" content="http://localhost/ttt/images/Amoeba.png"/>
<meta property="og:description" content="Amoeba huh? Wish you atleast had multi celled brains."/>
<meta property="ggtestapplication:rank" content="10"/>

2. Create an app @ Facebook Developers Apps

Goto Facebook Developers and create a new app filling out the all the fields.

Facebook Create application

Sample Application creation dialog in Facebook Developers App

3. Configure earn action and badge object

Goto Open Graph Dashboard and create a new object, name it Badge. Add one custom Integer property and name it rank. This rank is to give different weight-age to different badges.

Open Graph Badge Object

Badge Open Graph object with custom Rank Parameter for Tic Tac Toe Extended

Similarly create `earn` action connected with `badge` object, so as to make the badge earnable. Optionally add a `report` String parameter which can be used to present with the game win / lose and game timings. Your earn action page should look like this after the above setup:

Open Graph Earn Action

earn action configured in open graph

Open Graph Earn Action Story Configuration

Open Graph Earn Action Story Configuration

Tip: While configuring story attachment and in aggregations, the object and action variables can be accessed by placing them in between paranthesis `{}`. Apart from our custom objects / actions, several templates are provided, which are documented very well in developer docs.

4. Call OpenGraph API from in-game

With everything setup properly, now we can get into coding. When the game is over and scores are calculated, the action can be posted with the following code:

FB.api('/me/' + 'tictactoeextended:earn',
    'post',
    {'report' : TicTacToe.GameState.gameDescription,
    badge : 'http://www.gethugames.in/tictactoe/badge.php?rank=' + (10 - TicTacToe.GameState.rank) },
    function(response) {
        console.log(response);
});

Before calling this code to post an action, the user should be logged in with corresponding `posting` permissions. I will write those procedures for those in my next upcoming posts. With all this done right, when I finish a game, an activity gets posted in my profile as shown below:

Tic Tac Toe Extended Activity Feed

Earn Badge action of Tic Tac Toe Extended showing up in Facebook Activity stream

Open Graph Aggregations

If you accomplished all the above steps, setting up an aggregation is just a piece of cake and I setup an aggregation box and it looks as below:

Tic Tac Toe Extended - Facebook Aggregations

Aggregations box in Facebook profile page for Tic Tac Toe Extended

PS: After finishing all this, I couldn’t submit the app to Facebook App Center as it require a secure URL (https) to access the game and I dont have SSL setup in my server :-( But I will be buying it soon and submit it to app center.

HTML5 Orientation support (iPhone)

There is a great tutorial on html5rocks.com on how to use device orientation api in javascript. It has neat examples to demonstrate the functionality.

Problems with browser Orientation change:

But one issue that I faced is when the device(iPhone) is tilted, the browser’s orientation gets changed between landscape and portrait, which had a very negative impact on my project. I am currently working on a game named ‘HTML5 Space Maze'(in github), which is supposed to draw a continuous line based on device orientation. But when the device is tilted and the browser’s orientation gets changed, my game’s state gets messed up.Searched with a hope that there should be some API to lock the browser orientation. But there were none, though I got some work arounds(in stackoverflow) to mimic the orientation lock. But I am not satisfied with all this and postponed my R & D.

Phonegap, the savior:

Today morning I was trying out the phonegap framework for first time and my HTML5 Space Maze game integrated well with the phonegap and ran good in iPhone. Then I switched to the long-forgotten ‘orientation’ branch of my project and tried running the code through phonegap, locking the orientation of ‘CDVViewController’ to landscape left.Then tested the code in iPhone and it worked flawlessly. Since the ViewController is restricted to landscape left, no matter how you tilt the phone, the views wont rotate and thus making my game responding well.

I achieved my goal somehow today, but the target platform changed from web to iOS now. Not a big deal for me, I not yet decided or even thought on how and where to deploy the product once its complete.