Make Your Own Infinite Platformer, Part 3 | GameMaker (2024)

Welcome to the Fire Jump tutorial! Thisseries will take you through developing an infinite platformer game inGameMaker using GML Visual. You will learn how to make aplayable character, generate infinite obstacles, build a solid game loopalong with menus and much more.

Thisis Part 3 of a 4-part series, all of which are available for free onthis site.You can refer to the index pageto navigate to the other parts.

Here is a video version of this tutorial:

Overview

Inthe previous part, we added civilians that could be rescued, and scoresto show how many civilians you had rescued and how high you hadclimbed. Now we’re going to add fire to some windows which defeats theplayer, and foam that the player can shoot to put out those fires. We’llalso add sound effects to make the game experience more enjoyable.

This page is divided into the following sections:

1. Spawning Fire Obstacles
2. Losing From Fire
3. Losing From Falling Down
4. Shooting Foam
5. Fire Out Particles
6. Sound Effects

We will make use of a variety of image assets for our in-game elements and interface animations, which you can download by clicking here.

Spawning Fire Obstacles

Fires will be spawned on random windows, just like civilians, and will hurt the player when they collide.

Fire Sprite

Weneed to import a sprite for our fire. In your Asset Browser, find the“Sprites” group and create a new Sprite asset. We’ll call this“spr_fire”. In the tutorial's art assets, you will find a file called spr_fire_strip17in the "Animations" folder, which you can import through the Sprite Editor. The file has _strip17 at the end of its name as it is a 17-frame animation.

Setthe origin for this sprite to “Bottom Centre” so we can place it nicelyon a window, just like we did with the civilian. We also need to adjustit* mask, so expand the “Collision Mask” menu in the Sprite Editor,change the “Mode” to “Manual” and adjust the rectangle to look somethinglike this:

Thismask ensures that the player cannot lose by touching the top part ofthe sprite, which doesn’t actually contain any fire. You can also makethis mask narrower to make the game easier, or make it wider to increasethe challenge!

Fire Object

Let’screate an object for our fire. Go to the “Objects” group in your AssetBrowser, and create a new Object asset called “obj_fire”. Assign thefire sprite to this object. Open its “Parent” menu and assign theobj_move_parent as its parent, so it moves down along with the windows.

Let’sadd a Step event to this object. We want this event to destroy theinstance if it goes below the room, so we first need a condition. In theToolbox, find the “If Variable” action and drop it into the event. Setthe “Variable” field to y, the “Is” field to “Greater” and the “Value” field to room_height + 200.

Nowfind the “Destroy Instance” action in the Toolbox, and attach it to theright of the “If Variable” action. The instance will now be destroyedwhen it goes lower than 30 pixels below the room.

Spawning Fire

We’respawning our civilians in the window object, so we’ll do the same forfires. In your Asset Browser, find obj_window and open its Step event.

Let's look at this part of the event:

Wehave a “Get Random Number” action in this event, which gets a randominteger in the 0-1 range. If that number is 0, it spawns a civilian, andif it’s 1 it spawns nothing. We can spawn a fire when the number is 1,however that would leave no empty windows since these are the only twopossible numbers.

Inthe “Get Random Number” action, change the “Maximum” field to 3. Nowthere are four possible numbers: 0, 1, 2 and 3, and if we spawn a firewhen the number is 1, there will still be two cases left for emptywindows.

Inthe Toolbox, search for the “Case” action and drop it into the Switchaction. Set the “Constant” for this case to 1, so it runs when the chancevariable is equal to 1.

Let’sspawn the fire now. In the Toolbox, search for the “Create Instance”action and attach it to your new Case action. Set the “Object” field toobj_fire (or find it through the Asset Explorer button). We want tocreate the fire directly on the window, so enable the “Relative”checkboxes for both “X” and “Y” fields (leave their values at 0). Forthe “Layer” field, enter “Spawns” (with quotes, as this is a string).

Thatcreates the fire instance, but we also need to open the window andassign the correct frame. The window sprite has three frames (0, 1 and2) where 0 is closed, 1 is open for a civilian, and 2 is open for afire.

