Inversión de sprites según la dirección

Introducción a la orientación visual del personaje

En las dos primeras clases de este módulo establecimos las bases para capturar las pulsaciones del teclado y el gamepad, y transformamos esas lecturas en un desplazamiento físico horizontal fluido para nuestro objeto jugador (obj_jugador). Sin embargo, si has probado tu proyecto hasta este momento, habrás notado un detalle visual evidente: cuando el personaje camina hacia la izquierda, su ilustración continúa mirando hacia la derecha. El héroe parece desplazarse de espaldas, deslizándose como sobre hielo en reversa.

En la era clásica de los videojuegos de 8 y 16 bits, la memoria de video y los cartuchos eran sumamente limitados. Los desarrolladores no podían permitirse dibujar dos secuencias completas de animación para cada personaje (una mirando hacia la derecha y otra hacia la izquierda), ya que esto duplicaría el consumo de memoria gráfica de forma innecesaria. La solución técnica universal consistía en almacenar una única versión del sprite —comúnmente mirando hacia la derecha— y aplicar un reflejo geométrico por hardware en el eje horizontal cuando el personaje se moviese hacia la izquierda. GameMaker implementa esta misma técnica mediante la manipulación de variables internas de transformación matricial.

En esta clase aprenderás a manipular la variable incorporada image_xscale para invertir tu sprite en tiempo real de manera limpia, eficiente y matemáticamente precisa. Analizaremos por qué esta técnica ahorra tiempo en la producción artística, cuál es el rol crítico del punto de origen o pivote del sprite, y cómo evitar los errores más comunes de temblor o desalineación física.

Variables de transformación en GameMaker: image_xscale e image_yscale

Cada instancia activa dentro de una room en GameMaker posee un conjunto de variables incorporadas (built-in variables) que controlan cómo el motor dibuja su sprite asignado en pantalla. Entre estas variables se encuentran las propiedades de escala horizontal y vertical: image_xscale e image_yscale.

Por defecto, cuando una instancia se crea en el juego, ambas variables tienen un valor decimal de 1.0. Este valor representa el 100 % del tamaño original del sprite: un píxel del archivo gráfico equivale exactamente a un píxel en el lienzo de renderizado del juego. Si alteras image_xscale asignándole un valor de 2.0, el sprite se dibujará al doble de su anchura normal; si le asignas 0.5, se dibujará a la mitad de su anchura. Lo crucial es comprender qué sucede cuando este factor numérico toma un valor negativo.

En geometría por computadora, multiplicar una coordenada sobre un eje por un escalar negativo genera una reflexión especular respecto al origen de dicho eje. Por consiguiente, si asignamos a image_xscale el valor de -1.0, GameMaker dibuja el sprite con su anchura exacta (100 %), pero completamente reflejado de izquierda a derecha. Si el dibujo original miraba a la derecha, al valer -1.0 mirará exactamente a la izquierda, conservando todas las animaciones y subimágenes sin necesidad de duplicar recursos en el explorador de assets.

El rol determinante del origen del sprite (Origin Point)

El escalado e inversión de una imagen no ocurre en el vacío; se produce siempre tomando como punto de anclaje el punto de origen (origin) definido en la configuración del sprite. Este punto de origen es el par de coordenadas relativas (X, Y) dentro de la imagen que coincide exactamente con la posición x e y de la instancia en la room.

Si el origen de tu sprite está ubicado en la esquina superior izquierda (Top Left, coordenadas 0, 0) y estableces image_xscale en -1, GameMaker reflejará el sprite hacia la izquierda tomando como eje la coordenada X = 0. En consecuencia, todo el cuerpo del personaje se proyectará repentinamente hacia la izquierda de su coordenada física en el mundo, haciendo que parezca 'teletransportarse' o saltar bruscamente la distancia correspondiente al ancho total del sprite cada vez que cambias de dirección.

Para que la inversión visual se perciba natural y sin brincos espaciales, el punto de origen en el eje X debe situarse en el centro geométrico de la masa del personaje. De esta forma, el reflejo se produce a lo largo de la línea vertical media del cuerpo: el brazo derecho pasa a ocupar el lugar del izquierdo y viceversa, manteniendo el torso exactamente en la misma posición de la room.

Configuración del punto de origen en el Sprite Editor

Antes de escribir una sola línea de código para invertir el sprite, debemos asegurarnos de que el recurso gráfico esté debidamente calibrado en la interfaz de GameMaker. Para ello, realiza el siguiente procedimiento con tu sprite de jugador (spr_jugador):

