Diseño del HUD (Puntuación, vidas y coleccionables)

Introducción al diseño del HUD en videojuegos 2D

El HUD (Heads-Up Display) es el canal directo de comunicación entre el estado interno del juego y el jugador. A través de este componente visual, el usuario se informa de manera instantánea e intuitiva sobre variables críticas para su supervivencia y progreso: cuántos puntos de salud le quedan, cuántas vidas conserva, cuántas monedas o gemas ha recolectado y qué puntuación acumulada lleva en la partida. En la lección previa comprendimos el propósito del evento Draw GUI y cómo se diferencia sustancialmente del evento Draw tradicional al operar en un espacio de coordenadas estático e independiente del movimiento de la cámara y de la posición de las habitaciones (rooms). En esta lección nos enfocaremos en la implementación gráfica y programática integral de los componentes que dan vida a un HUD funcional, limpio y estéticamente coherente dentro de nuestro videojuego de plataformas.

Diseñar un HUD no consiste únicamente en ubicar números y rectángulos sobre la pantalla; requiere comprender cómo GameMaker procesa las instrucciones de renderizado en cola, cómo gestionar los estados de dibujo para no alterar otros elementos de la escena y cómo presentar la información de modo que no obstruya la visibilidad de la acción principal del juego. A lo largo de esta clase, construiremos paso a paso un sistema visual completo que incluirá una barra de energía con degradado de color y fondo protector, un marcador numérico de puntuación con alineación tipográfica precisa, un contador de monedas complementado con iconos gráficos y una hilera de corazones para representar las vidas disponibles del personaje.

💡 Recuerda que todas las funciones que comiencen por draw_ deben invocarse dentro de eventos de la familia Draw. Para el HUD utilizaremos de forma exclusiva el evento Draw GUI. Si intentaras colocar estas instrucciones en el evento Step, GameMaker generará un error o simplemente no mostrará nada en pantalla, ya que el motor reserva la renderización gráfica para su ciclo de dibujado especializado.

Arquitectura del sistema: El objeto gestor de interfaz

Uno de los errores más frecuentes al comenzar en el desarrollo de videojuegos es colocar el código de dibujo de la interfaz dentro del objeto del jugador (por ejemplo, obj_player). Aunque al inicio parezca conveniente porque el jugador contiene las variables de salud y vidas, esta práctica rompe el principio de responsabilidad única y genera fallos graves de arquitectura. Si el personaje muere y su instancia se destruye temporalmente mediante instance_destroy(), el HUD desaparecerá instantáneamente de la pantalla, provocando errores en cascada si otros sistemas intentan consultar esos datos o dejando al jugador sin información visual durante las transiciones de reaparición.

La arquitectura profesional estándar consiste en delegar la representación de la interfaz a un objeto controlador dedicado, habitualmente denominado obj_hud, obj_gui o integrado dentro del gestor global obj_game_manager que configuramos en los módulos anteriores. Este objeto gestor será persistente, no tendrá una representación física en el mundo de juego (no requiere máscara de colisión ni sprite asignado como cuerpo físico) y se encargará de consultar los valores de las variables globales o de la instancia del jugador para trasladarlos a la pantalla mediante primitivas geométricas, fuentes tipográficas y sprites auxiliares.

Preparación tipográfica: Creación y configuración de fuentes

Por defecto, si invocamos la función draw_text() sin especificar una fuente personalizada, GameMaker recurre a una tipografía básica del sistema sin suavizado ni estilo retro. Para lograr una estética atractiva en nuestro videojuego de plataformas, crearemos un recurso de fuente propio en el Asset Browser. Haremos clic derecho sobre la carpeta Fonts, seleccionaremos Create -> Font y nombraremos al recurso fnt_hud.

