One of the innovative features of the Windows Phone platform is the Live Tiles feature. What this feature permits, is for you to dynamically change the visible text and/or images that appear for your games Live Tile on the main Windows Phone OS when the game is not in focus.
GameMaker:Studio has a number of special functions that permit you to change and manipulate these tiles, so that you can show different images of your game or add text to tell the player their current score or achievements (for example).
What you can do with the tile will very much depend on what type of tile you choose to use for your game (this is set in the Global Game Settings, and is explained on the page Porting Your Game to Windows Phone) as each tile type has it's own layout and way of displaying the information.
You should be aware that the user can change the Live Tile size at any time when it's pinned to the start menu and so you should always have assets prepared for all possible configurations.
NOTE: If you wish to change the Live Tile image with code, the image to be used must have been included in the GameMaker IDE as an “included file” previously.
To create the correct set of images and plan your tiles correctly, you should be know that there are three tile sizes available to the user, and you should plan your game such that no matter which one the user has for your app, the appropriate information will still be displayed (where possible).
The exact sizes for the available tiles are:
Flip and Cycle
159 × 159 pixels
110 × 110 pixels
336 × 336 pixels
202 × 202 pixels
691 × 336 pixels
Also note that tiles cannot be animated and must be png format with a size of less than 80kb.
Common Tile Functions
Before going into further details, please note that GameMaker:Studio has two important functions that are applicable to all Live Tile types:
winphone_tile_title(title) : Set the title of your games Live Tile
winphone_tile_count(num) : Display a number on the games Live Tile
The image below shows how these functions will be used to display the given information:
Note that on the Small tile size, the title will not be shown and that there are less functions to manipulate them in GameMaker:Studio.
The first tile type available to you is the Flip Tile. A Flip Tile is one that has a back and a front image and the tile switches (or "flips") between them over time. You can choose what images are shown at any time, as well as what text is to be shown for both the front and back of the tile, either from the Global Game Settings, or dynamically through code.
The image below shows a typical Flip Tile along with the content that you can change through code within your game and the image sizes:
An example of how you may use this in your game would be something like this:
var small_tile =”achievement_get_small.png
var normal_tile = “achievement_get.png”;
var wide_tile = “achievement_get_wide.png” winphone_tile_front_image_small(small_tile);
The above code will change all the tile images to those that you have previously included in your game through the GameMaker:StudioIncluded Files part of the IDE.
NOTE: This tile will only “flip” when in Normal or Wide modes.The small tile will be static.
The Iconic Tile is one that uses an "iconic" image in all its modes (Small, Normal, Wide). This image will occupy the whole tile for a small and normal tile, but will be reduced to a small icon over the chosen background color for the wide tile (normally with some text associated with the tile two).
The following shows an example of how this will look for the different modes:
Note that the image supplied for the medium icon is that which will also be used on the wide tile.
The functions available to you within GameMaker:Studio for this type of tile are limited to changing the iconic image and adding text to the Wide tile mode. For example:
var str = "Player: " + global.Name; var str = "Score:" + score; var str = "Health: " + health; winphone_tile_wide_content(str, 1); winphone_tile_wide_content(str, 2); winphone_tile_wide_content(str, 3);
The above code would be used to update the wide Iconic Live Tile with the relevant player status so that when the game is not in focus these details are visible to the user on the tile.
Cyclic Live Tiles, are ones that will cycle through a given set of images (up to 9) over time. As with all the other Live Tiles, you can have small, normal, and wide modes, but only normal and wide will cycle your images, with the small tile using a different, static image.
The following image illustrates a cyclic tile:
GameMaker:Studio has two functions only for these tiles, which permit you to change the images used for the small and the wide tiles. The normal sized tile will also cycle, but it will just use cropped versions of the wide tile images, so make sure that they work well with both possibilities.
This short code example illustrates how you could change the cycling of the Live Tile to show random images:
var image1 = choose("Screen_1.png", "Screen_2.png"); var image2 = choose("Screen_3.png", "Screen_4.png"); var image3 = choose("Screen_5.png", "Screen_6.png"); winphone_tile_cycle_images(image1, image2, image3);
You can get further information on the Global Game Settings for Live Tiles from the help topic Porting Your Game to Windows Phone, and it is strongly suggested that you refer to the GameMaker:Studio manual at all times (press “f1” in GameMaker:Studio to open the manual).
You should also check out the Microsoft Live Tile guidelines, as they contain help and advice on things like text formatting and the general design of all types of Live Tile: Tiles For Windows Phone.