Your Game Design Starting point for beginner and hobbyist game developers

Making Pong with Game Maker 8

A beginner's tutorial on how to make Pong in Game Maker 8.

One of the most basic and classic computer games of all time is Pong. Originally released by Atari in 1972 it was a commercial hit and it is also the perfect game for anyone starting to learn game design.

The game has only few elements. A couple of bats, a ball, score counters and a playing field. Let's make this game.

In this tutorial we will primarily be working with these three components of Game Maker:

• Sprites
• Objects
• Rooms

To continue you need to have Game Maker 8 installed and running. When this is done you can begin with the first step.

1. If not done you should set Game Maker to Advanced Mode in the File menu. This will give you more options later on and it does not make it harder to use the program.

2. Now we need to create the graphics for the game. The first thing is the player controlled bats and here we can use Game Makers built-in image editor. It handles this sort of thing without a problem.
Flat two dimensional images in games are called Sprites so we need to use Create a sprite. This is done by clicking on the red colored pacman icon.

3. Once you click the red pacman icon you will be shown the Sprite Properties window. Here all kinds of settings for a new sprite is set and later saved. The first thing we need to do is to name the piece of graphic. Go ahead and delete the sprite0 text and name it bat instead.

Note: It is very important to use good names for everything when making games or you will eventually lose track of the many small pieces.

While it is possible to load graphics made ready elsewhere with the Load Sprite button we want to create our bat inside Game Maker. Therefore you should now press the Edit Sprite button.

4. You are now shown a window called Sprite Editor but this is actually not where the bat is made. Click on the paper icon to create a new sprite and then click OK in the new window that appears to create a standard sprite. Then double click on the newly created image 0.

5. Now you are in the built-in image editor. Here a square 32 by 32 pixel image is automatically shown. We can easily turn this into a bat by resizing it. Select Transform and then Resize canvas.

6. Deselect Keep aspect ratio and then change Width to 8 pixels instead. Then click OK.

7. A few more steps will finish the bat. First you need to select the color white. Second, select the Paint bucket tool. Third, use the paint tool on the green bat which then turns white. Fourth, click the green check sign to accept all changes.

You are now back in the Sprite Editor window. Here you also need to click the green check sign to save the bat.

8. Back in Sprite Properties window we can now see the saved version of the bat. Click OK to save all changes.

9. Now that the bat sprite is made we need a ball sprite. Many of the following steps will recreate parts of what you did with the bat sprite.
Once again press the red pacman icon to Create a sprite. In the Sprite Properties window name it ball and click the Edit Sprite button.

10. In the Sprite Editor create a new sprite and double click on image 0 to edit it.

11. Use Transform -> Resize Canvas... and set the size to 16 pixels in both height and width. This is the perfect size for the ball. Now to draw the ball you must first select a color for the ball. Second, select the ellipse tool. Third, choose the filled style. Fourth, draw the ball on to the image canvas. It can be a help to zoom in with the magnify tool.

Once this is done click the green check icon to accept all changes. Also click the same check icon back in the Sprite Editor window.

12. You are now back in the Sprite Properties window. It should look like the image below. Click OK to save all changes.

13. We now need a wall sprite. This will be used for the top and bottom of the screen so that the ball can bounce of it. Go ahead and click Create a sprite. This time we will use Load Sprite since Game Maker actually comes with a 32x32 pixel wall sprite suited for our Pong game.

You can find this wall sprite under the folder Tutorial1 located in Programs\Game_Maker8\Sprites\ (it may look a bit different from the one cirkled red in the image). When you have it loaded your Sprite Properties should look as the screenshot. Click OK to save this sprite.

All the basic graphical elements are now done. We will return to do more sprites later but these are what we need to get the game running.

14. The next big part of this is to make something useful out of our sprites. By themselves they cannot do anything so some logic needs to be added to them. This is done with objects which is where sprites are tied together with commands. All this is done with graphical icons and does not require any programming knowledge.

Our first object will be a bat. The easy way to start a new object is by clicking the blue ball icon in the menu.

This tells Game Maker to Create an object.

15. This looks a bit like when we worked with the sprites but there are important differences. First you should name your bat. In the image you can see it is called bat_right. This is because we will need two bats. One for the left side and one for the right side. Let us start with the right side.

To activate the bat sprite for this object you need to click on the small selector icon below the name of the object. A small menu will appear once you do so and you can now select the bat sprite.

