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

Tech

Windows 8 - The App Bar

Posted by Mark Alexander on 19 December 2014

In the final tech blog of our Windows 8 series, and our final tech blog of the year for that matter, we'll be covering the App Bar which you can use the 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. What this means for your game is that it gives you a convenient place where you can add buttons to do things like restart the level, quit the game or save the current state.

The App Bar

Before setting up the app bar in your games, it's a good idea to understand just how the user will interact with it. The App Bar will only appear when a user swipes a finger from the 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 button, 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. You can find a full list of guidlines for using the app bar from the following Microsoft page: Guidlines For App Bars.

Coding The App Bar

When coding the App Bar for your games, you should be aware that you can enable and disable buttons using the appropriate functions, so in the menu room for your game, for example, you could have a "quit to desktop" button, but in a game room you can switch this to be a "quit to main menu" button. This is easily acheived in GameMaker: Studio as all buttons you add to the app bar are given a unique ID value which can then be used to enable or disable them.

So, let's look at some code to enable the app bar and add a couple of elements:

win8_appbar_enable(true);
elementId[0] = win8_appbar_add_element("button", "save", "Save Game", "selection", "Change the global game settings", scr_Save);
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);

Obviously to start with we enable the app bar, and then we go on to define the various button elements that we want to show. These elements are added using the function win8_appbar_add_element() which will return an ID value which you can store to later disable the button using the function win8_appbar_remove_element().

When adding an element to the app bar, it can either be a “button” or a “separator”. A button is something that is clickable and will do something, while a separator simply draws a line to separate the buttons along the bar (useful for grouping things togther). The function will also assign an icon if it is a button being added which you supply as a string (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 (link below) for the complete list.

Next the function requires that you assign a label to it, which is a short name that will be placed beneath the icon (this can be an empty string "" if you wish), and then you are required to 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). Again, this is useful for adding and grouping buttons into logical and easy to find categories.

Finally you use the function to give the button a tooltip so that when your player hovers the mouse over it they can get some information on what it does, and then you have to give 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.

So, in our example code above, we are creating three buttons and each of them have a script assigned. When the button is pressed the script will be called and an action performed. For example, our script "scr_QuitGame" could simply be:

/// scr_QuitGame();
if (room == rm_Menu) { game_end(); } else { room_goto(rm_Menu); }

When someone presses the button we either quit the game, if we are in the main menu, or we go to the main menu. But what about that Pause button we have defined? We don't want that to be enabled when not in the main game room, so you would want to remove it in some event, like the room end event of a controller object for your game, so that it is only visible when playing using the function  win8_appbar_remove_element().

We recommend that you create a persistent object in the game start event of the first room of your game and have that handle all the Windows 8 app bar functions. Since it's persistent, it will be created only once, which means that you can add global buttons in the create event of the instance (so that they will always be visible in every room) and then use the room start and room end events to add and remove the rest of the buttons that are more context specific.

Summary

The App Bar is a great way to remove UI clutter from your games and in many cases can remove the need for you to create extra objects and elements. It provides a convenient place to have one-off actions that don't require more user input than a single click so make the most of them as Windows 8 users expect them to be there.

That's it for this series of tech blogs covering Windows 8, and that's also it for the tech blogs from 2014. We hope you've learned a lot from our posts and that they have encouraged you to experiment and try new things in your games, and we are looking forward to seeing what you've been creating for 2015! We'll be back again at the start of the new year and on behalf of the staff at YoYo Games we wish you all the best in this festive season.

 

Back to Top