|
GAME MAKER STUDIO TUTORIAL
PONG
GAME MAKER STUDIO 1.4
PART 1 – CREATING
IMAGES FOR SPRITES (PAINT.NET)
Note: We will look at
creating basic images for our game.
If you want to create nicer images, you are welcome to do so. However, do not spend too much time on
this as you will fall behind.
1 –
Creating a wall sprite.
· Create
a folder called resources that will hold your images.
· In
Paint.net, create a new image (File > New).
o Width:
32 pixels
o Height:
32 pixels
· Using
the paint bucket tool, fill your wall image with a colour. You can use a gradient if you want to.
· Save
your image as a PNG file with name wall.png.
2 –
Creating a player1 sprite
· In
Paint.net, create a new image (File > New).
o Width:
16 pixels
o Height:
96 pixels
· Using
the paint bucket tool, fill your wall image with a different colour. You can
use a gradient if you want to.
· Save
your image as a PNG file with name player1.png.
3 –
Creating a player2 sprite
· In
Paint.net, create a new image (File > New).
o Width:
16 pixels
o Height:
96 pixels
· Using
the paint bucket tool, fill your wall image with a different colour. You can
use a gradient if you want to.
· Save
your image as a PNG file with name player2.png.
4 –
Creating a puck sprite
· In
Paint.net, create a new image (File > New).
o Width:
16 pixels
o Height:
16 pixels
· Using
the paint bucket tool, fill your wall image with a different colour. You can
use a gradient if you want to.
· Save
your image as a PNG file with name puck.png.
PART 2 – CREATING OUR
OBJECTS (GAMEMAKER)
5 –
Creating our sprites
· In
GameMaker, create a sprite for each one of the
images your made.
o Names:
spr_wall, spr_player1, spr_player2, spr_puck
o Load
the corresponding image for each.
6 –
Creating our objects
· Create
an object for each sprite.
o Names:
obj_wall, obj_player1, obj_player2, obj_puck
o For
each, use the corresponding sprite.
o For
each, check the solid checkbox
7 –
Creating our level
· Create
a room.
o Under
settings, set the name to room_main
o Under
settings, resize the room as you wish.
I used 832 x 512.
o Go
into the objects tab and add the objects as you want them placed to create
Pong. The image below shows an
example.
o For
the paddles and the puck objects, when they are selected, you can adjust
their location using the arrow keys.
PART 3 – ADDING
MOVEMENT & BOUNCING
8 – Making
the puck move.
· In
the puck object, add a Create event.
· In
the Create event, add an Execute Code action (control tab)
o The
code: randomize();
· Still
in the Create even, add a Move Fixed action (move tab)
o Select
all directions except middle, up and down
o Speed:
5
Save and test your
game.
The ball should now
move at the start. Unfortunately it
leaves the screen immediately.
9 – Making
the puck bounce off walls & paddles.
· Inside
the puck object, add a Collision event (obj_wall)
· Inside
the above event, add the Bounce action (move tab)
· Still
inside the puck object, add a Collision event (player1)
· Inside
the above event, add a Bounce action (move tab)
· Still
inside the puck object, add a Collision event (player2)
· Inside
the above event, add a Bounce action (move tab)
Save and test your
game.
The ball should now bounce
off walls and paddles.
10 – Paddle
movement (player1)
· Inside
the player1 object, add a Key Press event (Letters > A)
· Inside
the above event, add a Move Fixed action (move tab)
o Direction:
Upwards
o Speed:
3
· Inside
the player1 object, add a Key Press event (Letters > Z)
· Inside
the above event, add a Move Fixed action (move tab)
o Direction:
Downwards
o Speed:
3
11 – Paddle
movement (player2)
· Inside
the player2 object, add a Key Press event (<up>)
· Inside
the above event, add a Move Fixed action (move tab)
o Direction:
Upwards
o Speed:
3
· Inside
the player1 object, add a Key Press event (<down>)
· Inside
the above event, add a Move Fixed action (move tab)
o Direction:
Downwards
o Speed:
3
Save and test your
game.
Your paddles now move
with A & Z or with Up & Down.
12 –
Keeping player1 on the screen.
·
In
the player1 object, add a Collision event (with obj_wall).
·
Inside
the above event, add a Bounce action (move tab).
13 –
Keeping player2 on the screen.
·
In
the player2 object, add a Collision event (with obj_wall).
·
Inside
the above event, add a Bounce action (move tab).
Save and test your
game.
Your paddles should
now stay inside the walls.
PART 4 – SCORING GOALS
14 –
Creating a score keeping object.
· Create
an object
o Name:
obj_scoreKeeper
o Sprite:
None
· Add
a copy of this object into your room.
15 –
Keeping track of the score.
· Add
a Create event inside the scoreKeeper object.
· In
event from above, add a Set Variable action (control tab)
o Variable:
p1score
o Value:
0
· In
event from above, add a Set Variable action (control tab)
o Variable:
p2score
o Value:
0
16 – Displaying the score.
· In
the scoreKeeper object, add a Draw GUI event
(inside Draw)
· Inside
the above event, add a Draw Variable action (control tab)
o Variable:
p1score
o X:
0
o Y:
0
· Still
inside the above event, add another Draw Variable action (control tab)
o Variable:
p2score
o X:
32
o Y:
0
Save and test your
game.
You should now see a 0
to 0 score at the top. It doesn't
update yet though.
17 – Better
score placement
· Inside
the two Draw Variable actions in the previous step, the X and Y values
refer to the location of the score.
Change the values so that you are happy with the placement of the
score.
o I
used (32, 0) for p1score and (800, 0) for p2score.
Save and test your
game. Use trial and error to get the
score placement you want.
|
Note that the next step has many new concepts including
·
Step events
·
Testing variables
·
Statement blocks
·
Checking other objects' location
·
Moving other objects
|
|
Here is what we want to achieve in Step 16:
For every step, we must check:
If the puck has
left the screen on the left side
{
Increase
player 2's score by 1.
Return puck
to its starting location.
Make the puck
start moving again.
}
|
|
Because of the
complexity of this step, I have included grey explanation notes below.
|
18
– Detecting a goal on the left side
· In
the scoreKeeper object, add a Step event.
Explanation: Actions in Step events get executed every step in
the game.
· In
the above event, add a Test Variable action (control tab).
o Variable:
obj_puck.x
o Value:
-50
o Operation:
Less than
Explanation:
This test is checking if the puck's x value is less than -50. This only happens if the puck has left
the screen on the left hand side.
· Under
the above action, drag in a Start of Block action (control tab).
· Also
drag in a End of Block action (control tab).
· Inside
the block section, add a Set Variable action (control tab).
o Variable:
p2score
o Value:
1
o Check
relative.
· Inside
the block section, add a Jump to Start action (move tab).
o Applies
to Object: obj_puck
· Inside
the block section, add a Move Fixed action (move tab).
o Applies
to Object: obj_puck
o Direction:
All but middle, up and down
o Speed:
5
Explanation: The three
actions inside the block only get executed if the variable test is
true. Otherwise, they are ignored.
Below is a screen cap of what the step event should look like:
19 –
Detecting a goal on the right side
· This
step is the same as step 18. We
simply add another Variable Test below the existing one. The actions are the same as in step 18
except:
o we
check if the puck has went passed the right side of the room instead of the
left.
o we
increase p1score instead of p2score.
Here is a screen capture of the entire
step event after step 19 is done:
Save and test your
game. It should be fully functional
with scores that update.
|