Let’sadd another action to this case. In the Toolbox, search for “SetSprite” and drop it under the “Case” action. Set the “Sprite” field tospr_window (or find it through the Asset Explorer) and the “Frame” fieldto 2, as that is the frame we want to switch to.

Ifyou run the game now, you will see fires spawn on random windows, andthey automatically move down because we assigned the correct parent:

Losing From Fire

We’renow spawning fires, but they don’t affect the player. We’ll make it sothat the player loses immediately on touching a fire.

Defeated Player

We’llcreate a separate object for the defeated player, and for that we needto import a sprite first. In your Asset Browser, go into the “Sprites”group and create a new Sprite asset, with the name“spr_player_defeated”. You can find the image in the tutorial’s assetsfolder with the same name, and once you have imported it, make sure toset the origin to “Middle Centre”.

Let’screate an object now. In your “Objects” group, create a new Objectasset and name it “obj_player_defeated”. Assign the spr_player_defeated sprite to it.

Wewant this object to jump up and fall down, similar to how the civiliandoes when it is rescued. In the Events window for this object, click on“Add Event” and select “Create”. We’ll give the defeated player avertical speed and gravity force in this event.

In the Toolbox, search for “Set Speed” and drop it into the event. Set the “Type” field to “Vertical” and the “Speed” field to -25(youcan change this if you want to make it jump higher or lower). Then,search for the “Set Gravity Force” action, drop it into the event andset its “Force” field to 1.

Thiswill make the defeated player instance jump up and fall down. When itdoes fall far enough to go below the room, we want to restart our gameto give the player another chance.

Addthe Step event into this object. In the Toolbox, search for “IfVariable” and drop that action into the event. We want to check if theplayer has fallen below the room, with a margin of 50 pixels. Set the“Variable” field to y, the “Is” field to “Greater” and the “Value” field to room_height + 50.

To restart the game once this happens, search for the “Restart Game” action and attach it to the “If Variable” action.

Wecan now create an instance of this defeated player object, which willautomatically restart the game once it falls below the room. The perfectplace to do that would be a collision event between the player and fireobjects!

Fire Collision

Open obj_player and add a new Collision event with the obj_fire object. Here, we are going to do two things:

1. Create an instance of obj_player_defeated
2. Delete the player instance

This way the player will effectively “transition” from its normal state to being defeated.

In the Toolbox, search for the “Create Instance” action and drop it into the event. Set the “Object” field to obj_player_defeated(or use the Asset Explorer button to find it).

Wewant to create the new instance exactly where the player is, so enablethe “Relative” checkboxes for the “X” and “Y” fields while leaving theirvalues at 0. Finally, set the “Layer” field to “Player” as that iswhere the player exists.

Nowto destroy the player itself, search for the “Destroy Instance” actionand drop it into the event. This will destroy the instance that isrunning the action, which is obj_player.

Runthe game and you will see that the player loses on touching a fire.When it falls below the room, the game restarts and you get to playagain:

We have a solid game loop now that we can build on to further improve our game!

Losing From Falling Down

Ourgame allows the player to jump as high as they can, which means thatthey can also fail to land on a window and fall all the way down. Theproblem is that nothing happens if the player falls down, and the gameis essentially stuck -- so we need to restart the game if the playerfalls down on its own.

We’regoing to do this in a new event, however we don’t have to start fromscratch. We just added a collision event with the fire object to defeatthe player, so we’ll use the same actions we added there in our newevent.

Wecan duplicate an event which allows us to select a new event type, andcarries over the actions from that event into the new one. Go intoobj_player and open the Events window. Find the collision event withobj_fire, right click on it and select "Duplicate Event".

Thiswill open the events list. Go into “Other” and select the “IntersectBoundary” event. This event runs when the player intersects with (ortouches) the boundary of the room.

The event will be added to the object, and you will see that it already has some actions: these are from the event we copied.

