Click Ball - Goodheart-Willcox

This sample chapter is for review purposes only. Copyright © The Goodheart-Willcox Co., Inc. All rights reserved.
Lesson 3
Click Ball
Objectives
Students will use game-design tools to create a
simple game.
Students will set a background color and apply
sprites to enhance a room (scene).
Students will program objects to react to the
game rules.
24 Introduction to Video Game Design
Copyright by The Goodheart-Willcox Co., Inc.
Situation
Name: __________________________________________
Date: ___________________________________________
Class: ___________________________________________
The Awesome Game Company wants to create a game for young children to improve the
child’s control of the mouse and ability to left click. First, you must learn the definition of a video
game and the associated rules and victory condition. The information in this section discusses
these aspects.
How to Begin
1. Read the passage below.
2. Complete the review questions.
3. Turn in all materials.
4. Complete the game build.
Reading Materials
A video game is a software-entertainment product that has a game environment, rules, and
a victory condition. The game environment is what separates a video game from all other games. The
game environment is a setting altered or designed to play a specific game activity.
For a game like baseball, the game environment is the baseball field. The field has been
altered to have three bases, home plate, a pitcher’s mound, in-bounds areas, and foul areas.
None of these things exist in nature. A piece of land has been changed to make this game
environment.
In a video game, the game environment is a virtual game world. This virtual world is seen
through a video screen, thus the video in video game. The video display is the part of the game
environment that separates video games from regular games (such as board games). The really
cool part of a virtual world is that anything can happen without regard to reality. Both realistic
and unrealistic events can occur in a video game. It is up to the designer to create the world.
Inside the game environment are the rules that determine the gameplay. A rule is a
constraint that determines what can or cannot happen in the game. Look at the baseball
example again, the game rules become clear. Inside the game environment of the baseball
field these rules apply: teams have nine players, each team has three outs per inning, there are
nine innings in a game (unless the score is tied after nine innings), each batter can take up to
three strikes to reach base or an out is recorded, if the ball is caught before it hits the ground it
is an out, etc. There are, of course, many more rules than these for the game of baseball. It is
important to understand that rules make the game environment meaningful. Imagine if the rules
for the game of baseball did not set an out of bounds. The batter could hit the ball anywhere out
of bounds to have a home run. That makes the out of bounds rule a very important part of the
game environment for baseball.
Much thought has been put into designing the rules of baseball. Similarly, a video game
designer has to be very careful when making the rules for a video game. Rules must help the
player feel the game is fair and winnable. This is one of the main reasons to construct a rule.
If players feel the game cannot be won, they will not play it. Other rules help create the game
environment, like the out-of-bounds rule in baseball.
Lesson 3 Click Ball 25

Lastly, a game must have a victory condition. A victory condition defines what the
player must achieve in order to win the game. It is a moment in gameplay where the player has
overcome the objective and is the winner of the game or a level within the game. In baseball,
the victory condition is the team with the most points at the end of nine innings is the winner. In
a video game, the victory condition may be defeating a very strong enemy or getting to the end
of a quest. It is the imagination of the game designer that sets the victory condition.
Review Questions and Activities
Vocabulary Questions
Write a definition for each of the terms listed below.
1. video game: ________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
2. game environment: __________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
3. rule: _______________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
4. victory condition: ____________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
Review Questions
5. Describe how a video game differs from a regular game.
___________________________________________________________________________
___________________________________________________________________________
Applied
Technology
Language
Arts
Mathematics Science Social
Science
26 Introduction to Video Game Design
Copyright by The Goodheart-Willcox Co., Inc.
Copyright by The Goodheart-Willcox Co., Inc.
Situation
Name: __________________________________________
Date: ___________________________________________
Class: ___________________________________________
The Awesome Game Company wants to create a game for young children to improve the
child’s control of the mouse and ability to left click. This game hopes to improve motor skills
for these young children in a fun game environment. The game will need three levels, each
requiring better mouse skill and hand-eye coordination.
How to Begin
1. Launch Game Maker 8.0.
2. If the splash screen is displayed asking if you wish to buy the Pro edition, click the
Continue Using the Lite Edition button.
3. Click the Create a Room button on the toolbar to create a new room or scene for your
game. You could also select Resources>Create Room from the pull-down menu. The
Room Properties dialog box is displayed.
4. Select the Backgrounds tab, Figure 3-1. The background color for the room is gray by
default, as shown in the Color: swatch and the room grid.
5. Click the Color: swatch to open the Color dialog box, Figure 3-2.
6. Select a green color swatch (any green) and click the OK button to close the Color dialog
box and change the background color for the room to green.
Notice that the room has a grid pattern with gray lines on the green background. The
spacing of these grid lines can be changed by entering new values in the Snap X: and Snap Y:
text boxes. Grid lines do not show during gameplay, they only help in alignment during design.
Backgrounds
tab
Figure 3-1
Color swatch Snap settings
Grid on/off
Room grid
Isometric
grid on/off
Lesson 3 Click Ball 27
Create a
Room

