Animador de sprites: previsualiza y exporta animaciones de hojas de sprites

Un animador de sprites es una herramienta que toma una hoja de sprites —una cuadrícula de fotogramas de animación empaquetados en una sola imagen— y la reproduce para que puedas evaluar el tiempo, el espaciado y la silueta antes de que el arte se acerque a un juego. El animador de sprites de Neta Studio lee la hoja, deduce el tamaño de fotograma, la cantidad de columnas y el orden de reproducción a partir de las dimensiones de la imagen, y comienza a reproducir en un canvas del navegador. No se sube nada.

Un fotograma fijo no te dice nada sobre un ciclo de caminata. Necesitas ver el fotograma 3 junto al fotograma 4, la pose de contacto junto a la pose de paso, y si todo se desvía porque una celda está desviada por un píxel. El animador hace eso al cargar y luego te permite corregir a mano el tamaño de fotograma, el orden y los FPS cuando la estimación es incorrecta.

Previsualiza una animación de hoja de sprites

Suelta un PNG o WebP en el canvas. El animador lee el ancho y el alto intrínsecos, luego infiere una cuadrícula plausible: factoriza las dimensiones y busca una cantidad de columnas entera pequeña (de 2 a 16) que produzca celdas casi cuadradas en tamaños de sprite comunes. Una hoja de 512×512 con 4 columnas de fotogramas de 128px, una hoja de 384×256 con 6 columnas de fotogramas de 64px — ambas dan con la estimación correcta la mayoría de las veces. Una hoja de 300×300 no lo hace, porque 300 no se divide exactamente entre 16/32/64, así que ajustarás el tamaño de fotograma manualmente.

La reproducción se ejecuta en un canvas HTML con `imageSmoothingEnabled = false`, así que los píxeles se mantienen nítidos a escala entera. Escalar a 4× u 8× es vecino más cercano, que es lo que quieres para pixel art: un fotograma de 32px mostrado a 8× es un sprite de 256px en pantalla con cada píxel de origen expandido a un bloque de 8×8. El suavizado bilineal los convertiría en una papilla gris.

Como todo ocurre en el canvas, el archivo nunca sale de la máquina. No hay subida, ni cola, ni cuenta. Puedes soltar la hoja inédita de un cliente y se queda en la pestaña. La contrapartida es que las hojas muy grandes están limitadas por la memoria del navegador: un PNG de 4096×4096 es de aproximadamente 67MB decodificado a RGBA, lo cual está bien en computadora de escritorio y es ajustado en una tablet de gama baja.

Configura el tamaño de fotograma, el orden y los FPS

Tres ajustes deciden lo que realmente ves: el tamaño de fotograma, el orden de reproducción y la velocidad. Si uno de ellos está mal, la animación se ve como basura por razones que no tienen nada que ver con el arte.

El tamaño de fotograma es el ancho y el alto de una celda en píxeles. El animador ofrece 16, 32, 64 y 128 como opciones estándar, más un valor personalizado. Este debe dividir las dimensiones de la hoja de forma exacta. Un fotograma de 128px en una hoja de 400px de ancho te da 3.125 columnas, que el renderizador redondea hacia abajo a 3 y deja una franja de 16px de píxeles sin usar a la derecha; esos píxeles aparecen como una rebanada del fotograma vecino en la última columna. Si tus fotogramas se ven sesgados en el borde derecho, tu tamaño de fotograma no divide el ancho de tu hoja.

El orden es row-major o column-major. Row-major (el valor predeterminado común, y lo que producen la mayoría de los exportadores) lee de izquierda a derecha y luego pasa a la siguiente fila. Column-major lee de arriba a abajo y luego avanza a la derecha. Una hoja de caminata exportada en columnas pero leída como filas reproduce el fotograma 1, luego el fotograma 5, luego el fotograma 9: un paso que salta un cuarto de la animación en cada tic. La solución es un interruptor, pero tienes que reconocer el síntoma: movimiento que se salta fotogramas.

Los FPS y `image_speed` son perillas diferentes que la gente confunde. Los FPS son cuántos fotogramas avanza el reproductor por segundo. `image_speed` (el término de GameMaker, y el que la gente busca cuando llega) es un multiplicador de la tasa de animación del sprite en relación con la velocidad de la sala; 1.0 significa que la hoja se reproduce a un fotograma por paso de juego, 0.5 significa cada dos pasos. En el animador del navegador, configura los FPS directamente. Si estás portando un sprite de GameMaker y tu personaje se anima al doble de velocidad, revisa `image_speed` antes de volver a cortar la hoja.

Ciclos de caminata, reposos y ataques