Thisevent will now create an instance of the defeated player object anddestroy the player itself, whenever the player touches any boundary ofthe room. This is not convenient, as you will find that the player loseson touching the left and right edges as well:

Weonly want this to defeat the player if it touches the bottom edge ofthe room. To fix this we can use a condition, so in the Toolbox, searchfor “If Variable” and drop it into the event.

Set the “Variable” field to y, the “Is” field to “Greater or Equal” (so the Y can be greater than the value or equal to it) and the “Value” field to room_height.This will now check if the player’s Y position is at or below thebottom edge of the room, and since this is the condition we wanted, dragthe existing actions in the room and attach them to the “If Variable”action.

If you run the game now, you will see that the player only loses on touching the bottom boundary of the room!

Shooting Foam

Youcan already feel that the fire is annoying -- no one likes to lose!That is why we are going to give the player the ability to put out firesby shooting foam upwards. This presents a challenge to the player asthey can only put out a fire if they are below it.

Foam Sprite & Object

Let’simport a sprite first. Go into the “Sprites” group in your AssetBrowser, and create a new Sprite asset called “spr_foam”. In the tutorial's art assets, you will find a file called spr_foam_strip20 in the "Animations" folder to import, and it has a _strip20 suffix as this is a 20-frame animation. After importing the animation, set theorigin to “Middle Centre”.

Whatwe need now is, of course, an object for this. Go into the “Objects”group, and create a new object called “obj_foam”. Assign the spr_foam sprite to it, then open the Parent menu and assign obj_move_parent asits parent object.

Theplayer will be shooting this foam upward, so we want it to move up. Addthe Create event to this object, and from its Toolbox, find the “SetSpeed” action. Add it to the event and set the Vertical speed to -40:

Thisensures that the foam always moves up after it’s created. You can alsochange the speed from -40 to anything else if you want to make the foamgo faster or slower.

Wewant this foam to be destroyed when it goes out of the room, andluckily we don’t have to use a condition for this. Previously wheneverwe used a “check if Y is below the room” condition, we did that so theinstance wouldn’t get destroyed when it was created abovethe room (like the windows, fires, and civilians). However, the foam iscreated within the room, which is why we don’t need to worry about thatthis time.

Inthe Events window, click on “Add Event”, go under “Other” and select“Outside Room”. This event runs whenever the instance goes out of theroom. In the Toolbox, search for “Destroy Instance” and drop it in theroom.

Foam instances will now be destroyed whenever they go out of the room!

Space Key

We’ll use the Space key to shoot the foam. Open obj_player, go to its Events window, click on “Add Event” and under “Key Pressed”, select the “Space” event.

Thisevent will run when the Space key is pressed on the keyboard. Sincethis is a “Key Pressed” event and not a “Key Down” event, it’ll only runonce when the key is hit, and holding the key will not do anything.

Wewant to create a foam instance when this key is pressed, so in theToolbox, search for the “Create Instance” action and drop it into theevent.

Set the “Object” field to obj_foam(orfind it through the Asset Explorer), and to create the foam where theplayer is, enable “Relative” for the “X” and “Y” fields while leavingtheir values at 0. Finally, set the “Layer” field to “Spawns”(the same layer that we used for spawning civilians and fires).

Thiswill now create a foam instance when the Space key is pressed. Let’sfill in the final piece of the puzzle and program what happens when thefoam and fire collide!

Putting Out Fires

Wewill do this in the fire object, so open obj_firefrom your Asset Browser. In its Events window, click on “Add Event” and add aCollision event with obj_foam.

Whena collision occurs between a fire and a foam, we want both of them tobe destroyed. First, to destroy the fire (which is the currentinstance), search for the “Destroy Instance” action and drop it into theevent. This will destroy the fire instance, so let’s now see how we candestroy the foam instance as well.

Thisis a collision event between the fire and the foam, where the eventit*elf is in the fire object. So within the collision event, the fire isknown as “self” as that’s the instance where the event is running.Hence the other instance in the collision, the foam, is known as “other”.

