Uso del evento Draw GUI para elementos de interfaz

Paso 2: Implementar el evento Draw GUI

En el mismo `obj_hud`, pulsamos el botón **Add Event**, desplegamos la categoría **Draw** y seleccionamos con atención **Draw GUI** (asegúrate de no elegir el evento Draw estándar). Añadimos el siguiente bloque de código documentado:

/// Evento Draw GUI de obj_hud

// Verificamos si la instancia del jugador existe en la escena para evitar errores
if (!instance_exists(obj_jugador))
{
    exit; // Si no hay jugador (por ejemplo, durante una pantalla de carga), salimos del evento
}

// Configuramos las propiedades de dibujo de texto
// Restaurar los estados de dibujo es una buena práctica indispensable
draw_set_font(-1); // Utiliza la fuente predeterminada del sistema
draw_set_halign(fa_left);   // Alineación horizontal a la izquierda
draw_set_valign(fa_top);    // Alineación vertical arriba

// 1. Dibujar sombra del texto para garantizar legibilidad sobre cualquier fondo
draw_set_color(c_black);
draw_text(margen_horizontal + 1, margen_vertical + 1, "PUNTOS: " + string(global.puntos));
draw_text(margen_horizontal + 1, margen_vertical + 21, "MONEDAS: " + string(global.monedas));

// 2. Dibujar el texto principal en color blanco y amarillo
draw_set_color(c_white);
draw_text(margen_horizontal, margen_vertical, "PUNTOS: " + string(global.puntos));

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

// 3. Dibujar iconos de vidas en la esquina superior derecha de la pantalla
var _gui_ancho = display_get_gui_width();
var _x_vidas = _gui_ancho - margen_horizontal;
var _y_vidas = margen_vertical;

// Configuramos alineación a la derecha para este bloque
draw_set_halign(fa_right);
draw_set_color(c_white);
draw_text(_x_vidas, _y_vidas, "VIDAS: " + string(global.vidas));

// 4. Restauración obligatoria de propiedades de dibujo por defecto
draw_set_color(c_white);
draw_set_halign(fa_left);
draw_set_valign(fa_top);

Gestión de fuentes y alineación de dibujo en la interfaz

Uno de los conceptos que más confunde a los desarrolladores principiantes en GameMaker es la naturaleza del estado global del sistema de dibujo (Draw State). Cuando llamas a funciones como `draw_set_color(c_red)` o `draw_set_halign(fa_center)`, no estás aplicando esa propiedad solo a la siguiente línea de código: estás modificando una máquina de estados global compartida por todas las instancias del juego.

Si cambias la alineación horizontal a `fa_center` en `obj_hud` y no la restauras a `fa_left` al terminar tu código, cualquier otro objeto en la habitación que ejecute `draw_text()` en su propio evento Draw asumirá que debe centrar su texto, provocando comportamientos erráticos en diálogos, etiquetas de enemigos o menús.

Las funciones de alineación tipográfica

GameMaker ofrece constantes integradas muy claras para alinear textos respecto a las coordenadas (x, y) proporcionadas a `draw_text()`:

- **Alineación horizontal (`draw_set_halign()`):** - `fa_left`: La coordenada x representa el borde izquierdo del texto (valor predeterminado). - `fa_center`: La coordenada x representa el centro horizontal exacto de la cadena de texto. - `fa_right`: La coordenada x representa el final o borde derecho del texto. Fundamental para anclar puntuaciones a la esquina derecha de la pantalla sin importar cuántos dígitos crezca el número.

- **Alineación vertical (`draw_set_valign()`):** - `fa_top`: La coordenada y es la línea superior de la caja tipográfica. - `fa_middle`: La coordenada y se ubica en el centro vertical de los caracteres. - `fa_bottom`: La coordenada y coincide con la línea base inferior del texto.

Ejemplo práctico: Barra de energía dibujada con formas primitivas en Draw GUI

En el Módulo 7 implementamos la variable de salud del jugador (`hp` y `hp_max`). En lugar de mostrar un simple número aburrido, vamos a programar en el evento Draw GUI una barra de salud visual estilizada con bordes de color oscuro, fondo de daño y relleno reactivo dinámico utilizando funciones de dibujo primitivas 2D.

Para este ejercicio práctico, utilizaremos las siguientes funciones geométricas:

- `draw_rectangle(x1, y1, x2, y2, outline)`: Dibuja un rectángulo con relleno o solo contorno según el valor booleano indicado en el último parámetro. - `draw_rectangle_color()`: Permite dibujar rectángulos con gradientes de color.

/// Evento Draw GUI de obj_hud (Sección Barra de Salud) 

if (instance_exists(obj_jugador))
{
    // Obtenemos los valores de salud del jugador
    var _salud_actual = obj_jugador.salud;
    var _salud_maxima = obj_jugador.salud_max;
    
    // Calculamos el porcentaje normalizado de vida (rango de 0.0 a 1.0)
    // Usamos clamp para asegurarnos de no dibujar una barra negativa o sobredimensionada
    var _porcentaje = clamp(_salud_actual / _salud_maxima, 0, 1);
    
    // Definición de las coordenadas de la barra en la pantalla
    var _bx1 = 16;  // Margen izquierdo
    var _by1 = 45;  // Ubicada debajo de los textos de puntuación
    var _ancho_barra = 120;
    var _alto_barra  = 12;
    var _bx2 = _bx1 + _ancho_barra;
    var _by2 = _by1 + _alto_barra;
    
    // 1. Dibujar fondo gris oscuro de la barra vacía
    draw_set_color(c_dkgray);
    draw_rectangle(_bx1, _by1, _bx2, _by2, false);
    
    // 2. Dibujar el relleno dinámico de salud
    // El ancho del relleno es proporcional al porcentaje de salud restante
    var _relleno_x2 = _bx1 + (_ancho_barra * _porcentaje);
    
    // Seleccionamos un color reactivo: verde si está sano, rojo si le queda poca vida
    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. Dibujar borde exterior negro para enmarcar la barra
    draw_set_color(c_black);
    draw_rectangle(_bx1 - 1, _by1 - 1, _bx2 + 1, _by2 + 1, true);
    
    // Restauración de color
    draw_set_color(c_white);
}