1. En el panel del explorador de recursos (Asset Browser), localiza la carpeta Sprites y haz doble clic sobre spr_jugador para abrir el Sprite Editor en el espacio de trabajo. 2. En el panel superior derecho del editor verás un menú desplegable denominado Origin. Por defecto, GameMaker suele configurarlo en 'Top Left' (0, 0). 3. Despliega la lista y selecciona 'Bottom Centre' (Centro inferior) o 'Middle Centre' (Centro medio). Para un videojuego de plataformas clásico, la convención más recomendada y estandarizada es 'Bottom Centre'. Esto sitúa la coordenada X en la mitad del ancho del sprite y la coordenada Y en el borde inferior de los pies. 4. Si tu sprite tiene una anchura par de 32 píxeles, el centro exacto se ubicará en X = 16. Si su altura es de 32 píxeles, la base estará en Y = 32. Puedes verificar estos valores numéricos directamente en los campos numéricos adyacentes al menú desplegable.

Ubicar el origen en 'Bottom Centre' ofrece una doble ventaja: simplifica la detección de suelo en las futuras lecciones de colisión y salto, y garantiza que la inversión horizontal a través de image_xscale = -1 se realice simétricamente respecto al eje vertical central del personaje.

Implementación de la inversión con GML Code

Recordemos la lógica de movimiento que programamos en la lección anterior dentro del evento Step de obj_jugador. Allí calculábamos la variable local move_x mediante la diferencia entre la tecla derecha y la tecla izquierda, obteniendo un valor de 1 (derecha), -1 (izquierda) o 0 (quieto):

// Fragmento previo de lectura de controles
var _tecla_der = keyboard_check(vk_right) || keyboard_check(ord("D"));
var _tecla_izq = keyboard_check(vk_left) || keyboard_check(ord("A"));

var _move_x = _tecla_der - _tecla_izq;
vel_h = _move_x * vel_caminar;
x += vel_h;

Para actualizar la orientación del sprite, el instinto inicial de muchos principiantes es escribir directamente: image_xscale = _move_x;. Sin embargo, esto introduce un error crítico: cuando el jugador suelta las teclas de dirección, _move_x se convierte en 0. Si asignas image_xscale = 0, el ancho del sprite se multiplica por cero, provocando que el personaje desaparezca por completo de la pantalla mientras está inmóvil.

La solución lógica requiere una condición: solo debemos actualizar image_xscale cuando el jugador realmente esté presionando una dirección de movimiento, es decir, cuando _move_x sea diferente de cero. Si no hay movimiento, image_xscale debe conservar su último valor asignado (sea 1 o -1), permitiendo que el personaje permanezca de pie mirando hacia la dirección a la que se dirigía por última vez.

// Actualización de la orientación horizontal del sprite
if (_move_x != 0) {
    image_xscale = _move_x;
}

Analicemos la elegancia de este bloque de código: - Cuando el jugador pulsa la tecla derecha, _move_x vale 1. Como 1 != 0 es verdadero, image_xscale adopta el valor 1. El sprite se dibuja orientado a la derecha en su escala normal. - Cuando el jugador pulsa la tecla izquierda, _move_x vale -1. Como -1 != 0 es verdadero, image_xscale adopta el valor -1. El sprite se refleja horizontalmente y mira a la izquierda. - Cuando el jugador suelta ambas teclas, _move_x vale 0. La condición 0 != 0 es falsa, por lo que el bloque interno no se ejecuta. image_xscale conserva su valor previo (1 o -1), y el personaje se mantiene visible y mirando correctamente hacia su último destino.

💡 Ten presente que image_xscale no solo invierte la representación visual del sprite, sino también su máscara de colisión (Collision Mask). Si la máscara de tu sprite es asimétrica, invertir la escala modificará la posición de los límites de colisión en la room. Por esta razón, se recomienda utilizar máscaras centradas y simétricas para los personajes jugables.

Manejo de escalas base personalizadas

El código anterior asume que tu personaje fue importado en su tamaño definitivo y que su escala natural en el juego es exactamente 1. No obstante, en muchos desarrollos independientes es común que los sprites se dibujen a baja resolución (por ejemplo, 16x16 píxeles) y se decida ampliar su escala general en el juego a 2.0, o bien reducir un sprite de alta definición a 0.5.

Si simplemente asignas image_xscale = _move_x, forzarás el tamaño a 1 o -1, perdiendo la escala personalizada que habías definido en el evento Create. Para solucionar este inconveniente de forma profesional, creamos una variable que guarde la escala base del personaje.

En el evento Create de obj_jugador, definimos la escala de referencia:

/// Evento Create de obj_jugador
// Variables de movimiento
vel_caminar = 4;
vel_h = 0;

// Factor de escala visual base
escala_base_x = 1.0;
escala_base_y = 1.0;

// Asignación inicial de escala
image_xscale = escala_base_x;
image_yscale = escala_base_y;

Luego, en el evento Step, al momento de actualizar la dirección multiplicamos el signo del movimiento por nuestra escala base:

/// Evento Step de obj_jugador (fragmento de orientación)
if (_move_x != 0) {
    image_xscale = _move_x * escala_base_x;
}

Con este método, si en el futuro decides que tu personaje debe verse el doble de grande (escala_base_x = 2.0), el código asignará automáticamente 2.0 al moverse a la derecha y -2.0 al moverse a la izquierda, preservando siempre la proporción estética elegida sin alterar la lógica de movimiento.