Wewant to add a new “Destroy Instance” action and apply it to that “other”instance. From the Toolbox, add another “Destroy Instance” action intothe event. Click on the little arrow next to the close (X) button, andselect “Other”. This action will now apply to the foam instance, whichwill be destroyed!

We can now shoot foam and destroy fire!

Fire Out Particles

Rightnow, hitting a fire with foam makes it disappear instantly. We wantthere to be an animation of the fire going out, however instead of usingsprite animations, we’re going to make use of GameMaker’s particlesystem:

Particle Sprite

Let’simport the particle image first. Create a new Sprite called“spr_fire_particle”, and import an image for it from the tutorial’s"Animations" folder (there will be a strip image called spr_fire_particle_strip17). Set the originto “Bottom Centre”.

Effects Layer

We’regoing to create a new layer in our room. Open rm_game, and in theLayers panel, create a new Instance layer. Name it “Effects”, and makesure to place it at the top (even above the HUD layer) so that anyeffects we create are always visible.

Defining Particles

Weneed to create the particles now, which we’ll do in a new object. Go tothe “Objects” group in your Asset Browser and create a new objectcalled “obj_game”. This object will not be visual, so you don’t need toassign a sprite to it. It will simply run in the background and manage ourparticle system.

Gointo the rm_game room and drop an instance of this object into theEffects layer. You will see a question mark on the instance, which isexpected as the object doesn’t have a sprite.

Now we'll open the obj_game object and add the Create event. In this event we will create:

1. A Particle System, which manages particles
2. A Particle Type, which is the actual particle that is created (in our case, fire)

Let’screate a Particle System first. In the Toolbox, search for “CreateParticle System” and drop it into the event. Let’s look at its fields:

1. “Layer” is the room layer where this system will create particles. Set this to “Effects” (with quotes).
2. “Persistent”controls whether this Particle System is for the current room only(disabled) or for all rooms (enabled). Leave this disabled as we only want it for this room.
3. “Target” is the variable that will store this Particle System. Set this to particle_systemand make sure that “Temp” is disabled (we don’t want this variable to be temporary).

Nowlet’s create a Particle Type for our fire. In the Toolbox, search for“Create Particle Type” and drop it into the event. This action simplycreates an empty Particle Type, without defining what it looks like,which we can do later using other actions. Let’s look at its fields:

• “Target” is the name of the variable that will store this Particle Type. Set this to fire and make sure that “Temp” is disabled.
• “Blend”controls whether this particle appears normally or uses additive blending. Additive blending should be used if your particles give off light, andsince fires do give off light, we’re going to enable this. This will make the fire particles appear brighter and warmer.

We'll now define the properties of this particle type, to control what itlooks like and how it moves. Each property is set using a new action, sowe’re going to add some actions to define this particle type. Note thateach action that we’ll add has a “Type” field which is the ParticleType that we are editing, so set that field to firefor all subsequent actions.

Let's add the following actions:

Note: The order of these actions does not need to be the same as the order given below. Also, feel free to change any values for the particle type and experiment with them!

1. “Set Particle Sprite”

   This sets the sprite that the particle uses. Set “Type” to fireand the “Sprite” to spr_fire_particle.

2. “Set Particle Life”

   Thissets the life range of the particle. The life of a particle is how manyframes it lasts for, and it is randomly selected between the “Min” and“Max” range.

   Set “Type” to fire, “Min Life” to 10and “Max Life” to 15.

3. “Set Particle Speed”

   This sets the speed of the particle, and just like the "life" property,it has a minimum value and a maximum value so that a random speed isselected within this range. The “Increase” value is how much the speedincreases (or decreases) per frame. The “Wiggle” value is similar butthe increase is randomly selected within its range, so the particle wigglesas it moves.

   Set “Type” to fire, “Min Speed” to 2, “Max Speed” to 4, “Increase” to -0.01and “Wiggle” to 0(we’re giving it a negative "Increase" value so it slows down over time).

