PING

V1.0

© 2013 LANE COMMUNITY COLLEGE
Updated by Jacob Sutton 2024

In this game we will become more familiar with the Game Maker Studio 2 Interface and implement a very basic action game similar to PONG.

This game will focus on:

Getting Started
Creating Object Resources
Bouncing
Adding Scores and Lives

To help get you started with this game, Open the Ping Starter file, this file includes- sprites, sounds, backgrounds, and a font already created for you.

After you open the File > Save Project As... (first initial, last initial)Ping_v1. This will allow you to create the game without changing the original starter file.

Save your work often!

0. DOCUMENT CONVENTIONS

This document uses several visual conventions to help reduce confusion about whether a given instruction refers to a resource name, event/action/conditional, interface element, variable name, etc.

Resource names like "object_controller" will be all lowercase, in quotes, and in the format of "type_name", or "name_type". (Since you will be responsible for naming the resources you load and create, the names in this document may differ from the names you choose to give your resources. Keep this in mind when naming resources, and when reading these instructions.)

Event names, Action names, and Game Maker interface elements like Create event, variables and Statements will be in Bold and followed event, action, or the type of interface element.

Variable names like score and lives will be underlined and case sensitive.

1. GETTING STARTED

First open the file titled ‘Ping Starter File.project.yyz’. This will open Game Maker Studios 2.

Game Maker Studio 2 Main Screen

Now let's discuss the interface of Game Maker Studio 2.

This is the Game Maker Menu Bar:

Equivalents to all of the Toolbar buttons can be found under the appropriate menu on this bar. Several less frequently used commands that are not on the toolbar are on the menus here as well.

This is the Save and Run Bar or Toolbar:

Now unlike GameMaker Studios, GameMaker Studios 2 does not have a Resource Bar, you just right click the folder you want to make the resource in

This contains the commands to Create new resources for a game. Resources are the building blocks of all Game Maker games; Things like Sprites, Objects, Rooms, Backgrounds and more. Whenever you need to create a new resource the Resource Bar is where you will find the command to carry that out.

This is the Asset Browser:

It shows all of the resources that have been Created in a GameMaker project. There are already some resources included in the starter file.

Right Click at the bottom of the Asset Browser and choose Expand All.

Now all of the Asset folders are open and the Assets in each are revealed. The folders can also be closed or re-opened by clicking the arrow to the left of the folder icon.

Look closely - the Ping starter file has sprites, sounds, and backgrounds but no objects.

We will begin by creating an object for the walls in the game. You can do this by right clicking on the object folder, clicking Create and clicking Object

This will create our first object, and bring up the Object Properties window:

The Name of the object is up to you, but something descriptive and accurate can be really important in a large project.

It can also be helpful to choose a standard for your naming conventions - something like "obj_wall", or "object_wall" - and use the same convention for all the Assets you add or create.

Choose the ‘spr_wall’ sprite for the object from the sprite list box for now. Later you can create your own sprites in the sprite editor.

Make sure that both the Visible and Solid boxes are checked:

Now make two more objects – ‘obj_ball’ and ‘obj_paddle’. For each, choose a sprite from among the various options. Make sure that both objects are Visible and Solid. We will set up their behaviors later.

You should already have a room created in the Room Folder named Room0, but if for whatever reason you do not, Create a Room. You can do this the same way you made the object, by right clicking the Room Folder - create - Room

Click on the Background tab in the Layers of the Room Inspector window. A Background layer will appear, click where it says “No Sprite” and then click the “Backgrounds” folder, typically there is no background folder, but for this tutorial we have created one to help you choose a background sprite.

Click on the Room0 room in the Rooms Folder and set the Width to 1000 and Height to 660. That size should be good for our first game.

Now that we have objects and a room, we can build a boundary on the room.

First click the “Instances” Layer of the room, so you can add objects

Now go to the Objects folder where all the folders are located, click on the obj_wall once from the folder. Then hold the “ALT” key and click or drag in the room to place instances of the obj_wall around the 3 edges of the room leaving the bottom open. Now place one obj_ball near the top center of the room by dragging and dropping it from the Object Folder to the room and then place one obj_paddle near the bottom center of the room.

Room layout with walls, ball, and paddle

2. MOVEMENT CONTROLS

While our game now can run, it wouldn’t be very interesting because it doesn’t really do anything. So to add keyboard control of our paddle we will begin adding Events and Actions to our player object.

Open your “obj_paddle” and we see that Events and Actions are side by side.

Events are any event that happens during the course of the game – creation of the object, collision with another object, pressing the key, moving outside the room, etc. The events act as triggers for controlling the game, for example: if my ball hits a brick (collision event) I want to have the game destroy that brick. We dictate how the game behaves by giving it Actions to perform when an event happens.

