Welcome to the Fire Jumptutorial! This series will take you through developing an infiniteplatformer game in GameMaker using GML Visual. You willlearn how to make a playable character, generate infinite obstacles,build a solid game loop along with menus and much more.
Thisis Part 2 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 created a basic example with a jumping player andinfinitely spawning windows. Now we will expand on that example to addplayer animations, civilians to rescue and scores.
This page is divided into the following sections:
- Player States
- Spawning Civilians
- Rescuing Civilians
- Rescue Score
- Height Score
- Bonus: Jump Effect
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.
Player States
Importing Sprites
We’vemade the player move exactly as we wanted, however it appears to bestuck in the same animation. That’s because we only imported one spritefor the player and that is all we see.
We’regoing to import two more sprites to animate our player. Go into yourAsset Browser, and in the “Sprites” group, create two new sprite assets: "spr_player_jump" and "spr_player_fall". You can find both of these spritesin this tutorial’s art assets folder, which you can import and use.
Make sure to set the origins for these sprites to “Middle-Center”.
Let’sopen the spr_player_jump sprite and make a small adjustment. We wantthis state to have a time limit, so it should only run for a few framesandthen switch to another state. For that we are going to use its“sub-images” (or frames) feature, although you will notice that thissprite only has one frame.
Wecan extend a sub-image so that it lasts for multiple frames instead ofonly one. Place your mouse cursor near the right edge of the first frame,and drag it out so it lasts for about 8 frames. This sprite will nowfunction as an 8-frame animation that we can run when we want!
Now we have three player sprites in total, for the three states that it’s going to be in:
- spr_player_jump: The jump state which plays after you bounce off a window
- spr_player_air: The “in-air” state that plays after the jump state is over
- spr_player_fall: The fall state that plays as the player is falling down
Wecan easily change the sprite of an object using actions, so let’sprogram our player to display the correct sprite depending on its state.
Jump State
Wewant the jump state to play when the player bounces off a window. Toimplement this, let’s go into obj_player and open its Collision Eventwith obj_window.
Thisevent currently checks if the player is falling, and sets its verticalspeed so that it jumps again. We also want to change its sprite at thesame moment, so go into the Toolbox and search for the “Set Sprite”action. When you have found it, drag and drop the action to the right ofthe “If Variable” action, so that it’s controlled by that condition.
Thisaction changes the sprite of the instance to the one set in the“Sprite” field. You can click on the
icon next to that field toopen the Asset Explorer, which will allow you to select a sprite asset.At this point we want the player to switch over to spr_player_jump, sofind that sprite and assign it to the action.
Alternatively, you can drag the sprite asset from the Asset Browser and drop it into the “Sprite” field:
The “Frame” field is the sub-image to switch to, and we're keeping it at 0 so the sprite animation starts from the beginning.
In-Air State
Thejump animation will now play when the player bounces off a window,however when that animation ends, we want it to transition into its“in-air” sprite. For this we need a new event, so click on “Add Event”in the player’s Events window, go under “Other” and select “AnimationEnd”.
Thisevent is as simple as it sounds: it runs when the player’s currentanimation ends. We want to use this event to check if the player’s jumpanimation has just ended, and in that case, change the sprite tospr_player_air.
Searchfor the “If Variable” action in the Toolbox and drag it into the event.We’re going to use this action to check the variable sprite_index, which stores the sprite that the instance is currently using. So set the “Variable” field to sprite_indexand the “Value” field to spr_player_jump.
Thiscondition now checks if the player’s sprite is spr_player_jump, meaningthat it’s playing the jump animation. Because of the event we are in,we know that the jump animation has ended, so we’re going to switch tothe “in-air” state instead.
Inthe Toolbox, search for the “Set Sprite” action and drop it to theright of the “If Variable” action, so it’s controlled by that condition.In the Sprite field, enter “spr_player_air” or press the button next toit to open the Asset Explorer and find the asset there.
This event is now finished, and will change the player’s sprite to spr_player_air when the spr_player_jump animation ends.
Tip: You can use this same technique anywhere to create transitions between two sprites
Fall State
Thefall state plays as the player is falling. We’re going to check this ina new event and change the sprite to spr_player_fall.
Inthe Events window for obj_player, click on “Add Event”, go under “Step”and select the “End Step” event. This event runs after the Step event,so like that event it also runs once per frame, and we’re using itto make our object more organized (instead of putting everything intothe one Step event).
To go into the fall state, the vspeed(verticalspeed) of the player needs to be greater than 0, so we’ll use this asour condition. In the Toolbox, search for the “If Variable” action anddrop it into the event. Set the “Variable” field to vspeed, the “Is” field to “Greater” and the “Value” field to 0.
Ifthis condition is met we want to change the sprite, so look for the“Set Sprite” action and attach it to our “If Variable” action. Set the“Sprite” field to spr_player_fall or use the button next to it to findit through the Asset Explorer.
Thiswill now set the player’s sprite to spr_player_fall whenever it’sfalling down. That’s all three states down now, so let’s run the gameand play around:
The player now animates between its three states!You may find that the player jumps too easily now, and that is because the mask of the instance is not consistent. Let's work on that now.
Masks
Inthe previous part of the tutorial, we edited the mask of the playersprite (spr_player_air) so it only covers its lower half:
Nowthat we’ve added two more sprites for the player, the other sprites arenot going to use this mask. This means that the hitbox for the player will be inconsistent as it changes with the sprite. To fix this, we could edit the masks for theother player sprites to look the same, but luckily we don’t have to dothat.
Wecan assign a sprite to an object as its “mask”, so the mask from thatsprite will be assigned as the permanent mask (hitbox) for that object.This means that even if the sprite for that object changes to somethingelse, the mask that we set will be kept.
Let’sgo into obj_player, and find the “Collision Mask” option in its ObjectEditor. You will see that it says “Same As Sprite” which means that themask from the active sprite is used. We want to change this so it uses afixed mask, so click on it to open the Asset Explorer and look for spr_player_air. Select that sprite when you’ve found it, and it willnow be used as the player’s mask at all times.
Spawning Civilians
Themain part of our game’s loop is the ability for the player to rescuecivilians, so we’re going to work on that now. The windows shouldrandomly spawn civilians on them that the player can “collide” with andrescue.
Importing Sprites
We’regoing to import three separate civilian sprites, one of which will berandomly selected to spawn on a window, giving the game some variety inits visuals.
Inyour Asset Browser, right-click on the “Sprites” group and select“Create Group”. This will create a new group that can be used to storeassets, and we want to use this for civilians -- so name it “Civilians”.
Inthis new group, create a new Sprite asset and name it “spr_civilian_0”. In the Sprite Editor, click on "Import" and go to the tutorial's art assets. In the "Civilians" folder you will find "spr_civilian_0a" and "spr_civilian_0b", which are frames for this civilian's sprite, so select both files and import them.
Set the origin to Bottom-Centre. You will also need to adjust the "Fps" (animation speed) in the top-left corner of the Sprite Editor, as this animation only has two frames and will be too fast by default. You can set it to 4, or any other speed you prefer.
Now repeat this for“spr_civilian_1” and “spr_civilian_2”, importing two frames for each, adjusting the Fps and setting the origin to "Bottom Centre".
Since theorigins for these sprites are set to “Bottom Centre”, and theorigin of our window sprite is directly above its sill, it means that wecan place the civilian directly on the window and both sprites shouldperfectly line up because of their origin points:
Civilian Object
Whilethere are three separate civilian sprites, there will only be onecivilian object that will be assigned a random sprite to display. Gointo the “Objects” folder in your Asset Browser, and create a new Objectasset called “obj_civilian”. Assign the spr_civilian_0 sprite to it.
Beforewe program any of its behaviours, we need to make it a child ofobj_move_parent so that it moves down with the view. Click on the“Parent” button, and in the window that opens, click on “No Object” toopen the Asset Browser. Look for obj_move_parentand select it as theparent.
Wenow have one civilian object, but three sprites for it. We’re going tomake it so the object selects a random sprite from the three whenever itis created.
Inthe Events window for obj_civilian, click on “Add Event” and select“Create”. Here we want the object to choose between the three spritesavailable, and for that we’re going to use the “Choose” action. Searchfor it in the Toolbox and drag it into the event.
Thisaction lets you specify multiple options, and selects one of them atrandom. In the first “Option” field, enter spr_civilian_0. Then clickon the
plus sign to the left of the action to add a new option,and set that to spr_civilian_1. Add another option in the same mannerand set that to spr_civilian_2.
Oneof these options will be selected and applied to the variable in the“Target” field. We want it to be applied to the instance’s sprite, sothat a random sprite is selected and applied directly to the instance,so we’re going to enter sprite_indexin the “Target” field.
This will now select a random sprite from our given options and apply that to the instance.
Cleaning Up
Whena window instance goes out of the room, we simply pull it out and placeit at the top, so it appears again and the game keeps going. This willnot happen with a civilian instance, as we don’t want it to appear againif it has gone out of the room (since we will keep spawning newcivilians). This means that we need to destroy a civilian once it hasdisappeared.
Todo this, we’re going to add the Step event to our civilian object. Onceyou have added it, go into the Toolbox, search for “If Variable” anddrag it into the event. Here we want to do something that we havepreviously done in the window object -- to check if the instance isbelow the room. Set the “Variable” field to y, the “Is” field to “Greater” and the “Value” field to room_height + 350.
Thiswill check if the Y position of the instance is greater than the room’sheight, with an additional margin of 350 pixels as the civilian spriteis quite large. In this case we simply want to destroy the instance, sosearch for the “Destroy Instance” action in the Toolbox, and drop it tothe right of the “If Variable” action so it’s controlled by thatcondition.
Spawning
We’regoing to spawn civilians with the windows, however we are going to use anew layer for this to make sure that they are drawn between the windowsand the player. Go into therm_gameroom and in the Layers panel on the left,create a new Instance Layer and name it “Spawns”. Make sure that it’splaced between the “Instances” and “Player” layers:
Forspawning civilians, let’s go into obj_window and open the Step event.Here we already have one condition that checks if the window is belowthe room, which controls a chain of actions for respawning the window.We’re going to add more actions in this same chain for spawning acivilian on the window.
Weneed a random number generator to control if a civilian will spawn ornot. In the Toolbox, search for the “Get Random Number” action and dropit into the event, under the same chain as the previous actions (below“Jump to Point”). Set the “Type” field to “Integer”, the “Minimum” fieldto 0 and the “Maximum” field to 1. We want the result of this action ina new temporary variable, so set the “Target” field to chance(as the variable’s name) and enable the “Temp” checkbox.
Thiswill create a temporary variable named chance which will be either 0or 1 (we will increase the maximum limit in the next part, but for now these are the only possible values). We will only spawn a civilian on the window if this number is 0,so we’ll need a condition for this -- but instead of using the usual “IfVariable” action, we’re going to make use of a “Switch”.
ASwitch lets us specify a variable at the top, and then execute multiple“cases” for it. If the specified variable is equal to any one of thegiven cases, the actions under that case are going to run. See thefollowing visual:
Right now we have only one case to check (if chanceis equal to 0)however in the future we will add more cases, which is why the switchis perfect for evaluating the same variable multiple times.
In the Toolbox, search for “Switch” and place it into the same chain of actions. Set the “Value” field to chance.Back in the Toolbox, search for “Case” and add that action into the“Switch” action. In this new action, set the “Constant” field to 0.
Youcan now attach new actions to this “Case” action, just like with a “IfVariable” action, and those actions will only run if the chancevariable is equal to 0.
Ifthis case is true, we want to spawn a civilian on the window. In theToolbox, search for “Create Instance” and attach that action to the Case action. This action lets us create an instance of an object, so we’regoing to use this to spawn a civilian.
Set the “Object” field to obj_civilian(orpress the button next to it to open the Asset Explorer and find itthere). We’ll create it at the same position as the window, so enablethe “Relative” checkbox for both “X” and “Y” and leave their values at0. Set the “Layer” field to “Spawns” (including quotes) as the name ofthe layer where our instance will be created.
Thiswill create a civilian instance on the window, however we also need totake care of one more thing: the window is closed by default, so we needto open it by using its second frame.
Thefirst frame of our spr_window sprite has the closed window image, whichis used by default. We want to assign the second frame to the windowwhen a civilian is spawned. We can use an action to achieve this, so inthe Toolbox, search for “Set Sprite” and drop it into the action chain,under “Create Instance”.
Setthe “Sprite” field to spr_window, which is the sprite that the windowis already using -- we’re not changing that. What we are changing is theframe. We want to assign the second frame to the window, and as framenumbers start at 0, the second frame will be 1. Set the “Frame” field to1 and this should do exactly what we want!
Thereis one final change we need here: when the window respawns, it shouldrevert back to its default frame. In the Toolbox, search for “SetSprite” and drop it above the Switch action (so it's independent of it). Set the “Sprite” field tospr_window and leave the “Frame” at 0. This makes sure that the windowalways resets to its first frame, and then it can be changed by the Switchaction below.
If you run the game now, you will notice random civilians spawning on windows and moving down with the view!
Rescuing Civilians
We’regoing to make the player able to rescue civilians. The player will simply collide with a civilian instance, at which point the civilianwill fly off using a parachute and disappear.
Weneed to import images for every civilian with a parachute, which will bedisplayed after they are rescued. In your Asset Browser, you will have a“Civilians” group under “Sprites”, which we created in the previoussection. Create three new sprites in it and import images for them fromthe tutorial’s assets:
- spr_civilian_rescued_0
- spr_civilian_rescued_1
- spr_civilian_rescued_2
Make sure that the origin for these sprites is set to “Bottom Centre”, so they match with the regular civilian sprites.
Nowto program its rescue animation, let’s go into obj_civilian and openits Create event. Here we’re going to create a variable to store whetherthis civilian has been rescued or not. In the Toolbox, search for the“Assign Variable” action and drop it into the event. Set the “Name”field to rescued, which will be the name of our new variable, and the “Value” field to false.
What we’re creating here is called a “boolean” variable. This can either be trueor false, telling us whether something has happened or not. Since rescuedis falseby default, it means that the civilian hasn’t been rescued. We’ll set this to truewhen we rescue it, and we check its value at any time to know the civilian’s state.
Help, Player!
Thecivilian now needs to check whether the player is colliding with it. Inobj_civilian’s Events window, click on “Add Event”, go under“Collision”, then “Objects” and select obj_player. This will add acollision event between the civilian and the player.
Thisevent needs to have a condition at the top, to make sure that thecivilian has not been rescued yet. In the Toolbox, search for “IfVariable” and drag it into the event. Set the “Variable” field to rescuedand the “Value” field to false. All further actions added to this event should be attached to this action.
To make sure that this event only runs once, we need to set the rescuedvariable to true. Search for the “Assign Variable” action and attach it to the “If Variable” action. Set the “Name” field to rescuedand the “Value” field to true.
This makes sure that the civilian can only be rescued once, as the rescued variable will be true after this and not false.
Nowwe want to make the civilian jump up and fall down, so we’re going togive it an upward push as well as enable gravity. Add the “Set Speed”action into the same chain as the previous action. Set the “Type” to“Vertical” and the “Speed” to -18.
Forgravity, search for the “Set Gravity Force” action and drop it in theevent. Set the “Force” to 0.5 (we’re using a low gravity value since thecivilian is using a parachute).
Thecivilian will now jump off the window, but it also needs to display thecorrect "rescued" sprite from the ones we imported. Since there are threedifferent kinds of civilians, we’ll use a Switch block to assign thecorrect sprite when it is rescued.
Inthe same event, search for the “Switch” action and drag it into youraction chain. Since we need to check what sprite the civilian has, set the“Value” field to sprite_index.
Nowit’s time to add cases to this Switch, so find the “Case” action in theToolbox and drop it into the Switch action. In the “Constant” field,enter spr_civilian_0. If that isthe civilian’s sprite, we want to switch to its rescued equivalent, sosearch for the “Set Sprite” action and attach it to your Case action. Inthis new action, set the “Sprite” field to spr_civilian_rescued_0(or find it through the Asset Explorer button).
Weneed to do the same for the other civilian sprites, so add cases forboth of those sprites (spr_civilian_1 and spr_civilian_2) and switchthem to their rescued equivalents (spr_civilian_rescued_1 andspr_civilian_rescued_2). It should look like the following:
Usingthese Switch and Case actions, we’re changing the civilian’s spritedepending on the three possible sprites that it can have.
Tip: This techniquecan be used anywhere to perform different actions based on differentvalues of a variable.
Ifyou run the game now, you should be able to rescue any civilians thatspawn. When the player collides with a civilian, that civilian gets aparachute and falls off the window, and once it’s below the room it getsdestroyed because of its actions in the Step event.
Depth
In the GIF above, you can see that a rescued civilian appears below the player, since the "Spawns" layer is below the "Player" layer. To make it appear above the playerafter it has been rescued, we can change its "depth" value.
The depth controls which instance appears above others, and is usually tied to the layer. However we can change it manually using an action to change the order of appearance. If an instance has a lower depth value then it will appear above instances with higher depth values -- see it as the instance's distance from the player's eyes.
In the obj_civilian object, go to its Collision event with obj_player, and above the Switch action add the "Set Instance Variable" action:
Here we are changing the depth of the civilian instance to obj_player.depth - 10. This means that its depth will be 10 units less than the player's, and so will appear above it! Test the game now and you will see that all rescued civilians now draw above the player, making the game feel more realistic.
Rescue Score
We’regoing to add a score system to our game, so we can count how many civiliansthe player has rescued and display that on the screen.
Set Up
Firstof all we need to import a new image to display the rescue score on theHUD. In your Asset Browser, go into the “Sprites” group and create anew sprite asset called “spr_score_card”. You will find this image inthe tutorial’s art assets under "UI", which you can import through the Sprite Editor. Set its origin to "Middle-Centre".
Weneed another visual addition to the project, but this time it’s not asprite but a font. Since we’ll be drawing the player’s score as text,it’s best to have a custom font that you can personalize to fit the lookof your game.
Inthe Asset Browser you will find a “Fonts” group. Right click on it, gounder “Create” and select “Font” (this is an alternative to creating assets through the "Create Asset" menu, and both are fine to use). This will create a new Font assetthat we’ll call “fnt_score”.
Note: The fnt_ prefix indicates that it is a Font asset.
Youwill see the Font Editor open up in your workspace, where you can editthe look of your font. Under the asset’s “Name” field, you will find the “Select Font” option which allows you to choose a font from the onesinstalled on your computer. Under the “Presets” section in the middle,you can assign a style and size to the font.
Tip: The font we've used in this tutorial is Poetsen One.
Goahead and choose whatever font you like, and set the size to besomewhere around 36 as that works best for our example. When you aredone editing your font, you can close the Font Editor and proceed with the tutorial.
Global Variables
We know that we can create a variable using the “Assign Variable” action, however thatcreates an Instance Variable. Such a variable is only available in oneinstance and other instances cannot access it. We cannot use this tocreate our score variable, as we want all instances to be able toaccess and change it. So we’re instead going to use Global Variables.
AGlobal Variable is accessible through all instances, which is ideal forour score as there will be a separate object to draw it, but it will bemodified in a different object.
Let’screate our player’s rescue score variable. Go into obj_player and openits Create event. In the Toolbox, search for the “Set Global Variable”action and drop it into the event. This action allows you to create (orchange) a global variable. Set the “Name” field to score_rescue, which will be the name of our new global variable, and set the “Value” field to 0(there is no score by default).
Note:Theplus button to the left of the action is used to add anothervariable to the same action. We will make use of this later in thistutorial to create a new score type!
Adding Score
Wewill increase this score variable by 1 whenever the player rescues acivilian. Since that happens in the civilian object (obj_civilian) let’sopen it, and go into its Collision event with obj_player. In theToolbox, search for “Set Global Variable” and drag that action anywhereinto the “If Variable” action’s chain so it’s controlled by thatcondition -- I’ve added it at the top:
As you can see in the image above, we’re setting the score_rescuevariableto 1 with the “Relative” checkbox enabled. This will add 1 to the scorevalue, so the player’s rescue score will go up each time it rescues acivilian.
Score Object
Wehave a score variable now that goes up every time a civilian isrescued. All we need to do now is to draw it on the screen, so theplayer can see how good they are!
Inyour Asset Browser, find the “Objects” group and create a new Objectasset here. We’ll call this “obj_score_rescue” as this will draw ourrescue score. Apply the spr_score_card sprite to this object.
Wewant this object to draw the score value. This is something thathappens each frame, just like the Step event, however that event doesnot support drawing. For this purpose we have an event called “Draw”. Inthe Events window, click on “Add Event”, go under “Draw” and select the“Draw” event.
Thisevent runs every frame, and allows us to draw anything (sprites, text,shapes, etc.) to the screen. We need to draw our score text, howeverbefore we do that, there is something important to take care of.
Once you add a Draw event to an object, its instances will notbedrawn anymore. This is because GameMaker has now given you control overthe object to draw it in any way you like, however we want it to drawnormally as it would by default. To achieve this, search for “Draw Self”in the Toolbox and when you find that action, drag and drop it into theevent.
With this action in the event, the instance will be visible again, so let’s proceed to drawing the score text over it.
Drawing Text
Beforedrawing the score text, we need to make sure that it uses our new font(fnt_score). In the Toolbox, search for “Set Font” and drop that actioninto the event. Set the “Font” field to fnt_score(oruse the button to the right and find the asset through the AssetExplorer). Any text we draw after this action will now use that font.
Themain action that we’ll use to draw our score is called “Draw Value”.Search for it in the Toolbox, and drop it into the event. Make sure thatit comes after the “Draw Self” action, otherwise the text will behidden behind the sprite, and also make sure that it comes after the“Set Font” action so our custom font is used to draw the score.
The“Caption” field is the text that draws before the score. We’ll set thisto “Rescued ” including the space at the end, to add some distancebetween that text and the score value.
Note: Make sure to include the quotes with the “Rescued ”text as shown in the screenshot. Such a text value is known as a “string”.
The “Value” field is the actual value that needs to be drawn, which we’ll set to global.score_rescue. We’re using our global variable in a non-global action, so we need to specify the global.prefix, otherwise it won't be able to find the variable.
The“X” and “Y” fields take the position where this text will draw. We wantto draw it at the instance’s position, so we’ll leave them at 0 andenable the “Relative” checkboxes for both.
Thiswill draw the text now, however it is not ideal. By default, the textis drawn with a “Left-Top” alignment meaning that it wouldn’t becentered on the instance.
Let’s first change the alignment to “Centre-Middle”. In the Toolbox, search for “Set Text Alignment” and drop that action before the “Draw Value” action. This action allows you to change the horizontaland vertical alignment of your text. Click on the button to the right ofthe “HAlign” field and select "Center”, then click on the button nextto the “VAlign” field and select “Middle”.
This action will change the global alignment,meaning that any text drawn after this will use Center-Middle alignment. Thisworks well for us now, but to make sure that this change doesn't affect any other text in our game, we'll reset these values after drawing our text.
We’lluse this same action again to reset the alignment back to default. Add another “Set Text Alignment” action (you can find it under “RecentlyUsed”) belowthe “Draw Value” action. Leave the values as they are so that they are reverted to default.
Because of the order of our actions, the following will happen:
- The alignment will be set to Centre-Middle
- Our text will be drawn using that alignment
- The alignment will be reset to default
This is a fairly common technique in GameMaker, where you change a global property, draw something, and then reset that property to default.
HUD Layer
Tomake the buttons visible, we’re going to place them in our room. Inyour Asset Browser, go into the “Rooms” group and open rm_game. Go tothe Layers panel on the left and create a new Instance Layer called“HUD”. Place it at the very top so that the HUD instances appear aboveeverything else.
Dragthe obj_score_rescue button into this layer and place it wherever youlike, preferably in the top-left corner. Run the game, and you will nowsee your rescue score!
Height Score
We’re now going to add another score type to record how high the player has climbed.
Gointo obj_player and open its Create event. Find the already-existing “Set GlobalVariable” action, and click on the
plus button to its left to adda new global variable. Set the “Name” for this variable to score_heightand leave its value at 0.
Thisvariable will store the height score, so the player can tell how farthey have climbed. To increase this score value, we’ll go into theplayer’s Step event, which is where we scroll the view. We’re going toincrease the score value here as well.
In the Toolbox, search for the “Set Global Variable” action and drop it into the action chain. Set the “Name” field to score_heightand the “Value” to downspeed / 100. Since we want to increase the score variable, enable the “Relative” checkbox.
We are increasing the score_heightvalue by the downspeedvalue divided by 100. We’re dividing it by 100 so that thescore stays relatively low: for every 100 pixels climbed, the score willonly go up by 1.
Drawing Score
Wewant to draw the height score in its own object, just like we did withthe rescue score. In fact, we’ll simply duplicate the rescue scoreobject to save time.
Inyour Asset Browser, expand the “Objects” group and findobj_score_rescue. Right click on it and select “Duplicate”. This willcreate a new object asset, which we’ll name “obj_score_height”.
Findthe Object Editor for obj_score_height in your workspace (or doubleclick on the asset to open it). Since we’ve duplicated the previousobject, it will already have the same Draw event for drawing the score. Openthis event so we can change what score variable it draws.
Findthe “Draw Value” action in this event. Change the “Caption” field to“Height ” (including the quotes and the extra space), then change the“Value” field to round(global.score_height).
For the rescue score value, we simply used global.score_rescue, however for the height score, we are using round(global.score_height). Why is that?
round()isa function that rounds a value, so for example, 0.1 becomes 0, 1.7 becomes 2 and so on. If you remember, we made the height score go up by downspeed / 100,which is a decimal value. This means that the score will also be adecimal value, and to display it as an integer instead, we wrap it in round().
Thefollowing image shows the score drawn with and without rounding, andyou can tell why we’re rounding the value as it looks much better:
Nowopen your rm_game room, select the “HUD” instance layer and drop theobj_score_height object anywhere you like, preferably in the top-rightcorner. You will now see both scores in the game, and it'll be much moreexciting to play!
Bonus: Jump Effect
Asa bonus, we’re going to show a visual effect whenever the player jumps.Let’s import a sprite first: go into the “Sprites” group and create anew Sprite asset called “spr_jump_effect”. In the tutorial's art assets, in the "Animations" folder, you will find an image called spr_jump_effect_strip25 which you can import through the Sprite Editor. This file has _strip25 at the end of its name because it's a 25-frame animation, and GameMaker will use this information to automatically divide it into 25 separate frames (or sub-images):
Set theorigin to “Bottom Centre” so it’s easier to place at the player’s footwhen it jumps (which is on the window sill).
In the “Objects” group, create a new object called “obj_jump_effect”. Assign the spr_jump_effectsprite to it. We want this object to move down with the view, so open its “Parent” menu and assign obj_move_parent as its parent object.
Wewill create an instance of this object whenever the player jumps, andit should be destroyed when its animation ends. For this we’re going touse a new event: click on “Add Event”, go under “Other” and add the“Animation End” event.
Inthe Toolbox, search for the “Destroy Instance” action and drop it intothe event. This will now destroy the jump effect when its animationends, meaning that it will play only once after its instance is created.
Nowto show this jump effect, let’s go into obj_player, and open itsCollision event with obj_window. Here we have an “If Variable” actionwhich creates a new chain of actions, and we want to add a new action to this chain.
Inthe Toolbox, search for the “Create Instance” action and attach it tothe “If Variable” action so it’s placed in its chain. Set the “Object”field to obj_jump_effect(or find it through the Asset Explorer button on the right).
Horizontally,we want to place it exactly where the player is, so enable “Relative”for the “X” field while leaving its value at 0.
Vertically,we want it to be placed on the window, as the player is jumping offit. If we used “Relative” here then it would be created at the player’schest by default, which is something we don’t want, so make sure that “Relative” isdisabled for the “Y” field. In the same field, enter other.y.
Wewill learn more about other in the next part, but in this case it refersto the window instance that is colliding with the player (as that isthe “other” instance in this collision). This means that the jump effect's Y position will be on the window, where the player has stepped.
Finally,set the “Layer” field to “Player” so that the effect is created in thesame layer as our player, and then run the game to see your jump effect:
Summary
Before we add more amazing features to our game, let’s summarize what we learned in this part:
- You can change the sprite after playing an animation once using the Animation End event
- You can create a new instance in the game using the “Create Instance” action
- You can use the Switch action to do something different based on a variable’s value
- You can draw text in the Draw event using the “Draw Value” action
- Remember that you need to use “Draw Self” to draw the instance itself
- And finally: You are amazing!
Inthe next part, we’re going to add fire to the windows and give the playerthe power to put out those fires by shooting foam. We’ll also add soundeffects to give our game some polish.
Next:Fire Jump Tutorial - Part 3