Tres animaciones concentran la mayor parte de la legibilidad de un personaje, y cada una tiene una forma distinta de fallar. Ninguna falla de la misma manera, así que una herramienta de previsualización que solo reproduce en bucle un clip genérico pierde el punto. Abajo, los modos de falla están separados por tipo de animación.

La regla para las tres: previsualiza a la escala final del juego, no con zoom. Una caminata que se lee a 8× a menudo se derrumba a 1× porque el levantamiento de pierna es de 2 píxeles y el contraste entre el pie levantado y el suelo es demasiado bajo. Reduce la previsualización al tamaño que el jugador realmente verá antes de aprobar algo.

Una hoja de caminata de cuatro direcciones normalmente se ordena abajo, izquierda, derecha, arriba: abajo mirando hacia la cámara, arriba mirando hacia otro lado, izquierda y derecha como el par horizontal. Algunos exportadores usan abajo, arriba, izquierda, derecha. Si tu personaje hace moonwalk cuando presionas arriba, las filas están intercambiadas y estás reproduciendo la fila de abajo para una entrada de arriba. Esa es una corrección de 2 líneas en el reproductor, no una reexportación.

Para movimiento en 8 direcciones necesitas diagonales: abajo-izquierda, abajo-derecha, arriba-izquierda, arriba-derecha. Con cuatro direcciones espejadas horizontalmente obtienes 4 filas de forma económica (izquierda y derecha son el mismo arte volteado, por eso muchas hojas tienen 4 filas y no 8). El movimiento diagonal con solo 4 direcciones obliga al motor a elegir la orientación más cercana, que salta visiblemente en una entrada diagonal. Si tu juego admite movimiento diagonal, presupuesta 8 filas distintas o acepta el salto.

Cantidad de fotogramas: 6 u 8 fotogramas por dirección es común a 16–32px. Con 4 fotogramas, una caminata se ve saltarina pero se lee en tamaños pequeños; con 10 fotogramas, el espaciado entre las poses de contacto y de paso se vuelve tan ajustado que necesitas sincronización por fotograma, algo que un reproductor de FPS uniforme no puede expresar. El animador del navegador reproduce de forma uniforme, así que arma tu hoja con espaciado uniforme si planeas previsualizarla aquí.

El reposo es la animación que el jugador mira fijamente cuando no pasa nada, así que es la que más peso tiene por fotograma. La estructura estándar es un bucle de respiración: el pecho sube, los hombros se elevan un píxel, el peso se desplaza y vuelve. El aplastamiento y estiramiento es lo que evita que parezca un sprite estático siendo empujado. En el pulso de bajada, comprime el personaje uno o dos píxeles en vertical y ensánchalo un píxel; en el pulso de subida, haz lo contrario.

La falla común es pasarse con el aplastamiento. Un personaje de 32px aplastado 4px equivale al 12.5% de su altura y se lee como gelatina. Un píxel de estiramiento vertical en un sprite de 32px es el 3% y se lee como respiración. Si tu reposo parece que el personaje rebota en un trampolín, probablemente escalaste toda la celda en lugar del personaje dentro de ella: el fotograma cambió de tamaño con respecto a la cuadrícula.

Previsualiza el reposo a los mismos FPS con los que lo lanzarás. Un reposo a 6 FPS se desvía; a 12 FPS respira. Como un reposo lento es en su mayoría la misma imagen con pequeños desplazamientos, el punto de bucle es lo que realmente estás revisando: el último fotograma debe pasar limpiamente al primero sin un salto en la posición de los hombros.

Un ataque consta de tres fases con una sincronización desigual, no una ráfaga uniforme. La anticipación retrocede: el brazo se prepara, el cuerpo se contrae, a menudo 2–3 fotogramas sostenidos o en desaceleración. El impacto es uno o dos fotogramas, la parte más rápida, donde el arma alcanza su máxima extensión y la pose es la más extrema. La recuperación es el regreso, y es donde los aficionados cortan demasiado pronto. Un ataque de 6 fotogramas con 2 de anticipación, 1 de impacto y 3 de recuperación se lee; un ataque de 6 fotogramas dividido en partes iguales 2-2-2 se lee como un empujón.

Como el animador reproduce de forma uniforme, el truco es sostener la pose de anticipación duplicando fotogramas en lugar de cambiar la sincronización por fotograma. Dos fotogramas idénticos de anticipación te dan la pausa. Un fotograma de impacto te da el golpe seco. Esta es la misma técnica que se usa en hojas hechas a mano y sobrevive a un port a cualquier motor.

