GAME MAKER STUDIO TUTORIAL

1945

GAME MAKER 2022

PART A – THE WATER & ISLANDS

STEP A1 – Adding water background as a sprite resource

· Create a sprite.

· Name: spr_water

· Import water image from resources

STEP A2 – Adding a moving background

· Open the default room named Room1. (Do not create a new room.)

· Click on the background layer (usually at the top left)

· Near the bottom left, click on the … button to choose a background sprite and choose spr_water.

· In the Background Layer Properties at the bottom left, check the following:

o Horizontal Tile

o Vertical Tile

· Below, set the Speed’s Y value to 1.

<Test game – Water should scroll down>

STEP A3 – Add sprites for each island (x3)

· Create three sprites.

· Names:

o spr_isl1

o spr_isl2

o spr_isl3

· Load a different island image file for each sprite

· Open the image up by double clicking it, and find the magic wand tool. Click on the blue background around the island and then hit delete to make it transparent.

STEP A4 – Create each object for each island (x3)

· Create three objects.

· Names:

o obj_isl1

o obj_isl2

o obj_isl3

· Set corresponding sprite

STEP A5 – Making islands move (x3)

· Inside each island, add a Create event.

· Add Set Speed action (movement menu).

o Type: Vertical

o Speed = 1 (same as background)

STEP A6 – Adding islands to room (x3)

· Open the room and select the Instances layer (usually at the top left).

· Drag in one of each island object. Place them at different starting heights. (A common error here is to drag in the sprites instead of the objects. Don’t do this.)

<Test game – Islands should move with background>

STEP A7 – Making islands reappear at the top (x3)

· Inside the island object, add a Step event.

· Add the If Variable action (common menu)

o Variable: y

o Not: Keep unchecked

o Is: Greater

o Value: room_height //If the island’s y is larger than room_height (if it is below the screen)

o Note: All of this checks if the island is below the screen.

· Add an Assign Variable action (common menu)

o Note: When dragging the action in, release it when you see a purple rectangle on the right had side of the If Variable action (see image). This will make sure that the Assign Variable action is only executed when the If Variable check is true.

· Configure the Assign Variable action that you just dragged in like this:

o Variable: y

o Value: -65

o Note: Setting the island’s y value to -65 will make it be above the screen

<Test game – Islands should now reappear at the top shortly after going off screen>

STEP A8 – Making islands reappear randomly at the top (instead of at the same x location).

· Still inside the Step event, add a Get Random Number action (Random menu) under the previous action

o Type: Integer

o Minimum: 0

o Maximum: room_width

o Target: x

o Note: The above action will give x a random value between 0 and the room’s width. This means that the island will now appear above the room anywhere along the x-axis and will move downwards (until it get back under the room).

<Test game – Islands should now reappear at the top (at different x values) shortly after going off screen>

STEP A9 – Enlarging the islands (optional)

· Open the room.

· Click on one of the islands.

· At the bottom left, find the Scale X & Y fields. Put 2 for each.

· Repeat for the other islands (if you want to)

<Test game – Islands should be bigger>

PART B – OUR PLANE

STEP B1 – Creating the plane’s sprite

· Create a sprite.

· Name: spr_myPlane

· Load file myPlane.gif

· Set the origin to Middle Center in the dropdown menu just above the sprite image preview.

· Open the image up, and with the magic wand tool, delete the blue background.

· Above the preview images, set the Speed to 15 FPS.

· Note: Notice that there are three images that appear when you import the file. That is because this is a GIF animation that contains three frames.

STEP B2 – Create the object for the plane

· Resources > Create Object

· Name: obj_myPlane

· Pick the corresponding sprite

STEP B3 – Add plane to room

· Go into your room.

· In the Layer panel, add a new instance layer (usually at the top left)

· Rename it to “PlaneInstance” and make sure it is above the layer with the islands.

· Drag a plane instance in the middle of the room.

<Test game – Your plane should be in the middle of your room.>

STEP B4 – Moving left

· Inside the plane object, add a Key Down > Left event.

· Add a If Variable action (common menu) //check if there is room to move to the left

o Variable: x

o Is: Greater

o Value: 30 //30 pixels from the left side

· Add a Assign Variable inside the If Variable (drop on right side of block)

o Variable: x //4 to the left of current position

o Value: -4

o Relative: Check it

<Test game – Your plane should be able to move left but not off the screen.>

STEP B5 – Moving right

· Inside the plane object, add a Key Down > Right event.

· Add an If Variable action (common menu) //check if there is room to move to the right

o Variable: x

o Is: Less

o Value: room_width – 30 //30 pixels from the right hand side

· Add an Assign Variable (common menu) inside the If Variable action

