2048 PART 1: A CLASSIC GOES SOCIAL

With our product CloudBuilder getting more attention, we decided to start a series of articles that are aimed at demonstrating how easy it can be to add network functionality to your application. For this series, we are going to use a well-known 2048 clone as a basis, which is coded in Javascript. The original author is Gabriele Cirulli and the code is available on GitHub.

This game plays fully locally, so we will enhance it with online functionalities: leaderboards, login with Facebook and more! The choice of Javascript was made because it is good for prototyping and demonstration, but the same principles apply when integrating it to Unity or plain C++ software.

Our first article today explains how to include the CloudBuilder SDK and do a simple anonymous login. The login is the first step that is required in order to use SDK functions which are related to a given user, such as posting and retrieving high scores, sending messages between players, taking participation in matches and so on.

You can watch the modified version run by clicking here.

INCLUDING THE CLOUDBUILDER SDK

The SDK is presented in the form of a Javascript file that is called cloudbuilder-bundle.js.min in this example. You can download it from here. Place it in your directory structure under js/ and include it in your application. First add this in the index.html:

<script src="js/cloudbuilder-bundle.js.min"></script>  

We will also want to wrap things up in a library for ease of use. Add the following next to it and create a cloudbuilder.js file under js/.

<script src="js/cloudbuilder.js"></script>  

We will add functions to this file later on.

OPTIONAL: ADDING A CONSOLE

This step is optional, I did it to show graphically what happens with CloudBuilder, though the console from your browser could well be used instead. Add this to the index.html file:

<div class="console-container">  
<span>CloudBuilder Console (hover to expand)</span>  
<pre id="console"></pre>  
</div>  

You can customize it according to your needs in the CSS. In this case I simply modified the style/main.scss file to add the following. It gives a nice console that opens up when hovered, and collapses back when left alone for more than one second.

.console-container {
background-color: $tile-color;  
margin-top: 30px;  
border: 1px solid $game-container-background;  
border-radius: $tile-border-radius * 2;  
position: relative;  
pre {  
font-family: monospace;  
font-size: 12px;  
margin: 10px; padding: 0;  
overflow: auto;  
height: 14px;  
transition: height 500ms;  
transition-delay: 1s;  
}
span {  
font-size: 12px;  
position: absolute;  
background: $page-background-color;  
border-radius: $tile-border-radius * 2;  
top: -10px;  
left: 20px;  
padding: 0 5px;  
}
}

.console-container:hover {
pre {  
height: 300px;  
transition-delay: 0s;  
}
}
LOGGING IN TO CLAN OF THE CLOUD

This is the interesting step. We will log any new user in transparently as an anonymous user for now, and save this information into the local storage. This way the game played is associated to an user and can be restored at the next visit.

It’s time to create our little wrapper, cloudbuilder.js. This wrapper will be the basis of all functionality related to the Clan. Let’s make a constructor and a setup function.

function CloudBuilder(storageManager) {  
this.storageManager = storageManager;

this.setup();  
}

CloudBuilder.prototype.setup = function() {  
this.clan = Clan('testgame-key', 'testgame-secret');

// We need to log in if not done already
this.gamerData = this.storageManager.getGamerData();  
if (!this.gamerData) {  
this.loginAnonymously(null);  
} else {
this.log("Reused login data", this.gamerData);  
}
};
What this does is to initialize an instance of the Clan with the API credentials (testgame-apikey, testgame-secret). On the first time (i.e. no previous gamer login data found in the local storage), it triggers an anonymous login, which is symbolized by this loginAnonymously method.  
CloudBuilder.prototype.loginAnonymously = function(whenDone) {  
this.clan.login(null, function (err, gamer) {  
// Store credentials for later use
if (!err) {  
this.gamerData = gamer;  
this.storageManager.setGamerData(gamer);  
}

// Callback
if (whenDone) {  
whenDone(err, gamer);  
}
}.bind(this));
};

This is an asynchronous function that calls a callback when done, passing in the error and result. The gamer data is persisted through the local storage manager for the next start. It is the object that will be needed when using most functions of the CloudBuilder SDK as it identifies the gamer on behalf of which to perform the operation.

You are now ready to use all the more advanced functions of the SDK. The next article will discuss how to put them in use to get high scores synchronized among all users. Please stay tuned!