The Making of Lumilight, a game for Windows 8

Lumilight is a very simple game created for Windows 8, with Online Leaderboards hosted in Windows Azure. Your main goal is to gather as much light as possible from fireflies within 60 seconds.

The game is all about reacting quickly, and hitting the target as soon as possible.

You can download the game here: Download now

Note: The latest release will be out in a few days (Written on: April 3rd 2013)

1 – How the game works

The game comes with 3 different game modes:

The single fly mode will only have one fly visible at the same time. It’s all about having one target and following that. A fly will spawn when another looses all light.

The multi fly mode got multiple flies you can take out, and more will spawn as the time goes. A new fly will also spawn when another looses all light.

The Chaos mode is what it says, chaos. It spawns a lot of flies. How many can you take out? Get help from friends and tap those flies!

To get light, you just have to tap them. Each firefly needs to be tapped 5 times before you gather the light.

This image show the different stages, from full light on the left, to almost depleted on the right.

When the firefly it all out of light it will disapare, and you will get +1 light.

When you hit a firefly, a bonus combo will start. The more fireflies you hit without missing, the higher the bonus multiplier will get.

If you miss, the combo multiplier will reset, and the amount of points you get will go back to normal.

Each tap will give you some points, and for each light you gather you will get a lot of points. You will also loose a small amount of points if you miss (also resetting the multiplier).

The interface gives you some information like who the player is (can be set from the settings charm in Windows 8), the time left, your current combo, how many lights you have gathered and your total score.

When the round is over, you get to a screen that shows you some stats like how many lights you got, the total score, your longest combo streak this round and the accuracy. Also, you will see both the local highscore and the online leaderboard. Can you beat the best?

Local leaderboard

Online leaderboard

2 – Game logic

The game logic is simple. When you tap a fly, it will give you points. When you gather a light, you will get more points. And if you have a bonus multiplier, that score will be multiplied.

For each fly you take out, another will spawn. The faster and more accurate you are, the more points will you get.

You got 60 seconds.

A.I: The life of a firefly
The fly will randomly move based on a simple A.I (Artificial Intelligence) routine. When it spawns, a random coordinate on the screen will be given as the “spawnpoint”, and a random starting direction will be given. Then the fly flies around on the screen in “jumpy” movements, and might decide to change the direction along the X-axis, or how much it will move up or down.

If the fly is hit, a sound effect is played and the fly might decide to change the direction, or follow the same path it had.

3 – Technical details

The game is implemented using HTML5 and JavaScript with addition of the ImpactJS Library modified for Windows 8. The online leaderboard is implemented in Windows Aure and JavaScript.

Sound effects are simply recorded in a silent room using human voices.

4 – Online highscores in Windows Azure

The most awesome part of this game is the implementation of Windows Azure and how simple it was. It took me about 50 minutes to get my online leaderboard for the game set up and working from in game.

I would recommend everyone to take a look at Windows Azure and the Mobile Services. 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.

I decided to add how I implemented Windows Azure in this solution as it’s so simple. So here comes a guide on how I added support for Windows Azure in this solution!

You can follow this guide to implement Windows Azure Mobile Services in any of your own solutions.

First of all, I needed a Windows Azure subscription. Since I had one from before, it was just about signing in at manage.windowsazure.com/.

Next, I needed a mobile service that my app could use. When logged in to the portal I was presented with my Azure Account, an overview and the possibility to add a new service.

Click the New button.

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

The wizard will take you through everything you need to set it up:

In the first screen, set the URL to something spesific for your project, like the name of the game. You can create a new database (if you dont have one from before), select your supscription (if you have multiple like I do) and what region you want your service to be in.

Hit the tick to create your new service and database. It will take a few seconds for Azure to set everything up for you but THAT’S IT for creating a new service and a database (no need to install and set this up for yourself and spend a day on doing that).

Now, when the service is ready, you can see it in the overview, or in the Mobile Services tab.

Click on the arrow next to the name of the newly created service to start confiuring it and implement it.

You will be presented with a screen like this:

Now, I already had my app created so I clicked on the “Connect an existing Windows Store app”.

A short 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.

The next thing you need is to Add the Windows Azure Mobile Services Javascript Client extention to your project in Visual Studio 2012. I chose JavaScript here because my solution is JavaScript and HTML5 based.

To do this, just add a reference like you normally do in Visual Studio.

Then I added the client object that is used to invoke our Mobile Service currently running in the cloud.

var client = new Microsoft.WindowsAzure.MobileServices.MobileServiceClient( “https://yoursite.azure-mobile.net/”, “your own key” );

That’s what you need in your app in order to invoke whatever you have in your Mobile Service.

Now, we need a table in our SQL database that will contain our data.

Click the “Create Item Table” button and a new table is created.

Now, let’s change the table so it fits our needs. Go to the Databases tab from the main overview of the Azure Portal.

Press the arrow of your databse to go to the database tools. From there, press Manage.

Now you have to log in to your database. Enter the creadentials you proveded when you created the database and log in.

When in, click on the Design tab and select the Item table you created above.

Change the table so it looks like this, but make sure it fits your needs.

Press Save! We are now ready to invoke our mobile service. Let’s just take a quick look at it just so you know where you can find it.

From the Mobile Services project page in Azure, find the Data tab and click it.

Open the Item table by clicking the arrow:

Click on the Scripts tab to see all the scripts that are available for this table.

You can also add functionality here. Select Insert or Read or Update or Delete and change the code based on your needs (You might want Read() to only return X number of results, sorted in one way ++).

Ok, let’s add data to this table. Open your solution in Visual Studio 2012 and add the two fucntions below (modify to make it fit your table in Azure):

The getScoreBoardfromAzure funtion gets all results that fits the current GameMode (could be a spesific Level also), ordered by Score, and take the top 10. Once this function is done, it adds the results to a list.

   1: getScoreBoardFromAzure: function () {

   2:     var _that = this;

   3:     this.scoreTable.where({ GameMode: this.gameMode })

   4:         .orderByDescending("Score").take(10)

   5:         .read()

   6:         .done(function (results) {

   7:             _that.scoreItems = new WinJS.Binding.List(results);

   8:         });

   9: },

The insertScoreToAzure function adds an item to the table in Windows Azure. Once a new entry is added, update the table in your local client.

   1: insertScoreToAzure: function (scoreItem) {

   2:     var _that = this;

   3:     this.scoreTable.insert(scoreItem).done(function () {

   4:         _that.getScoreBoardFromAzure();

   5:     });

   6: },

Go to the code where you want a new entry to Windows Azure to be added and call the function above like this (change so it fits your table):

   1: this.insertScoreToAzure({

   2:     Name: this.playerName,

   3:     Score: this.score,

   4:     GameMode: this.gameMode

   5: });

Go back to Windows Azure and see your new data in action!

Make sure to crate a screen that renders the content of the list that contains the data the server returns to you when needed, or have a seperate page show it, or the snap view mode of the game.

So, this is how I imlemented the first version of my Online Leaderboards hosted in Windows Azure for Lumilight.

5 – Get the game

The game is NOT YET updated with the Online Leaderboards but the game can be found for free in Windows Store. If you install it, you will get a notification/update when the newest (Release 3) version of the game is out.

Get the game now!

You can also follow Wilhelmsen Studios on facebook to get the latest news.