Cómo hacer un sprite sheet: la guía completa para principiantes

Esta guía explica cómo hacer un sprite sheet partiendo de cero: qué es realmente un sprite sheet, los tres números que debes decidir antes de dibujar, cómo dibujar y exportar los fotogramas en Aseprite, cómo empaquetar fotogramas sueltos en una sola imagen y los ajustes exactos de importación para Unity, Godot y RPG Maker. Termina con los errores que hacen que una hoja parezca amateur y cómo evitar cada uno de ellos.

Si ya tienes los fotogramas y solo quieres empaquetarlos, salta a empaquetar los fotogramas en una sola hoja. Si quieres que te dibujen los fotogramas, el generador de sprites con IA del final se encarga de eso.

¿Qué es un sprite sheet?

Un sprite sheet es una sola imagen que contiene todos los fotogramas de una animación, dispuestos en una fila o en una cuadrícula de celdas del mismo tamaño. Tu motor dibuja una ventana sobre una celda a la vez, desplaza la ventana a la siguiente y el personaje camina.

La razón para tomarse la molestia, en lugar de entregar ocho PNG separados, es que la GPU vincula una sola textura en vez de ocho. En un juego 2D con cuarenta entidades animadas en pantalla, esa diferencia se nota en el tiempo por fotograma. También significa un solo archivo que versionar y un solo archivo que reemplazar cuando cambia la dirección de arte.

El formato está resuelto: celdas uniformes, sin huecos, un solo archivo. Lo que no está resuelto, y lo que los principiantes hacen mal, es el puñado de números que eliges antes de empezar.

Paso 1: decide los números primero

Tres decisiones condicionan todo lo que viene después. Acértalas ahora y el resto de este tutorial es mecánico. Fállalas y tendrás que redibujar cada fotograma.

Número de fotogramas: 6, 8 o 12

Esta es la decisión que más cambia cómo se siente la animación.

6 fotogramas bastan para un ciclo de caminata si el personaje tiene piernas sencillas y el juego se ve de lejos. Los RPG con vista cenital y sprites de 32px llevan décadas saliendo al mercado con 4 fotogramas y nadie se ha dado cuenta.
8 fotogramas es el estándar de trabajo. Contacto, bajada, paso, subida, dos veces, en espejo. Te da un cambio de peso real y se divide limpiamente si más adelante quieres una versión de 4 fotogramas con menos detalle.
12 fotogramas empieza a parecer animación en lugar de movimiento. Úsalo cuando el personaje es grande en pantalla, cuando una capa o el pelo necesitan ondear, o para una acción única que el jugador realmente va a mirar: una muerte, el lanzamiento de un hechizo, una transformación. En un ciclo de caminata que se repite durante seis horas de juego, doce fotogramas son en su mayoría trabajo desperdiciado.

Una regla que se sostiene: si el bucle se reproduce constantemente, invierte tus fotogramas en legibilidad. Si se reproduce pocas veces, inviértelos en suavidad.

Tamaño de celda: elígelo desde la pantalla hacia atrás

El tamaño de celda son las dimensiones en píxeles de un fotograma. Las opciones habituales son 16, 32, 64, 96 y 128.

No lo elijas por «cuánto detalle quiero que tenga». Elígelo por cuántos píxeles ocupará el sprite en la pantalla del jugador. Toma un objetivo de 1920×1080. Si tu cámara muestra 30 tiles de ancho, cada tile mide 64 píxeles de pantalla. Un personaje de un tile y medio de alto pide unos 96 píxeles de arte. Dibujar a 32 y escalar 3× te da el aspecto de píxel grueso a propósito. Dibujar a 128 y reducir te da papilla, porque reducir pixel art destruye los bordes duros que lo hacen pixel art.

El fallo a evitar es una escala de visualización que no sea un número entero. El arte de 32px a 2× se ve nítido. El arte de 32px a 2,4× tiembla en cada diagonal, y te molestará para siempre una vez que lo veas.

Perspectiva: elígela antes del primer fotograma

Cuatro perspectivas cubren casi todo en 2D:

Vista lateral: perfil puro. Plataformas, juegos de lucha, endless runners. Una dirección, a veces en espejo.
Vista cenital (top-down): la cámara mira directamente hacia abajo. Twin-stick shooters y roguelikes. Normalmente cuatro direcciones.
RPG de cuadrícula: la vista de tres cuartos en la que el personaje mira a la cámara pero se mueve sobre una cuadrícula. Es el aspecto de RPG Maker. Cuatro direcciones.
Isométrica: la vista de tres cuartos en rombo. La más costosa, porque un ciclo de caminata suele necesitar ocho direcciones.

