Una hoja que se ve bien como cuadrícula todavía puede dar saltos, deslizarse o trabarse en movimiento. Abrir el motor para revisar cada ajuste es lento. Este previsualizador reproduce la hoja a los FPS que definas, con zoom perfecto al píxel, papel cebolla para revisar el espaciado entre fotogramas, ping-pong para los idles y reproducción por fila para hojas que contienen varias animaciones o direcciones.
Cómo usar la herramienta Previsualizador de animaciones
- Suelta una sprite sheet (se detecta la cuadrícula), varios PNG de fotogramas o un GIF animado.
- Corrige las filas y columnas si hace falta. En hojas de varias filas, elige una fila para reproducir una sola animación o dirección.
- Define los FPS. La vista previa también muestra los milisegundos por fotograma, que es lo que piden la mayoría de los motores.
- Avanza fotograma por fotograma con las flechas, activa el papel cebolla para ver el fotograma anterior y prueba el ping-pong.
- Haz zoom con escalado perfecto al píxel y cambia el fondo para revisar el sprite sobre oscuro, claro y verde.
- Exporta un GIF con la misma velocidad, ping-pong y fondo.
Qué obtienes
- Vista previa en vivo a 1–60 fps con avance por fotograma y atajos de teclado.
- GIF animado de 1× a 8× con fondo transparente o sólido, listo para un devlog o una página de tienda.
Con qué motores funciona
- Usa los FPS que se vean bien aquí como velocidad de animación en Godot (velocidad de SpriteFrames), Unity (Sample Rate), GameMaker (velocidad del sprite) o Phaser (frameRate).
- La reproducción por fila refleja cómo la mayoría de los motores guardan las hojas de 4 y 8 direcciones: una fila por dirección.
Consejos de quienes la usan para hacer juegos
- Los ciclos de caminata suelen verse bien entre 8 y 12 fps; las carreras, entre 12 y 16; los idles, entre 4 y 8.
- El papel cebolla muestra el fotograma anterior en azul. Si una extremidad salta mucho entre dos fotogramas, agrega un intermedio.
- Si el personaje se desliza, los fotogramas no están anclados igual. Vuelve a cortar con alineación abajo en el Cortador de sprite sheets.
- Revisa también sobre un fondo claro. Los contornos oscuros que se ven bien sobre negro pueden desaparecer en mapas oscuros del juego.
Casos de uso
- Revisar los tiempos de una animación antes de importarla a un motor.
- Revisar hojas de un artista o de un pack de assets.
- Hacer un GIF de una hoja para redes sociales o un pitch deck.
- Comparar lado a lado, fila por fila, las direcciones de un personaje de 8 direcciones.
Preguntas frecuentes
¿Cómo controlo la reproducción con el teclado?
Espacio reproduce y pausa. Las flechas izquierda y derecha avanzan un fotograma y pausan.
¿Qué es el papel cebolla?
Muestra el fotograma anterior de forma tenue (teñido de azul) debajo del actual, para que veas cuánto se mueve cada parte entre fotogramas y detectes saltos.
¿Puede reproducir solo una fila de la hoja?
Sí. Cuando la hoja tiene varias filas, elige una fila para reproducir solo esa animación o dirección, o Todas para reproducir todos los fotogramas en orden.
¿Admite GIF y fotogramas sueltos?
Sí. Suelta un GIF animado para reproducir sus fotogramas, o suelta varios PNG para reproducirlos en orden natural de nombre de archivo.
¿Se sube mi hoja?
No. La vista previa corre por completo en tu navegador.
¿Por qué mi animación se ve borrosa en otros visores?
La mayoría de los visores escalan con suavizado. Este escala por vecino más cercano, igual que debería estar configurado un juego de pixel art, así que lo que ves aquí es lo que ven los jugadores.