4. “Set Particle Direction”

   This controls the direction in which the particle moves. It also has a range, an increase valueand a wiggle value. We’ll set the direction range to 0-360 so that itcan get any random direction, and give it a positive increase so itsdirection slowly changes (to give it more life).

   Set “Type” to fire, “Min Dir” to 0, “Max Dir” to 360, “Increase” to 1and “Wiggle” to 0.

5. “Set Particle Size”

   Thiscontrols the size of the particle. It allows a range for the size to be random, and also allows you to increase or decrease the size every step.

   Set “Type” to fire, “Min Size” to 0.7, “Max Size” to 1.2, “Increase” to 0.04and “Wiggle” to 0. This way fire particles can be between 0.7x and 1.2x scale and will increase in size by 0.04 every step.

6. Finally, “Set Particle Alpha”

   Thislets us specify an animated alpha/transparency for the particle. 1 isfully visible and 0 is invisible. We’ll make it go from 1 to 0 so thatthe particle fades away as it moves.

   Set “Type” to fire.
   “Start” is the particle's alpha when it is created. Set this to 1.
   “Middle” is the alpha at the middle of the particle’s life. Set this to 0.8.
   “End” is the alpha at the end of the particle’s life. Set this to 0.

   This way our particle will be at full opacity in the beginning, at 80% opacity in the middle of its lifespan and 0% by the end - giving us a nice fade effect!

Here are the new actions we've just added:

Feel free to change up any of these values to personalize the look of your particles!

Cleaning Up

We should delete our Particle System and Type when they’re no longer needed, otherwise it will cause memory leaks asthey’re created in each round but never deleted.

Forthis we will add the “Clean Up” event to the object. This event runswhen the instance stops existing (when it’s deleted or the room ends)so we can use it to destroy our particle resources.

Oncethe event has been added, search for the “Destroy Particle Type” actionand drop it into the event. This does exactly what it says (which is destroying a Particle Type) so set the“Type” field to fireso that our Fire Particle Type is destroyed when the room ends.

Now search for the “Destroy Particle System” action and drop it into the event. Set the “System” field to particle_systemso that our Particle System is also destroyed when the room ends.

This will now destroy the particle resources that we created in the Create event. There will be no memory leaks now!

Spawning Particles

We’vedefined our particles now, so we need to spawn them when a fire goesout. Go into the obj_fire object, and open its Collision event withobj_foam.

Inthe Toolbox, search for “Burst Particles” and drop it into the event.Thisaction spawns particles in the given system, using the given type. OurParticle System and Type variables exist in theobj_gameobject, so we'll need to pull those variables from that object so we can use them. This is done bywriting the object’s name before the variable, like so:

object.variable

Usually, using the object's name before the dot (".") can cause problems as there can be multiple instances of an object in a room and you wouldn't know which instance it would target. However, since we are sure that we only have one obj_game instance in our room, we should be okay to use the object's name here.

Set the “System” field to obj_game.particle_system, and the “Type” field to obj_game.fire. This will successfully pull those variables from obj_game and pass them into this action.

The“X” and “Y” fields control where the particles are created. We wantthem to be created exactly where the fire instance is, so enable“Relative” for both of them while leaving their values at 0.

The “Count” is the number of particles that are created. Let’s set this to 4, but feel free to change this to whatever you like.

Extinguishing a fire will now spawn those particles, and give a smooth transition to the fire going out!

Sound Effects

Ourgame currently plays really well, however it doesn’t feel complete because it has no sounds! Let’s add sound effects and music to our gamenow.

Sound Assets

We’regoing to add sound assets to our game, just like we added sprites andobjects. Select the “Sounds” group in your Asset Browser, or create oneif you don’t have it. Open the Create Asset menu at the top and create anew Sound asset. We’ll name this “snd_game_music”.

Note: The “snd_” prefix refers to this being a sound asset.

Thiswill be the background music for our game. In your workspace, you willsee the Sound Editor open for this sound. Click the [...] button next tothe “Name” field, which opens the File Explorer to let you import asound file. This tutorial’s assets folder includes an "Audio" folder,where you can find “snd_game_music.mp3” and import it.