Toggle the
Showing
of the Grid
Turn the
Grid into an
Isometric
Grid
Figure 3-2
Select a color
7. Change the grid lines so they are 20 pixels apart in both the X and Y direction.
8. Click the Toggle the Showing of the Grid button to the right of the Snap Y: button.
The grid is removed from the room. Click the button again to reapply the grid.
9. Click the Turn the Grid into an Isometric Grid button. The grid lines are now at 45°
to horizontal and vertical. Isometric games use a slanted game board to give the illusion
of three dimensions in a two-dimensional game. Click the button again to return to the
normal grid.
10. Click the Settings tab to display the settings for the room. In this tab, the name, caption
(title), and size of the room can be changed, Figure 3-3.
11. In the Name: text box, be sure the name room0 is displayed. If not, change the name to
room0.
12. In the Caption for the room: text box, enter Level 1.
13. The size of the room is set in the Width: and Height: text boxes. Change the size to
640 wide × 480 tall, if it is not already.
Room
name
Room
caption
Size
Figure 3-3
28 Introduction to Video Game Design
Copyright by The Goodheart-Willcox Co., Inc.
Copyright by The Goodheart-Willcox Co., Inc.
Name: __________________________________________
14. Click the Windows close button (the red X in the top right corner of the window) to close
the Room Properties dialog box.
15. A warning appears asking if you want to save the changes to the room. Click the Yes
button to save the changes.
16. Select File>Save As… from the pull-down menu.
17. In the Save As dialog box, navigate to the folder specified by your instructor. Then, save
the file as LastName_Click Ball.
Adding and Naming Sprites
This section covers creating and naming sprites. In naming game assets, you should
follow a naming convention, which is a standard way of naming items. A naming convention
makes it easy to identify the proper game asset during game construction. These prefixes will
be used in asset names: SPR_ for sprites, OBJ_ for objects, SND_ for sounds, and BCK_ for
background images. For example, you may have a sprite named explosion and a sound named
explosion. By using a naming convention, you will be able to quickly identify the correct item.
18. Click the Create a Sprite button on the toolbar. The Sprite Properties dialog box is
displayed, Figure 3-4.
19. In the Name: text box, type SPR_Ball to identify this asset as a sprite, or an image, of a
ball.
20. Click the Load Sprite button. A standard Windows “open” dialog box is displayed.
21. Navigate to the Game Maker Sprites folder, if it is not already current. Your instructor may
have you use a different folder location.
22. In the Sprites folder, navigate to the Bouncing Balls subfolder.
23. Select the ball_pinball.png image file. A preview of the image appears on the right-hand
side of the dialog box.
23. Click the Open button to assign the image file to the sprite.
Click to
assign an
image to
the sprite
Figure 3-4
Name the sprite
Image assigned
to the sprite
Create a
Sprite
Lesson 3 Click Ball 29

Save the
Game
Create an
Object
24. Click the OK button in the Sprite Properties dialog box to finish creating the sprite. The
sprite is added to the resource tree in the Sprites branch (folder).
25. Using similar steps, create a wall sprite named SPR_Wall using the wall_block.png image
file located in the Maze-Platform folder.
26. Save your game build before continuing (File>Save or the Save the Game button on
the toolbar).
Adding and Naming Objects
You now have two sprites. They are listed in the resource tree in the Sprites branch.
However, sprites cannot be placed in the room, only objects. You now need to create objects,
have these objects “wear” the sprites, and then place the objects in the room (scene).
27. Click the Create an Object button on the toolbar. The Object Properties dialog box is
displayed, Figure 3-5.
28. In the Name: text box, type OBJ_Ball.
29. Look at the Sprite area, which currently states to indicate no sprite has been
assigned to the object. Click the selection button to the right of the display. A
list of available sprites is displayed.
30. Choose the SPR_Ball sprite from the list.
31. Check the Visible check box so that the ball object can be seen in the game.
Note: do not check the Solid check box to make the ball a solid object. Instead, moving
objects need to be programmed to act solid. Game Maker does not work as well when moving
objects are made solid. The objects may get stuck inside another solid object. Avoid making
moving objects solid in your game builds, but objects that will not move can be set to solid.
Sprite
assigned
to object
Check to make
the object visible
Figure 3-5
Name the object
Do not check
Click to select
a sprite
30 Introduction to Video Game Design
Copyright by The Goodheart-Willcox Co., Inc.
Copyright by The Goodheart-Willcox Co., Inc.
Name: __________________________________________
32. Click the Show Information button. The Information about: dialog box is displayed.
This dialog box shows the scripting for the object. When changes are made in the Object
Properties dialog box, Game Maker automatically builds the scripting so you do not have
to. Close the Information about: dialog box.
33. Leave all other options in the Object Properties dialog box at the default settings, and
click the OK button to finish creating the object.
34. The OBJ_Ball object is added to the resource tree in the Objects branch (folder).
35. Using similar steps, create a wall object named OBJ_Wall using the SPR_Wall sprite.
Check both the Visible and Solid check boxes. Since this object will not move, it is okay
to make the object solid.
36. Save your work.
Adding Objects to the Room
Now, you have created two sprites and two objects. You have also assigned the sprites to
the objects. However, you have not yet placed the objects in a room (scene). Remember, earlier
you created a room named room0. You will use this room to build the game.
37. In the resource tree, expand the Rooms branch and double-click room0 to open the room
for editing.
38. Click the Windows maximize button in the top-right corner of the Room Properties
window to maximize the room display.
39. Click the Objects tab in the Room Properties dialog box (which is now maximized). At
the bottom of the tab are some helpful directions, as shown in Figure 3-6.
40. Click the selection button to display a list of objects and choose the OBJ_Ball object.
41. Left-click anywhere in the room to place an instance of the ball object. Notice that the
object snaps to a position that is aligned to the top-left corner of the grid.
42. Left-click anywhere in the room to place another instance of the ball.
43. Right-click on each ball object to delete both of them.
44. Hold down the [Alt] key on the keyboard and left-click anywhere in the room. An instance
of the object is placed in the room, but it does not snap to the grid lines.
45. Hold down the [Ctrl] key and left-click the ball object you just added. Drag the ball so it is
located in the center of the room and then release the mouse button. Notice as you drag
the object, it snaps to the grid. If you hold down the [Ctrl] and [Alt] keys, you can drag the
object without it snapping to the grid.
Figure 3-6
Object to
be inserted
Click to select
a different object
Coordinates of cursor
Lesson 3 Click Ball 31