La perspectiva no es un filtro que aplicas después. Determina qué extremidades se ven, dónde cae la sombra y cuántas variantes direccionales te debes a ti mismo. Un personaje de vista lateral necesita un ciclo de caminata; un personaje de RPG de cuadrícula necesita cuatro.

Paso 2: dibuja los fotogramas en Aseprite

Aseprite es la herramienta estándar para animación en pixel art y el flujo de trabajo de abajo es el que usan la mayoría de los artistas de sprites. Cualquier editor con fotogramas y papel cebolla (Piskel, Pyxel Edit, LibreSprite) funciona igual, incluido el pixel art maker gratuito de este sitio, que funciona en el navegador sin instalar nada.

Crea el lienzo a tu tamaño de celda. File → New, luego pon el ancho y el alto al tamaño de celda que elegiste arriba (por ejemplo 32×32) con fondo transparente. No dibujes en un lienzo más grande para recortar después; el tamaño de celda es el contrato con tu motor.
Dibuja la pose de contacto. El fotograma 1 es el personaje con un pie adelante tocando el suelo. Clava aquí la silueta, porque todos los demás fotogramas son una variación de ella.
Añade fotogramas. Frame → New Frame (o Alt+N) duplica el fotograma actual para que ajustes en lugar de redibujar. Construye la caminata como contacto → bajada → paso → subida, y luego repite en espejo para la otra pierna.
Activa el papel cebolla. View → Show Onion Skin superpone los fotogramas anterior y siguiente como fantasmas. Así mantienes la cabeza a la misma altura y los pies sobre la misma línea en todos los fotogramas.
Previsualiza el bucle. Pulsa Enter para reproducir. Observa los pies y la parte superior de la cabeza. Si alguno oscila de forma irregular, corrígelo ahora que es un fotograma y no una hoja.
Exporta la hoja. File → Export Sprite Sheet (Ctrl+E). En la pestaña Layout elige Horizontal Strip para una sola fila, o By Rows con un número fijo de columnas para una cuadrícula. En la pestaña Borders, deja Trim desactivado (las celdas uniformes importan más que un recuadro ajustado) y añade 1–2 px de Spacing si tu motor filtra texturas. En la pestaña Output, activa JSON Data si quieres los rectángulos de cada fotograma para motores como Phaser.

La exportación te da un único PNG con todos los fotogramas en celdas iguales. Ese es tu sprite sheet. Si dibujaste en una herramienta que solo exporta imágenes separadas, el siguiente paso las empaqueta.

Paso 3: empaqueta los fotogramas en una sola hoja

Muchos flujos de trabajo terminan con una carpeta de PNG sueltos: de walk_01.png a walk_08.png de un pack de sprites, fotogramas renderizados desde un modelo 3D o la salida de un generador. Tienen que convertirse en un solo archivo con celdas uniformes.

Puedes hacerlo a mano en cualquier editor de imágenes: crea un lienzo de columnas × anchoCelda por filas × altoCelda y coloca cada fotograma en un múltiplo exacto del tamaño de celda. Funciona, pero es tedioso y es fácil equivocarse por un píxel.

La vía rápida es el sprite sheet maker gratuito de este sitio. Suelta los fotogramas dentro y los ordena por nombre de archivo, fija la celda al fotograma más grande, alinea todos los fotogramas sobre una línea base común y te entrega un PNG más el tamaño de celda para escribirlo en tu motor. No se sube nada; el empaquetado ocurre en tu navegador. Si lo que tienes es un GIF animado en lugar de fotogramas sueltos, el conversor GIF to sprite sheet extrae cada fotograma y los exporta como una sola hoja PNG.

Sea cual sea la vía que elijas, comprueba dos cosas antes de seguir: cada celda tiene exactamente el mismo tamaño y los pies del personaje están sobre la misma línea en todos los fotogramas. Lo segundo es invisible en una imagen estática y evidente en cuanto la animación se reproduce.

Paso 4: importa la hoja en tu motor

Todos los motores quieren lo mismo de ti: una hoja donde cada celda tiene el mismo tamaño, sin huecos a menos que le indiques el tamaño del hueco. Aquí es donde están los ajustes.

Unity

Selecciona el PNG. En el Inspector pon Texture Type en Sprite (2D and UI) y Sprite Mode en Multiple.
Para pixel art pon Filter Mode en Point (no filter) y Compression en None. El filtro bilineal por defecto es lo que hace que el pixel art se vea borroso, y a todo el mundo le pasa una vez.
Pon Pixels Per Unit en tu tamaño de celda para que una celda equivalga a una unidad del mundo, y haz clic en Apply.
Abre el Sprite Editor, elige Slice → Grid By Cell Size, introduce el ancho y el alto de tu celda (y el padding si añadiste espaciado) y corta.
Arrastra los sprites resultantes juntos a la Scene para crear un Animation Clip, o construye uno en la ventana Animation.