In the Sound Editor window you can play the sound and adjust its volume. We don't need to worry about the other settings for now, however if you're curious you can read about them on this manual page.

Nowadd another sound asset in the “Sounds” group, and call thissnd_player_jump. This is a sound effect that plays when the playerjumps. You need to import “snd_player_jump.wav” from the tutorial’s audio assets.

In the same manner, create the following sound assets and import them from the audio assets folder:

• snd_player_defeat- Plays when the player is defeated by a fire
• snd_civilian_rescue- Plays when a civilian is rescued
• snd_player_shoot- Plays when the player shoots out foam
• snd_fire_out- Plays when a fire is extinguished

All the sound assets we need have been imported, so now let’s play them!

Game Music

Weneed to play the music as soon as the game begins, so we’ll do that inthe obj_game object. Find that object and open it, then go into itsCreate event.

Firstof all, we’re going to add an action called “Stop All Audio”, so findit in the Toolbox and drop it in the event. This is going to stop allthe game audio that is playing at that moment. Right now there is noaudio for this action to stop, however when we add a main menu, theaudio played by the menu will be stopped by this action.

Withall the previous audio stopped, we can now play the game music. In theToolbox, search for the “Play Audio” action and drop it below “Stop AllAudio” (if you place it above that action, the game music will also bestopped).

Set the “Sound” field to snd_game_music(orfind it through the Asset Explorer button on the right). “Loop”controls whether the sound repeats after it ends, and since the musicshould never stop, we need to enable this. Leave the rest at default.

Player Sounds

We’re going to play the player-related sounds now.

Goto obj_player,and open its Collision event with obj_window. Here we’regoing to play the jump sound as this event causes the player to jump. In the Toolbox, search for “Play Audio”and drop it into the action chain, so it’s controlled by the conditionat the top.

Set the “Sound” field to snd_player_jump(orfind it through the Asset Explorer). “Loop” should be disabled as wedon’t want the sound effect to keep repeating, instead it should playonce and stop.

Nowwe’ll play a sound when the player shoots foam. Open the “Key Press -Space” event, and add a “Play Audio” action. Use this action to play the snd_player_shootsound without looping.

Wealso need to play a sound when the player is defeated, so we’ll go intothe obj_player_defeated object. Open its Create event, and add a “PlayAudio” action. Use this action to play the snd_player_defeatsound.

Whenthe player is defeated, we will stop the game music to indicate thatthe game really has ended. To achieve this, find the “Stop Audio”action, drop it in the event and set the “Sound” field to snd_game_music(as that is the sound that we want to stop).

This will now play the player defeat sound, and at the same time, stop the game music.

Civilian Rescue

Toplay a sound when a civilian is rescued, go into obj_civilian and openits Collision event with obj_player. Here we have a condition to checkwhether rescuedis equal to false, so our new audio action should be attached to this condition.

Find the “Play Audio” action in the Toolbox, and attach it to the “If Variable” action. Set the “Sound” field to snd_civilian_rescue.

Fire Going Out

Forthe fire going out sound, go into obj_fire and open its Collision eventwith obj_foam. Here, simply drop a “Play Audio” action (it does notneed to be in any conditions) and set the “Sound” field to snd_fire_out.

Wehave now implemented all of the sounds that we imported, so run thegame and see how your game now offers a much better experience withproper audio feedback. You can also import more sound assets and playthem using the “Play Audio” action!

Summary

Before we add more functionality to our game, let’s summarize what we have learned in this part:

1. Collision events have a “self” instance and an “other” instance, actions can be applied to other
2. The look of a particle can be defined by creating a Particle Type
3. Dynamic resources such as Particle Systems and Particle Types must be destroyed in the Clean Up event
4. Sounds can be played using the “Play Audio” action
5. Finally: Good job on finishing this part!

Let’sfinish up our game by adding a main menu and a game over screen, andalso offer the player a more rewarding experience by adding a highscorefeature.

Next:Fire Jump Tutorial - Part 4