o Variable: x //4 to the right of current position

o Value: 4

o Relative: Check it

<Test game – Your plane should be able to move left and right but not off the screen.>

STEP B6 – Moving up

· Inside the plane object, add a Key Down > Up event.

· Add an If Variable action (common menu) //check if there is room to move up

o Variable: y

o Is: Greater

o Value: 30 //30 pixels from the top

· Add an Assign Variable action (common menu) in the If Variable action

o Variable: y //2 up from the current position

o Value: -2

o Relative: Check it

<Test game – Your plane should be able to move up but not off the screen.>

STEP B7 – Moving down

· Inside the plane object, add a Key Down > Down event.

· Add a If Variable action (common menu) //check if there is room to move to the right

o Variable: y

o Is: Less

o Value: room_height-120

o Note: We will take away 120 pixels to leave us room at the bottom for a potential scoreboard

· Add a Assign Variable action (common menu)

o Variable: y //2 down from the current position

o Value: 2

o Relative: Check it

<Test game – Your plane should now be able to in all directions but not off screen. Notice that it cannot move to the very bottom of the screen.>

PART C – AMMO

STEP C1 – Adding the bullet sprite

· Create a sprite.

· Name: spr_bullet

· Load file bullet.gif

· Set the origin to Middle Center in the dropdown menu just above the sprite image preview.

· Open the image up, and with the magic wand tool, delete the blue background.

STEP C2 – Create the object for the bullet

· Resources > Create object

· Name: obj_bullet

· Pick corresponding sprite

STEP C3 – Bullet motion

· Inside the bullet object, add a Create event.

· Inside the Create event, add a Set Speed action (movement menu).

o Type: Vertical

o Speed: -8

STEP C4 – Bullet layer

· Open your room and find the Layers panel (usually top left).

· Add a new Instances Layer and name it “BulletInstances”.

· Make sure this new layer appears above the islands but below your plane’s layer.

STEP C5 – Adding basic shooting

· Inside the plane object, add a Key Pressed > Space event.

· Add the Create Instance action (Instances menu).

o Object: obj_bullet

o X: x

o Y: y

o Layer: “BulletInstances”

o Target: <leave this blank>

o Note: This will set the bullet’s X and Y values to the planes’ x and y values.

<Test game – Your plane should now be able to shoot. However, all the bullets that go off-screen are still using the computer’s processing power and will bog things down in time. So we need to get rid of them.>

STEP C6 – Removing bullets that are outside screen

· Inside the bullet object, add a Step event.

· Add an If Variable action (common menu).

o Variable: y

o Is: Less

o Value: -20

o Note: This action checks if the bullet is 20 pixels above the top of the screen. So it is checking if the bullet is off screen. And when it is, it will do the next action.

· Add a Destroy Instance action (Instances menu).

<To test this step, you will want to change the -20 in the above IF VARIABLE action to a positive value such as 100. Now, you can test your game and see if the bullets disappear at the top like they are supposed to. Just don’t forget to set the value back to -20 when you are done the testing.>

PART D – OUR FIRST BAD GUYS

STEP D1 – Adding the sprite for Enemy 1

· Create a sprite.

· Name: spr_enemy1

· Load file enemy1.gif

· Set the origin to Middle Center in the dropdown menu just above the sprite image preview.

· Open the image up (each frame), and with the magic wand tool, delete the blue background.

· Above the preview images, set the Speed to 15 FPS.

STEP D2 – Create the object

· Create an object.

· Name: obj_enemy1

· Pick corresponding sprite

STEP D3 – Making the enemy move

· Add a Create event.

· Add a Set Speed action (movement menu)

o Type: Vertical

o Speed: 4

STEP D4 – Enemy layer

· Open your room and find the Layers panel (usually top left).

· Add a new Instances Layer and name it “EnemyInstances”.

· Make sure this new layer appears above the islands but below the bullets.

STEP D5 – Add an enemy to the room

· Inside the room, select the EnemyInstances layer.

· Drag an obj_enemy1 object into the room (preferably near the top).

<Test game – You should see the enemy moving downwards off the screen.>

STEP D6 – Making enemy reappear at top

· Inside the enemy1 object, add a Step event.

· Add an If Variable action (common menu)

o Variable: y

o Is: Greater

o Value: room_height + 20

· Add action Set Variable (common menu)

o Variable: y

o Value: -50

· Add action Random Number (random menu)

o Type: Integer

o Minimum: 0

o Maximum: room_width

o Target: x

o Note: You might notice that this is similar to what was done with the islands. Whenever an enemy1 object moves down past the bottom of the screen it reappears back at the top with a random x location.

<Test game – The enemy should now be re-appearing at the top after it gets to the bottom.>

