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.

Tic Tac Toe Extended

I started this project nearly 9 months ago planned to finish in a month, but because of my laziness dragged till now and finally I completed the development now. Very big thanks to my friend Sridhar for his awesome idea of extended Tic Tac Toe game. At first I never thought it would be much fun, but I started doing it because it seemed simple from development point of view. But when I play the game now with any of my friend, I feel the game addictive.

Game is hosted at http://www.gethugames.in/tictactoe/

 

Source code available at https://github.com/saiy2k/Tic-Tac-Toe-Extended-HTML5-Game

 

Game Description:

This is an extended version of Tic Tac Toe game with a board size of 9×9. The player scores a point on placing his sign in 4 consecutive tiles. The game can be played with another human player or with AI. At the end of the game based on player’s score and timing a Badge is awarded which can be shared to Facebook / Twitter. This game also supports HTML5 offline mode, thus requiring no internet connection to play after first run.

Tic Tac Toe Extended – Screenshot

HTML5 Features:

* Uses Canvas Tag to draw the game board and player marks.
* supports Offline mode
* uses CSS media queries to scale to different screen sizes.
* Playable on all devices from Desktop, Tablet to mobile devices (with minimum resolution of 320×480)

Class Design:
* GameManager: Handles high level game flow and handles UI controls and their events(using jQuery).
* InputManager: manages game specific input.
* GameState: holds the state of the game from game tile array, scores, clicked tile, elapsed time, player names, etc.,
* GameLogic: core game logics like score calculation, checking for win/lose condition, AI.
* GameBoard: updates and draws the gameboard using an array of BoardTile objects.
* BoardTile: handles a single tile in the board, updates and draws them.
* FBWrapper: connects to facebook and shares the game status.
* TwitterWrapper: connects to twitter and shares the game status.

Game AI:

The challenging part of this project is the AI. At first, I tried implementing some tricky AI which will track all your moves and it either go full defense mode, in which it tries to block tiles making hard for the player to score or go in full attack mode, in which the AI only concentrated on getting score for itself. But implementing those logics proved hard for me.

So I fell back to brute force algorithm which scans the whole board in 8 directions(top to bottom and reverse, left to right and reverse, top left to bottom right and reverse, top right to bottom left and reverse). While scanning cell by cell, it adds up a temporary variable for same consecutive non blank tile it passes. That is if the first nonblank tile is the AI tile itself, and 4 such tile are placed adjancently, then it increases the score of 5th non blank tile by 4.

This same logic is repeated for all rows, columns and diagonals in both directions and a weight-age score is given for each and every cell in the process. In the end, the cell with high weight-age will be marking during the AI’s next move.

Scoring System:

The scoring system is very simple, there is a rank calculated based on which the player is given a badge. Higher rank is given as the difference between player’s score and opponent’s score is high and the rank value is lowered as the player spends more time than the opponent.

Offline Mode and Media Queries:

This is the first time for me to try with this technologies. They were very simple but very useful powerful technologies.

Overall, I learned a hell lot from this project including Audio API and many others mentioned above. From my next project, I well try to implement all the things that I learned. And I am thinking of supporting IE from my next project onwards. Hope IE wont be so stubborn in supporting modern web standards.

Spirocanvas

Oops… I started this blog almost half a year ago and totally forgot to post after that. Nevertheless, I am working on open source projects all these times, which I will write more about, on the following posts.

This post is about the Spirocanvas web application, that I have been developing for the past one month. This application lets user to draw amazing spirographs and allows them to be shared to their friends on social networks. Technically, this project is based on the brand new <canvas> element, that is the part of HTML5 specification and I started this project mainly to learn HTML5.

This project was once hosted on code.google.com @ http://code.google.com/p/spirocanvas/. But just recently I moved the code to github @ https://github.com/saiy2k/spirocanvas.

Spirocavas

What this app is about:

This app let you draw cool spirographs with a single click. Tapping on Random button at the bottom draws cool looking randomly generated spirographs. You can control exactly how the graph should be drawn using the controls at the left side. Each graph is drawn in a separate layer. These layers can be reordered, deleted using the layers panel at the right.

Update – Jan, 2012:

The development is over and the project is not hosted at http://www.gethugames.in/spirocanvas/. The app still needs some polish at many things. It looks much like a prototype than a complete product. But I am not going to spend more time with this now, as I am trying out new things (especially games) now. But will come back and give final touches to spirocanvas soon.