46. Change the object to be inserted to the OBJ_Wall object.
47. Move the cursor to the top right-corner of the room.
48. Hold down the [Shift] key, then click the left mouse button and drag along the top of the
room to add a series of OBJ_Wall objects to create a wall. Notice that the wall bricks
automatically snap to the grid, which results in gaps in the wall.
49. Click the right mouse button and drag across the wall object to erase them.
50. Change the grid size to 32 × 32. The sprite assigned to the OBJ_Wall object is 32 × 32
pixels, so the grid now matches the size of the object.
51. Holding down the [Shift] key, drag to create a row of OBJ_Wall objects along the top of
the room. There should be no gaps in the wall now.
52. In a similar manner, create a wall all the way around the room. See Figure 3-7.
53. Close the room by clicking the Windows close button (the X). When prompted to save the
room, click the Yes button.
54. Save your work.
Figure 3-7
OBJ_Wall objects added to
create a wall around the room
32 Introduction to Video Game Design
Copyright by The Goodheart-Willcox Co., Inc.
Copyright by The Goodheart-Willcox Co., Inc.
Name: __________________________________________
Programming Conditions and Events
Remember, Game Maker uses events and actions to create the interactions needed in a
game. Your game does not yet have any programming, only scene design. The first programming
is to create an event for the ball to move in a random direction. Random actions and chance
allow for games to be unpredictable and more fun when they are replayed.
55. In the resource tree, double-click on the OBJ_Ball leaf to open the Object Properties
dialog box. Notice the Events: and Actions: columns. These columns are used for
programming.
56. Click the Add Event button at the bottom of the Events: column. The Choose an
Event to Add dialog box is displayed.
57. Click the Create button in the Choose the Event to Add dialog box.
An event is added that translates to:
IF the OBJ_Ball object is created, THEN perform all actions displayed in the
Actions: column.
Right now, the Actions: column is blank, so you need to add something cool for the ball to do
when the game begins. The first action will be to make the ball object move.
58. Click the Move tab on the right side of the Object Properties dialog box, Figure 3-8.
59. Hover the cursor over each button on the first row to find the Move Fixed button. Drag
this button and drop it onto the blank section of the Actions: column. The Move Fixed
dialog box is displayed and the Start moving in a direction entry appears in the Action:
column.
60. In the Move Fixed dialog box, click the Self radio button in the Applies to area, Figure 3-9.
Since you are modifying the properties of the OBJ_Ball object, this means that the
selected movement will apply to that object (self).
Figure 3-8
Drag the Move Fixed button
into the Actions: column
Click the
Move tab
Lesson 3 Click Ball 33
Move
Fixed

Figure 3-9
Set the speed
Leave
unchecked
Movement should be
applied to the ball (self)
Select the four
diagonal arrows
61. At the bottom of the Move Fixed dialog box is a matrix of directional arrows. Click the four
diagonal arrows to select them. Selected arrows are red, while unselected arrows are blue.
When the game is played, one of the selected directions will be randomly applied to the
object. This means that the ball will randomly travel in one of these four directions. Do not click
the center square. The center square is no movement. If you were to run the game right now,
even with the directions selected, the ball would not move because it would be traveling at a
speed of zero.
62. In the Speed: text box, enter 10. This setting will have Game Maker move the OBJ_Ball
object ten pixels for every one step of time. The default setting for a step is 30 per second.
63. How many pixels will the ball move in one second? ________________________________
To change the speed of all objects, you can also change the step number. If the step number
is increased, the speed will increase. If the step number is decreased, the speed will decrease.
If you wanted the ball to travel 120 pixels in one second and entered 2 in the object’s Speed:
setting, what would the step number need to be to get the ball to move properly?
___________________________________________________________________________
The step number setting is not changed in the Move Fixed dialog box. You will not change this
setting for this lesson, but you will change the step number in later activities.
Relative is a term that means “from where it was before.” If the ball is already moving
at a speed of five, a relative speed of ten would increase the speed by ten, not to ten. In other
words, the new speed would be 15. What would be the speed of an object traveling at a speed
of 15 when the speed is increased for a Speed: setting of 10 relative?
___________________________________________________________________________
64. Make sure the Relative check box is unchecked.
65. Click the OK button in the Moved Fixed dialog box.
66. Close the Object Properties dialog box, saving the changes when prompted.
67. Save your work.
34 Introduction to Video Game Design
Copyright by The Goodheart-Willcox Co., Inc.
Copyright by The Goodheart-Willcox Co., Inc.
Name: __________________________________________
Testing
While designing a game, you will want to try things out along the way to make sure
everything is working as you intended. Click the Run the Game button on the toolbar. When
the game compiles and starts, the ball will move, but it eventually travels outside of the room.
It does not bounce off of the walls as it should. In a game, just because it looks like a wall does
not mean that it will act like a wall. Remember, the “wall” is just a picture of a wall.
You now need to program the wall and ball objects to react to each other as if they were
real. This concept is called collision theory. You need to apply collision theory so the objects
act realistically during gameplay. A collision is simply when things touch, hit, or come in contact
with each other. Not all objects will react when they collide. Think about a flying game with an
airplane and clouds. You do not want the clouds to react to the airplane. It should be able to
pass right through the clouds. For the Click Ball game, you need to create a new event for:
IF the OBJ_Ball object collides with the OBJ_Wall object, THEN the OBJ_Ball
object bounces.
Follow the steps below to program this.
74. Click the button to the right of the Precise: text box and select Not Precisely from the
menu.
75. Click the button to the right of the Against: text box and select Solid Objects from the
menu.
Remember, the wall object is set to be a solid object. Since the ball is now set to bounce
against solid objects, if you edit the wall object and uncheck the Solid check box, the ball will
pass right through the wall.
76. Click the OK button to close the Bounce dialog box and add the action to the object
properties.
77. Test play the game. You do not need to close the Object Properties dialog box to test
play the game. After seeing how the game runs, close the game preview.
78. Save your work.
Lesson 3 Click Ball 35
Run the
Game
68. Close the game preview.
69. In the resource tree, double-click OBJ_Ball to open the Object Properties dialog box.
70. In the Object Properties dialog box, click the Add Event button.
71. In the Choose the Event to Add dialog box, click the Collision button. A menu is
displayed showing all of the available objects. Select the OBJ_Wall object for this collision.
Notice that a new event has been added to the Events: column in the Object
Properties dialog box. Each event will be listed on a separate line. Now, you must add the
action that will take place for the event.
72. On the Move tab of the Object Properties dialog box, locate the Bounce button and
drag it into the Actions: column. The Bounce dialog box is displayed.
Bounce
73. Click the Self radio button so the ball will bounce, not the wall (you are adjusting the ball
object properties), Figure 3-10.
Run the
Game

Set
Score
Figure 3-10
Select to apply the
bounce to this object
Click to select
a precision
Click to select against
what the bounce will occur
Mouse Click on the Ball
You now have a bouncing ball, but nothing else. Time to add some fun to the game and
give the player a reason to play. You need to add an event:
IF the player clicks the ball with the left mouse button, THEN add a point to the
score.
Follow the steps below to program this. The Object Properties dialog box should be open. If
not, double-click on OBJ_Ball in the resource tree to open it.
79. Click the Add Event button.
80. In the Choose the Event to Add dialog box, click the Mouse button and, in the menu
that is displayed, select Left Pressed. Do not select Left Button. The Left Pressed
option is the condition when the player clicks the button. The Left Button option is the
condition when the left mouse button is being held down, not clicked.
81. In the Object Properties dialog box, click the Score tab.
82. Locate the Set Score button and drag it into the Action: column. The Set Score dialog
box is displayed.
83. In the Set Score dialog box, enter 1 in the New score: text box.
84. At the bottom of the Set Score dialog box, check the Relative check box. Then, click the
OK button to create the action.
Remember, relative means “from where it was before.” This action changes the score to
“one from where it was before.” In other words, it increases the score by one each time the ball
is clicked with the left mouse button. If you do not check the Relative check box, the score will
always be 1.
85. Close the Object Properties dialog box, saving the changes when prompted.
86. Save your work.
36 Introduction to Video Game Design
Copyright by The Goodheart-Willcox Co., Inc.
Copyright by The Goodheart-Willcox Co., Inc.
Name: __________________________________________
87. Test play the game and see how many times you can click the ball in one minute. The
score is displayed in the title bar of the game preview. Then, close the game preview.
Cashing in on Sound
You now have the elements of a simple game, but it needs a little tuning or improvement.
Start tuning by adding some sound to let the player know when the ball has been clicked and a
point has been received. First, you need to add the sound to the resource tree.
88. Click the Create a Sound button on the toolbar. The Sound Properties dialog box is
displayed, Figure 3-11.
89. In the Name: text box, enter SND_Click. This identifies the sound as for the click event.
90. Click the Load Sound button. A standard Windows “open” dialog box is displayed.
91. Navigate to the Game Maker Sounds folder, if it is not already displayed. Your teacher may
specify a different folder.
92. You can preview any sound in Media Player by right-clicking on the file and selecting Play
from the shortcut menu. Select the cash_register.wav sound file in the open dialog box
and click the Open button.
93. In the Sound Properties dialog box, click the Normal radio button in the Kind area.
94. In the Effect area, uncheck all check boxes so no effects will be applied.
95. Drag the Volume: slider to the far right (full volume).
96. Drag the Pan: slider to the middle position.
97. Check the Preload check box. Preloading loads the sound into the game when the
game is launched. This will help the game play smoother. Otherwise, the game will freeze
for an instant the first time the sound must be played as the computer searches for, loads,
and plays the sound.
Figure 3-11
Click to load
a sound
Set the type
of sound
Name the
sound asset
Check the
effects to apply
Lesson 3 Click Ball 37
Run the
Game
Create a
Sound

Play
Sound
Run the
Game
98. Click the OK button to close the Sound Properties dialog box.
Next, you need to program the logic statement:
IF the player clicks on the ball, THEN add one to the score AND play a sound.
You have already programmed part of this logic statement, where the score is increased when
the player clicks the ball. So, you need to add another action to this existing statement.
99. Open the Object Properties dialog box for the OBJ_Ball object.
100. In the Event: column, select Left Pressed. The action currently assigned to this event is
then displayed in the Actions: column. Currently, the only action listed is Set the score
relative to 1.
101. On the right-hand side of the Object Properties dialog box, click the Main 1 tab.
102. Locate the Play Sound button and drag it into the Actions: column, Figure 3-12. The
Play Sound dialog box is displayed.
103. In the Play Sound dialog box, click the selection button to the right of the Sound: text
box. A menu appears listing all of the sounds that have been added to the game.
104. Select the SND_Click sample in the menu.
105. Click the selection button to the right of the Loop: text box and select False from the menu.
Loop means the sound will play again after it finishes. The click sound should play only
once each time the ball is clicked, so it should not loop. False is a programming command for
“no.” To make the sound loop, choose True in the menu for “yes.”
106. Click OK in the Play Sound dialog box to finish creating the new action.
107. Save your work and test play the game.
108. Using similar procedures, add an appropriate sound for when the ball collides with the wall.
Remember, you will first need to create the sound in Game Maker.
109. Save your work and test play the game.
Select the
event to
modify
Figure 3-12
Drag a new action and drop
it in the Actions: column
38 Introduction to Video Game Design
Copyright by The Goodheart-Willcox Co., Inc.
Copyright by The Goodheart-Willcox Co., Inc.
Name: __________________________________________
Victory Condition
The victory condition is what it takes to win the game. In the Click Ball game, the
player will win if the ball is clicked ten times. The game needs to be programmed to check each
time a point is scored to see if the total is enough to win. This procedure is called a test. In a
test, the programming looks to see if a condition is True or False. Each time the programming
tests a condition, it will return a value of True or False. In this case, the victory condition is
when True is returned for the test: is the score equal to 10 points?
110. Open the Object Properties dialog box for the OBJ_Ball object.
111. In the Event: column, select Left Pressed. This is the event that adds 1 to the player
score and plays the click sound.
112. Click the Score tab, then drag the Test Score button and drop it into the Actions:
column, Figure 3-13. The Test Score dialog box is displayed.
113. In the Test Score dialog box, enter 10 in the Value: text box.
114. Click the select button to the right of the Operation: text box and select Equal To in the
menu that appears.
115. Click the OK button to close the Test Score dialog box and finish creating the action. This
action tests if the score is equal to 10 every time the ball is clicked by the player.
116. Click the Main 2 tab.
117. Locate the End Game button. Drag and drop it into the Actions: column. Make sure the
action is at the bottom of the list. If not, drag it to the bottom of the column.
This action will end the game when the score reaches 10. The action must be at the
bottom of the list because Game Maker processes the list in order from top to bottom. If, for
example, the End the game action is placed above the If score is equal to 10 action, the game
will end the first time the player clicks the ball. Save your work and test play the game.
Name the
background
Click to load an
image file
Figure 3-13
Preview of
loaded image
Lesson 3 Click Ball 39
Test
Score
End
Game
Run the
Game

Room for Expansion
You have reached a milestone of design. Milestones of design are key points in the
process of creating a game that represent significant events, such as the first playable level. The
first playable level is the prototype version of the game that actually allows someone to play
and test all of the interactions in the game. The Click Ball game has reached the first playable
level milestone. It could use a little improvement, but it is a solid game.
To add another level is very easy since most of the programming is already done. You can
simply copy the first level and then edit it to require more skill to win. To better tell the player
that a different level is being played, you will change the background. For the second level, you
will add a picture background.
118. In the resource tree, right-click on room0 and select Duplicate from the shortcut menu.
Ta-da, level 2 (room1) ready to go!
119. Click the Create a Background button on the toolbar. The Background Properties
dialog box is displayed, Figure 3-14.
Create a 120. In the Name: text box, enter BCK_Level_2. This follows the naming convention, which
Background
calls for all background assets to begin with BCK_.
121. Click the Load Background button. A standard Windows “open” dialog box is displayed.
122. Navigate to the Game Maker Backgrounds folder. Your instructor may specify a different
folder.
123. Select the wood.png file and click the Open button.
124. Close the Background Properties dialog box.
125. If the Room Properties dialog box for room1 is not open, double-click room1 in the
resource tree to open it.
126. Click the Backgrounds tab.
127. Click the selection button to the right of the display box in the middle of the tab. Then,
select BCK_Wood from the menu that is displayed.
Click to
assign a
background
Assigned
background
Adjust the
background
position
Figure 3-14
40 Introduction to Video Game Design
Copyright by The Goodheart-Willcox Co., Inc.
Copyright by The Goodheart-Willcox Co., Inc.
Name: __________________________________________
Just above the background display box, which now displays BCK_Wood, is the
Foreground image check box. The foreground is the image in front of all other images,
as opposed to the background, which is the image behind all other images. If you make
the wood the foreground, player will not be able to see the rest of the game. However, there
are some instances where you will want the “background” image to be in the foreground. For
example, if the image is a frame surrounding the playing field, you may want this image to be in
the foreground so it is always in front of other objects.
128. Check the Foreground image check box. Notice the “background” is now in front of all
other objects. Uncheck the Foreground image check box to return the background to
behind all other objects.
129. Click the Settings tab and enter Level 2 in the Caption for the room: text box.
130. On the toolbar in the Object Properties dialog box, click the Close the form, saving
the changes button (green check mark) to close the dialog box and save the changes
you made to the room.
131. Save your work.
Level 2 Modifications
Using skills you learned earlier, increase the difficulty for level 2. For example, you could
add some additional wall blocks to the room. This will give the ball more objects to bounce
off of, which means it will change direction more often and be harder to click. You could also
change the speed of the ball. Be creative in applying what you have already learned.
Cheat Code
A cheat code is a shortcut built into a game to help the quality assurance team and programmers
navigate through the game. This allows them to jump past certain points without having to complete the
task or level. To help you pass each level while testing your game, you will now program a cheat code.
To stop the ball, program the logic statement:
IF the player presses the space bar, THEN set the ball speed to zero.
To return the ball to normal speed, program the logic statement:
IF the player presses the [Enter] key, THEN set the ball speed back to normal.
132. Open the Object Properties window for the OBJ_Ball object.
133. Add an event for pressing the space bar. Use what you have learned to figure out how to do this.
134. Add an action for the event you just created that sets the ball speed to zero. Use what you
have learned to figure out how to do this.
135. Add an event for pressing the [Enter] key.
136. Add an action for the event you just created that sets the ball speed back to the original
speed for the level.
137. Test play the game and try out the cheat codes.
138. Save your work.
Run the
Game
Lesson 3 Click Ball 41

Next
Room
Next Room
Currently, the player cannot get to level 2 once level 1 is defeated. This is because the
programming currently ends the game when 10 points are achieved on level 1, instead of moving the
player to level 2. Why? This is the victory condition you programmed earlier, to end the game when
10 points are achieved on level 1. The victory condition for level 1 needs to be modified:
IF the score is 10, THEN go to the next level (room).
139. Open the Object Properties dialog box for OBJ_Ball.
140. In the Event: column, select Left Pressed.
141. In the Actions: column, right-click on End Game and select Delete from the shortcut
menu.
142. Click the Main 1 tab.
143. Drag the Next Room button into the Actions: column, Figure 3-15. The Next Room
dialog box is displayed.
144. In the Next Room dialog box, click the select button to the right of the Transition: text
box and choose Fade out and in from the menu that appears.
145. Click the OK button to close the Next Room dialog box.
A transition allows for the next room to move into place smoothly. This is similar to the
transitions used in PowerPoint slide shows. Without a transition, the next room would begin
abruptly when the first one closes. Also note as you test play the game that it no longer ends. This
is because you have removed the “end game” action. You will correct this in the next sections.
Level 3
146. Duplicate room1 (level 2) to create room2 (level 3).
147. Change the caption to Level 3.
148. Modify the wall layout for more challenging gameplay.
149. Change the background.
Figure 3-15
When the score
is 10, the next
room is
displayed
42 Introduction to Video Game Design
Copyright by The Goodheart-Willcox Co., Inc.
Copyright by The Goodheart-Willcox Co., Inc.
Name: __________________________________________
150. For the OBJ_Ball object, add programming below the existing 10 point victory condition
action: IF the score equals 20, THEN move to the next room.
151. Save your work.
Level 4: The End
At the end of the game, the player should see some sort of congratulations. You will create
this as a custom sprite with text.
152. Click the Create a Sprite button on the toolbar. The Sprite Properties dialog box is
displayed.
153. In the Name: text box, enter SPR_EndText.
154. Click the Edit Sprite button to create an image from scratch. The Sprite Editor is
displayed.
155. Click the Create New Sprite button on the Sprite Editor toolbar to display the Create
a New Sprite dialog box. Note: this dialog box may be automatically displayed when the
Sprite Editor is launched. Change the Height: and Width: settings to 100 and click the
OK button.
A square canvas with a checkerboard pattern is displayed in the Sprite Editor. The
checkerboard pattern represents transparent parts of the image and will not be part of the final
image. Double-click on the checkerboard canvas to open the Image Editor. The Image Editor
is used to create custom drawings and images, much like Microsoft Paint.
156. Notice the color palette on the right-hand side of the Image Editor. The Left: sample
color is what will be used for the text, so left-click on a color swatch, such as the yellow
swatch, in the palette below to set the color of the text. Right-clicking will set the color for
the Right: sample.
157. Click the Draw Text button. The Font area is displayed below the buttons, Figure 3-16.
158. Click the Aa button in the Font area to display a standard Windows font selection dialog
box.
159. Enter 20 in the Size: text box, and enter Bold in the Font style: text box. You can also
make selections in the corresponding lists.
160. Click the OK button to close the font selection dialog box and return to the Image Editor.
161. Click anywhere on the image canvas (the checkerboard section) to begin placing the
words. The Drawing a Text dialog box is displayed, Figure 3-17.
162. In the Drawing a Text dialog box, type a phrase, such as Congratulations!#You are
a#WINNER! The pound sign (#) indicates where a new line will start.
163. Click the OK button in the Drawing a Text dialog box to place the text onto the canvas.
Notice that the words do not fit on the canvas. Game Maker is not very friendly with
text. So, the best thing to do is undo the text placement, then either resize the canvas or use a
smaller text size. For this example, you will resize the canvas.
164. Click the Undo button on the Image Editor toolbar to remove the text.
Create a
Sprite
Lesson 3 Click Ball 43
Draw
Text
Undo