PART E – COLLISIONS

STEP E1 – Creating the smaller explosion’s sound.

· Create a sound.

· Name: snd_explosion1

· Load file snd_explosion1.wav

STEP E2 – Creating the smaller explosion’s sprite.

· Create a sprite.

· Name: spr_explosion1

· Load file explosion1.gif

· Set the origin to Middle Center in the dropdown menu just above the sprite image preview.

· Open the image up (each frame), and with the magic wand tool, delete the blue background.

· Above the preview images, set the Speed to 15 FPS.

STEP E3 – Creating the smaller explosion’s object.

· Resources > Create Object

· Name: obj_explosion1

· Pick the corresponding sprite

STEP E4 – Having the smaller explosion play once only.

· Inside the object, add an Other > Animation End event

· Add a Destroy Instance action.

· Note: When the explosion animation ends, the instance will be destroyed.

STEP E5 – Dealing with enemy colliding with a bullet

· Inside the enemy object, add a Collision > obj_bullet event.

· Add a Play Audio action (Audio menu)

o Sound: snd_explosion1

o Loop: Unchecked

· Add a Destroy Instance action (Instances menu)

o Click on the down arrow for this box and choose Other.

· Add another Destroy Instance action (Instances menu)

o No need to change anything this time. This will destroy the enemy (self)

· Add a Create Instance action (Instances menu)

o Object: obj_explosion1

o X: x

o Y: y

o Layer: “EnemyInstances”

o Target: <leave this blank>

o Note: This will create an explosion at the same location as the enemy object.

<Test game – You should be able to shoot the enemy. You should hear a sound and see an explosion. Both the enemy and the bullet should disappear.>

STEP E6 – Recycling the enemy

· Inside the enemy1 object, go back to the collision > obj_bullet event

· Remove the second Destroy Instance action by clicking on the x.

· Add an Assign Variable action (Common menu)

o Variable: y

o Value: -100

o Note: Instead of destroying the enemy, we will make it re-appear above the screen.

· Add a Get Random Number action (Random menu)

o Type: Integer

o Minimum: 0

o Maximum: room_width

o Target: x

<Test game – The enemy object should be killed and should appear back above the screen giving the impression that another enemy has arrived.>

STEP E7 – Creating the larger explosion’s sound.

· Create a sound.

· Name: snd_explosion2

· Load file snd_explosion2.wav

STEP E8 – Creating the larger explosion’s sprite.

· Create a sprite.

· Name: spr_explosion2

· Load file explosion2.gif

· Set the origin to Middle Center in the dropdown menu just above the sprite image preview.

· Open the image up (each frame), and with the magic wand tool, delete the blue background.

· Above the preview images, set the Speed to 15 FPS.

STEP E9 – Creating the larger explosion’s object.

· Resources > Create Object

· Name: obj_explosion2

· Pick the corresponding sprite

STEP E10 – Ending game when explosion is done

· Inside obj_explosion2, add an Other > Animation End event

· Add a Destroy Instance action (Instances menu)

· Add a Restart Game action (Rooms menu)

· Note 1: Later we will add a way to slow this down as the game restarts very quickly at the moment.

· Note 2: Do the next step before testing!

STEP E11 – Collision between bad guy plane and main plane (Part 1)

· Inside the obj_myPlane object, add a Collision > obj_enemy1 event

· Add a Create Instance action (Instances menu)

o Click on the down arrow and choose to apply to Other

o Object: obj_explosion1

o X: x

o Y: y

o Layer: “EnemyInstances”

o Target: <Leave blank>

· Add a Play Audio action (Audio menu)

o Sound: snd_explosion1

o Loop: Unchecked

· Add a Jump To Point action (Movement menu)

o Click on the down arrow and choose to apply to Other

o X: random(room_width)

o Y: -100

· Note: These three actions will add a small explosion, play the sound and move the enemy plane to above the screen so that it appears that another plane has arrived.

STEP E12 – Collision between bad guy plane and main plane (Part 2)

· Add another Destroy Instance action (Instances menu)

o No need to alter this.

· Add a Play Audio action (Audio menu)

· Sound: snd_explosion2

· Loop: Unchecked

· Add a Create Instance action (Instances menu)

o Object: obj_explosion2

o X: x

o Y: y

o Layer: “PlaneInstance”

o Target: <leave this blank>

o Note: This will place an explosion2 object where the plane is (because it just crashed with an enemy plane)

o

o

<Test game - You can now die if you crash into the plane. The game should restart.>

PART F – SCORE CONTROL

1 – Adding an object to draw the score

· Resources > Create Object

· Name: obj_controller_score

· Note: There is no sprite for this object.

2 – Inside object_controller_score

· Add a Draw event.

· Inside, add a Draw Value action (Drawing menu)

o Caption: “Score: ”

o Value: score

o X: 0

o Y: 0

o Note: This will display the content of the game’s built-in score variable. Of course, as of now, the score has not been changed so it is still zero.

3 – Adding to the room

· Add the object in the room. Any layer will do really. Note that the object is represented by a small “?” in a circle.

<Test game – You should see the score at the top left. It is always zero for now.>

4 – Updating the score when shooting enemy

· Go inside the obj_enemy1 object.

· Go inside the Collision with bullets event.

· At the bottom, add an Assign Variable action (common menu).

o Name: score

o Value: 10

o Relative: Checked

o Note: This will increase the score by 10 every time you shoot an enemy plane.

<Test game – You should see the score go up by 10 every time you destroy an enemy plane.>

PART G – ENEMY SPAWN CONTROL

1 – Creating a controller object

· Resources > Create Object

· Name: obj_controller_enemies

· Note: There is no sprite for this object.

2 – Spawning one enemy

· Inside the obj_controller_enemies, add a Create event

· Add a Create Instance (Instances menu)

o Object: obj_enemy1

o X: random(room_width)

o Y: -100

3 – Room setup

· Open the room.

· Remove the one enemy plane that is there already.

· Insert one obj_controller_enemies object.

<Test game – The new object should generate an enemy plane.>

4 – Spawning more enemies over time

· Go into the obj_controller_enemies object.

· Go into the Create event.

· At the bottom, add a Set Alarm Countdown action

o Alarm: 0

o Countdown: 300

o Note: This will make the Alarm 0 ring in 300 steps, which is 5 seconds.

· Still inside the same object, Add an Alarm 0 event

· Inside the Alarm 0 event, add a Create Instance (Instances menu)

o Object: obj_enemy1

o X: random(room_width)

o Y: -100

· Add a Set Alarm Countdown action (Alarm menu)

o Alarm: 0

o Countdown: 600

o Note: This will make the Alarm 0 ring every 600 steps, which is 10 seconds.

<Test Game – You now have more enemies that appear over time.>

PART H – IMPROVED SCORE & LIVES

1 – Create a sprite for the bottom

· Resources > Create Sprite

o Name: spr_bottom

o Load the file bottom.gif from the resources

o Set the origin to Middle Center in the dropdown menu just above the sprite image preview.

2 – Drawing the bottom bar

· Go inside the object_controller_score.

· Go inside the Draw event.

· Add a Draw Sprite action (Draw menu)

o Sprite: spr_bottom

o X: room_width/2

o Y: room_height – 38

· Drag the Draw Sprite action above the Draw Value action (if you didn’t already do this)

· Note: The order is important for Draw actions. If we draw the score first, then the bottom sprite would be drawn overtop.

<Test Game – You should now see the bottom bar.>

3 – Showing the score down in the bottom.

· Still inside the Draw event of the obj_controller_score

· You need to alter the Draw Value action

o Caption: <delete all text, leave it blank>

o Value: score

o X: room_width/2 - 80

o Y: room_height - 68

o Note: I used trial and error to figure out where the score should appear so that it matches up with the “Score” text on the bottom bar. You might have to make minor adjustments to place it perfectly.

<Test Game – Your score should appear at the bottom instead of at the top left.>

4 – Adding multiple lives to our plane object

· Go inside the plane object

· Add a Create event

· Inside, add a Set Lives action (Instance Variables menu)

o Lives: 3

5 – Create a sprite for the bottom

· Resources > Create Sprite

o Name: spr_life

o Load the file life.gif from the resources

o Remove the blue background around the image

o Set the origin to Middle Center in the dropdown menu just above the sprite image preview.

6 – Showing the Lives on the screen

· Go inside the obj_controller_score

· Go inside the draw event

· Add a Draw Instance Lives action (Draw menu)

o Click on down arrow and apply to obj_plane

o Sprite: spr_life

o Stack order: Horizontal

o X: room_width/2-130

o Y: room_height-20

o Note: This will display the number of lives you have at the bottom on the scoreboard. You may wish to tweak the values of x and y.

<Test Game – You should now see three planes representing your lives at the top left. Note that you do not lose lives yet when you die. That’s next!>

7 – Updating lives when we die

· Go inside the obj_plane object

· Go inside the Collision > obj_enemy1 event

· We must make a few changes here.

<Test Game – When you hit a plane you lose a life. But when you are out of lives, you explode and the game restarts.>

THE END

That’s it for now.

Things that could be added:

· Health bar for our plane.

· Multiple levels

· New types of enemies

· A boss plane

· New weapons

· More islands with interactive features

· A Game Over screen