Analicemos minuciosamente cómo se comporta este bloque dentro del juego: si nuestro personaje sufre daño por el contacto de un enemigo (evento programado en el Módulo 7), la variable `salud` de `obj_jugador` descenderá. Instantáneamente, en el siguiente fotograma, el evento Draw GUI calculará la nueva variable local `_porcentaje`. Al multiplicarla por `_ancho_barra`, el rectángulo verde se encogerá suavemente hacia la izquierda. Y lo más importante: si el jugador camina 3000 píxeles hacia el este del nivel, la barra permanecerá inamovible exactamente en las coordenadas (16, 45) de la esquina superior izquierda de tu monitor.

Depuración y resolución de problemas frecuentes

Al trabajar con la capa GUI por primera vez, es habitual encontrarse con ciertos comportamientos imprevistos. A continuación, revisamos las anomalías más comunes y cómo solucionarlas con rigor profesional:

1. **La interfaz desaparece al colocar el objeto en la Room:** Comprueba si la propiedad `Visible` de la instancia o del objeto `obj_hud` en el editor está desmarcada. Si un objeto tiene la casilla `Visible` desactivada, GameMaker omite por completo todos los eventos de dibujo (tanto Draw como Draw GUI).

2. **El texto o sprites se ven borrosos o deformados:** Esto ocurre cuando la relación de aspecto (aspect ratio) configurada en `display_set_gui_size()` no coincide con la proporción de la ventana o de la cámara del juego. Por ejemplo, si tu juego renderiza en 16:9 (como 640x360 o 1920x1080) y fuerzas un tamaño GUI de 800x600 (proporción 4:3), los elementos aparecerán estirados horizontalmente.

3. **El HUD tiembla al moverse el jugador:** Este defecto visual clásico ocurre cuando el programador intenta crear una interfaz fija en el evento Draw tradicional sumando la posición de la cámara: `draw_text(camera_get_view_x(cam) + 20, ...)`. Debido a que la cámara actualiza su posición en momentos sutilmente diferentes respecto al ciclo de renderizado, se produce un desfase de un fotograma (jittering) que hace temblar el texto. Trasladar el código directamente al evento Draw GUI elimina este problema por completo, ya que la GUI no depende de ningún cálculo matemático de la cámara.

Ejercicios prácticos

Realiza las siguientes tres actividades para consolidar el dominio del espacio GUI antes de avanzar hacia el diseño integral del HUD en la próxima clase.

**Ejercicio 1: La prueba empírica del espacio relativo (Programación)** Crea un objeto de prueba llamado `obj_test_coordenadas`. En su evento Draw estándar, dibuja un círculo de color rojo en la posición (100, 100). Luego, en su evento Draw GUI, dibuja un círculo de color azul también en la posición (100, 100). Ejecuta el juego, haz que el jugador camine hacia adelante por el nivel con la cámara siguiéndolo y observa el comportamiento de ambos círculos. - *Criterio de comprobación:* El círculo rojo debe quedarse anclado a las baldosas iniciales de la habitación y desaparecer conforme la cámara avance. El círculo azul debe permanecer permanentemente visible e inmóvil en la esquina superior izquierda de tu monitor.

**Ejercicio 2: Posicionamiento dinámico dependiente de resolución (Programación)** Implementa en el evento Draw GUI de `obj_hud` un indicador centrado en la parte inferior de la pantalla que muestre el texto "NIVEL 1 - BOSQUE VERDE". No debes escribir coordenadas fijas en píxeles rígidos (como 320, 340). En su lugar, debes calcular la coordenada horizontal central y la vertical inferior utilizando las funciones dinámicas `display_get_gui_width()` y `display_get_gui_height()`, junto con la alineación tipográfica correspondiente. - *Criterio de comprobación:* Al cambiar el tamaño del lienzo en el evento Create mediante `display_set_gui_size(640, 360)` o cambiarlo a `display_set_gui_size(960, 540)`, el texto del nombre del nivel debe mantenerse perfectamente centrado en el borde inferior sin desplazarse hacia un lado ni cortarse.

**Ejercicio 3: Diagnóstico y depuración de estados gráficos (Análisis)** Supón que tras agregar un evento Draw GUI para dibujar un mensaje parpadeante de advertencia con `draw_set_color(c_red)` y `draw_set_alpha(0.5)`, notas que todos los bloques de tus plataformas y el sprite de tu personaje en el mundo del juego ahora se ven tintados de color rojo semitransparente. - Explica detalladamente por qué ocurrió este error en el pipeline de GameMaker. - Escribe el fragmento de código de corrección que restablezca los estados de renderizado adecuados al final del script de la interfaz. - *Criterio de comprobación:* Identificar la persistencia global del estado del motor gráfico y aplicar `draw_set_color(c_white)` y `draw_set_alpha(1.0)` al terminar la ejecución del evento.