Las animaciones de lanzamiento añaden un segundo problema: el efecto tiene que aparecer y desaparecer en un fotograma específico. Si tu hoja incluye el proyectil o el círculo mágico integrados en el fotograma, el reproductor tiene que saber cuándo generar el objeto real, normalmente el primer fotograma de impacto. Si el efecto es un objeto separado, mantén la hoja limpia y sincroniza la generación con el índice del fotograma de impacto, no con un segundo de reloj.

Genera un ciclo de caminata a partir de un prompt

Crear a mano ocho filas de un ciclo de caminata son horas de trabajo, y el resultado es una hoja que todavía hay que revisar en un reproductor. Agent Sprite Forge invierte eso: escribes una descripción del personaje y produce la hoja. Una descripción, ocho direcciones, la hoja llega ya cortada en una cuadrícula con fotogramas transparentes y guías de anclaje en los pies para que el personaje no oscile al colocarlo.

Las guías de anclaje importan más que el arte en la primera pasada. Un ciclo de caminata donde los pies no comparten una línea de suelo parece que el personaje está en un trampolín, sin importar lo buena que sea el dibujo. Como los fotogramas generados llevan el anclaje, puedes soltar la hoja en el animador, reproducirla y ver que la línea de suelo se mantiene; esa es la comprobación que una imagen estática no puede darte.

La salida generada es una hoja de sprites normal: filas y columnas, fondo transparente, tamaños de fotograma estándar. Nada de ella está atado a Neta Studio. Expórtala, suéltala en el animador para una pasada de previsualización, vuelve a cortarla si tu motor quiere una sola fila y continúa. Si el generador te da una dirección que no necesitas (por ejemplo, atrás-izquierda, porque tu juego solo admite 4 direcciones), ignora esa fila en el paso de recorte.

Software de animación de sprites: qué comparar

La herramienta correcta depende de lo que ya tengas a mano. Una hoja terminada y una pregunta sobre sincronización es un problema distinto de un lienzo en blanco y ningún personaje. La tabla de abajo relaciona el punto de partida con la herramienta que encaja, e incluye los casos en los que el animador propio del motor es la respuesta correcta y un reproductor de terceros es redundante.

Una regla general: si estás previsualizando, usa un reproductor. Si estás creando, usa un editor. Si estás generando, usa un generador. La mayor confusión viene de usar un reproductor para crear: no puedes corregir una mala pose de contacto en una herramienta de reproducción, ni corregir la sensación de sincronización en una herramienta de dibujo que no tiene reproducción.

Exporta un GIF o una hoja recortada de nuevo

Dos exportaciones cubren la mayoría de los casos. La primera es un GIF animado: el bucle actual, a los FPS actuales, a la escala actual, como un solo archivo. Un GIF no tiene entorno de ejecución y se reproduce en cualquier ventana de chat, herramienta de revisión o gestor de incidencias. Eso es lo que envías a un colaborador que no va a instalar nada. El costo es una paleta de 256 colores, que está bien para la mayoría del pixel art y muestra bandas visibles en degradados suaves; si tu sprite tiene un brillo suave, espera que se posterice.

La segunda es una hoja recortada de nuevo. El animador toma la hoja cargada y sus ajustes de fotograma y escribe una nueva imagen con un empaquetado diferente: una sola fila para un flipbook, o cuatro filas para un conjunto direccional, o la misma cuadrícula con un tamaño de celda distinto. El recorte de nuevo es sin pérdida cuando el tamaño de celda sigue igual y solo estás reordenando. Cuando cambias el tamaño de celda, la herramienta remuestrea, y cualquier remuestreo de pixel art que no sea un múltiplo entero suavizará los bordes.

Un recorte común es el flipbook: cada fotograma de una animación dispuesto de izquierda a derecha en una sola fila, sin saltos de línea. Algunos motores y técnicas de sprites CSS quieren esa forma. Toma una caminata de 6 fotogramas, recórtala a una fila de 6, y la tira es 6× el ancho del fotograma por 1× el alto del fotograma. Si necesitas esa tira como GIF, el conversor de hoja de sprites a GIF hace la misma exportación de bucle desde una hoja empaquetada.

Configura el tamaño de fotograma y la cantidad de columnas antes de exportar. El exportador escribe usando la cuadrícula que configuraste en el reproductor, no la que dedujo al cargar. Si sobrescribiste la estimación para corregir un sesgo y no volviste a revisar la cantidad de fotogramas, la hoja exportada hereda la cantidad incorrecta.

Entra al mundo al que pertenece

Un sprite es un personaje sin un lugar donde pararse. El último paso es el que nadie más ofrece: toma la hoja que acabas de crear y ponla en un mundo por el que alguien pueda caminar: una isla pequeña, un planeta, una esquina lluviosa. Cada mundo de este sitio se creó a partir de una descripción escrita y se publicó como una página que puedes jugar.

Preguntas frecuentes