Angel \”Java\” Lopez on Blog

November 30, 2011

Social Online Games Programming (Part 5) New Azure Toolkit

Previous Post
Next Post

Two weeks ago, a new version of Windows Azure Toolkit for Social Games was released. See @ntotten posts:

Windows Azure Toolkit for Social Games Version 1.1.1
Windows Azure Toolkit for Social Games Version 1.1

The new version implements two simple HTML5 games: tic-tac-toe and four-in-a-row, backed up by ASP.NET MVC views, WCF Web API services, ACS federated security, and Azure Storage. You can play them online at:

I think this is a more clear example than the previous one (Tankster) that was great but a bit overwhelming ;-). Let’s dive into some implementation details of this new example.

Totten wrote:

The biggest change we have made in this release is to separate the core toolkit from the Tankster game. After we released the Tankster sample game we received a lot of feedback asking for a simpler game that developers could use to learn. To meet this need we developed two simple games, Tic-Tac-Toe and Four in a Row, and included in the toolkit. The Tankster game is now available separately as a sample built on top of the toolkit.

While the new games included in the toolkit are much simpler than Tankster, they still show the same core concepts. You can easily use these samples as a starting point to build out any number of types of games. Additionally, you will find that many of the core components of the game such as the leaderboard services, game command services can be used without any modification to the server side or client side code.

In my previous post, I mentioned a minor but important change in game action processing: any game logic was removed from server code. Adopting this approach, you can write new games without changing the ASP.NET MVC code. You still can add server side code if you want (to have more control over the actions, to avoid player cheating, etc..) but it is interesting to have a base code with game-agnostic code.

Opening the solution in Visual Studio, you will find Javascript files used by the two games. You can write a new game, reusing these files:

The games are implemented as areas:

You could add new games and publish them as NuGet packages.

Visually, the client Javascript code is organized as:

Each game X (TicTacToe, FourInARow, yours) has:

XGame: the game logic

XBoard: to draw board on canvas and to detect click events on it

XViewModel: containing the player and other data to be used at view rendering (the example uses knockout.js, an MVC in Javascript)

XController: to process new events and to coordinate the above elements

The generic part:

UserService: methods related to users: login, get friends, etc.

GameService:  play moves, receives new moves, other actions.

ServerInterface: Ajax calls (using GET, POST, JSONP, Azure storage…) that are used by the implemention of User and Game Service.

Topics for next posts: analyze the Javascript code, the use of Canvas, Javascript tests using QUnit, communication with server using Ajax, change the Game Service (Javascript) to use a Node.js server.

Keep tuned!

Angel “Java” Lopez


  1. […] by Social Online Games Programming (Part 5) New Azure Toolkit « Angel “Java” Lopez on… — November 30, 2011 @ 9:16 am […]

    Pingback by Social Online Games Programming (Part 4) Processing arbitrary Game Actions « Angel “Java” Lopez on Blog — November 30, 2011 @ 9:18 am

  2. […] Social Games Programming Programando Juegos Sociales […]

    Pingback by Desarrollando un juego en la nube con HTML5, JavaScript y Node.js - Angel "Java" Lopez — December 16, 2011 @ 4:44 pm

  3. Can I simply say what a comfort to find somebody that really understands what they’re talking about online. You actually realize how to bring a problem to light and make it important. More and more people need to read this and understand this side of your story. It’s surprising you are not more popular since you definitely possess the gift.

    Comment by — March 7, 2012 @ 10:40 pm

  4. I was very pleased to find this page. I need to to thank you for your time just for this fantastic read!! I definitely really liked every little bit of it and i also have you bookmarked to check out new things on your website.

    Comment by — March 7, 2012 @ 10:41 pm

  5. You should be a part of a contest for one of the best blogs on the net. I’m going to recommend this blog!

    Comment by — March 7, 2012 @ 10:41 pm

  6. Hello, sir i would like to ask that what is the scope of java training, what all topics should be covered and it is kinda bothering me … and has anyone studies from this course of core and advance java online ?? or tell me any other guidance…
    would really appreciate help… and Also i would like to thank for all the information you are providing on java concepts.

    Comment by Tran CE — December 4, 2012 @ 9:34 am

  7. An average of it requires 성 프란시스 수녀회(CSF
    Korea) – 수녀회 9월 소식 one day to make sure that deposits along with twenty four hours to ensure withdrawal/payouts.
    성 프란시스 수녀회(CSF Korea) – 수녀회 9월 소식 gives the two acquire as well as a
    flash natural environment game play choice (this implies you’ll be able to play using a get or perhaps devoid of one). Choosing a World wide web Casino, particularly if this is your current original sign-up, should be based on if a Casino includes a no deposit 성 프란시스 수녀회(CSF Korea) – 수녀회 9월 소식 to make available.

    Comment by 성 프란시스 수녀회(CSF Korea) - 수녀회 9월 소식 — March 24, 2013 @ 2:48 pm

  8. You ought to take part in a contest for one of the greatest blogs on the internet. I most certainly will recommend this site!

    Comment by oceanfront suites — April 22, 2013 @ 1:29 pm

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at

%d bloggers like this: