HUD Design (Score, Lives, and Collectibles)

Iconic Indicators: Lives and Collectibles with Sprites

Not every interface element belongs in a plain text block or numeric meter. Discrete resources such as extra lives or special artifacts are best communicated through repeated graphic icons. For instance, rather than displaying 'LIVES: 3', drawing three heart sprites horizontally in a clean row provides immediate, universally understood feedback.

To achieve this pattern, we pair standard for loops with draw_sprite() or draw_sprite_ext(). The draw_sprite_ext() variation is especially versatile, allowing you to define horizontal and vertical scaling, rotation angle, color blend, and alpha transparency per icon on the fly.

// Draw GUI Event in obj_hud - Rendering Life and Coin Icons

// ---------------------------------------------------------
// SECTION 1: DRAW LIVES (ROW OF HEARTS)
// ---------------------------------------------------------
var _vidas_totales = global.vidas;
var _corazon_x_inicio = 32;
var _corazon_y = 52;
var _espaciado = 28; // Pixel distance between each consecutive icon

for (var i = 0; i < _vidas_totales; i++) {
    // Calculate horizontal offset for each successive heart
    var _pos_x = _corazon_x_inicio + (i * _espaciado);
    
    // Render sprite spr_hud_heart (subimage 0, x, y)
    draw_sprite(spr_hud_heart, 0, _pos_x, _corazon_y);
}

// ---------------------------------------------------------
// SECTION 2: DRAW COIN COUNTER
// ---------------------------------------------------------
var _moneda_x = 32;
var _moneda_y = 88;

// Draw collectible coin icon
draw_sprite(spr_coin_ui, 0, _moneda_x, _moneda_y);

// Configure typography and vertical alignment for adjacent number
draw_set_font(fnt_hud);
draw_set_halign(fa_left);
draw_set_valign(fa_middle);

// Coin quantity string prefixed with 'x'
var _texto_monedas = "x " + string(global.monedas);

// Shadow
draw_set_color(c_black);
draw_text(_moneda_x + 30 + 1, _moneda_y + 12 + 1, _texto_monedas);

// Foreground text in bright yellow
draw_set_color(c_yellow);
draw_text(_moneda_x + 30, _moneda_y + 12, _texto_monedas);

// Final state cleanup
draw_set_color(c_white);
draw_set_valign(fa_top);

Consider the step-by-step math within the heart loop: on the first iteration (i = 0), the horizontal position is 32 + (0 * 28) = 32. On the second iteration (i = 1), the position becomes 32 + (1 * 28) = 60. On the third iteration (i = 2), the position is 32 + 56 = 88. This dynamic spacing guarantees a consistent, scalable layout: if the player obtains an extra life container increasing global.vidas to 4, the loop renders the additional icon automatically without requiring code modifications.

Consolidated Integration: The obj_hud Object

To maintain clean structure throughout your platformer project, assemble all HUD elements into a unified controller object called obj_hud. Below is the complete architecture, featuring variable initialization in the Create event followed by coordinated rendering inside the Draw GUI event.

// =========================================================
// OBJECT: obj_hud
// EVENT: Create
// =========================================================

// Set explicit canvas size for the GUI layer (native UI resolution)
display_set_gui_size(960, 540);

// Visual smoothing variables for animated transitions
barra_hp_visual = 100;

// Ensure global variables exist in case obj_hud initializes first
if (!variable_global_exists("puntos")) {
    global.puntos = 0;
}
if (!variable_global_exists("monedas")) {
    global.monedas = 0;
}
if (!variable_global_exists("vidas")) {
    global.vidas = 3;
}

Calling display_set_gui_size(960, 540) in the Create event is a core best practice in GameMaker. By default, the GUI surface stretches to match whatever window or display resolution the hardware runs at. Establishing a fixed virtual resolution for the GUI layer ensures your pixel offsets (like x = 32 or y = 20) preserve identical visual proportions regardless of whether the game runs at 720p, 1080p, or 4K.

// =========================================================
// OBJECT: obj_hud
// EVENT: Draw GUI
// =========================================================

// Check if player exists to extract vitality stats
var _hp_actual = 0;
var _hp_maxima = 100;

if (instance_exists(obj_player)) {
    _hp_actual = obj_player.hp;
    _hp_maxima = obj_player.hp_max;
}

// 1. DRAW HEALTH BAR (Top Left)
var _ancho_barra = 180;
var _alto_barra = 16;
var _pos_x = 24;
var _pos_y = 20;
var _porcentaje_vida = clamp(_hp_actual / _hp_maxima, 0, 1);

// Outer border
draw_set_color(c_black);
draw_rectangle(_pos_x - 2, _pos_y - 2, _pos_x + _ancho_barra + 2, _pos_y + _alto_barra + 2, false);

// Empty background trough
draw_set_color(make_color_rgb(40, 40, 40));
draw_rectangle(_pos_x, _pos_y, _pos_x + _ancho_barra, _pos_y + _alto_barra, false);

// Active health fill
if (_porcentaje_vida > 0) {
    var _color_barra = (_porcentaje_vida > 0.3) ? make_color_rgb(70, 210, 70) : make_color_rgb(220, 50, 50);
    draw_set_color(_color_barra);
    draw_rectangle(_pos_x, _pos_y, _pos_x + (_ancho_barra * _porcentaje_vida), _pos_y + _alto_barra, false);
}