16. Time to get some game logic into the bat. This is handled by Events and Actions. Each Event can contain a series of Actions. Click Add Event. This will show a small menu called the Event Selector.

In the Event Selector click Keyboard and select Up.

Note: be careful not to select Key Press or Key Release in the Event Selector. This will have unwanted effects for controlling the bat.

This defines that the game will wait for the arrow key Up to be pressed.

17. Now we will add the first Action. This action will move the bat upwards.
Locate the Jump to position icon in the list of available actions. Drag this with your mouse into the Actions area.

When you let go of the mouse a new window is shown. Here we can define how much the bat moves per keypress. It needs to move up but since Game Maker is in-reverse on the y-axis when handling movement it needs to be set to -7 instead of just a positive value. We also need to check the Relative marker so that the bat is moved -7 according to itself and not the fixed coordinates of the room.

Click OK when you have this set.

What will happen now is that the game will detect whenever the Up key is pressed down (the event) and therefore move the bat up (the action).

18. The up key is set but the down key must also be set. To do this you should once again click Add Event and select Keyboard in the Event Selector. The difference is that this time you select Down instead.

Once this is done you can drag the Jump to position icon into Actions.

In the Jump to position menu that now appears we will now define that the bat should move 7 in the y-axis. Since it was reversed this means that it will move downwards. Remember to once again check the Relative marker.

Click OK to finish and OK once again in the Object Properties window to save and close it.

19. It is finally time to make something happen in this game. The bat_right object should be able to move up and down so this should be tested. To do this we need a room. This is basically what many know as a level in computer games. Rooms in Game Maker contain all the objects that make up a level.

A room is created with the white box icon right next to the blue ball icon we used for objects.

Once clicked it will create the room in a new window called Room Properties.

In this window we can place our bat_right object. Since this bat is controlled by the up and down keys on the right side of the keyboard it is a good idea to place the bat in this side of the room. Place bat_right by clicking in the wanted spot. By keeping the mouse button down you can drag it around. If the bat needs to be moved later you can right-click on it to delete it and then you need to place it again.

20. The game needs to be tested now. First save your work by clicking the diskette icon.

It is a good idea to save your game after making changes so that you can return to an older version if something goes wrong.

To run the game click the green play button.

It should look similar to the following image.

Try using the up and down keys on your keyboard. The bat should be able to move in the right directions.

If it does not then maybe the Relative marker needs to be checked or the y-axis values are flipped. Return to step 16-18 to check everything is done correctly.

Also notice that you are able to move the bat of the screen. This is something we will now fix. Press the Escape key to exit the game and return to Game Maker.

21. We will now create the wall object. Click on Create an object.

Name the newly created object wall and use the wall sprite from the selector menu.

This is all that needs to be done for this object. Click OK to save changes.

22. To make sure the bat does not go through the wall and exits the playing field we need to edit the bat_right object.

Here we need to add a new event called Collision. This collision should take place between the bat and the wall.

When done drag the Bounce icon into Actions. In the Bounce window that will now appear you should then select all objects with the selector button.

Click OK in the Bounce window when done.

23. Before testing the new collision we need to insert walls into our Room. Doubleclick on your Room to open it.

For the easiest way to insert the wall object we can change the grid size. Objects automatically snap to the grid and since the wall is 32 by 32 pixels we will set the grid to this size.

Now we can insert all the wall pieces onto the playing field. The easiest way is to hold down the Shift key while holding down the left mouse button. This way you can drag the mouse over the wanted areas and place the walls correctly. See image below. Remember that if you want to delete a piece of wall then simply right click on it.

Note: if your wall object is not selected then you can do so in the selector menu circled red in the image.

24. Save your work with the diskette icon and click on the green play button to test the game.

If the game runs correctly then the bat should not be able to go through the walls. If it does go through then go back to step 22 and check if everything was set right. Especially that collision in the bat_right object with the wall is set to all objects.

25. Time to create the second bat. With bat_right done this is easy when you right click on this object and select Duplicate.

Name this new object bat_left and click on the Up event and then select Change.

This makes it possible to change the key event while not having to change the Actions.

In the Event Selector window that now is show you should select Keyboard -> Letters -> W.

When this is done repeat the process for the Down key event but select S as the new down key instead.

The end result should look like this.

26. Open your Room again. Select the new bat_left object and insert it in the left side of the playing field.

