1945 To Spy Chase

This tutorial is designed to introduce you to the Windows 8 export module and the
possibilities that this platform opens up for you. In the course of this tutorial we will take a
game "base" and change it to be something different, then learn how to integrate the unique
Windows 8 functions to control the AppBar, Charms, and Live Tiles.

In the case of this tutorial, we are going to take a "stripped down" version of a demo game
that we made called "1945" and turn it into a new game called "Spy Chase". The basic
game play will remain the same, ie: the player must move up the screen and shoot or avoid
enemies, only in the new version we are going to have a car instead of a plane and a road
instead of the open sea.

The code for both games is included in the companion file, 1945VsSpyChase.gmz, as are
the necessary sprites and backgrounds, and throughout this tutorial you will be requested to
uncomment and comment various sections of code to enable or disable different features.
Note that within the GameMaker:Studio code editor "//" will comment out a single line of
code, while "/*" and "*/" are used to comment out entire code blocks.

Each page of the tutorial deals with a different object in the game and outlines the events
and the changes being made to the code in them. Note that we need make no changes to the
"button" objects, since their behaviours (changing rooms, retrying the level etc...) are
maintained in the conversion.

Click on the Next button to go to the next page of the tutorial.

objMenu
The object objMenu can be found in the folder "Menus and Interface". To open up the
object editor for this object, double click it, and you will be presented with the editor. This
is split into 4 main sections: Properties, Events, Action List and Actions.

This object only has one Event, the Create Event, with one code action for it:

Currently the event sets the GUI for drawing HUD elements to the size of the room, and
then activates the background for the "1945" game, which in this case looks like water:

However we want to comment this out and use the new "Spy Chase" code which will set
the background array to a different image, in this case grass:

You can close the object editor for this object now and if you test the game, you will see
that the start screen now has a different background. Next we need to change the title
graphic that is displayed.
Click on the Next button to go to the next page of the tutorial.

objTitle
As with the previous object, objTitle can be found in the folder "Menus and Interface". If you open
that object, you will see that, like objMenu, it only has one Event, the Create Event, with the
following code for setting the sprite that it draws:

The change that we need to make here is a simple one, as we only need to set the sprite_index
of the object to "point" to our "Spy Chase" logo, like this:

With those simple changes made to our Menu objects, when you test the game, you will now have
a perfect title screen for "Spy Chase". Most of the rest of the objects in the "Menu and Interface"
folder need no further changes, as they are buttons whose behaviour we wish to maintain for the
new game we are making.

Changes You Can Make

At the moment this is a static object, but since the logo has a car on it, let's make it "drive" onto
the screen and then jerk to a stop. To start with you will need to add this to the Create Event:

This will set the instance to be outside the left side of the room, and it also sets an alarm which we
will deal with now. Add an Alarm 0 event to the object with the following:

This alarm makes the logo speed in from the left and then when it reaches the given position it
sets another alarm to have it "jerk" back. Add an Alarm 1 event now with this code:

With this code, we move the image back slightly so that it is centered on the screen.
Click on the Next button to go to the next page of the tutorial.

objGameOver
The only other object that needs changing from the Menu objects is the object objGameOver.
Currently it draws the "1945" game over graphic, which is set in the Create Event of the object:

So we comment that out and uncomment the "Spy Chase" code:

As you can see, this event will also spawn the buttons for restarting the game, or retrying the level.

Changes You Can Make

Since the function of this screen is simply to inform the player that the game is over there is not
much we can do to make it more attractive. But, since we are dealing with cars moving up and
down the screen, we could make the graphic do the same.

For that we need to add a controller variable to the Create Event:

And then you would need to add a Step Event to the object with the following:
Now the game over sprite will bounce up and down the screen.

Click on the Next button to go to the next page of the tutorial.

objControl
We will now open the object folder "Game" to edit the objects there. The first one we wish to
change is the objControl. As the name implies, this is what controls the main game-play elements.
In the case of "1945" it controls the spawning of enemies as well as the random creation of
background islands to fly over. We are going to change this however, so that it spawns two
different types of car and our islands will become trees on either side of the road for our "Spy
Chase" game.

