Windows 8 Platform Overview

 

Introduction

With the introduction of Windows 8, the Windows family of operating systems have changed dramatically. Windows 8 presents an enormous opportunity for developers targeting the new Windows Experience. GameMaker:Studio makes it easy to capitalize on this opportunity and build engaging Windows Store games that are completely integrated with unique platform features.

The following Windows Store application features are currently available for use with GameMaker:Studio and are briefly explained in the following sections.

NOTE: The manual contains a full list of all available Windows 8 functions and example codes on how to use them correctly.

 

The App Bar

You can use the App Bar to display commands to users “on demand” and it will show commands relevant to the user's context, usually the current page, or the current selection. The app bar is not visible by default, and nor is it active for GameMaker:Studio made games initially. However you can activate (or deactivate) it using the new Windows 8 functions that are incorporated into the GameMaker Language (''GML''), as well as add your own buttons and separators which will communicate directly with your game

Win8_AppBar.png 

Coding the App Bar

To get an idea of how to create app bar elements from within your game, consider the following code:

win8_appbar_enable(true);

elementId[0] = win8_appbar_add_element("button", "repair", "Game Settings", "selection", "Change the global game settings", scr_Settings);

elementId[1] = win8_appbar_add_element("button", "pause", "Pause/Unpause", "selection", "Pause or unpause the game", scr_PauseGame);

elementId[2] = win8_appbar_add_element("button", "clear", "Quit", "global", "Quit to desktop", scr_QuitGame);

Since App Bar elements can be created and removed at any moment, we assign them to a variable so that other functions can access them should it be necessary. But what about the functions themselves?

 

Well first we activate the App Bar, and then we define three “button” elements using the function win8_appbar_add_element(). This function will add an element to the App Bar for your game, which can either be a “button” or a “separator”, and it also assigns an icon for it if it is a button (for a separator you would use an empty string "" for this). There is a large library of icons available, and each has its own name string that you can use, so please check the Microsoft library (here) for the complete list.


Next you can assign a label, which is a short name that will be placed beneath the icon (this can be an empty string "" if you wish), and then you should set the section of the App Bar that you want the element to be added to. The section string “global” maps to the right of the App Bar and “selection” maps to left in left-to-right layouts (the opposite is true in right-to-left layouts). 

Lastly you have to give it a tooltip so that when your player hovers the mouse over it they can get some information on what it does, and a final callback script. The callback script will be run whenever the button is pressed (if it is a separator, or you do not wish to do anything, you can set this to -1) and you should have the script pre-defined in the game assets.

 

App Bar Functionality

Once you have set up the App Bar, how will the user interact with it? Well, the App Bar will only appear when a user swipes a finger from the top or bottom edge of the screen, or uses the Right Mouse button to click on the game screen while playing (note that the app bar is transient, going away after the user taps on a command, taps the app canvas, or repeats the swipe gesture or right mouse click). This functionality makes it the ideal place to have your options button, pause button, sound on/off button etc... but you should try and maintain a clean and functional aesthetic when creating functions for your game in this way, following these general guidelines:

  • Limit the number of commands to avoid the app bar from looking complicated.

  • Choose icons that are easy to understand or predict.

  • Keep text labels short (use the tooltip to convey more information on hover)

  • Place persistent commands on the right

  • If there is a larger number of commands, separate distinct command sets on the left or the right to balance out the app bar and to make commands more ergonomically accessible.

 

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.

 Win8_LiveTile.png

 

 

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 (see this page hereADD LINK! for details), but you can also “push” notifications to your live tile using the unique Windows 8 functions in GameMaker:Studio. These notifications can contain text and/or images, and can have various different formats.

 Win8_LiveTile_Example.png

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 main function to use will be the following:

 

win8_livetile_tile_notification(template, ds_map, expiry, tag);

 

The first thing to choose would be the template to use for the tile (this is explained further down the page) 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 whichis sent along with the template and it must contains the appropriate key-value pairs for that template.

 

So for each entry 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 (in which case the directory to get the file from must be preceeded 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). 

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.

 

The following is an example of a typical setup operation to use this functionality:

 

var expiryTime = date_inc_minute(date_current_datetime(), 5);
var tileText = ds_list_create();
ds_list_add(tileText, "C.T.H.");
ds_list_add(tileText, "This game is paused and awaiting your return!");
var tileImage = ds_list_create();
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();
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, seperate, 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 send them to the live tile.

 

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, but 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.

 

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

 

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 to a right-to-left).

 Win8_Badge_Example.png

 

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

 

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");

}

}

 

Charms

The Charm Bar is a brand new feature addition for the Windows 8, and it works as a universal toolbar of sorts for the OS. This means that you can access it from anywhere no matter which application you are working on, or what game you have open.

 

The two ways in which you can access the Charm Bar are, firstly, by dragging your mouse pointer to the top (or bottom) right corner of the screen (since the show desktop area is also at the bottom right, you may prefer the top right corner), or you can alternatively press the Windows + C button combination on your keyboard to invoke the bar.

 Win8_Charms.png

 

The above image shows the five different Charms available to the user at any time while using Windows 8, and GameMaker:Studio gives you direct access to three of these charms with some special functionality that has been built into the GameMaker Language. The following sub sections explain briefly what possibilities this opens up to you when you develop your games.

 

