Welcome to HTML5 Game Development with GameMaker! You are about to enter the exciting world of game development for the web. If you have never used GameMaker: Studio before, this book will show you everything you need to know about using the software, making games, and getting them up on the Internet. If you have previous experience with GameMaker: Studio, but this is your first foray into HTML5, this book will give you a better understanding of the differences between developing stand-alone games and browser-based games. Feel free to skim through this chapter and move onto the projects.
Now if you are still reading this, we can assume that you want to know more about this software. You might be asking yourself, "Why should I use GameMaker: Studio? What features does the HTML5 module give me? For that matter, what is HTML5 and why should I care?" All of these are good questions, so let's try to answer them.
GameMaker: Studio is an incredibly powerful and easy to use development tool for making games. The software was originally designed to be used in a classroom setting as a way for students to learn basic programming concepts, understand game architecture, and create fully featured games. As a result, the development environment is very intuitive for first time users due to the drag-and-drop system of coding. Unlike many other competing development tools with similar functionality, GameMaker: Studio has a very robust scripting language that allows users to create almost anything they can imagine. Add to this the fact that you can easily import and manage graphics and audio resources, the integration of the fantastic Box2D physics library, and built-in source control, why wouldn't you use it? Up until now, making games generally meant that you were creating a stand-alone product.
The Internet was not really a consideration as it was fairly static and required a slew of proprietary plugins to display dynamic content, such as games, movies, and audio. Then HTML5 came along and changed everything. HTML5 is an open-standards collection of code languages that allows anyone and everyone to develop interactive experiences that will be able to be run natively on any device with a modern browser and an Internet connection. Developers are now able to use cutting edge features, such as WebGL (a graphics library that allows for 3D rendering), audio APIs, and asset management, to push the boundaries of what you can do in a browser.
Note
Not all browsers are equal! While the HTML5 standards are set by the W3C, each vendor implements them differently. Also, not all the standards have been set at this time, which means that some things may not work in certain browsers. For example, there are multiple audio APIs competing to become the standard. As the standards become locked down and as the browsers become more compliant, these issues should go away. To see how well your preferred browser supports HTML5, go to http://html5test.com.
Normally, developing a game for HTML5 would require a working knowledge of three different coding languages: HTML5 (Hypertext Markup Language), the code language that creates the structure of a web page, CSS3 (Cascading Style Sheets 3), that determines the presentation of the site, and JavaScript that actually makes the magic happen. The GameMaker: Studio HTML5 export module makes all of this simple by allowing developers to work in an integrated environment and export to these languages with the press of a button. Beyond just being a game engine, the HTML export module includes specific functions for dealing with URLs and browser information. It also comes with its own local server software that will allow you to test your games as if it were up on the Internet live. Finally, you can extend GameMaker: Studio even further, because it allows you to import external JavaScript libraries for any functionality you may need or want. Sounds great, doesn't it? Now let's get the Studio up and running.
In order to use this book, we need to have a few pieces of software. Firstly, we need an HTML5 compliant browser, such as Mozilla Firefox, Microsoft Internet Explorer 9.0, or for the best results, Google Chrome. Secondly, we need to purchase and install GameMaker: Studio Professional with the HTML5 export module. Once we have all of that we can start making games!
Note
Please be aware that GameMaker: Studio Professional and the HTML5 export module are two separate items, and you will need to own both in order to create games for the web.
Purchase and download GameMaker: Studio Professional and the HTML5 export module from https://www.yoyogames.com/buy/studio/professional.
Once they have been downloaded, run the program
GMStudio-Installer.exe.Follow the onscreen instructions and then launch the program.
Enter your license key. This will unlock the software and the modules that have been purchased.
GameMaker: Studio is ready to go, so let's start a project!
In the New Project window, select the New tab. It should look like the preceding screenshot.
GameMaker: Studio manages projects by creating folders for each resource along with a project file. For this you will want to specify a directory where the game files are to be stored. Set the Project Name field to
Chapter_01and click on Create.
Now that we have the software up and running, let's take a look at the interface . The basic layout of GameMaker: Studio can be broken down into four components: the Menu, the Toolbar, the Resource tree, and the Workspace. We will be exploring these components throughout this book, so don't expect a breakdown of each and every item. Not only would that be incredibly boring to read, it would delay us from making games. Instead, let's just focus on the stuff we need to know right now.
Firstly, as with most complex software, each of these components has its own way of allowing users to do the most common tasks. For example, if you want to create a Sprite you can navigate to Menu | Resources | Create Sprite, or you can click on the Create a Sprite button in the Toolbar, or you can right mouse click the Sprites group in the Resource Tree, or you can use Shift + Ctrl + S to open the Sprite Editor window in the Workspace. There are actually even more ways to do this, but you get the point.
While there is a lot of overlapping functionality, there are also many things that can only be done in each specific component. Here is what we need to know.
The Menu is where you will find every editor and tool you will need. There are a few very useful tools, such as the ability to Search in Scripts and Define Constants that are only found here. Why not just spend a moment and take a look at each menu option so that you have an idea of all the things you have available to you. We'll wait.
The Toolbar uses simple graphic icons for the most common editors and tools we will be using. These buttons are the easiest and quickest way to create new assets and run the game, so expect to be using these often. There is one very important, unique element on the Toolbar: the Target drop-down menu. The Target determines what format we will be compiling and exporting to. Set this to HTML5.
The Resource tree shows and organizes all the assets that have been created for the game. Keeping a project organized won't affect the performance of the software, but it will save us time and reduce frustration in the long run.
The Workspace is where all the various editors will open up. When the game is run, the Compiler Information box will appear at the bottom, and will show everything being compiled when the game is run. There is also a tab for Source Control, which can be used if you have an SVN Client and repository for working in groups.
Note
If you want to know more about Source Control, check out the following GameMaker: Studio wiki page: http://wiki.yoyogames.com/index.php/Source_Control_and_GameMaker:Studio
In order to create a game in GameMaker: Studio, you need a minimum of three types of resource assets: a Sprite (what you see), an Object (what it does), and a Room (where it happens). On top of these, you can also have Scripts, Backgrounds, Sounds, Fonts, Paths, and Time Lines.
Each resource that you can bring into GameMaker: Studio has its own properties editor. In order to get acquainted with each of them, we are going to build a very simple game of cat and mouse. We will create a player character (a mouse) that can move around the room, collect items (cheese), and avoid an enemy (a cat). Let's dive right in by creating some sprites.
Sprites are bitmap images that are intended to be used for the graphical representation of an object. These can be a single image or an animated sequence of images. GameMaker has its own image editor to create these, but also allows JPG, GIF, PNG, and BMP files to be imported.
For our example, we are going to start by creating two sprites; one for a wall and one for a player character. If you have downloaded the support files, we have supplied image files for this in the Chapter_01 folder.
We will start with a simple Sprite that will represent the walls of our game.
Create a new Sprite by navigating to Resources | Create Sprite. This creates a Sprite in the Resource tree, and opens up the Sprite Properties editor.
Name the sprite
spr_Wall.Click on Load Sprite to open a Sprite image. On the side of this window there is an Image Information section, where we can see a preview of the selected image and choose to activate several options. Make Opaque will remove all transparency from the selected sprite. Remove Background will remove all pixels with the color found in the pixel in the lower-left corner of the image. Smooth Edges will smooth the transparent edges of an image and is very useful when importing animated GIF files to get rid of the hard edges.
With none of the options checked, open
Chapter 1/Sprites/Wall.pngand click on OK.As you can see in the following screenshot, it has a width and height of 32 pixels and has one subimage. Nothing else needs to be changed, so click on OK:
The player in this game is going to be a mouse and the Sprite consists of two frames of animation.
Create a new Sprite.
Name the sprite
spr_Player.Click on Load Sprite and select
Chapter 1/Sprites/Player.gif. Check the box for Remove Background and Smooth Edges. Click on OK.Once again, it has a width and height of 32 pixels, but this has two subimages as shown in the next screenshot. This means it has animation! Let's see what each frame looks like by clicking on the arrow beside Show. It is useful to do this when loading animated images to ensure that all the frames are in the appropriate order and are aligned properly.
Set X in Origin to
16and Y to16, or you can just click on the Center button.Click on the OK button.
Congratulations! You have created your first sprites. We will be going deeper into the creation of art assets in the following chapter, so let's move onto Objects.
This is where the real power of GameMaker: Studio truly shows itself. Objects can be thought of as containers that hold the properties, events, and functions that we want each item in the game to do. When we place an object into the game world, it is called an instance and it will operate independently from all other instances of that object.
Before we move on, it is important to understand the difference between an object and an instance of that object. An object is a set of rules that describe something, while an instance is a unique representation of that something. A real-world example would be you are an instance of a human object. A human is something that has arms, legs, speaks, sleeps, and so on. A you is the unique interpretation of these elements. An example of this concept can be seen in the preceding diagram.
The reason this is important is because depending on the functions being used, the effect will be applied either to all of the items of that type or to the individual item. Generally you wouldn't want to shoot an enemy and then have all the enemies in the world die, would you?
Continuing with our example, we are going to create a Wall object and a Player object. The Wall is going to be a stationary obstacle, while the Player is going to have controls allowing it to move around the world and collide with the Wall.
We will start with the solid Wall object that we can use to create a maze for the player.
Create a new Object by navigating to Resources | Create Object. This will create a new Object in the Resource tree and open up the Object Properties editor.
Name this object
obj_Wall.Click on the input box in Sprite and select
spr_Wall.GameMaker treats collision with solid objects differently than non-solid objects. If a solid object and a non-solid object collide, GameMaker will try and prevent them from overlapping by moving the non-solid object back to its previous position. Of course, in order to do this properly, the solid object has to be stationary. Therefore, we should add the solid property to the Wall.
Click on the Solid checkbox and then click on OK.
The Player object will introduce us to using Events and Actions for things, such as movement and collision.
Create a new Object and name it
obj_Player.Select
spr_Playeras the Sprite.GameMaker's power comes from its event-driven system. Events are moments and actions that occur during the running of a game. When you add an Event to an Object, you are asking the item to respond to that action when it occurs, and then apply the assigned instructions.
Sounds fairly straightforward, doesn't it? Well it can be a bit confusing when it comes to the order of events. GameMaker breaks down the game into steps (finite moments of time), which run the events many times every second. Some events happen in a preset order, such as Begin Step, which always starts at the very beginning of the step. Other events happen whenever they are called, such as Create, which is run immediately when an instance of an object is created, to check whether that code occurs at the start or end of the step.
Note
Go to http://wiki.yoyogames.com/index.php/Order_of_events to learn more about GameMaker: Studio's order of events.
In the Events: area, click on Add Event and navigate to Keyboard | Left. This event will run code each step that the left arrow key is held down.
Events need Actions to be applied for them to do anything. GameMaker: Studio uses a drag-and-drop (DnD) system where icons representing common behaviors can be easily implemented. These have been separated into seven different tabs based on functionality. For the vast majority of this book we are going to use only the Execute Script icon found in the Common tab, as we will be writing code placed into Scripts. In this chapter, however, we will use the DnD Actions, so that you get an understanding of what they do.
From the Move tab, select and drag the Move Fixed icon into the Actions area of the Left Key event.
The Move Fixed icon
In the Move Fixed options box, there is an option for what object this action is to be applied to. We want this to be set to Self, so that it is applied to the instance of the player.
Click on the left arrow to indicate the direction we want the movement to go.
Set the Speed field to a value of
8. This will apply a velocity of eight pixels per step.Ensure that Relative is not checked. Relative will add the value to whatever the current value is.
Click on OK.
Repeat steps 4 to 9 for the other keyboard arrows (right, up, and down) with the same Speed and the appropriate direction.
Now we have an object that will move around the world when the arrow keys are pressed. However, if we were to run this, once we started moving, we would be unable to stop. This is because we are applying a velocity to the object. In order for us to stop the object, we need to give it a velocity of zero.
In the Events: area, click on Add Event and navigate to Keyboard | No Key. This is a special keyboard event that will only happen when no keys are being pressed.
Set the direction to be in the center and set the Speed field to
0.The last thing we need to do is to add our collision detection. Collision in GameMaker: Studio is a single event comprising two instances. Each instance is capable of executing an event call on this single collision, though it is generally more efficient to put the code on only one of them. In our case, it makes sense to put a Collision Event on the Player for when it collides with a Wall, as the Player will be the instance that does something. The Wall will remain where it is, doing nothing.
Click on Add Event and navigate to Collision | obj_Wall.
Drag the Move Fixed icon into the Actions: area.
Set the direction to be in the center and the Speed field to
0. Click on OK.
The actors are ready; we have some objects that can be seen and do something. Now all we need to do is put these into a room.
Rooms represent the world in which the instances of our objects live. Most rooms you create will likely be used as various levels, but rooms can also used for:
Frontend menu screens
Non-interactive scenes
Any self-contained environment you need
We want to lay out a world that will contain the player as well as presenting some obstacles. To do this, we are going to place down wall objects around the outer edges of the room and place a few lines in the center.
Create a new room by navigating to Resources | Create Room. This will create a new room in the Resource tree and open up the Room Properties editor.
To make placement a bit easier, set the Snap X and Snap Y fields to
32. This will create a placement grid with snapping points every 32 pixels.Select the settings tab. Here we can change the basic room properties, the size, steps per second, and the name of the room.
Name the room as
rm_GameArea.We will leave the room Width, Height, and Speed fields at their defaults as seen in the following screenshot:
Select the objects tab, and under Object to add with left mouse, select
obj_Wall.In the upper-left corner of the room, click with the left mouse button to place an instance of the wall.
Now you might be thinking that this is going to take a painfully long time to build the room, click by click. Don't worry, there is an easier way. If you hold down Shift + Ctrl, you will be able to paint the world with the instances. If you make a mistake and want to remove an instance, just right mouse click to delete one instance, or hold the Shift key to de-paint the instances. If you just want to move the instance a tiny bit, as in not a whole grid unit, hold the Alt key down.
Holding down the Shift + Ctrl keys and the left mouse button, draw the perimeter walls. Also lay down two extruded sections as shown in the following example screenshot:
Don't forget to add the Player in!
In the objects tab, select
obj_Player.Place a single instance of
obj_Playerinto the room in the lower-right corner of the room.Close the room by clicking on the check mark in the upper-left corner of the Room Properties editor.
At this point, we have all the required elements necessary to run a game in GameMaker: Studio. Before we test the game out, we should save our work by navigating to File | Save.
While creating a game, there are three different types of compilations that can be done. If the game is 100 percent complete, you can select Create Application for the target platform. If the game is still in development, there is Run Normally, which will compile and run the game as if it were an application, and Run in Debug Mode, which runs the debugging tools.
Let's not wait any longer. Run the game by navigating to Run | Run the Game, or by pressing F5.
If everything is working correctly, the player object should be able to move around the world using the arrow keys, but not be able to pass through any of the wall objects. However, there is something not quite right. The player object appears to be flickering due to it being animated. Let's fix this while taking a look at the Script Properties editor.
GameMaker: Studio utilizes its own proprietary scripting language called GameMaker Language
, otherwise known as GML. This language was developed to be very forgiving to the novice user, and utilizes some functionality you likely won't find in other scripting languages. For example, GML will accept the standard expression && to combine two comparisons, or alternatively the word and. GameMaker: Studio does a lot of hard work when it comes to creating games by giving the user a great set of functions, variables, and constants.
As previously stated, we want to stop the player object from animating. This is very easy to do using scripts.
Create a new Script by navigating to Resources | Create Script. This will create a new Script in the Resource tree and open up the Script Properties editor.
Name this as
scr_Player_Create. Throughout this book we will be naming most of our scripts with the name of the event at the end of the name. In this case we will be placing this code into aCreateevent.To stop a Sprite from animating, all we need to do is set the playback speed of the Sprite to zero. On line 1, type the following:
image_speed = 0;
Close the Script by clicking on the check mark in the upper-left corner of the editor.
In order for the script to run we need to attach it to an object.
Reopen the Object Properties editor for
obj_Player.Add a Create Event.
Navigate to Actions | Control, and select and drag the Execute Script icon into the Actions: area.
The Execute Script icon
Select
scr_Player_Createas the script to execute, and then click on OK.
We can now run the game, and we see that the player object is no longer animating.
Backgrounds are a special kind of art asset that come in two different types: background images and tilesets. Unlike Sprites, backgrounds never have any animation as a part of the art asset. Background images are mainly used as large backdrops of a room and are useful if you want the background to move. Tilesets are small slices of art that can be used to paint the background, are useful for creating large, unique worlds, and to keep the graphics cost computationally low.
Note
Use Tilesets if you want:
Only a few art assets to create large worlds
To add unique details to the background
For this simple example we will just create a static background. We will look more into tilesets in the next chapter:
Create a new Background by navigating to Resources | Create Background. This will create a new background in the Resource tree and open up the Background Properties editor.
Name this as
bg_Ground.Click on Load Background and open
Chapter 1/Backgrounds/Ground.png.Then click on OK.
We now have the art asset ready to go, we just need to place it into the room.
Reopen
rm_GameArea.Click on the
backgroundstab.
Each room allows up to eight backgrounds to be displayed simultaneously. These backgrounds can also be used as foreground elements. If no background is active, it will display a solid color.
Select Background 0, and then check the box for Visible when room starts. This has to be active in order to see the background during gameplay.
Select
bg_Groundas the background to be displayed.Everything else can remain at their defaults. Tile Hor. and Tile Vert. should be checked and all other values should be set to
0.Close the room by clicking the check mark in the upper-left corner of the editor.
Let's run the game again and we can now see that we have a background. Things are definitely looking better, but something is missing. Let's get some sound into the game.
The Sound Properties editor is where you can bring in sounds to be used in your games. GameMaker allows you to bring in MP3 and WAV files only. There are two types of sounds that you can use:
Normal sounds
Background music
Normal sounds are all the small sound effects that you hear, such as gunfire and footsteps. These should generally be WAV files. Background music is for the longer sounds such as the game music, but also things such as spoken dialog. This should be in MP3 format.
When GameMaker: Studio exports the game audio for HTML5, all sounds will be converted to both MP3 and OGG format. This is due to the fact that different browsers use different audio file formats in their implementation of the HTML5 audio tag. Luckily for us, GameMaker: Studio automatically adds browser identification code into the game, so the game knows what files are being used.
We are going to create two sounds for the game, some background music and a sound effect for a collectible object.
Let's bring in some music to our game to help build some atmosphere.
Create a new Sound by navigating to Resources | Create Sound. This will create a new Sound in the Resource tree and open up the Sound Properties editor.
Name this as
snd_bgMusic.Load the
Chapter 1/Sounds/bgMusic.mp3file. If you want to hear the music, just hit the play button. When you are done listening, hit the stop button.Under Kind select Background Music as the type, and then click on OK.
We will want to have the music start right at the start of the game. To do this we are going to create a data object that we will call the Overlord . Data objects are generally not meant to be seen in the game, so we do not need to assign it a Sprite.
We will be using an Overlord object to watch over the game and control things, such as the music and win/lose condition.
Create a new object and name it
obj_Overlord.Add an Event, and then navigate to Other | Game Start. This is a special function that will only be run when the game first starts.
Navigate to Actions | Main1, and select and drag the Play Sound icon into the Actions: area.
The Play Sound icon
Set the sound: field to
snd_bgMusic, set loop: totrue, and then click on OK.
Before we test this out, we need to make sure the Overlord is in the world. When you place it into a room, it will be represented by a little blue circle icon, as shown in the following screenshot:
Reopen
rm_GameArea.Select
obj_Overlordfrom the objects tab and place a single instance in the room.
Let's run the game and listen. Music should start playing right away and loop infinitely. Let's move on to creating a collectible.
We are going to create an object that the player can collect during the game. When the player collides with it, the sound will be played once.
Create a new Sound and name it
snd_Collect.Load the
Chapter 1/Sounds/Collect.wavfile and set it to Normal Sound, and then click on OK.We haven't created an Object for this, nor have we brought in a Sprite. Now is a chance for you to test your memory. We will only quickly go over what we need.
Create a new Sprite and name it
spr_Collect.With Remove Background and Smooth Edges selected, load the file
Chapter 1/Sprites/Collect.pngand center its origin.Create a new Object and name it
obj_Collect.Assign
spr_Collectas its Sprite.Add a Collision Event with
obj_Player.Navigate to Actions | Main1, and drag the Play Sound icon into the Actions: area.
Set the
sound:field tosnd_Collectand set loop: tofalse.Now when the player collides with the object it will play the sound once. That's a good start, but why don't we give the player a bit more of a reward?
Navigate to Actions | Score, and drag the Set Score icon into the Actions: area.
The Set Score icon
As can be seen in the next screenshot, set the new score: field to
50, check the box for Relative, and then click on OK. This will add 50 points to our score each time the object is collected. Relative makes the score add to the previous score.
Now we have something worth collecting. Only one issue remains and that is we get the points and sound just for touching the object. We can't let that go on forever!
Navigate to Actions | Main1, and drag the Destroy Instance icon into the Actions: area. This action will remove the instance from the world. Leave the values as they are, and click on OK.
The Destroy Instance icon
We are done with this object, and if built correctly, it should look like the following screenshot. Click on OK.
Let's place a couple of these collectibles into the room and run the game. We should be able to move the player around the world and collide with the collectibles. We should hear a sound play and the object disappears. But where is our score? Well, in order to display it, we need to bring in some text.
You can import fonts to use them as text in your games. These fonts need to be installed on your machine in order to use them during development. Each font resource is set to a specific font type, size, and whether it is bold/italicized or not. If you want a slight variation, such as a font that is two points larger, than a separate font resource must be created. This is due to the fact that on export, GameMaker will convert the font into an image that will allow it to be used without the font being pre-installed on the user's machine.
We are going to create a font that will be used to display the score of the game.
Create a new Font by navigating to Resources | Create Font. This will create a new Font in the Resource tree and open up the Font Properties editor.
Name this
fnt_Impact.From the Font drop-down menu, select Impact. This is a default Windows font.
Set the Size to
16. Then click on OK.We now have a font that we can use in our game. For this, we are going to have the Overlord object draw the game score at the top of the screen. We will also make the text white and align it to the center.
Reopen
obj_Overlord.Add a Draw GUI event by navigating to Draw | Draw GUI.
Navigate to Actions | Draw, and drag the Set Color icon into the Actions: area. This will open a dialog box where you can set a color.
The Set Color icon
We want to set the color to teal. In the color palette that pops up, select the teal color found on the bottom row, fifth column from the left. Click on OK.
Navigate to Actions | Draw, and drag the Set Font icon into the Actions: area. This will open up a dialog box with two parameters: the font to use and how it should be aligned.
The Set Font icon
Set the Font: field to
fnt_Impactand align it tocenter. Click on OK.
Finally, navigate to Actions | Score, and drag the Draw Score icon into the Actions: area. This will open up a dialog box with three parameters: the x and y coordinates, and an optional caption that can be placed in front of the actual score.
Set the x: field to
320, the y: field can remain at0, and removeScore:from the caption: field, leaving it blank as can be seen in the following screenshot. Click on OK.
We can now run the game and the score will now be displayed at the top of the screen in the center. When you collide with the collectibles now, you should see the score increase.
Paths are the best way to create complex movement patterns for objects. A path is made up of a series of points in which an object can move along. The transition between points can be straight, meaning the object will hit each point precisely, or curved, an interpolation between three points. The path can either be an open line or a closed loop. The following screenshot will be used as the reference image throughout this section.
We are going to create a simple enemy that will follow a path around the room. If the player collides with the enemy, the player will be destroyed. Let's start by creating the path.
Create a new Path by navigating to Resources | Create Path. This will create a new Path in the Resource tree and open up the Path Properties editor.
Name this as
pth_Enemy.At the end of the editor toolbar we can set what room is displayed. This is very useful for creating accurate paths on a per room basis. Set this to
rm_GameArea.
To add a point for the path you can just left-click anywhere on the map. The very first point will be represented by a green square and all the points following will be circles.
Place the first point at
64,64of the map. If you make a mistake you can always drag the point to the proper position, or you can manually set the X and Y values.To this path we are going to add five more points as seen in the reference image.
We will leave all the other settings at their defaults, so click on OK.
The path is ready for use, now we just need to create an enemy to attach the path to. This enemy is going to simply move along the path and if it collides with the player, it will restart the game.
Create a new Sprite and name it
spr_Enemy.With Remove Background and Smooth Edges selected, load
Chapter 1/Sprites/Enemy.pngand center the origin.Create a new Object and name it
obj_Enemy.Add a Create Event, navigate to Actions | Move, and drag the Set Path icon into the Actions: area. This will open the Set Path options dialog box.
The Set Path icon
Set path: to
pth_Enemy.Set the speed: field to
4.The next option determines what should happen when the instance reaches the end of the path. There are options to stop, continue on from the start (for open paths), continue from here (for closed paths), and reverse directions. Set at end: to continue from here.
The relative: option here determines whether the path starts where the instance is (relative), or whether the instance starts at the path's first point (absolute). As we built it to fit the room, set relative: to absolute. Then click on OK.
We now have an enemy ready to follow a path, but it isn't really a threat to the player. Let's put a collision event on the enemy and make it restart the game on contact.
Add a Collision Event with
obj_Player, navigate to Actions | Main2, and drag the Restart Game icon into the Actions: area.
The Restart Game icon
The enemy is now complete, so click on OK to close it.
Place a single instance of the enemy anywhere in the room. It doesn't matter exactly where, as it will relocate itself to the proper location when the game runs.
Save the game and run it. We should see the enemy moving along the path around the room. If the player object collides with it, the game will restart.
We've now got some risk in the game, but not enough reward. Let's fix that, shall we?
Time Line is an advanced time tracking system that allows finite control of things that happen during gameplay. A Time Line is comprised of a list of moments. Each moment represents a number of steps from when the Time Line started.
While a Time Line can be used for almost anything, one of the most common uses for one is to spawn instances. In this game, we are going to use it to spawn our Collectible objects, so that the player has something to chase after.
Create a new Time Line by navigating to Resources | Create Time Line. This will create a new Time Line in the Resource tree and open up the Time Line Properties editor.
Name this as
tm_Spawn_Collectibles.Click on the Add button and set Steps to
60.We are going to make these collectibles move by applying a velocity to them. Navigate to Actions | Main1, and drag the Create Moving icon into the Actions: area.
The Create Moving icon
Set the object to
obj_Collect.We want the spawning to occur offscreen, so that the player doesn't see it blink into existence. We will make this Collectible move horizontally, so we will start from the left of the game area. Set the x: field to
-64.We don't want the collectibles always spawning in the exact same location, so we are going to add a random element to it. We will create the instance at a random vertical position between 48 pixels from the top and 48 pixels from the bottom of the screen. Set the y: field to
random(394) + 48.Give it a speed of
4, and set the direction: field to0. It should look like the following screenshot. Click on OK.
Add another Moment at
120and repeat the previous steps except this time make it vertical. To do this, the x: field should be set torandom(546) + 48, the y: field should be-64, the speed: field should be4, and the direction: field should be270.We now have a Time Line that will spawn a new moving Collectible every two seconds. However, we need to attach this to an object so let's apply this to the
obj_Overlord.Reopen
obj_Overlord.In the Game Start Event that already exists, drag the Set Time Line icon into the Actions: area by navigating to Actions | Main2.
The Set Time Line icon
Set the time line: field to
tm_Spawn_Collectibles.Leave position: at
0; this will start it from the beginning.Set start: to Start Immediately.
We want it to repeat itself infinitely, so set loop: to
Loop.
There you have it! Run the game and you should see the collectibles start to spawn after two seconds and continue to be created forever. As you can see from the following screenshot, our game is complete, but there is still one component we need to take a look at.
No matter how experienced you are at scripting and making games, mistakes will always be made. Sometimes it may be a typo or a missing variable, and in this case GameMaker: Studio will catch this and display a code error dialog. Other times, the game may not do what you are expecting it to do, such as passing through a wall when you should not. In this case, there is nothing technically wrong with the code, it is just constructed improperly. Tracking down these bugs can be very tedious and possibly impossible if it were not for debugging tools. In order to use these tools, the game must be run in the debug mode, which you can access by clicking on the Run Debug Mode button in the toolbar, or by going into the Menu and navigating to Run | Run Debug Mode.
During the debug Mode, we can utilize Debug Messages
to help us understand what is occurring in the game. These messages can only be implemented through the show_debug_message() function when scripting (there is no drag-and-drop option) and will appear in a Console window whenever the function is executed. You can use this to pass a string or display a variable, so you can compare the result with what you expect the result should be. This is your first line of defense when trying to solve a problem.
The first console we should use is GameMaker: Studio's DEBUG console for HTML5. When the game is targeting HTML5 and run in the debug mode, a pop-up window will be created along with the game and contains the debug output where all the debug messages will appear, along with a list of the instance and their basic data information. Let's test this console out!
We will start by adding the traditional
Hello Worlddebug message on the creation of the player. Reopenscr_Player_Createand add the following code at the end of the script:myText = "Hello World"; show_debug_message(myText);
Tip
Downloading the example code
You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
We start by creating a variable to hold the string. While we can directly pass a string through the
show_debug_messagefunction without the variable, we will be using this variable in a later debug test.As this script is already attached to our Player's Create event, we can just go ahead and run the game. Click on the Run Debug Mode icon.
When the game starts in the browser, a second window will pop up with the DEBUG console as seen in the next screenshot. If you do not see this window, check to ensure the browser allows pop ups. Scroll down to the bottom of the Debug Output column. Here you should see the debug message
Hello World. This indicates that our code was successfully executed. If we didn't see it as expected, then we would have an idea of where the game is having issues.
We can also see all the properties of each individual instance, represented by their instance number, in the game including the current position in the room, the sprite it is displaying and more. Click on any one of the numbers seen in the Instances column, and take a look at its properties in the InstanceData column.
Click on the Pause/Resume button. This allows us to pause the game, which is useful if you have lots of debug messages flooding the console, and you want to take time to see what is happening.
Finally, we can click on the Clear Console button to remove everything from the Debug Output column.
Congratulations! You can now start debugging your scripts. While you will be using show_debug_message a fair amount of time during a game's development, it is important to keep the amount of active messages to a minimum. It doesn't make sense to have so many debug messages occurring that you can't see what is happening!
While you can solve a large portion of your issues with debug messages, there are times when you will need more finite detail into what is happening in the game. GameMaker: Studio has a more advanced debugger that only runs if the game is being targeted for a Windows build. We would be remiss if we didn't at least have a cursory glance at this wonderful tool.
Change the Target to
Windowsand run the game in the debug mode. When the game opens up, the GameMaker Debugger will be displayed in a separate window, as shown in the following screenshot:
Some basic information is displayed immediately, such as how it is performing, by looking at Room Speed: (steps per second) and frames per second (FPS:). If you move your mouse cursor over the instances in your game, you will notice that the mouse id: will change. This ID is the unique identifier for that specific instance and will come in very handy.
The GameMaker Debugger window has many more options available for debugging the game. The Run menu not only allows us to pause the game, but we can also step forward one step at a time. The Watch menu allows you to track specific expressions, such as function calls or properties. The Tools menu gives access to debug messaging as we would expect, but can also display all the global variables, the per-instance variables, and a list of all the instances currently in existence. Let's take a look at what information the instance has in this Console.
Navigate to Tools | Show Instances. This will open a window that displays all the instances in the game.
Scroll down the list until you find
obj_Player. Double-click on it so we can see all of its properties. Much like the HTML5 DEBUG console, we can see where it is in the world and what Sprite it has (by Sprite index number). However, if you scroll down the list there are many more properties. In fact, if we look at the bottom of the list we can see themyTextvariable. That's awesome!
The last thing we will take a look at is the compiled JavaScript code. All modern browsers, such as Mozilla Firefox, Microsoft Internet Explorer 9.0, and Google Chrome come with built-in debug consoles that allow anyone to look at the source code of any website, and even affect what is being displayed on your local screen. That's right. Everyone can see the code for the game. While that might scare you, fear not! When GameMaker: Studio exports a game or it is run normally, it obfuscates the code making it very difficult to decipher. When run in the debug mode on the other hand, it does not do any obfuscation other than the engine itself.
Let's take a quick look at what this code looks like. We will start with the debug version so we can see what it would look like without obfuscation. For this example, we will use Chrome as it has the most robust debug console.
With the Target platform set to
HTML5, run the game in the debug mode.In the browser window in the area below the game, right-click and select Inspect Element. This will open Developer Tools for Chrome.
Select the Sources tab, and in the upper-left corner click on the little icon called Show Navigator.
In the Navigator there is a directory tree. Open the folders until you find the
html5folder. Inside this folder is the game. Click on the game and we should see all the code as can be seen in the next screenshot. If we scroll through the code we can clearly see the scripts we have created, properties of objects, and so on.
Let's now take a look at the obfuscated version. Close down the browser tab and then run the game in normal mode. Repeat the same process and take a look at the code. It should look like the next screenshot. We can still read some bits and pieces, but none of it makes any sense. You can feel fairly secure that few people will want to mess with this.
Well, there you have it. In the very first chapter of this book you have already made your very first HTML5 game. In doing so, you had the opportunity to explore the GameMaker: Studio interface and get comfortable with it. You also created and implemented every type of resource available while utilizing all the various resource editors. Hopefully, you have realized how incredibly easily the software allows you to make games for the web. With the knowledge you have already gained, you could start making more advanced games. For example, why not add shooting as you know how to use key press events, make objects move, and do stuff on collision?
In the next chapter, we are going to delve into asset creation. A game is only as good as it looks and sounds. We will learn how to create an animated character, build a tileset to decorate a room, and use audio to add atmosphere. Let's move on as things are about to get a lot more exciting!