En el editor de fuentes podemos escoger cualquier tipografía instalada en nuestro sistema operativo. Para juegos de estilo píxel art clásico, se recomiendan fuentes de tipo monospace o fuentes bitmap diseñadas específicamente para rejillas de baja resolución (como 'Consolas', 'Courier New' o fuentes pixeladas de dominio público como 'Kenney Pixel'). En la ventana de configuración debemos definir un tamaño adecuado (por ejemplo, 16 o 20 puntos) y asegurarnos de activar o desactivar la opción Anti-aliasing según la fidelidad retro que busquemos: desactivar el suavizado suele brindar bordes definidos y nítidos característicos de las consolas de 8 y 16 bits.

Renderizado de texto: Puntuación y contador de coleccionables

El renderizado de cadenas de texto en GameMaker opera mediante una máquina de estados de dibujo. Esto significa que cuando modificamos el color con draw_set_color() o la alineación con draw_set_halign(), dicho cambio afectará a absolutamente todas las llamadas de dibujo posteriores en el proyecto hasta que se restablezca explícitamente otro valor. Comprender este principio es fundamental para evitar efectos secundarios imprevistos, como textos que cambian de color repentinamente o sprites que se tintan con tonalidades erróneas.

Para mostrar la puntuación y las monedas recolectadas emplearemos las funciones draw_set_font(), draw_set_color(), draw_set_halign(), draw_set_valign() y draw_text(). La función draw_text(x, y, string) recibe las coordenadas de pantalla donde se anclará el texto y la cadena de caracteres a imprimir. Dado que nuestras variables de puntuación (global.puntos) y monedas (global.monedas) son de tipo numérico entero (Real), debemos concatenarlas convirtiéndolas a texto mediante la función string() o usando la sintaxis de concatenación con el operador suma (+).

// Evento Draw GUI en obj_hud

// 1. Configuración de estados de dibujo
draw_set_font(fnt_hud);
draw_set_color(c_white);
draw_set_halign(fa_left);
draw_set_valign(fa_top);

// 2. Coordenadas base para la esquina superior izquierda
var _base_x = 32;
var _base_y = 64;

// 3. Dibujado de texto con sombra paralela para garantizar legibilidad
var _texto_puntos = "SCORE: " + string(global.puntos);

// Sombra negra desplazada 2 píxeles hacia abajo y a la derecha
draw_set_color(c_black);
draw_text(_base_x + 2, _base_y + 2, _texto_puntos);

// Texto principal en blanco
draw_set_color(c_white);
draw_text(_base_x, _base_y, _texto_puntos);

// 4. Restablecimiento preventivo de los estados de dibujo
draw_set_color(c_white);
draw_set_halign(fa_left);
draw_set_valign(fa_top);

Observa el patrón de renderizado de sombra implementado en el fragmento anterior: dibujamos exactamente el mismo texto primero con color c_black en una posición ligeramente desplazada (por ejemplo, x + 2, y + 2) y de inmediato dibujamos el texto frontal con el color principal deseado. Este recurso técnico, denominado habitualmente 'drop shadow', es vital en videojuegos donde el fondo del escenario cambia constantemente entre zonas claras y oscuras, evitando que la tipografía pierda contraste o resulte ilegible sobre determinadas texturas.

Barras indicadoras dinámicas: Salud y energía

La representación de la salud del personaje puede abordarse mediante dos técnicas principales: el uso de la función incorporada draw_healthbar() provista por GameMaker, o el diseño de barras personalizadas compuestas por rectángulos primitivos o sprites segmentados. Analizaremos en primer lugar la solución nativa por su facilidad de configuración y posteriormente crearemos una solución gráfica personalizada de mayor calidad visual.

Uso de la función draw_healthbar()

La función draw_healthbar() calcula y renderiza de forma automática un rectángulo que se vacía progresivamente. Su firma recibe once argumentos que permiten controlar las dimensiones de la caja delimitadora, el porcentaje actual de llenado, los colores de fondo y transición, la dirección del vaciado y la presencia de bordes decorativos:

draw_healthbar(x1, y1, x2, y2, amount, backcol, mincol, maxcol, direction, showback, showborder);