Actions are the actual commands that we give to the game to control individual objects and the game as a whole. Actions are connected to an event and are executed when that event is triggered, usually events have quite a few actions associated with them.

We want to add movement to our paddle when we press the arrow keys, so we will add the Step event to our paddle object. This way we can place movement actions inside the event so that the object begins to move when we press a key.

Now you will add events and actions to the paddle object. To add events press the Add Event button, this will bring up a menu of events to choose from:

The Create event is triggered when the object is created – if the object has been placed in the room (like “obj_paddle”), this will happen when the room starts.
Destroy event is triggered when the object is destroyed, it is the last thing the object does before it dies.
The Clean up event will be called after any event that removes an instance of the object from the room. So, it will be triggered if:
- the instance is destroyed
- the room ends
- the game ends
Step event goes off at each “step” of the game and is usually used to monitor conditions inside a game. This event is constantly executed.
Alarm event goes off when an alarm is triggered, this is discussed later.
Collision event is triggered by Game Maker’s collision detection, often used to destroy enemies and assign points. You can specify what object you are colliding with.
Keyboard event is any key pressed on the keyboard (specific keys can be selected). This differs from Key Press because it executes as long as the key is held down.
Mouse event handles mouse input, i.e. clicking, movement, scroll wheels.
Draw event is called whenever the image is redrawn. This is used to change object sprites and write to the screen. Discussed Later.
Key Press/Key Release events execute once when a key is pressed, and once when it is released (respectively).
Other events contains a collection of less frequently used events.

For our movement we will click “Add Event” > “Step Event”. Clicking on Step Event may open a “Scripting Preference” option, GMCode and GMVisuals, select GMCode

if the picture below does not show up, ignore this step

You can move the camera by pressing and holding the middle mouse button and dragging

It should bring up an action menu:

As you can see the action has comments, comments are divided by two slashes (//)

First we will handle left movement. From here we will type on line 3, so click on line 3, we will call to left key button

if keyboard_check(vk_left)
{
    x -= 5;
}

This will call to the left arrow key when pressed, but there is currently no movement, so in between the braces ( { } ) we will add the following code x -= 5

Now what the code does, is whenever you press the left arrow key, your paddle will move on the X scale by -5, it is important to have the negative before the equal sign to indicate a relative movement rather than just jumping to x = -5.

Now underneath outside the braces ( { } ) you will add the right movement, only with two differences, you will change vk_left to vk_right, and x -= 5 to x+=5

if keyboard_check(vk_right)
{
    x += 5;
}

Before we run the game, check if it says “Test” or “window” if not we will change the Platform of the game from GX.games to “Test” or if you are logged in, to the “Window” Platform:

this will make it from a webgame to a windows game.

From here we can test our game and see that the paddle moves to the left and right when the direction buttons are pressed. To test the game, go to the toolbar at the top of the window and press the arrow button:

If for whatever reason you receive a terminal error saying “Unable to play bounce_snd” Click the Extra Bug Fixes tab.

The game will take a short while to start while GameMaker converts your drag-and-drop actions into executable code. When the game begins you will see the room you created but nothing will be happening. Press either the right or left keyboard button to see the paddle move.

OH NO!!!! – While our paddle will move left and right, our paddle can go off the screen.

Our Bug is that the paddle is able to go off the screen:

Game Maker will not automatically keep your objects in the room because there are many times it is useful to have things move outside the room, or come in from outside of the room. There is an easy way of dealing with this problem through the use of the Intersect Boundary event.

The Intersect Boundary event is triggered whenever that object runs into one of the 4 walls of the room. It is found under the Other event button along with some other lesser used events. What we will do when this event happens is to stop the paddle from moving.

Now we could try to set xspeed to 0 but if you do, you will see this does not work, so what we will do is first add the Intersect Boundary event, then we will find the X positions of both the corners, located in the room.

Intersect Boundary event setup and x-position code

In the Intersect Boundary event in the obj_paddle, located in the Add Event > Other > Intersect Boundary. we will use the If statement to see if x is Less than (<) or equal to (=) 30.

if (x <= 30) {
    x = 30;
}

Similar to checking for if the path is <= 30 we will also check if it is greater than or equal to 960, which is the opposite side.

if (x >= 960) {
    x = 960;
}

Now this is not the best way to solve this, but we will improve it later.

All Fixed – Test the game to make sure the paddle stops when it reaches each side of the room.

Now open obj_ball and add a Create event. In the Create event we will allow the ball to move in 4 possible directions at start. Using direction and choose action and setting the speed to 5.

For this direction must equal choose, and four angles and Speed = 5.

direction = choose(45, 135, 225, 315);
speed = 5;

Now add a Collision event in obj_ball with obj_wall. Within this event, the ball will bounce off all the walls, using an if statement to call the directions Less than or equal to 180 and also an and statement with 15 > direction || direction > 165, || means or, and && means and.

Next we will add an else statement to check if greater than 180 && 195 is less than direction or direction is less than 345.

There is one more step to making this collision event work, at the top of the code we will add:

x = xprevious;
y = yprevious;
move_bounce_solid(true);

This will check if a solid object is in its path, since its on true, and call to the rest of the code

The code should look like this at the end:

Clamp: this function can maintain an input value between a specified range.

The code that was added causes the ball to bounce naturally when it collides with the walls. We told it to bounce against solid objects rather than all objects so we can later add an obj_block that is not solid.

Repeat this process by adding a Collision event with obj_paddle. Then copy and paste the code from the other collision event.

For some extra flare, you can add some sound to both of the collision events we just made. You can do so by selecting one of the collisions, then typing this following code at the bottom audio_play_sound(bounce_snd,1,false) - This will play a sound in the files that we have named “bounce_snd” at a priority of 1, and the false is to say not to loop

The order of the actions in an event is important; they go in sequence from the top of the list to the bottom.

The screenshot above shows adding the Play Sound action. As you can see you can add multiple actions to an event and multiple events to each object.

Run the game to make sure that the ball bounces off the wall and paddle.

OH, NO!! The game doesn't restart when the ball goes out of the room. We can put a simple fix in now, and later we will add a more in depth way to restart.

Open obj_ball, and add an Outside Room event located in Other events. Within this event, type game_restart()

game_restart() action in Outside Room event

3. ADDING SCORE

Thus far, the only objective has been to keep the ball in the room. We will add a score to the game, and some blocks to destroy to give us points.

Begin by opening obj_paddle and go to the Create event, at the top of the code add a global variable: global.score = 0;, this variable can be used in any object at any time as long as it is created before the use.

Adding global score to paddle create event

Now lets create a new object called obj_block. Choose a sprite, preferably one different from the one you used for obj_wall. Make sure that both Visible and Solid are checked. Set the Parent to obj_wall by clicking “Parent” you will see a new GUI open which will say “No Object” click this select the “Objects” folder (or whatever folder the obj_wall is located) select obj_wall (This last setting will cause the ball to automatically bounce off this new object.)

Add a Collision event in obj_block for obj_ball. Within this event add a line global.score += 100; the += is relative and will increase over time, rather than just an equal sign, always setting it to 100.

Next add a Destroy action instance_destroy()

So our score now increases by 100 each time one of the new blocks is hit by the ball. In addition, the new blocks are destroyed.

Open obj_ball. In the Outside Room event, add a Display a Message action show_message() before the Restart Game action. In the message area type the following exactly:

"Game Over! Your score is " + string(global.score)

Then add a few instances of obj_block to the room so we have something to give us a score. I would suggest making some kind of pattern or design out of it, but make sure there is still room for the ball to bounce around. Below is one possible example.

Run the game to make sure that the game restarts when the ball leaves the room and that your score shows up.

OOPS!! We forgot to tell the room to reset when all the blocks are destroyed. To do this we will need an object which is responsible for keeping track of whether the game is over. This will be done using a Controller Object. Controllers are objects which don't make up a physical part of the game, but which instead manage and keep track of information that is needed for the game to run, and provide information to other objects.

To detect when the room has been cleared of blocks, create a new object called obj_control and open the object. Unlike our other objects, we will not set a sprite for this object.

In order to see if the level has been completed, obj_control needs to continually check on the number of blocks left in the level. When something needs to be done continually, it should be triggered via the Step event. Every Game Maker game is executed as a series of very small, fast steps. The Step event triggers every time a game step happens, so that if anything changes about the game, actions in the step event will immediately react to the change.

Add a Step event to obj_control. To do this first choose ‘Step’ from the ‘Add Events’ button then select ‘Step’ again. The other two options: ‘Begin Step’ and ‘End Step’ will be discussed at a later time.

In the Step event, we will use a if statement, a NOT variable and the instance_exists() action.

So if NOT instance_exists of obj_block we will restart room

if (!instance_exists(obj_block)) {
    room_restart();
}

You may be confused on why there is an exclamation mark (!) and not the NOT text, well either way works “if NOT instance_exists” and “if !instance_exists” the exclamation mark is just a shorter way of typing NOT

This should now restart the room when all the blocks are destroyed. The last thing you need to do here is to add the obj_control to the room. Open your room and add the obj_control. Because the object does not have an associated sprite it will appear as a small gray circle with a white question mark inside it:

4. ADDING LIVES

Now our game keeps score, but it is a little unforgiving. If the ball leaves the screen, the game is over. Next we can add multiple lives.

Begin by opening obj_control. Add a Game Start event located in the “Other” events, then add a global variable named lives which is equal to 3.

global.lives = 3;

Now select the Step event, and add an if statement for global.lives, checking if it is less than or equal to 0, add a Restart Game action inside the statement. Temporarily open the obj_ball and open the Outside Room event. Highlight the entire show_message action, right click and choose ‘copy’ from the menu. Now re-open the obj_control and paste this action above the Restart Game action in the step event. This should now show your ending score and restart the room when all lives are used.

if (global.lives <= 0) {
    show_message("Game Over! Your score is " + string(global.score));
    game_restart();
}

Now, re-open obj_ball. In the Outside Room event, delete the entire show_message and Restart Game actions. In their place, add the global.lives -= 1;. This action should be followed by a Create Instance layer action creating the obj_ball and layer either 1 or “Instances”. The X and Y values depend on where you placed your ball initially. Follow this with an instance_destroy()

global.lives -= 1;
// Replace X_COORD and Y_COORD with actual coordinates from your room setup
instance_create_layer(X_COORD, Y_COORD, "Instances", obj_ball); 
instance_destroy();

Updating obj_ball Outside Room event for lives - global.lives -=1

Updating obj_ball Outside Room event for lives - create instance

To find these coordinates, we must open our room. Hover your mouse over obj_ball.

In the lower left corner of the room, you will see the X and Y values indicating your mouse pointer's X and Y coordinates. These coordinates are the numbers you use in the Create Instance action above, or you can double click the obj_ball in the room and it will open a panel with the coordinates.

Now back to the obj_ball in the Outside Room event. Within the Create Instance action, add those coordinates. Your ball should now reappear where it began each time.

Test your game to make sure that the ball reappears after it leaves the room.

Now we need something to show how many lives we have. First though we need a sprite for our lives. To do this, right click on the sprite you are using for obj_ball in the Sprites Folder Select Duplicate from the drop-down menu.

Name this new sprite spr_miniature_ball.

Then open the sprite by double clicking the sprite, in the Size: box click the four arrows next to the W: and H:

In the “Scale Image” box turn off “Maintain Aspect Ratio” and Change the width to 32 and the Height to 23 and press “Apply”.

Our image is now about half the size of the original image. This sprite will be used to show how many lives the player has left.

Now open obj_control. Add a Draw Event - Draw, in this draw event, we will write a decent amount of code, since we are telling the game to draw an image based on the global variable.

We will use Var again

The var keyword is used to create a temporary variable that exists only within the scope of the script, event, or function where it is defined. Once the code finishes running, the variable is automatically deleted, and you don’t need to worry about cleaning it up.

For the first var we will track the X location:

var start_x = 50;

This is basically saying this variable named start_x is 50, or in our case going to be positioned at x 50.

Do the same process to make start_y and set it to 50, and to also make a var for spacing = 32.

Next, we need to use a for loop to draw the life sprites. Start by typing for and adding parentheses(). Inside the parentheses, create a variable i and set it to 0. After that, write i < global.lives to tell the loop to repeat while i is less than the number of lives. Finally, add i++ to increase i by 1 after each loop.

Code showing i++ to increase i by 1 after each loop

Inside the loop, use the draw_sprite function to draw the sprite. First, write the sprite name spr_miniature_ball, then 0 for the image index. For the X-coordinate, write start_x + i * spacing to space each sprite out evenly. For the Y-coordinate, use start_y to keep them all in the same row.

When finished, your loop will draw one sprite for every remaining life.

var start_x = 50;
var start_y = 50;
var spacing = 32;

for (var i = 0; i < global.lives; i++) {
    draw_sprite(spr_miniature_ball, 0, start_x + i * spacing, start_y);
}

Test your game to ensure the lives appear in the correct position and match the value of global.lives.

Now right click the Draw event, click “Change Event” and select Draw - Draw GUI. This will ensure that the life images are drawn on top of other objects in the game.

Finally Tempartly open obj_paddle, go to the create event, copy and delete the global.score = 0, and put it in the obj_control Game Start Event.

FINISHING UP

Now we should have the following features implemented:

A ball that bounces off the paddle and the walls
Score counter and score display on the screen
A controller object that checks to see of the player has any lives left

Your prototype should be ready to be turned in. Check to make sure its functionality is similar to that of the example (if it's shown). Then submit your assignment.

Ping Game - GameMaker Studios 2