The first thing to change is the Create Event, so open up the code block for that, and you will see
the following:
The highlighted code above is the scrolling background, and for "Spy Chase" we are going to
change that to a different image. But we need to do slightly more than that, since we also need to
add borders to mark the sides of the road.

If you look at the "Spy Chase" code block, you can see that we have activated another background
index and set that to the road tile, and that we have set it to have the same scrolling speed as the
"grass" background. The two together will now give an illusion of a moving road.

With that done, our attention should now fall on the Alarm 0 event. This alarm has been set in the
Create Event to run four seconds after an instance of the object has been created and is used to
spawn the islands in "1945".

However, when you uncomment the "Spy Chase" code block we have changed this quite a bit:
Since we have a road up the middle of the screen, we can't have the "trees" spawn in the middle,
so we first get the width of the road, then use that value to limit the area that each of the two
trees that we are spawning can be created at. As before we repeat the alarm, but now every
second rather than every four seconds so we have lots of trees.

The Create Event also set Alarm 1 for the object, which in "1945" is used to spawn the enemies:

However, for "Spy Chase" this code also needs to be changed quite dramatically, since we need to
limit the enemies to spawning in the middle area of the screen, and we also want to have the
player dodge NPC cars (that don't shoot) as well as enemy cars:

This new section of code first checks to see how many enemies are actually on-screen at a time,
since the player has a more limited space in which to move and so we don't want to spawn so
many cars that the game is frustrating to play. We also use a switch to choose between one of
the two possible cars that can be spawned.

The final change to this object is in the Draw GUI Event. This time the change is very slight, with us
only changing the sprite being drawn for the lives from this:
To this:

Changes You Can Make

With this game, we can add a few things to it to improve the player experience, with one of them
being a distance counter. That way the player will have two goals to achieve: The highest score,
and the furthest travelled. To do this you will need a new variable in the Create Event to store the
distance:

Now, in the Step Event we need to increment it, but only when the player has lives and the game
is not paused:

And finally, in the Draw GUI Event, to draw it:

This change will now give the player an extra goal to achieve and can also be integrated into other
game-play elements, like achievements for reaching a certain distance, or "missions" where the
player has to survive for a certain distance etc... Small changes like this can add a lot to a game!

Click on the Next button to go to the next page of the tutorial.

objIsland
The object objIsland is a simple one, designed purely to display a graphic effect, in the case of
"1945" one of two island sprites. For our "Spy Chase" game, we want it to do the same, but we will
draw trees. So, open the object Create Event and we will change two lines:
For "Spy Chaser" the above lines will be changed to:

We need change no more in this object, since the Step Event is the same for both.

Changes You Can Make

Well, one thing we could do with this object, is have it create clouds that actually move over
things. In "top down" games like this, the illusion of depth and layers often helps immerse the
player more in the game. If you look at the sprite "sprTree" you will see it has a cloud sub-image
and this is what we can use, like this:

This changed Create Event code will now choose the cloud sub-image and then, since the trees are
only created at either side of the screen, randomise its x position so that the clouds will appear
anywhere across the screen. Note that we also give it a reduced depth so that it will be drawn
over the rest of the graphics in the game.

Click on the Next button to go to the next page of the tutorial.

objPlayer
Our object objPlayer is the next to be changed. Its controls are going to be almost identical to that
of the "1945" plane, but we will need to limit its movement somehow, since we are on a road and
have less freedom to move sideways.

To start with we will change the sprite that the object uses by changing the following line in the
Create Event:
To:

With that change we can now look at the Alarm 0 Event code:

This code is what spawns the player bullets when they press the appropriate key, however for
"Spy Chase" these need to spawn closer together which means a minor change to the code:

The final change for this object is the above mentioned change to the controls. This takes place in
the Step Event which currently looks like this:

We need the player object to be more responsive, since it is now a "car" rather than a "plane", so
we up the movement speed. We also need to extend the limit code for the movement to restrict
the player a bit more and destroy the instance if it goes outside those limits:
And that's it for the player object, since all the other events use the same code for both games.

Changes You Can Make

An obvious change to make for this object is the addition of sound. You can add in a sound effect
for the motor, or for shooting, or for the tyres squealing when the player moves. In this example
we will add the latter of these options and use the sound effect that is already included in the
game for this purpose "sndSqueal".

To get this effect to work, we will need to change the Step Event movement codes for left and
right to look like this:
Note the changes in pitch that we have added. This minor addition to the code has a big impact on
the game, as it will make the effect sound more realistic since the sound will no longer sound the
same every time. Also note that we use the Alarm 1 Event to control the sound being played, as
we don't want it to be played every step, but rather only when the player first presses a key.
However, an alarm with no code in it will not run so we need to add an Alarm 1 Event and add the
following:

That comment is enough to tell GameMaker:Studio that this alarm should count down when set.

Click on the Next button to go to the next page of the tutorial.

objEnemy
The next object to change, objEnemy, only needs a very minor tweak in its Create Event for our
game of "Spy Chase". Currently we have this for "1945":
And we change it to this:

All we really need to do is to change the sprite and flip it so that the "car" is facing down the
screen, and we lower the vertical speed a little to make it easier to avoid or shoot.

All other events in this object can remain the same.

Changes You Can Make

One very quick change to make to this object is to have it play a sound when shooting. this will
help the player avoid bullets as they will hear the sound and know that a bullet is coming.

To do this open up the Alarm 0 Event and add the following:

Another change we could make to this instance is to have it "flash" red when the player hits it with
a bullet. For that we need to add this into the Collision Event with the player bullet object:

And to reset the colour back to normal we add an Alarm 1 Event with the following:

You could also change the hitpoints for the car to have a random value (and so make the game a
bit more difficult).

Click on the Next button to go to the next page of the tutorial.

objNPC
This object is unique to our "Spy Chase" game, and so needs no changes to the code. If you look at
the events it has you will see that it is almost exactly the same as the object "objEnemy", only the
vertical speed is set to a negative value so that it moves up the screen rather than down, and we
do not use the shoot alarm:

Changes You Can Make

There really is not a lot you can do with this object to make its behaviour different and maintain
the "feel" of the game, however a minor change that can be made would be to give it a random
speed in its Create Event to start with so that some are slower or faster than others:

Click on the Next button to go to the next page of the tutorial.

objWindows8
We can now direct our attention to the object objWindows8. This is our controller for all
the Windows 8 special functions available to you.

You should now uncomment the code in the create event of this object:
The highlighted section above, sets some variables that we need to control the game
(pausing and view snapping) and it also initialises the variable "pauseButton". This will be
used in conjunction with the App Bar. However, before we can use the App Bar it has to be
enabled since it is off by default. Once we have enabled it, the user will be able to right
click anywhere on the game window to call it up, and in our "Spy Chase" game it will be
used to for pausing.

Before continuing, please note that the object objWindows8 is a persistent object. A
persistent object is one that, once created, will persist across all the rooms of the game
meaning that you only need to create it once at the start of the game and it will be available
in all the rooms of the game until the game is ended, or the game_restart() function is
called. It is a useful way to create a "universal" controller in your game.

Click on the Next button to go to the next page of the tutorial.

Charms
The Settings Charm
Under the code for setting the App Bar, we then add a setting to the Settings Charm of the
Windows 8 UI.
Charms can be accessed by the user at any time by moving the mouse to the top right, or bottom
right, corner of the screen, and as with the App Bar, GameMaker:Studio has a number of functions
that give you complete control over charms. in this case we are adding a link to our "Privacy
Policy" (an essential part of your Windows 8 app):

This function takes a short text description as it its first argument and the second argument is the
link that we want to open when the player selects this option from the charm. You should note
that the second argument does not have to be a URL and can also be a script id, so that when the
user selects the option, it will run a script from within your game. In this way you can have the
settings charm call up an options screen to set your game properties (for example). You can find
the official guidelines for using the settings charm here.

The Share Charm

The next function we use is for the Share Charm.

This charm lets you share different things using different programs from within the Windows 8 UI,
and in our game we activate it to share a screenshot with the following line:

The share charm can send text, screen shots, emails and a few other things, and in this case we are
simply telling the game to take a screen-shot and then send it to wherever the user chooses from
the slide out panel for sharing. The actual app that you are sharing with will depend on the type of
sharing being done and the apps that the user has on their PC or Tablet. You can find the Microsoft
guidelines for sharing here.

Note that there are two ways to share, defined by the last argument of the function, which can be
either true or false. If it is true, then the function will call the share charm the moment it is
called, automatically offering the player the option of choosing the app to share to, and if it is
false, then the user will have to call the charm manually when they choose.
Changes You Can Make
Why not make the share only happen when the player presses a button? You can do this by
creating a new object and giving it a sprite, then placing it in the game room (from the room
editor). This object would have the following code in its Left Mouse PRESSED event:

This looks the same as previously, only now we have the "immediate" flag set to true. Why not
share other things too? GameMaker:Studio has many sharing functions for Windows 8 so why not
add them? Share the link to your Web Site, for example

Click on the Next button to go to the next page of the tutorial.

Live Tiles
The final few lines of code in the Create Event of our object objWindows8 are for pushing a
notification to the pinned Live Tile on the Start Menu of the Windows 8 UI.

For all Live Tiles, you will need to use a template string to define them. This string is set by
Microsoft and a complete list can be found here. In this case we are going to use the template
"tileWideImageAndText01" which has the following format:

Next we set its expiry time.

This is the length of time to show the notification. In this case we use -1, which makes it show
permanently. After this we give the notification a "tag":

The Live Tile "tag" is the tile identifier and is used in further functions to change or remove or
modify the notification being defined. the template we have chosen permits an image to be used
too, so we next add that:

Note that the image used must be an included file! You cannot use any sprite or background
resources for this, only included images, and the number and size of the image will depend on the
tile template that you have chosen. You also must also use the format "ms-appx///" +
working_directory + "FILE" otherwise the Tile will not display correctly.

We also add some text to the Tile:

As with the images, the use of this function will depend on the tile template that you have used. It
is worth noting that if the template uses multiple lines of text, or multiple images, then you will
need to call these functions once for each line of text (or image).

Finally, we "push" the notification to the Live Tile:

The notification will not be sent to the Live Tile until the above function

Changes You Can Make

The most obvious change you can make here is to support square Live Tiles as well as the wide
type. The user can choose which to use from the Windows 8 UI and you have no way of knowing
which it is going to be. The tutorial file that accompanies these pages includes a square tile image,
so we can use that. So you could add the following to your Create Event:

Why not add a notification call when the game ends to show the final score on the Live Tile? Or
experiment with different templates?

Click on the Next button to go to the next page of the tutorial.

App Bar Elements

Since we have enabled the App Bar, let's define the App Bar button now. We are going to use the
Room Start Event. This event will be triggered at the start of each room, after the Create Event.
Why don't we just use the create event itself? Well, remember, this object is persistent, meaning
that it will run the create event only once when created and no more. This would mean that our
new code to remove the button, when not in use, will not work correctly as the create event will
not run again on a room change.

Open the code block in the Room Start Event:

This code will check the current room when the event is called and then either add, or remove, the
App Bar button toggling it as we go from room to room, since we do not want to show a pause
button in the Menu room. You can choose from a great number of Microsoft Icons for the App Bar,
and you can find a full list of them here.

Changes You Can Make

There are a number of changes you could make to how the App Bar is used in the game. For
example, you could remove the "Retry" and "Quit" buttons from the game itself, and add them
into the App Bar so that the user can use them at any time, and not just when they lose the game.

For that we would add the following into the Create Event:

The scripts referenced by the buttons are already supplied in the game, but you can easily write
your own. Microsoft have prepared documentation that outline the recommended usage of App
Bar elements, so it is recommended that you look over their guidelines before you start adding
them to your game. You can find more information here.

Click on the Next button to go to the next page of the tutorial.

Snap View
The last Windows 8 feature that we are going to cover is the snap view. With the Windows
8 UI the user can have their apps and games cover one third of the screen, two thirds of the
screen or the full screen. This means that you have make sure your game can deal with this,
using the special Resize Event, which can be found under the Draw Event category.

The object objWindows8 has the Resize Event already prepared with the following code:

This event will "toggle" the global variable that we created and permit you to deal with the
view being snapped. In this case, it will pause the game and show a special graphic overlay
when it is true, or permit the game to be played if it is false. Note that we have to deal
with the view being snapped to one third, two thirds or fullscreen, and the code will only
pause the game when it is snapped to a side (which is 320 pixels wide).

The graphic overlay is drawn using the Draw GUI event and has the following code:
That ends this tutorial.