Using the Draw GUI Event for UI Elements

Step 2: Implement the Draw GUI Event

In the same `obj_hud`, click **Add Event**, expand the **Draw** category, and select **Draw GUI** (be careful not to pick the standard Draw event). Add the following documented code block:

/// obj_hud Draw GUI Event

// Verify that the player instance exists to prevent runtime errors
if (!instance_exists(obj_jugador))
{
    exit; // Exit event if player is absent (e.g., during room transitions or respawns)
}

// Configure text drawing properties
// Resetting draw states is an essential defensive programming practice
draw_set_font(-1); // Use default engine font
draw_set_halign(fa_left);   // Align text to the left
draw_set_valign(fa_top);    // Align text to the top

// 1. Draw text drop shadow to maintain readability against any background
draw_set_color(c_black);
draw_text(margen_horizontal + 1, margen_vertical + 1, "SCORE: " + string(global.puntos));
draw_text(margen_horizontal + 1, margen_vertical + 21, "COINS: " + string(global.monedas));

// 2. Draw primary text in white and yellow
draw_set_color(c_white);
draw_text(margen_horizontal, margen_vertical, "SCORE: " + string(global.puntos));

draw_set_color(c_yellow);
draw_text(margen_horizontal, margen_vertical + 20, "COINS: " + string(global.monedas));

// 3. Draw lives indicator in top-right screen corner
var _gui_ancho = display_get_gui_width();
var _x_vidas = _gui_ancho - margen_horizontal;
var _y_vidas = margen_vertical;

// Right-align text for top-right placement
draw_set_halign(fa_right);
draw_set_color(c_white);
draw_text(_x_vidas, _y_vidas, "LIVES: " + string(global.vidas));

// 4. Mandatory reset of global draw properties back to engine defaults
draw_set_color(c_white);
draw_set_halign(fa_left);
draw_set_valign(fa_top);

Font Management and Text Alignment in the UI

One of the most common pitfalls for beginners in GameMaker is misunderstanding the global Draw State. When you call functions such as `draw_set_color(c_red)` or `draw_set_halign(fa_center)`, you are not applying that property solely to the next line of code: you are mutating a global state machine shared across all instances in the game.

If you set horizontal alignment to `fa_center` inside `obj_hud` and do not reset it back to `fa_left` before the script finishes, every other instance in the room calling `draw_text()` in its own Draw event will suddenly center its text, creating hard-to-trace bugs across dialogue boxes, enemy nameplates, and menus.

Text Alignment Functions

GameMaker provides clear built-in constants to control how text aligns relative to the (x, y) coordinates passed into `draw_text()`:

- **Horizontal Alignment (`draw_set_halign()`):** - `fa_left`: The x coordinate marks the left edge of the text string (default). - `fa_center`: The x coordinate marks the exact horizontal center of the string. - `fa_right`: The x coordinate marks the right edge of the string. Essential for anchoring values to the right side of the screen so numbers expand leftward cleanly regardless of digit count.

- **Vertical Alignment (`draw_set_valign()`):** - `fa_top`: The y coordinate marks the top boundary of the text bounding box. - `fa_middle`: The y coordinate marks the vertical midpoint of the characters. - `fa_bottom`: The y coordinate corresponds to the text's bottom baseline.

Practical Example: Drawing a Health Bar with Primitives in Draw GUI

In Module 7, we implemented player health variables (`hp` and `hp_max`). Rather than just printing raw numbers, let's build a stylized visual health bar in the Draw GUI event using 2D drawing primitives—complete with a dark border, background trough, and color-reactive fill.

For this hands-on implementation, we will use the following geometric functions:

- `draw_rectangle(x1, y1, x2, y2, outline)`: Draws a filled or outlined rectangle based on the boolean passed in the final parameter. - `draw_rectangle_color()`: Draws rectangles featuring distinct corner color gradients.

/// obj_hud Draw GUI Event (Health Bar Section)

