Previsualizador de animaciones de sprites
Prueba tu animación sin abrir el motor: sube el spritesheet, ajusta la rejilla y dale al play. FPS en vivo, frame a frame, ping-pong, zoom pixelado y exportación a vídeo. Tus archivos no salen de tu equipo.
Arrastra tu spritesheet aquí
o haz clic para seleccionarlo · también acepta el atlas.json de nuestro generador de atlas
Cómo trocear el spritesheet
En hojas con varias animaciones, reproduce solo una fila.
Sáltate etiquetas o celdas vacías del principio.
Por si sobran celdas vacías al final.
✓ Coordenadas cargadas desde atlas.json — la rejilla se ignora
1/1
Animación de sprites, explicada desde cero
Los conceptos que están detrás de cada control de esta herramienta.
¿Cuántos FPS debe tener mi animación?+
No confundas los FPS de la animación con los del juego: el juego puede correr a 60 mientras el sprite cambia de frame 12 veces por segundo. El pixel art clásico vive entre 8 y 15 FPS — de hecho, gran parte de su encanto está en ese ritmo. Animaciones rápidas (un dash, un golpe) funcionan con pocos frames a 15-20 FPS; los ciclos de andar suelen ir a 8-12. La regla de oro: prueba, mira y ajusta — exactamente lo que este previsualizador te deja hacer sin compilar nada.
¿Qué es el modo ping-pong y cuándo usarlo?+
En el bucle normal la animación va del frame 1 al N y vuelve a empezar de golpe. En ping-pong, al llegar al final se reproduce hacia atrás (1→N→1), creando un vaivén continuo. Es perfecto para movimientos pendulares — una antorcha, una respiración, una planta meciéndose — porque te ahorra dibujar la mitad de los frames: con 5 dibujos consigues un ciclo de 8. Para ciclos direccionales como andar o correr, en cambio, usa el bucle normal.
¿Por qué mi pixel art se ve borroso al ampliarlo?+
Porque el escalado por defecto de casi todo (navegadores, motores) usa filtrado bilineal: mezcla píxeles vecinos para suavizar, ideal para fotos y fatal para pixel art. Lo que quieres es escalado por vecino más cercano (nearest neighbor), que multiplica cada píxel sin mezclar — el interruptor "Píxel nítido" de arriba. En Unity es el Filter Mode "Point" de la textura; en Godot, desactivar el filtro; en CSS, image-rendering: pixelated. Y amplía siempre en múltiplos enteros (×2, ×3, ×4) para que cada píxel quede perfecto.
¿Spritesheet en rejilla o atlas con coordenadas?+
Un spritesheet en rejilla tiene todos los frames del mismo tamaño, ordenados en filas y columnas: sencillo de trocear (esta herramienta lo hace con dos números) pero desperdicia espacio si los frames varían de tamaño. Un atlas con coordenadas (como el que genera nuestro generador de atlas) empaqueta frames de cualquier tamaño y guarda la posición de cada uno en un JSON — más eficiente en memoria, y este previsualizador lo lee directamente: suelta la imagen y el .json juntos.
¿Cómo llevo esta animación a Unity o Godot?+
En Unity: importa el spritesheet, ponlo en Sprite Mode "Multiple", trocéalo con el Sprite Editor (Slice → Grid by Cell Count con tus columnas y filas), selecciona los frames resultantes y arrástralos a la escena — Unity te creará la animación, donde ajustas los "Samples" al FPS que hayas decidido aquí. En Godot: un AnimatedSprite2D con SpriteFrames, "Add frames from Sprite Sheet", defines la misma rejilla y el FPS. En ambos casos, este previsualizador te ahorra el ciclo de prueba y error: llegas al motor sabiendo ya el FPS y el orden que funcionan.