Search

The search function is basically the same search box that you should be used to seeing in all previous incarnations of Windows, and with it you can search files, applications and control panel settings (as you would expect), only now the results are almost instantaneous unlike the older search tool. However, one thing that is new is the ability to use search to find ''keywords'' within Windows 8 apps.

 Win8_Search_Example.png

 

This functionality has been added to Windows 8 games made with GameMaker:Studio, and with a few lines of simple code, you can add ''keywords'' to your game that can then be found through the search charm. These ''keywords'' can also be used to trigger callback scripts within your game. This means that if someone searches for "inventory" (for example) and you have it as a ''keyword'' in your game, you can have a callback script that will take the player instantly to the inventory screen.

 

Coding Search Keywords

To permit Windows 8 search to index your game you need to create a ds_list with all the keywords and then enable the search function. When one of the keywords is called from the search charm, it will run a callback script in your game.

 

A typical setup code would look something like this:

 

win8_search_enable(scr_SearchWords);
var list;
list = ds_list_create();
ds_list_add(list, "smelly fish");
ds_list_add(list, "Haggis");
ds_list_add(list, "MacSweeney");
ds_list_add(list, "the quick brown fox");
ds_list_add(list, "99 red ballons");
win8_search_add_suggestions(list);
ds_list_destroy(list);

 

The above code will enable the search functions for your app and tell Windows to run the callback script “scr_SearchWords” should it find a corresponding search term. Some keywords are then added into a ds_list which is used to create the search terms that the search charm will find when used.

 

Share

As the name indicates, the share button is used to share information with people and other apps. Basically, this is the typical “cut and paste” feature that you would expect from an OS, but it has been extended so that those Windows 8 apps and games that have sharing integrated and the necessary permissions can then receive varying types of information.

 Win8_FileShare_example.png

 

What this means for those who develop Windows 8 games in GameMaker:Studio, is that you can use the special sharing functions to share the following different information types to other apps and games:

 

  • Files

  • Images

  • Screenshots

  • Text

  • URL's

 

So your game can now share text files with level information from a level editor with your friends, or screenshots of your current progress, etc... A powerful system that can make your game or app stand out and integrate with the Windows 8 environment.

 

Coding Sharing

The list given above shows the things that you can share using the Share Charm from GameMaker:Studio, and each one of them has it's own function. Since they all share the same functionality and more or less the same format, the example shown here only covers one possibility, that of sharing a URL.

win8_share_url(URL, title, description, immediate);

The above function takes a URL (string) as well as a title and a destiption of the URL being shared. The final argument “immediate” indicates whether it should be shared immediately (true) and shown in the slide-out share charm, or not (false), in which case the user will have to manually call on the share charm to see the content.

 

In practice this would look something like the following:

if keyboard_check_pressed(ord("S"))
{
win8_share_url("http://www.MacSweeneyGames.com", "MacSweeney Games", "MacSweeny Games Homepage", true);
}

 

Settings

From the Settings Charm you can control all the settings of your computer. The normal direct access controls are AudioBrightnessNetworkPowerNotifications and Language, with other options available at the top depending on the app or game that is currently being used.

 

With the new Windows 8 functions in GameMaker:Studio you can now access this charm and add your own settings to the slide-out menu, or even create your own slide out sub-menu activated from this charm using HTML.

 

These settings are designed for you to provide users with a consolidated place for fast, in-context access to settings that affect their current Windows 8 app or game that they are running, and should therefore have a quick-dismiss system (which disappears when the user touches anywhere on the screen outside of the settings slide-out menu). This is because the Windows 8 idea is to have the settings UI enable users to adjust the behaviour of the app quickly and then seamlessly return to the experience they were emerged in.

 Win8_Settings_Example.png

An extra bonus for the developer using GameMaker:Studio is that by providing access to the settings UI at all times through the Settings Charm, you do not have to sacrifice any application real estate to show buttons or options, nor do you have to build in any navigation to and from a settings page in the game or app itself. This means that you can dedicate more time and energy on making your game as immersive as possible!

 

For further information on the '''Settings Charm''', it is worthwhile looking over the Microsoft Library Settings Charm Good Practices.

 

Coding Settings

As with the other Windows 8 specific functionality, GameMaker:Studio has some dedicated functions that permit you to add to and customise the settings charm. At its most basic level, you can simply call something like this at the start of your game:

win8_settingscharm_add_entry("Controls", scr_GameControls);

 

The first argument is the name of the option you are adding (as a string), and the second argument is the script from your game that you wish the new option to access 8in this case a script to define the game controls) or it can be URL that you wish the charm to open. If you choose a URL then it should be a string and start with http://, for example "http://www.google.co.uk".

 

For a more complex settings page, you can also define an HTML file that will be used instead of the default settings slide-out window. For example:

win8_settingscharm_add_html_entry("defaults", "News", working_directory + "News.html");

 

The above code will create a new option within the settings charm called "News" which when presses, will open the exported HTML file. Note that the HTML file to be used must have been included within the GameMaker:Studio IDE as an included file. You can find an example HTML file layout here.

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk