How to make a Soccer game using Game Maker, version 5
Game room:
This worksheet shows you how to build the actual soccer game. Use the soccerPitch.bmp file as a background
image.
1) Open IrfanView or use Windows XP Explorer. Use the thumbnail feature to view all the images, animated gifs and
sounds that have been supplied in the soccer folder for you. Decide which images and sounds you will use in your
game.
2) Open Game Maker
3) Add a background. There is only one suitable background available, soccerPitch.bmp.
4) Take note of the Width and Height of the background (302 x 364). This information will help you size the room
correctly.
5) Edit the background to add some colour to it
6) Add a room. Name it game.
7) Make the room the same size as the background. Width: 302 Height: 364
8) Add the sprites that you are using for the game itself. In my game I'm using ball.ico (soccer ball),
block_horizontal.gif, block_vertical.gif (as barriers to keep the ball in play) and girl_plays_soccer.gif as a player. You
might choose to use a different sprite for your player.
9) Use the sprite icons to make these objects: objSoccerBall,
objBlockH,
objBlockV (H for horizontal, V for vertical)
and one player to start with, eg. objGirl
10) The soccerBall and player objects should be solid and visible.
11) The blockH and blockV objects should be solid and not visible.
12) Click on your objSoccerBall
Click on the Add Event and Click on the Create Event. Then select the Move tab from the right hand side.
Drag the Blue icon with the 8 arrows (Set direction and speed of motion) to the action list
Set direction: random(360)
speed: 4
This means the soccer ball will move off randomly when it is first created.
13) Double click on your game room, select the Objects tab and select
the soccer ball object from the pop up list. Click in the centre of the
soccer field background and the soccer ball should be added to the
room. If you hold the <Alt> key while placing the ball you can
overcome the snap to grid effect.
14) Run the game, the soccer ball should move off randomly from the
centre. Note that the soccer ball is too large for the background.
15) To reduce the size of the soccer ball: Double click on the
soccerBall sprite. Click on the Edit Sprite button, then Transform >
Stretch. Reduce Width from 100 to 50. The Height will adjust
automatically.
16) Run the game again to test that the ball is now a better size.
We now need to put a barrier around the soccer field, so the ball stays
in play. One way to do this is to build a physical barrier (using
objBlockH and objBlockV) and program collision events so the ball
bounces off, in such a way as to simulate a boundary throw in. We
have made the blockH and blockV objects solid but not visible. When
you build the game room you can see the blocks but when you run the
game the blocks are invisible.
original by Bill Kerr, rewritten by David Lam for Game Maker 5, August 2003
17) Open the game room. Use blockH
and blockV to build a barrier around the
perimeter of the soccer field. Do not put
any barriers where the goals are.
18) Double click on the objSoccerBall.
Add a collision event with the blockV
(two red arrows colliding icon). Then
select the Move tab from Actions.
Drag the blue icon with arrows (Set
direction and speed of motion) to the
action list.
Set direction: random (360)
speed: 4
This means the soccer ball will bounce
randomly off the vertical block.
19) We want blockH to do exactly the same as blockV. Rather than
repeating the previous step it is more elegant to let blockH inherit its
behaviour from blockV. Double click on the blockH object, click the
Parent drop down list and choose blockV to be the parent of
blockH. Now blockH will behave exactly the same as blockV.
20) Run the game to see if the ball bounces randomly off the
boundaries.
At this stage add some new sounds, for sound effects as goals are scored:
21) Add the applause sound, urrhh sound and whistle soundsWe will now introduce a new controller into the games
room which will initialise the variables for the scores, display the scores and play a sound
22) Add a new controller sprite, eg. Dish, name it sprControllerGame
23) Use this sprite and make a controller for the game, name it objControllerGame
24) Click on Add Event, then select Other event the one with the green diamond icon
25) Select Room Start
26) Click on the Code tab at the bottom right
27) Drag “Set the value of a variable” to the action list
variable: global.GermanyGoal
value: 0
28) Drag another copy of “Set the value of a variable” to the action list
variable: global.BrazilGoal
value: 0
original by Bill Kerr, rewritten by David Lam for Game Maker 5, August 2003
We have now initialised the variables used to keep track of the goal scores for Germany and Brazil
Stay on the Room Start event
29) Click on the main1 tab
30) Drag “Play a sound” into the action list
31) Select whistle from the drop down list
Next we’ll display the scores of the two teams in the room
32) Click on Add Event and Add Draw Event to the game controller
33) Click on the draw tab on the right hand side
34) Drag “Set a font for drawing text” into the action list
Font: Times New Roman
Font style: Regular
Font size: 10 Color: Red
35) Drag ‘Draw a text’ into the action list
text: 'Germany = ' + string(global.GermanyGoal)
This will display the current value of the global.GermanyGoal variable on the page
x: 176
y: 0
The x and y co-ordinates for placing the text are worked out by going to the game room and placing the mouse
where you want the start of the text to go and then reading the co-ordinates off the status bar
36) Drag “Set a font for drawing text” into the action list
Font: Times New Roman
Font style: Regular
Font size: 10 Color: Green37) Drag ‘Draw a text’ into the
action list
text: 'Brazil = ' + string(global.BrazilGoal)
This will display the current value of the global.BrazilGoal variable on the page
x: 176
y: 336
The x and y co-ordinates for placing the text are worked out by going to the game room and placing the mouse
where you want the start of the text to go and then reading the co-ordinates off the status bar
38) Place the controller you have just made, objControllerGame, into the game room
39) Run the game to test that the whistle blows at the start and the initial scores appear on the screen, in their
correct positions
We now need to increase the score of each team as they score goals
40) Open the game room, move the mouse around the room and
notice how the x and y values change on the status bar
41) Find the y values for when the ball enters the goals,
original by Bill Kerr, rewritten by David Lam for Game Maker 5, August 2003
eg. y = 16 and y = 336
42) Return to the soccer ball object and Add event and add
Step event. The step event is used to monitor events that
might happen at any time, like a goal being scored.
43) Select the control tab from Actions. Then drag and
drop the If statement icon with a question mark on it, “If an
expression is true” onto the Action list.
44) Enter the expression y > 336, because when the
soccer ball enters that region we want a goal to be
registered
Add other actions to an if block statement, as follows:
45) Set the value of a variable:
Variable: global.BrazilGoal
New value: 1 and tick the Relative checkbox
This means that the variable that represents Brazil’s goals will increase by 1 whenever the soccer ball enters a zone
where y > 336
46) Play a sound:
sound: urrhh
loop: false
There will be the urrhh whenever Brazil scores but it won’t go on forever, because loop is false.
47) Destroy the instance:
The simplest thing is to destroy the existing ball and then create a new ball in the centre.
Each time a goal is scored the existing ball is destroyed and a new ball is created in the centre position. To find out
the x and y co-ordinates of the centre position open the game room, pass the mouse over the centre and read the
values from the status bar.
48) Create an instance of an object:
object: soccerBall
x: 128
y: 176
(centre co-ordinates for the teacher's game, yours may vary)
49) You will have to repeat the above process for when Germany scores a goal. This time the expression will be y <
16, the variable will be global.GermanyGoal and you need to use a different sound when Germany scores, use the
applause sound.
We will now place one animated figure on the field and move them around with the arrow keys. When the ball hits
them it will travel in the general direction of one of the goals. The animated figure I’m using is called
girl_plays_soccer.gif. You can choose another one from the soccer folder if you wish.
50) Add the girl_plays_soccer gif animation to the sprite list
51) The image is too big for the field. To reduce the size of the image: Double click on the sprite. Click on the Edit
Sprite button, then Transform > Stretch. Reduce Width from 100 to 50. The Height will adjust automatically.
52) Use the girl_plays_soccer image to make an object, name it objGirl
53) Click on Add event and select the keyboard event and select the <Left> key
54) Select the Move tab from the right hand side
55) Drag “Jump to a given position” into the action list
x: -4
y: 0
tick the relative box
This means when you press the left arrow key the girl will move 4 places to the left
56) Now Add a <Right> key event
57) Drag “Jump to a given position” into the action list
x: 4
y: 0
tick the relative box
This means when you press the right arrow key the girl will move 4 places to the right
original by Bill Kerr, rewritten by David Lam for Game Maker 5, August 2003
58) Now Add a <Up> key
59) Drag “Jump to a given position” into the action list
x: 0
y: -4
tick the relative box
This means when you press the up arrow key the girl will move 4 places up the screen
60) Now Add a <Down> key
61) Drag “Jump to a given position” into the action list
x: 0
y: 4
tick the relative box
This means when you press the down arrow key the player will move 4 places down the screen
62) Click on Add event and Add collision event and choose
the soccer ball from the drop down list
63) Click on the Move tab
64) Drag the blue icon with the 8 arrows (“Set direction and
speed of motion”) into the action list
direction: 45 + random(90)
speed: 4
This means the ball will travel up the screen, between
north-east and north-west when it collides with the player.
65) Repeat the above process to introduce a second player, for a two player game.
Use W key for up
Use A key for left
Use D key for right
Use S key for down
For the second player use,
direction = 225 + random(90)
This will head towards the bottom of the screen, between south-east and south-westIntroductory room:
We are going to create and use a Controller object to draw a banner headline and some instructions in the room, to
program the instructions and play some introductory music.
1) Add a room. On the Settings tab make the room Width 400 and Height 200. Name the room introduction.
2) Add a sprite that is suitable for use as a controller, eg. use Hubble.bmp, Dish.bmp or Dish2.bmp. Name it
sprControllerStart.
3) Make a controller object, use the sprControllerStart sprite and name the object objControllerStart.
4) Click on Add Event and add the Drawing Event
5) Click the Draw tab
6) Drag-and-drop the following actions to the action list in the middle:
Set the fill colour, choose a suitable background colour, eg. grey
Draw a rectangle, to make it the same size as the room (400 x 200) use these settings
x1: 0 y1: 0 x2: 400
y2: 200
Set the font for drawing text,
eg. Arial, Bold Italic, Size: 26, Color: Red
will set the font for a large banner headline
Draw a text
text: WORLD CUP FEVER
x: 40 y:40
sets the starting position of the
text from the top left hand corner
Set the font for drawing text
eg. Arial, Regular, Size: 14, Color: Green
Draw a text
text: Press Enter
x: 150 y: 170 sets the starting position of the
text
7) Add objControllerStart to the room by opening the room,
choosing objControllerStart from the drop down list and then
clicking in the room.
8) Move this room (introduction) to the start of the room list
original by Bill Kerr, rewritten by David Lam for Game Maker 5, August 2003
9) Run the room to test that things are working so far, that the room has a background colour, a banner headline in
red and the "Press Enter" instruction in smaller text size and green
Now we want to play some introductory music when this room starts:
10) Add a sound, eg. suitable introductory music could be punchoute.mid but use another midi if you prefer
11) Click on Add event and add the Other Event, the one with the green Diamond and choose the Room start event
from the pop up menu
12) Choose main1 tab and drag-and-drop Play a sound to the action list
13) Select punchoute from the drop down list, or another midi if you prefer as a background music
14) If you keep loop on false the midi will play through once and stop, if you choose true for loop the midi will play
repeatedly
Now we want to program the Enter key so that when the player presses it we go to the next room
15) Click Add Event and select the Keyboard event, (it has a keyboard icon on it), and choose the Enter key from the
popup menu
16) Choose main1 tab and drag-and-drop “Go to next room” to the action list
18) Run the room and test it is working. You should have words and music and when you press Enter, you go to the
next room.
Now we want to add a gif animation to the introductory screen:
19) Choose a suitable animation to add to the introductory screen, eg. soccerc.gif
20) Add the animation to the sprite list, name it sprSoccerIcon
21) Add the animation to the object list, name it objSoccerIcon, or some other sensible name.
22) Add the objSoccerIcon object to the introductory room so that it will appear in between the red banner headline
and the green Press Enter instruction
23) Run the room and test it is working. You'll notice that the animation is running too fast.
24) To slow down the animation add this code to the creation event of the soccer icon:
{
image_speed = 0.1
}
This will make the animation run at one-tenth of it's normal speed
25) Once again run the room to test it
is working properly
Conclusion room:
We will now design a room to conclude
the game which includes background
colour, words, images, different
background music and instructions
about how to quit the game
1) Make a new room, width 300, height
200
2) Add a new sprite to represent a new
controller, Dish2 is suitable. Name it sprControllerEnd.
3) Add a new object, name it objControllerEnd
4) Add the controller to the room
5) Add a couple of soccer images as sprites to be used in the concluding room. I used threeGuys.jpg and
kickForGoal.jpg
6) Add a new midi to the sound list to be used in the concluding room. I used jog_jam.mid
7) Add the following code to the controller:
Creation Event:
play sound jogJam once
Draw Event:
set the fill color to 64
// dark brown background
draw rectangle with vertices (0,0) and (300,200)
// takes up the whole room
set a font for drawing text // white colour for a banner headline
at position (120,25) draw text: bye
at position (10,60) draw image -1 of sprite guy
// position images on the page to look good
original by Bill Kerr, rewritten by David Lam for Game Maker 5, August 2003
at position (190,60) draw image -1 of sprite threeGuys
set a font for drawing text // yellow colour for smaller text
at position (90,160) draw text: Esc to Quit
// default for quit
We now need to tidy up the transitions from one room to another
Transition from introduction (room0) to game room
Stop the music when you arrive at the game room
Make this change to the game controller:
Other Event for Room Start:
stop sound punchoute
// stop the music that began in the introductory room
sleep 1000 milliseconds redrawing the screen
// pauses for one second
Transition from game room to conclusion (room3)
Now we will set an alarm clock to conclude the game after a certain time of play.
Make this change to the game controller:
Creation Event:
set alarm0 to 5000
// set alarm is on Misc. tab
Alarm Event for alarm 0:
go to room room3 with transition effect 0
// when alarm0 goes off the game is over
original by Bill Kerr, rewritten by David Lam for Game Maker 5, August 2003