Game Starterkit for Windows 8 with leaderboard in Windows Azure

image

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.

image
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!

image

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:
http://digitalerr0r.wordpress.com/2012/09/19/html5-game-development-for-windows-8-1-getting-started/

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

Part III:
http://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.

 

imageSnap 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.

logosmalllogosplashscreenstorelogowidelogo

 

Settings charm implementation
image

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).

imageimageimage

 

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.

image_thumb6

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

image_thumb9

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.
image_thumb16

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.
image_thumb19

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

image_thumb22

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:
image_thumb27

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:

image
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.

image

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:

image

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).

image

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.
image_thumb37

Click it.

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

image

A popup will show.

Create a new table named starterkittable:

image

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.

 

image

Go to the Data tab and the table to see your scores:

image

Now, be creative. There are a lot of funny little games you can create by just modifying this simple template.

Enjoy!

image
Download now

This entry was posted in Tutorial. Bookmark the permalink.

14 Responses to Game Starterkit for Windows 8 with leaderboard in Windows Azure

  1. Pingback: Template of the week: Game starter kit with high score table - Go DevMENTAL - Site Home - MSDN Blogs

  2. Pingback: Getting started with the Game Starter Kit with Azure Mobile Services - Microsoft UK Faculty Connection - Site Home - MSDN Blogs

  3. Pingback: Game Starter Kit for Windows 8 and LumiLight | BusyPixel

  4. Pingback: Shape Conference: Windows 8 Game Development - thebeebs - Site Home - MSDN Blogs

  5. Pingback: TechNet Blogs

  6. Pingback: Game Starterkit for Windows 8 with Windows Azure backend - Microsoft Switzerland Student Blog - Site Home - MSDN Blogs

  7. Pingback: TWC9: Azure Active Directory, Unity, Philips Hue and a little GunPowder - Windows Azure Blog

  8. Pingback: Tutorial: Game Starterkit mit online Highscores - MSDN Blog Schweiz - Site Home - MSDN Blogs

  9. Pingback: Gratis virtuell Windows Azure konferanse 23. april klokken 18:00 - IT Pro i Helsesektoren - Site Home - TechNet Blogs

  10. Pingback: Reading Notes 2013-04-22 | Matricis

  11. Pingback: You can lead a dev to... "Game Starter Kit for Windows 8 with leaderboard in Windows Azure" - Windows Azure Blog

  12. Thanks for another excellent post. The place else could anybody get that kind
    of info in such a perfect method of writing?
    I’ve a presentation next week, and I am at the search for such info.

  13. Thanks , I’ve just been looking for information about this topic for ages and yours is the best I’ve came upon so far.
    However, what concerning the conclusion? Are you positive concerning the supply?

  14. 337 says:

    obviously like your web-site but you need to test the spelling on quite a few of your posts. Several of them are rife with spelling problems and I to find it very bothersome to inform the reality on the other hand I will surely come again again.

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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