Gestión de estados y subimágenes de sprites

Detección de fotogramas clave y eventos en la animación

En el diseño de juegos profesional, ciertos acontecimientos deben dispararse en sincronía con la animación: reproducir el sonido de una pisada cuando el zapato toca el suelo, generar una pequeña partícula de polvo, o habilitar la zona de daño de una espada durante el fotograma exacto del golpe. Para lograr esto desde GML en el evento Step, debemos monitorear el valor de 'image_index'.

Dado que 'image_index' almacena números reales con decimales que avanzan a razón del delta de tiempo de cada fotograma, una condición como 'if (image_index == 2)' casi nunca resultará verdadera, porque el valor flotante saltará probablemente de 1.88 a 2.12 sin coincidir exactamente en 2.0000. Para detectar el paso por un fotograma clave de forma infalible sin librerías externas, comprobamos si el fotograma actual se encuentra dentro de la ventana de incremento del paso actual, o convertimos el valor mediante 'floor(image_index)' controlando una bandera booleana para no repetir el evento en múltiples pasos continuos.

// Ejemplo conceptual: Detección de pisada en el fotograma 2 de spr_player_run
// Variables de soporte requeridas en Create: footstep_played = false;

var _current_frame = floor(image_index);

if (_current_frame == 2)
{
    if (!footstep_played)
    {
        // Aquí se ejecutará la acción una sola vez al entrar al fotograma 2
        // Por ejemplo: reproducir un efecto de sonido o emitir polvo
        footstep_played = true;
    }
}
else
{
    // Al salir del fotograma 2, rehabilitamos el disparador para el próximo ciclo
    footstep_played = false;
}

Implementación práctica paso a paso en obj_player

Vamos a integrar todas estas técnicas dentro del objeto principal de nuestro proyecto de plataformas, 'obj_player'. Mantendremos limpia la arquitectura del proyecto organizando las variables en el evento Create y agrupando la lógica de animación al final del evento Step, después de que se hayan resuelto los cálculos de velocidad y colisiones del Módulo 5.

Paso 1: Preparación de recursos. En el Asset Browser, asegúrate de contar con los siguientes sprites configurados con el punto de origen en 'Bottom Centre': - 'spr_player_idle': Animación de respiración o espera (al menos 2 a 4 fotogramas, velocidad: 6 FPS). - 'spr_player_run': Animación de carrera completa (al menos 4 a 8 fotogramas, velocidad: 12 FPS). - 'spr_player_jump': Animación aérea de 2 fotogramas (fotograma 0: subida; fotograma 1: caída).

Paso 2: Inicialización en el evento Create de 'obj_player'. Añadiremos las variables de referencia para recordar el estado de la animación previa y controlar la reproducción.

/// Evento Create de obj_player

// Variables de movimiento físico (creadas en módulos anteriores)
hsp = 0;
vsp = 0;
grav = 0.3;
move_speed_max = 3.5;
jump_force = -7.0;
grounded = false;

// Variables añadidas para el control de animaciones
footstep_trigger = false;
animation_base_speed = 1.0;

Paso 3: Integración en el evento Step de 'obj_player'. Añadiremos un bloque dedicado exclusivamente al control visual ('Sistema de Animación') al final del código del evento Step, aprovechando los resultados de 'grounded', 'hsp' y 'vsp'.

/// Final del Evento Step de obj_player - Control de Animaciones y Sprites

// 1. GESTIÓN DEL PERSONAJE EN EL SUELO
if (grounded)
{
    // Si no hay velocidad horizontal significativa, mostramos reposo
    if (abs(hsp) < 0.1)
    {
        if (sprite_index != spr_player_idle)
        {
            sprite_index = spr_player_idle;
            image_index = 0;
        }
        image_speed = 1.0; // Velocidad normal de reposo
    }
    else
    {
        // Si nos desplazamos horizontalmente, pasamos a carrera
        if (sprite_index != spr_player_run)
        {
            sprite_index = spr_player_run;
            image_index = 0;
        }
        
        // Ajustamos la velocidad de animación proporcionalmente a la velocidad física
        // Evitamos que baje de 0.3 para que no parezca completamente detenido al comenzar el paso
        var _speed_ratio = abs(hsp) / move_speed_max;
        image_speed = max(0.3, _speed_ratio);
    }
}
// 2. GESTIÓN DEL PERSONAJE EN EL AIRE
else
{
    if (sprite_index != spr_player_jump)
    {
        sprite_index = spr_player_jump;
    }
    
    // Congelamos la animación automática para fijar el fotograma manualmente
    image_speed = 0;
    
    // Subimagen 0 en fase de ascenso, subimagen 1 en fase de caída
    if (vsp < 0)
    {
        image_index = 0;
    }
    else
    {
        image_index = 1;
    }
}

💡 Nota sobre GML Visual: Quienes trabajen con nodos visuales pueden lograr este mismo comportamiento utilizando los bloques 'Set Instance Variable' asignando 'Sprite' e 'Image Index', combinados con el bloque de control condicional 'If Variable' para evaluar la condición de suelo y la velocidad.

Ejercicios prácticos

Desarrolla las siguientes actividades para poner a prueba y afianzar los conceptos estudiados en esta clase.

Ejercicio 1: Modulación de velocidad en reversa. Modifica el código de control de animación de carrera de modo que, si el jugador se desplaza en una dirección pero presiona momentáneamente el control opuesto (derrape antes de detenerse), la animación de correr reduzca su velocidad a la mitad (multiplicador 0.5) para reflejar visualmente la desaceleración abrupta.

Criterio de comprobación del Ejercicio 1: Observa al jugador en movimiento rápido; al soltar la tecla o presionar el lado contrario, la animación de las piernas debe desacelerar visiblemente de forma inmediata antes de cambiar al estado de reposo.

Ejercicio 2: Sincronización precisa de aterrizaje. En tu sprite 'spr_player_jump', agrega una tercera subimagen (índice 2) que represente la flexión de rodillas al tocar el suelo. En el evento Step, detecta el instante exacto en que el personaje pasa de estar en el aire a tocar suelo, y mantén el fotograma 2 activo durante 4 pasos de juego antes de permitir la transición a 'spr_player_idle'.

Criterio de comprobación del Ejercicio 2: Al caer de una plataforma elevada, el personaje no debe mostrar inmediatamente la postura erguida de reposo, sino una breve pose de impacto con las rodillas dobladas que finalice fluidamente.

Ejercicio 3: Notificador de fotograma en consola con show_debug_message. Implementa en el código de 'spr_player_run' la detección limpia del fotograma donde el pie derecho toca el suelo (por ejemplo, fotograma 1). Empleando la función 'show_debug_message("Paso derecho")', comprueba en la ventana de salida (Output) de GameMaker que el mensaje se imprima estrictamente una sola vez por cada ciclo de carrera, sin repetirse continuamente mientras ese fotograma esté activo.

Criterio de comprobación del Ejercicio 3: En la consola de depuración inferior de GameMaker, el texto debe aparecer en intervalos rítmicos exactos correspondientes a cada ciclo de la animación, sin desbordar la consola con cientos de mensajes idénticos en un solo segundo.