Save your work and click the green play button to test the game. The new bat_left should behave exactly like bat_right only that it is controlled by W and S instead.

27. For this game to come alive we need the ball. Making it is easy.

Click the blue ball icon to create a new object.

Object Properties will now be shown. First, name this object ball. Second, select the ball sprite for it. Third, add the event called Create. Fourth, drag the Move fixed icon into Actions.

A new window called Moved fixed will appear. It should be modified so that all the diagonal arrows are clicked and Speed is set to 8. This speed can always be modified later if the ball should move faster or slower. Click OK when done.

28. With ball movement in place we need collision or the ball will continue through objects it encounters.

Click Add Event and select Collision. Start with bat_right.

Once the Event is set you can drag the Bounce icon into the Actions area. In the new Bounce window change against to all objects.

Click OK when done.

29. This process of adding collision should also be done with bat_left and the wall. Go ahead and do this. The end result should like like the following image and have Bounce set in Actions for all of them.

Click OK when done to save all new settings for the ball object.

30. Open your Room to insert the ball. It might help to set the grid back to 16 by 16 so that you can place it precisely in the center of the room.

Save your work and run a test game to see if the ball is moving. You must act quickly if you want to save the ball from leaving the playing field. If the ball does not have collision with any of the bats or the wall take a closer look at step 28 and 29 to see if something in your game is missing.

31. To keep the ball in the game some goal objects are needed. These objects are going to be invisible to the player but are highly important behind the scenes for the game to know when a goal has been scored.

Create a sprite, name it goal_right and use the standard 32x32 pixels in size. Color it green, save and click OK.

Do the same thing, only this time making it yellow and naming it goal_left. You should end up with the following new sprites.

32. Add both of the new sprites to new objects. Make sure to deactivate Visible so that the player cannot see them in the game.

You will end up with the following new objects.

33. Now enter the ball object by double clicking on it. We need to add collision between the ball and the new goal objects.

First add a collision event with goal_right and then drop the Jump to start position into Actions.

Then go into the score tab marked with red on the image below and drag Set Score into Actions. In the new Set Score window you need to enter 1 (one) into the text area and click Relative so that the 1 point is added on top of the current score every time a goal is scored.

Also add a Sleep action found under the Main2 tab. Set it to 2000 milliseconds. This will pause the game for two seconds every time a player scores.

Click OK when done.

34. The process will now be repeated for the collision with goal_left. The difference is that since Game Maker only has one built-in score system we will cheat a bit and use the Lives system as a score counter for this goal.

So add a collision event with goal_left and set Jump to start position as the first action. Then go into the score tab and drag Set Lives into Actions. Finish by adding the Sleep action and setting it to 2000 milliseconds.

Click OK to save all changes.

35. Go into your Room and insert the objects goal_left and goal_right as shown in the image below.

Save the changes and run the game. Notice how the ball returns to its starting position when a goal is scored.

36. The last thing this game of Pong needs is a set of score counters. The underlying setup has already been done in the last few steps so it only needs the finishing touches.

Create a new object and name it controller. This is an object that handles the score counters.

Add a Create event and drag Set Score and Set Lives into its Actions. Leave the settings for these on their standard values. This will set the scores to zero on the start of every new game.

Now add a Draw event. This will draw the score counters on the screen.

Drag the event Draw Score into its Actions and set it to x:40, y:40 and name the caption Player left: Click OK when done.

Then drag Draw Lives into its Actions and set it to x:450, y:40 and name the caption Player right: Click OK when done.

Click OK to accept all changes for the controller object.

37. Open your Room and insert the controller object somewhere in it.

Having the controller placed somewhere will make it active and ensure that it can do what it is supposed to.

Accept the changes for the Room and remember to save your game.

38. Run the game. It should now look like the image below and have working score counters.

If the score counters are placed wrong then go back to step 36 and change the x and y values in the controller object to fine tune their positions. If the score counter sprites, the yellow and green squares, are visible in the game then go back to step 32 to disable Visible.

Congratulations you have finished this tutorial! I hope you enjoyed it and will continue to have fun making games. Please leave a comment - any feedback is appreciated.

Related posts you might like:

1. Making Pong with Game Maker 7
2. Pong in Game Maker 7 video tutorial
3. Pong in Game Maker 8 video tutorial
4. Animating sprites in Game Maker 8
5. Animated menus in Game Maker 8 tutorial