Un aspecto crítico que suele confundir a los principiantes es el argumento 'amount'. Este parámetro no representa los puntos de salud absolutos (como 3 de 5 de salud), sino un porcentaje normalizado que debe situarse estrictamente en el rango entre 0 y 100. Si pasas un valor directo de salud actual sin normalizar, la barra representará visualmente un porcentaje incorrecto. Por ello, es imperativo calcular la proporción matemática: (salud_actual / salud_maxima) * 100.

// Evento Draw GUI en obj_hud

// Comprobamos la existencia del jugador para evitar errores de lectura
if (instance_exists(obj_player)) {
    var _salud_actual = obj_player.hp;
    var _salud_maxima = obj_player.hp_max;
    
    // Cálculo del porcentaje normalizado entre 0 y 100
    var _porcentaje = (_salud_actual / _salud_maxima) * 100;
    
    // Coordenadas del rectángulo de la barra
    var _bx1 = 32;
    var _by1 = 24;
    var _bx2 = 232;
    var _by2 = 44;
    
    // Dibujamos la barra con degradado dinámico de rojo (min) a verde (max)
    draw_healthbar(
        _bx1, _by1, _bx2, _by2, 
        _porcentaje, 
        c_dkgray,    // Color de fondo cuando la barra está vacía
        c_red,       // Color cuando la salud es crítica (cerca del 0%)
        c_lime,      // Color cuando la salud está llena (cerca del 100%)
        0,           // Dirección: 0 = vaciado de derecha a izquierda
        true,        // Mostrar fondo protector
        true         // Dibujar borde negro perimetral
    );
}

Construcción de barras de salud personalizadas mediante primitivas

Aunque draw_healthbar() es sumamente útil para prototipar rápidamente, sus opciones estéticas son limitadas: los bordes son de un solo píxel negro y no permite biseles, brillos ni sombras internas personalizadas. Para dotar a nuestro juego de un acabado profesional, podemos construir nuestra propia barra modular utilizando la función draw_rectangle_color() o draw_rectangle(). El sistema se compone de tres capas superpuestas dibujadas en orden secuencial:

// Evento Draw GUI en obj_hud - Barra personalizada por capas

if (instance_exists(obj_player)) {
    var _hp = obj_player.hp;
    var _hp_max = obj_player.hp_max;
    var _fraccion = clamp(_hp / _hp_max, 0, 1);
    
    var _x = 32;
    var _y = 20;
    var _ancho_total = 200;
    var _alto_total = 18;
    var _grosor_borde = 2;
    
    // Capa 1: Borde exterior oscuro
    draw_set_color(c_black);
    draw_rectangle(_x - _grosor_borde, _y - _grosor_borde, _x + _ancho_total + _grosor_borde, _y + _alto_total + _grosor_borde, false);
    
    // Capa 2: Fondo de barra vacía
    draw_set_color(make_color_rgb(50, 50, 50));
    draw_rectangle(_x, _y, _x + _ancho_total, _y + _alto_total, false);
    
    // Capa 3: Relleno de salud con interpolación de color según el estado
    var _color_salud = c_lime;
    if (_fraccion < 0.25) {
        _color_salud = c_red;
    } else if (_fraccion < 0.5) {
        _color_salud = c_yellow;
    }
    
    draw_set_color(_color_salud);
    var _ancho_actual = _ancho_total * _fraccion;
    if (_ancho_actual > 0) {
        draw_rectangle(_x, _y, _x + _ancho_actual, _y + _alto_total, false);
    }
    
    // Restablecer color base
    draw_set_color(c_white);
}

En el código anterior empleamos la función clamp() para garantizar matemáticamente que la fracción de salud nunca sea inferior a 0 ni superior a 1, protegiendo al motor de anomalías visuales en caso de recibir daño negativo o sobrecuraciones. Asimismo, condicionamos el color del relleno dinámico con una estructura condicional (if / else if), alertando dramáticamente al jugador con tonos amarillos y rojos cuando su nivel de vitalidad disminuye peligrosamente.