Draw
Text
Click to select
the font, its
size, and its
color
Alignment
options for
the text
Figure 3-16
Figure 3-17
Transparent background
Line breaks
165. Select Transform>Resize Canvas… from the Image Editor pull-down menu. The
Resize dialog box is displayed, Figure 3-18.
166. In the Resize dialog box, uncheck the Keep Aspect Ratio check box. If you do not
uncheck this, as the canvas is resized, the height and width will remain proportional.
Proportional means the ratio of height to width remains the same.
167. Enter 300 in the Width: pixels text box. Make sure 100 is entered in the Height: pixels
text box. Then, click the OK button to close the Resize dialog box.
168. Make sure you have the Draw Text button still selected, then click near the top-left corner
of the canvas to start placing the new text.
169. Retype your statement in the Drawing a Text dialog box when it appears and then click
the OK button to place the text.
170. Move the cursor over the text on the canvas. A move cursor (four arrows) is displayed.
Click and drag the text to the center of the canvas.
44 Introduction to Video Game Design
Copyright by The Goodheart-Willcox Co., Inc.
Copyright by The Goodheart-Willcox Co., Inc.
Figure 3-18
Uncheck
Change the width
171. Click the Center Align button in the Font section.
Name: __________________________________________
172. Click the Close the Image Editor, saving the changes made button (green check
mark) to close the Image Editor.
173. In the Sprite Editor, click the OK, save changes button (green check mark) to close
the Sprite Editor. Also, close the Sprite Properties dialog box, saving the changes
when prompted.
174. Create a new object, name it OBJ_EndText, and assign the SPR_EndText sprite to it.
175. Create a new room (room3), which will be the room displayed when the player completes
the game.
176. In the Room Properties dialog box for room3, add a background image of your choice to
the room, but it should complement the yellow text.
177. Add the OBJ_EndText object to the room and place it in the center.
178. Open the Object Properties dialog box for the OBJ_Ball object. Add the programming
needed to move the player from room2 to room3 when the score is 20.
Now, the game has a victory condition for each level and the player receives a message
when the game is successfully completed. However, on the final screen, there should be a way
for the player to either replay the game or end the game. To do this, you will add Quit and Play
buttons to the final screen (room3).
179. Create a new sprite, name it SPR_Quit, and assign the button_quit.png image file to it.
This image file is located in the Game Maker Sprites>Buttons folder.
180. Create a new sprite, name it SPR_Play, and assign the button_play.png image file to it.
This image file is also located in the Game Maker Sprites>Buttons folder.
181. Create a new object, name it OBJ_Quit, and attach the SPR_Quit sprite to it.
182. Create an event: IF the player clicks the left mouse button. Remember how you did this
for the OBJ_Ball object?
183. Create an action: THEN end the game. Remember how you did this to end the game
before you added additional rooms?
184. Create a new object, name it OBJ_Play, and attach the SPR_Play sprite to it.
Lesson 3 Click Ball 45
Center
Align

Different
Room
Run the
Game
Figure 3-19
185. Program this logic statement for the OBJ_Play object: IF the player clicks the left mouse
button, THEN go to room0. For this action, you need to drag the Different Room button
from the Main 1 tab and drag it into the Actions: column. In the Different Room dialog
box that is displayed, select room0 and include a transition.
186. Place the OBJ_Quit and OBJ_Play objects in room3, Figure 3-19.
187. Save your work.
Title Page
A game should always start with some directions on how to play the game. For this game,
you will create a title page to tell players the name of the game and to give basic directions for
playing. Start by creating a new room above room0.
188. Right-click on room0 in the resource tree. This is currently the topmost room in the tree.
189. Select Insert Room from the pull-down menu. A new room, named room4, is placed
above room0 in the resource tree.
190. Using skills developed in this lesson, create an attractive slide to inform the player how
to play the game. Include a game title, directions, your name, and images and directions
needed to explain what the player should do.
191. Add the Quit and Play buttons to this room as well.
192. Test play the game. Check that all buttons work properly and that all aspects of the game
function as they should.
193. Save your work
46 Introduction to Video Game Design
Copyright by The Goodheart-Willcox Co., Inc.
Copyright by The Goodheart-Willcox Co., Inc.
Name: __________________________________________
Compile to an Executable
So far, you have test played the game at various points during the game build. It is
important to make all final changes to the game before it is compiled into an executable file. The
executable file cannot be modified. To make changes to the game after the executable file is
created, you must make the changes in Game Maker and rebuild the executable file (replacing
the existing file). Once the game has been compiled into an executable file, it can be played on
any PC without needing to have Game Maker installed.
194. Select File>Create Executable… from the pull-down menu. A standard Windows “save”
dialog box is displayed.
195. Navigate to the folder where you want to save the executable file. Your instructor may
specify a location. Click the Save button to save the file.
196. Test play the executable file and enjoy your success.
Going Beyond
197. Add a second ball to the game, different from the first ball (like a basketball).
198. Add enemy objects to the game and program this logic statement: IF the player clicks an
enemy object, THEN the game ends.
199. Program the ball objects to bounce when colliding with enemy objects.
200. Rename all rooms in order as Title, Level_1, Level_2, Level_3, and Winner. To rename a
room, right-click on it in the resource tree and select Rename from the shortcut menu.
Lesson 3 Click Ball 47
Run the
Game

