Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more

Tech

Windows 8 - Live Tiles

Posted by Mark Alexander on 5 December 2014

In this weeks tutorial we are going to start an exploration of some of the unique Windows 8 features that are avaialble to you when developing games. The Windows 8 platform isn't as popular as some of the other GameMaker targets, and much of that is related to the fact that Microsoft require you to use some of it's features, like Live Tiles and Charms, but we hope to show in this tutorial (and the ones to follow) that integrating Windows 8 functinality in your games is easy and will enrich the player's experience.

Before continuing with this tutorial, you should have set up the Windows 8 module correctly and be able to test your games using both the Native and JS targets, You can find information on setting everything up from the Knowledge Base article Preparing GameMaker: Studio For Windows 8.

Live Tiles and Badges

The Windows 8 user experience revolves around the Start screen and it's Live Tiles. These tiles are a new way to organise the installed apps and content on your computer and can be set to notify the user of events and changes in your app or game even when it's not running, and can also have Badges displaying certain information (either a numeric value or an icon).

Before working with Live Tiles and Badges, it's worth taking a look at the Microsoft Library pages which deal with the Guidelines and checklists for tiles and badges (Windows Store apps) as it contains a lot of information that will help you get the most from these features.

Live Tiles

Live Tiles come in two sizes: Wide (310x150px) and Square (150x150px) with the default setting for your app being the wide format, but you should bear in mind that the user can change this at any time they wish.

You can set the initial images for both formats of your live tile from the Global Game Settings of GameMaker: Studio, but you can also “push” notifications to your live tile using the unique Windows 8 GML functions. These notifications can contain text and/or images, and can have various different formats. 

Coding Live Tiles

To code changes into the Live Tile associated with your Windows 8 game is a simple enough process as long as you follow the correct steps. The function we will use to push a notification to the Live Tile will be the following:

 win8_livetile_tile_notification(template, ds_map, expiry, tag);

Here, the first thing to choose would be the template to use for the tile (we'll explain this a bit further on) as each template requires a different combination of text and/or images. Once you have chosen the template, you will need to create a ds_map which is sent along with the template and it must contains the appropriate key-value pairs for that template.

So for each entry in the map, the key should refer to the tag name of an element and the value (which can be either a single value or an array of multiple entries, in which case you should add them into a ds_list, then embed the ds_list into the ds_map). The tag names themselves can only be either "image" or "text", and the image can be either from a local source (ie: an included file - in which case the directory to get the file from must be preceded by ms-appx:///. See the example given below) or from a given URL.

The expiry is the time that the notification should be removed at and is best calculated using the GameMaker: Studio Date and Time functions, as shown in the example below (setting this to -1 will show the notification indefinitely or until you use the win8_livetile_tile_clear() function - which is useful if you want to simply change the Live Tile image, for example).

Finally you have the queue tag. This is a string that you assign to the notification as a means to identify it later, should you need to replace it or update it with another one. In this case you would formulate another notification push with this function and use the same tag as that which you wish to change/replace.

Putting all that together we get the following example of a typical setup operation to use Live Tiles in GameMaker: Studio:

var expiryTime = date_inc_minute(date_current_datetime(), 5);
var tileText = ds_list_create(); // This list will hold the text data for the tile ds_list_add(tileText, "C.T.H."); ds_list_add(tileText, "This game is paused and awaiting your return!");
var tileImage = ds_list_create(); // This list will hold the image data for the tile ds_list_add(tileImage, "ms-appx:///" + working_directory + "WideTile_Screenshot.png"); ds_list_add(tileImage, "ms-appx:///" + working_directory + "MiniLogo.png"); var tileData = ds_map_create(); // This map is where we store both the text and image lists ds_map_add(tileData, "text", tileText); ds_map_add(tileData, "image", tileImage); win8_livetile_tile_notification("tileWidePeekImage05", tileData, expiryTime, "Paused"); ds_list_destroy(tileText); ds_list_destroy(tileImage); ds_map_destroy(tileData);

The above code is for a wide tile, and it needs two lines of text (a header, and one line of long text), and two images (one large one for the whole tile, and one smaller one for beside the text), as the template chosen will switch between the main image and the image/text combination. 

You need to add the text into a ds_list, with the first entry being the header, and then add the images into another, separate, ds_list, again with the first image being the larger. Finally you add the text and the image lists into the ds_map, assigning them the appropriate key, and then use the Windows 8 function to push them to the live tile in 5 minutes time from when the code is called. 

Live Tile Templates

The GameMaker: Studio Live Tile functions permit you to use any of the available templates, and a full template list with examples can be found here: Windows 8 Dev Center - Tile Templates.

Basically these come in four main types:

  • static square
  • peek square
  • static wide
  • peek wide

Static tile notifications are ones that show a single set of text, a single image, or a static mix of text and images, while peek notifications will flip between two different states, either of which can have images, text or combinations of both (depending on the template used).

Note that we mentioned earlier that tile notifications sent to your app can use both wide templates and square templates, therefore it is a best practice to include both square and wide templates in a single tile notification because the user can change your tile's size at any time and only notifications that match its current size will be displayed. For instance, if you include only a wide template in a notification and the user has chosen to display the square tile, the default square image will be shown instead of the notification content. So, you would repeat the code given above but give the appropriate square template too in your game.

Badges

A notification badge conveys a certain status information concerning (and specific to) your app. These badges can be numeric, showing a value from 1 to 99 (any value over 99 will be shown as 99+) or one of a set of Windows-standard icons, which you can find here: Windows 8 Dev Center - Badges.

Examples of information best conveyed through a badge include network connection status in an online game, the current state of a game (like paused or playing), the current lives of your player, etc...

Badges can be displayed on both square and wide tiles (the functions in GameMaker: Studio will work regardless of the tile size) and they will appear in the lower-right corner of the tile (lower-left corner on a computer set right-to-left).

Coding Badges

Badges are very simple to code for GameMaker: Studio, as to show them requires only one function:

win8_livetile_badge_notification(id);

The id that you use for the function is that given by Microsoft (see the Dev Center link given above), and the function will show the badge icon associated with that id or, if you want to show a value, the id should simply be set to the value to be displayed (a real or a string, ie: 10 or "10"). 

A simple example of adding and removing a badge would be when pausing your game: 

if (keyboard_check_pressed(ord("P")))
{
global.Pause = !global.Pause;
if (global.Pause)
    {
    win8_livetile_badge_clear();
    }
else
    {
    win8_livetile_badge_notification("paused");
    }
}

When the game is un-paused we clear the badge, and when it is paused we show it again.

Summary

Using Live Tiles and badges in your games is a great way to maintain and engage the user. You can use them to invite the user back to play, or to tell them about a game update, etc... making them a unique and important tool for communicating with the user. But that's not the only trick up Windows 8's sleeve, and next week we'll have a look at something else unique to this platform - Charms!

 

Back to Top