if (instance_exists(obj_jugador))
{
    // Read health values from the player instance
    var _salud_actual = obj_jugador.salud;
    var _salud_maxima = obj_jugador.salud_max;
    
    // Calculate normalized health percentage (range 0.0 to 1.0)
    // clamp prevents drawing negative width or oversized bars
    var _porcentaje = clamp(_salud_actual / _salud_maxima, 0, 1);
    
    // Screen coordinate definitions for the health bar
    var _bx1 = 16;  // Left margin
    var _by1 = 45;  // Positioned directly below score text
    var _ancho_barra = 120;
    var _alto_barra  = 12;
    var _bx2 = _bx1 + _ancho_barra;
    var _by2 = _by1 + _alto_barra;
    
    // 1. Draw dark gray background for the empty trough
    draw_set_color(c_dkgray);
    draw_rectangle(_bx1, _by1, _bx2, _by2, false);
    
    // 2. Draw dynamic health fill
    // Fill width scales proportionally to remaining health percentage
    var _relleno_x2 = _bx1 + (_ancho_barra * _porcentaje);
    
    // Select dynamic status color: green when healthy, red when critical
    var _color_salud = c_lime;
    if (_porcentaje < 0.3)
    {
        _color_salud = c_red;
    }
    else if (_porcentaje < 0.6)
    {
        _color_salud = c_yellow;
    }
    
    draw_set_color(_color_salud);
    draw_rectangle(_bx1, _by1, _relleno_x2, _by2, false);
    
    // 3. Draw black outer border to frame the bar
    draw_set_color(c_black);
    draw_rectangle(_bx1 - 1, _by1 - 1, _bx2 + 1, _by2 + 1, true);
    
    // Restore default draw color
    draw_set_color(c_white);
}

Let's review the runtime behavior: whenever the player takes damage from an enemy contact, `salud` on `obj_jugador` drops. On the very next frame, the Draw GUI event recalculates `_porcentaje`. Multiplying this ratio by `_ancho_barra` causes the green fill rectangle to smoothly shrink toward the left. Most importantly, even if the player travels 3000 pixels east across the room, the bar remains rock-solid at coordinates (16, 45) on your screen.

Troubleshooting and Common Pitfalls

When working with the GUI layer for the first time, you may encounter a few unexpected behaviors. Here are the most frequent issues and how to resolve them:

1. **The HUD doesn't render after placing the object in the Room:** Check if the `Visible` property on either the instance or the `obj_hud` asset in the editor is unchecked. If an object is marked invisible, GameMaker skips all of its draw events entirely (both Draw and Draw GUI).

2. **Text or sprites appear blurry or distorted:** This happens when the aspect ratio set via `display_set_gui_size()` does not match the aspect ratio of the viewport or game window. For example, if your game displays in 16:9 (such as 640x360 or 1920x1080) but you force a GUI size of 800x600 (a 4:3 ratio), the UI elements will stretch horizontally.

3. **The HUD jitters or stutters as the camera moves:** This classic artifact occurs when developers attempt to draw a fixed UI inside the standard Draw event by offsetting camera coordinates: `draw_text(camera_get_view_x(cam) + 20, ...)`. Because camera positions and instance rendering update at slightly different sub-pixel intervals in the frame cycle, a one-frame mismatch causes visual jitter. Moving the rendering logic into the Draw GUI event eliminates camera tracking jitter entirely, as GUI coordinates are completely decoupled from camera math.

Hands-On Exercises

Complete the following three exercises to solidify your grasp of GUI coordinates before building a full HUD layout in the next session.

**Exercise 1: Empirical Coordinate Space Test (Coding)** Create a test object called `obj_test_coordenadas`. In its standard Draw event, draw a red circle at position (100, 100). Next, in its Draw GUI event, draw a blue circle at position (100, 100). Run the game, move your player forward through the room so the camera scrolls, and observe how each circle behaves. - *Success Criteria:* The red circle stays locked to the world tiles at the beginning of the room and disappears as the camera pans away. The blue circle remains permanently anchored to the top-left of the display.

**Exercise 2: Resolution-Independent Dynamic Positioning (Coding)** Inside `obj_hud`'s Draw GUI event, implement an indicator centered at the bottom of the screen displaying the text "LEVEL 1 - GREEN FOREST". Do not hardcode rigid pixel values (such as 320, 340). Instead, dynamically calculate the horizontal center and bottom margin using `display_get_gui_width()` and `display_get_gui_height()` paired with the appropriate text alignment. - *Success Criteria:* Changing the GUI canvas resolution in the Create event between `display_set_gui_size(640, 360)` and `display_set_gui_size(960, 540)` keeps the level title centered along the bottom edge without clipping or drifting off-center.

**Exercise 3: Diagnosing and Fixing Graphics State Leaks (Analysis)** Imagine that after adding a flashing warning message in the Draw GUI event using `draw_set_color(c_red)` and `draw_set_alpha(0.5)`, you notice that all platform tiles and your player sprite in the game world appear tinted red and semi-transparent. - Explain in detail why this occurred in GameMaker's render pipeline. - Write the fix required at the end of the GUI script to restore correct rendering states. - *Success Criteria:* Accurately identify the global persistence of GameMaker's draw state machine and restore `draw_set_color(c_white)` and `draw_set_alpha(1.0)` upon event completion.