STEM Review Questions and Activities
Review Questions
1. List two ways to exit the Room Properties dialog box, saving changes to the room.
___________________________________________________________________________
___________________________________________________________________________
2. Explain how the grid and snap functions help speed up scene design.
___________________________________________________________________________
___________________________________________________________________________
3. Describe how a naming convention can help quickly identify each game asset.
___________________________________________________________________________
___________________________________________________________________________
4. In Game Maker, how do you program the ball to increase in speed by five pixels per step
every time the player clicks the ball?
___________________________________________________________________________
___________________________________________________________________________
5. Describe how to place text in a Game Maker game.
___________________________________________________________________________
___________________________________________________________________________
6. Explain how the bouncing ball in the game is different from a bouncing ball in the real
world.
___________________________________________________________________________
___________________________________________________________________________
Math Integration Questions
7. In Game Maker, if an object moves 25 pixels in 10 seconds, what is the default setting for
steps per second?
___________________________________________________________________________
___________________________________________________________________________
Applied
Technology
Language
Arts
Mathematics Science Social
Science
48 Introduction to Video Game Design
Copyright by The Goodheart-Willcox Co., Inc.
Copyright by The Goodheart-Willcox Co., Inc.
Name: __________________________________________
8. What is the new speed of an object traveling at speed of 15 that then is changed to a
speed of 10 “relative”?
___________________________________________________________________________
___________________________________________________________________________
9. If you want a game object to travel 120 pixels in one second and the speed is set to 2,
what does the steps-per-second setting need to be to get the ball to move properly?
___________________________________________________________________________
___________________________________________________________________________
10. If the Keep Aspect Ratio check box is checked when resizing a canvas from 300 wide
by 100 tall to a new size of 200 tall, what is the new width of the canvas?
___________________________________________________________________________
___________________________________________________________________________
Applied
Technology
Language
Arts
Mathematics Science Social
Science
Lesson 3 Click Ball 49

Game Review
Objectives
Students will evaluate the quality of their work and the work of others.
Students will identify positive aspects of the playability and functionality of a game build.
Students will provide constructive criticism to peers and suggest possible solutions to problems.
Situation
The client has asked for an evaluation report on the playability and functionality of the game.
Each member of the design team needs to evaluate the product and suggest reasons why each
item achieves or does not achieve the objective. An assigned quality assurance (QA) evaluator
will also review the game on behalf of the client. The QA evaluator (your instructor) will note any
issues, errors, or bugs in the game. Be accurate and complete in your evaluations. The personal
and peer evaluation are for the same game by the same designer. That means you must give your
personal evaluation to a classmate for them to complete the peer evaluation for your game.
Design Reasoning—Personal Evaluation
Reflect on your work, explain your score for each item, list improvements needed for your
game. Attach additional sheets if needed or complete using a word processor.
___________________________________________________________________________
___________________________________________________________________________
Concept
Is the idea well developed?
Aesthetics
Do the look and colors
fit the game?
Sound Effects
Do the sounds play well?
Are the music and ambient
sounds appropriate?
Functionality
Does everything work?
Replay
How likely are you to
play this game again?
0 1 2 3 4 5 Score
No main idea. Clear
throughout.
Poor quality graphics
and color.
No sound; sounds
too loud or not
related to the game.
Unfinished, could not
play; major errors
Game solved,
too easy or
uninteresting.
Name: __________________________________________
Date: ___________________________________________
Class: ___________________________________________
Awesome graphics
and theme-based
colors.
Good sound for each
item at good levels.
Plays perfectly; no
bugs, glitches or errors
Cannot wait to play
this again!
Total Score
(higher is better)
50 Introduction to Video Game Design
Copyright by The Goodheart-Willcox Co., Inc.
Copyright by The Goodheart-Willcox Co., Inc.
Design Reasoning—Peer Evaluation
Name: __________________________________________
Peer Evaluator: ___________________________________________________________________
Concept
Is the idea well developed?
Aesthetics
Do the look and colors
fit the game?
Sound Effects
Do the sounds play well?
Are the music and ambient
sounds appropriate?
Functionality
Does everything work?
Replay
How likely are you to
play this game again?
Comments and Constructive Criticism
0 1 2 3 4 5 Score
No main idea. Clear
throughout.
Poor quality graphics
and color.
No sound; sounds
too loud or not
related to the game.
Unfinished, could not
play; major errors
Game solved,
too easy or
uninteresting.
Awesome graphics
and theme-based
colors.
Good sound for each
item at good levels.
Plays perfectly; no
bugs, glitches or errors
Cannot wait to play
this again!
Total Score
(higher is better)
Explain your score for each item. Explain what you liked about the item and how it should
be improved. Be detailed and complete. Cite specific examples from the game. Attach additional
sheets if needed or complete using a word processor.
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
Scores for items not fully documented and cited may reduce the score of the peer
evaluator and the evaluator’s game project. Be honest and provide constructive criticism. Being
unprofessional or lowering a grade on a personal issue unrelated to the game design will result
in your grade for this evaluation being lowered.
Lesson 3 Click Ball 51