// 2. DRAW LIVES (Heart icons below health bar)
var _vidas_espacio = 26;
for (var i = 0; i < global.vidas; i++) {
    draw_sprite(spr_hud_heart, 0, _pos_x + (i * _vidas_espacio), _pos_y + 24);
}

// 3. DRAW COINS (Below hearts)
draw_sprite(spr_coin_ui, 0, _pos_x, _pos_y + 56);
draw_set_font(fnt_hud);
draw_set_halign(fa_left);
draw_set_valign(fa_middle);

var _str_monedas = "x " + string(global.monedas);
draw_set_color(c_black);
draw_text(_pos_x + 25, _pos_y + 67, _str_monedas);
draw_set_color(make_color_rgb(255, 215, 0)); // Gold tint
draw_text(_pos_x + 24, _pos_y + 66, _str_monedas);

// 4. DRAW SCORE (Top Right Corner)
var _gui_ancho = display_get_gui_width();
draw_set_halign(fa_right);
draw_set_valign(fa_top);

var _str_score = "SCORE: " + string(global.puntos);

// Score drop shadow
draw_set_color(c_black);
draw_text(_gui_ancho - 22, 22, _str_score);

// Score foreground
draw_set_color(c_white);
draw_text(_gui_ancho - 24, 20, _str_score);

// 5. RESTORE DEFAULT DRAW STATES
draw_set_color(c_white);
draw_set_halign(fa_left);
draw_set_valign(fa_top);

Advanced Techniques: Number Formatting and Visual Smoothing

In classic arcade titles, high scores are rarely displayed as a raw '45'; instead, they are zero-padded to a fixed character width (such as '000045'). This convention preserves UI visual stability, preventing the text container from jittering or expanding each time the score rolls into tens, hundreds, or thousands.

GameMaker provides the built-in function string_format(val, total, dec), where 'total' indicates the minimum total columns and 'dec' the decimal precision. However, string_format pads empty slots using spaces rather than zeros. To achieve zero-padded scores, combine it with string_replace_all():

// Helper logic to format numbers with leading zeros
// Converts an integer into a fixed-length zero-padded string
var _puntos_crudos = global.puntos;
var _puntos_formateados = string_replace_all(string_format(_puntos_crudos, 6, 0), " ", "0");

// If global.puntos is 350, _puntos_formateados produces "000350"
draw_text(_gui_ancho - 24, 20, "SCORE: " + _puntos_formateados);

Another high-impact enhancement is visual health bar smoothing (lerp animation). When the player takes heavy damage, rather than letting the meter snap down instantly in a single frame, store an animated visual variable that smoothly chases the real health stat using linear interpolation (lerp). Inside the Step event of obj_hud, compute: barra_hp_visual = lerp(barra_hp_visual, obj_player.hp, 0.1); and use barra_hp_visual to determine the fill width inside the Draw GUI event. This adds a layer of kinetic polish ('game juice') to your combat feedback.

Best Practices and Troubleshooting Common Mistakes

When developing UI systems in GameMaker, beginners often run into a few recurring stumbling blocks. The first is 'draw state leakage': modifying draw_set_color(c_red) to style an alert label without restoring it back to c_white causes every subsequent object in the render pipeline without explicit tinting to inherit that red tint. As a golden rule, every Draw GUI event should conclude by resetting color to c_white and alignments to fa_left and fa_top.

A second common issue occurs when pinning elements to the right or bottom edges using hardcoded pixel positions like x = 900. If the player resizes the window or plays on an ultrawide monitor, the counter will either drift out of bounds or float awkwardly in the center. Always calculate responsive margins using display_get_gui_width() and display_get_gui_height(). A coordinate like display_get_gui_width() - 32 will consistently sit exactly 32 pixels from the right margin regardless of the display resolution.

Practical Exercises

Complete the following structured exercises to solidify the interface architecture covered in this lesson:

1. Zero-Padded Coin Counter: Modify the coin display inside the Draw GUI event of obj_hud so that the quantity always renders with exactly three digits (e.g., 'x 005', 'x 023', 'x 100'). Verification criteria: Collect coins during play and confirm that the leading zeros decrement proportionally without misaligning the text string relative to the icon.

2. Smooth Health Depletion (Lerp): Declare a visual variable hp_visual in the Create event of obj_hud. In the Step event, interpolate hp_visual toward the player's true hp using lerp(hp_visual, obj_player.hp, 0.15). Render the custom health bar using this smoothed value in the Draw GUI event. Verification criteria: Have an enemy deal damage to the player and observe the health bar drain in a smooth fluid animation rather than jumping instantly.

3. Empty Heart Containers: Modify the heart loop so that it always draws a fixed total of 3 heart slots (representing maximum life capacity). Use subimage 0 (filled red heart) when the loop index is less than global.vidas, and subimage 1 (an empty or grayed-out heart silhouette) when the index is greater than or equal to global.vidas. Verification criteria: Reduce global.vidas to 1 during gameplay and confirm the screen displays 1 filled heart and 2 empty containers in the row.