The Windy Woods template is a great starting point for your own platformer.
In this tutorial, we'll add new a HUD element to Windy Woods to display a custom value.
Overview
Create a new project using the Windy Woods template. You can choose either GML Code or GML Visual:
You can use your existing Windy Woods project if you already have one.
This tutorial continues from the Creating Pickups tutorial. If you haven't followed that tutorial, you'll need to create your own custom value to display on the HUD and use your own sprites.
Creating the Custom HUD
Create an object and name it obj_hud_pots.
I've put this new object under Objects -> HUD.
Assign it the spr_pickup_pots sprite (found under Sprites -> Items).
Add the Create event:
In this event, add the following code:
value_to_draw = 0;
This initialises an instance variable called value_to_draw.
This will store the value that the HUD element displays, which is set to 0 by default.
How to Draw to the GUI Layer in GameMaker
We only want to draw our object to the GUI layer only, which appears above everything else in your game. Perfect place for HUD.
However, by default, GameMaker draws an object inside the room.
You can disable this behavior by adding a blank Draw event.
How?
Add a Draw event to your new object:
Add the following code to disable the default draw behavior:
exit;
The object won't be drawn in the room anymore.
Now, add the Draw GUI event:
Add the following code:
draw_self();
The draw_self function / Action draws the sprite assigned to the instance exactly as it would be drawn in the room.
By disabling the Draw event and using draw_self in the Draw GUI event, we can override GameMaker's default draw behavior, and draw our object to the GUI layer instead.
How to Draw Centered Text in GameMaker
Let's draw the value of the HUD element.
Add the following code in the same event:
draw_self();
draw_set_font(ft_hud);
draw_set_valign(fa_middle);
draw_text(x + 60, y - 40, value_to_draw);
draw_set_valign(fa_top);
This first sets the font and alignment for our text, which you can change to modify the look of your HUD element.
It then draws the value_to_draw to the GUI, and then resets the alignment back to its default (so it doesn't affect future Draw events).
How to Place This HUD
Windy Woods has a Sequence called seq_game_hud, in the Sequences folder, which is displayed in-game. It's used for drawing all the HUD, such as hearts and coins.
Open the Sequence. From the Asset Browser, drag obj_hud_pots, and place it anywhere in the canvas.
I'll place it in the top left corner for the sake of this example:
Run the game, and you'll see your new HUD element!
However, its value stays the same, because its value_to_draw variable never changes.
Let's make sure its value changes to reflect the number of pots the player has collected, or some other value that you may want to connect.
How to Copy a Value in GameMaker
Our player object has a pots_collected variable, which tells you how many pots the player has picked up.
Follow the Creating Pickups tutorial to add pots to your game.
Your project may have a similar variable that you want to show on the HUD.
Whatever the variable may be, we want to copy its value into the value_to_draw variable of our HUD object.
How?
Open obj_hud_pots, and add the End Step event:
Add the following code.
if (instance_exists(obj_player))
{
value_to_draw = obj_player.pots_collected;
}
Instead of copying the value of obj_player.pots_collected, you may copy some other variable, even from a different object, depending on what you want your HUD to display.
This checks if an instance of obj_player exists, and if it does, copies the value from the player's pots_collected variable into value_to_draw.
Once copied, this value remains saved in the HUD instance. So even when the player stops existing, the same value continues to be drawn.
Dot notation is used to reference a variable in another instance. However, if the instance doesn't exist, the game crashes!
That's why we first use a condition to ensure the player exists, before we try to read a variable from it.
Now we can run the game and watch the number go up!
Summary
Some key takeaways from this tutorial:
- You can disable GameMaker's default drawing behaviour by creating a blank Draw event, with a comment or an "exit" statement.
- You can draw an object to the GUI by using the Draw GUI event and the draw_self function / Draw Self action.
- Use dot notation to reference a variable from another object.
Read more GameMaker tutorials to build your game.
Happy GameMaking!