Godot 4

Añade un nodo AnimatedSprite2D y crea un recurso SpriteFrames nuevo en su propiedad Sprite Frames.
En el panel SpriteFrames haz clic en Add frames from a Sprite Sheet, elige tu PNG y pon Horizontal en tu número de columnas y Vertical en tu número de filas. Godot corta la cuadrícula por ti.
Selecciona los fotogramas que pertenecen a la animación, ajusta los FPS y activa Loop.
Para pixel art abre Project Settings → Rendering → Textures y pon Default Texture Filter en Nearest. Pon también el modo de estirado del proyecto en canvas_items con escalado entero para que tu 2× se quede exactamente en 2×.

RPG Maker MV / MZ

RPG Maker es más estricto que los otros dos porque no te deja elegir la disposición. Una hoja de personaje es una cuadrícula fija:

Cada personaje ocupa 3 columnas × 4 filas: tres fotogramas de caminata por dirección, y las filas son abajo, izquierda, derecha, arriba en ese orden.
MV y MZ usan celdas de 48×48 por defecto, así que un bloque de un solo personaje mide 144×192 píxeles.
Una hoja estándar contiene 8 personajes en una disposición de bloques de 4×2 (576×384 píxeles).
Añade el prefijo $ al nombre del archivo para indicarle al motor que el archivo contiene un solo personaje en lugar de ocho. Añade el prefijo ! para desactivar el pequeño desplazamiento hacia arriba que el motor aplica a los personajes, algo que quieres para objetos y puertas.

Suelta el archivo en img/characters/ y aparecerá en el selector de personajes. Si tus fotogramas no son de 48×48, redimensiona las celdas (no el arte) para que la cuadrícula coincida; RPG Maker no cortará una hoja arbitraria.

Phaser (extra)

this.load.spritesheet("hero", "hero.png", { frameWidth: 32, frameHeight: 32 });
this.anims.create({
  key: "walk",
  frames: this.anims.generateFrameNumbers("hero", { start: 0, end: 7 }),
  frameRate: 10,
  repeat: -1,
});

Pon pixelArt: true en la configuración del juego para que el renderizador use escalado por vecino más cercano.

Cinco errores que hacen que una hoja parezca amateur

Celdas no uniformes. Recortar cada fotograma a su recuadro delimitador parece ordenado y rompe por completo el corte por cuadrícula. Mantén las celdas uniformes y deja que el espacio vacío esté vacío.
Línea de suelo inconsistente. Si los pies están en y=60 en el fotograma 1 y en y=58 en el fotograma 5, el sprite oscila al caminar. Todos los fotogramas necesitan la misma línea base.
Sangrado en los bordes transparentes. Cuando la GPU muestrea un píxel en el borde de una celda, el filtrado bilineal arrastra la celda vecina y obtienes un fleco de un píxel del color equivocado. Usa filtrado por punto, o añade un margen transparente de 1–2 px alrededor de cada celda e indícale el padding al motor.
Escala de visualización no entera. El arte de 32px mostrado a 2,4× tiembla. Elige un tamaño de cámara que te dé exactamente 2×, 3× o 4×.
Silueta que se desvía. El personaje se vuelve sutilmente más gordo o más delgado entre fotogramas porque cada uno se dibujó desde cero. Duplica fotogramas y ajusta en lugar de redibujar, y usa el papel cebolla siempre.

O sáltate el trabajo manual

Dibujar a mano ocho fotogramas consistentes es una habilidad real, y es la razón por la que la mayoría de los desarrolladores en solitario lanzan con arte provisional. El cuello de botella no es la idea; es mantener estables las proporciones, la paleta y la silueta de un personaje en todos los fotogramas.

Ese problema de consistencia es justo en lo que la generación es buena. El generador de sprites de SpriteGen toma una descripción de texto, te deja elegir la perspectiva, el estilo, el número de fotogramas y el tamaño de celda de esta guía, y devuelve un sprite sheet terminado con los fotogramas ya alineados en una cuadrícula uniforme. Es gratis para probar, sin registro, y tarda alrededor de un minuto. Si necesitas un solo sprite estático, como un objeto, un icono o un NPC, en lugar de una animación, el AI sprite maker lo dibuja como un PNG de pixel art con fondo transparente.

Uses lo que uses para hacerlo, los números de arriba son los que hay que decidir primero. Es mucho más barato acertarlos al principio que corregirlos después de haber construido la máquina de estados de animación en torno a ellos.