Construct 2 – Global high Scores with Azure Mobile Services REST API

Ok, so I just finished a post on adding global high scores to a Windows 8.1 app using the AzureForWindows8 plugin.  However, there are two big downsides to this approach.  The first is that it only works for Windows 8.1 and you have to export to Visual Studio to be able to test that your scores are working.  The second downside is that you have to make significant changes in Visual Studio to make it work.  These changes are super tedious and believe me, it wasn’t fun figuring out all of the changes that had to be made.  As a reference, you can find this tutorial here.

So, the alternative, and my preferred option,  is to use the REST API.  You can find more detailed information on the Azure Mobile Services REST API with this post, Azure Mobile Services REST API.  Using the REST API, you can access your high scores table on any platforms using Gets and Posts.  In Construct 2, you can accomplish this by using the AJAX object.  With this option, you can do all of your logic in Construct 2, and you don’t have to export your project or change any source code to be able to test.  The only downside is that you have to be comfortable manually parsing the JSON response you get from whatever request you make to your table.  However, in the sample below, you will notice that I have taken care of a lot of most of this for you :) 

You can find the sample project here.   Let’s take a look.

if you open the project, you will notice there is ScoreTable Layout and Event Sheet.  Our layout is very simple.  It has a table to display the scores, an input for a username and a score, and then a button to submit a score.  Additionally in the corresponding Event Sheet we have some logic to grab scores from an array and display them.  For more background on how we accomplish this, check out this post, Displaying High Scores.  You might notice that we are also calling a couple of functions that don’t seem to be defined in this Event Sheet (QueryTable and InsertScore).  This is because they are defined in our second Event Sheet, AMS REST Helper, which is where the real magic happens.  Let’s open that one up!

Notice that there are several global variables here.  These variables, shown below, will be used in our connection strings to query and insert into our Azure Mobile Service table.

Now notice that the two functions from our ScoreTable Event Sheet are defined here.  I encourage you to copy and paste as much as my logic here as possible so I won’t go into great detail here, but I’ll cover the basics.  For the QueryTable function, we are simply using the AJAX object to make a request to read from our table.  We are setting the request header to our Application Key so that we can be authenticated to in fact make the query.  Additionally, the InsertScore function is fairly similar.  We set the header in the exact same way and then, again, we use our global variables to build a connection string that will insert a record into the table.  The name and score are both parameters coming into this function.

The last tricky part here is taking the response from our AJAX requests (specifically the Query) above and inputting that data into an array.  This is where I spent a lot of time creating the logic to manually parse our JSON response (Really tedious stuff).  The good thing here is that because I have already done it, you don’t have to struggle through it yourself.  You can simply take my code and reuse it how you see fit!  Basically all I do is parse through the response looking for the keys that match the global variables (USERCOLUMNNAME and SCORECOLUMNNAME) and take those values to input them into the array!

This is what it looks like finally running with my table.

This might seem sort of overwhelming, but as I said, I encourage you to swipe as much of this information as possible.  I would recommend simply using this template in your projects.  The only thing you really have to do is update the Global Variables for the connection strings…THAT’S IT!  As always comment below or find me on twitter @jamesqquick with any questions comments or concerns!

.