Game Starterkit for Windows 8 with leaderboard in Windows Azure

This Game Starter Kit for Windows 8 contains what you need to get started with game programming for Windows 8, including online high score in Windows Azure. The game kit is written in HTML and JavaScript.

Download now – follow instructions below to make it work.

Before we start, let me show you what you get with this solution.

Example game
The kit comes with an example game that you can modify and play with. The code is all in one file so it’s easy to play with for beginners. Feel free to use it however you like.

The kit will get updated with cooler and more advanced game that you can use as a basis when developing your own. Follow this blog to get the updates!

If you want to learn how to create this game that comes with this starter kit, you can read the guide here (slightly different graphics):

Part I:
https://digitalerr0r.wordpress.com/2012/09/19/html5-game-development-for-windows-8-1-getting-started/

Part II:
https://digitalerr0r.wordpress.com/2012/09/20/html5-game-development-for-windows-8-2-adding-a-player/

Part III:
https://digitalerr0r.wordpress.com/2012/09/20/html5-game-development-for-windows-8-3-finishing-your-first-game/

Implementation of high score in Windows Azure
The kit also enables support for Windows Azure and handles the connection, and got functions to check if you are having a internet connection. You need to have your own Windows Azure account, and set up the service/datatable yourself.

Snap view

The snap view is required for a store app. Your app needs to have this implemented in one way or another. This kit simply renders another div tag with an image saying it isn’t supported. Be creative with this – show your leaderboard here?

Remember to change this image so it suits your own app.

Insert your logo or something.

Tiles

The starter kit comes with basic tiles, change these to your own when you create a new game. Also a splash screen is included.

Settings charm implementation

Every app needs a Privacy Policy, an About page and it’s nice to have a settings page where you can set spesific settings for your game like enable online highscores and so on.

The starter kit comes with an about page, change this so it fits your game.

It also comes with a basic pricay policy, change this so it fits your game.

It also comes with a settings page with a toggle that enables you to disable or enable the online highscore system (some players would prefer to just play offline).

Let’s get you up and running!

Follow this guide to get everything up and running with the starter kit.

1) Install the tools

To get started, you need Visual Studio 2012 for Windows 8, so go ahead and download the package now if you don’t have this already.

2) Get an account on Windows Azure

Next, you will need to get an account for Windows Azure. There is a free trial where you can try it out, or if you are a BizSpark member (free membership), or an MSDN subscriper, you get a lot for free so check out your possibilities. But the cost of this solution ( a simple mobile service with 1gb SQL database) is very cheap.

The following is a guide that you need to follow in order to set up your Windows Azure solution correctly, so it works with the starter kit. When you get this up and running, and get to build/play the example game in the Starter Kit, you are ready to start modifying the code and create your own games!

This will usually only take about 10 minutes, so follow along and I’ll make sure to get you up and running in no time!

Once you are registered for Windows Azure, go to http://manage.windowsazure.com and log in with your shiny new fresh account.

3) Create your Mobile Service and Database

What we want is to have a mobile service that’s available for our app to use. It will consist of one Mobile Service, and one table in a database – all up in the modern cloud arcitecture.

Click the New button.

new menu will pop up. Select Compute –> Mobile Service –> Create to start a wizard where you can implement your mobile service.

A wizard will pop up and take you through the steps. Set the name of the URL to htmlstarerkit or anything you like, choose to create a new database on the subscription you just set up, and locate it in a region near you. Click the next arrow.

Next, you need to configure the database.

Once you have filled out your details (fill inn whats good for you, it doesnt matter for this solution – you need something you can use yourself), click the OK tick!
Your new database and mobile service will be set up within a few minutes.

4) Configure

Once it’s ready, click on the Mobile Services tab, and click the arrow on your new service.

It will take you to the mobile services menu for the selected service.

We don’t need to create a new app as we got an existing one (you will download the solution soon). So, go ahead and click on the “Connect an existing Windows Store app”.

A list of steps that you can follow to implement everything will be shown:

The first is installing the SDK. Click the link and install what you need.

Next, we need to download the solution. You can download the project from here:

Download now

Now, open the solution you just downloaded and make sure the references are OK and right according to Step 2 in the Mobile Services step. It should have been added in the solution, but there might be some differences in your paths and mine so check that it’s correct.

The next thing we need to do is to set the correct Application Key in our app.

If you take another look at Step 2 in the Mobile Services step, you see your URL and the Application key of your service. Take a note of these two, we will insert them to your game now.

Go to the solution in Visual Studio and open game.js:

Locate the client variable near the top of your solution and insert the URL you created for the Mobile Service, and the Application Key that got generated (as noted in the previous step).

Now, our client is ready, but the Mobile Service is still missing one thing: the table that will contain our data!

Let’s create that (this is the last thing we need to do):

Locate the Data link on the top of the page you are at now.

Click it.

You will now be taken in to the Data page of the service. Click Create.

A popup will show.

Create a new table named starterkittable:

Now we have a new table called starterkittable, and by default your table should have a dynamic schema. This means that if you try to insert anything into the table, and that insert contains columns that doesnt exist in our table, the service will create it for you.

So right now, your new table consists only of an Id column.

5) Build your solution and make sure it works

Go back to the solution, make sure you have the correct URL and Application Key in your solution, and then Build and run the project.

The game starts up, and when you die, your score will be uploaded to this table. Check that the column Score is created, and that it contains the correct score value you wanted.