Cómo hacer un sprite animado
Elige el tamaño del lienzo
Abre el botón de tamaño y elige 16×16, 32×32, 48×48 o 64×64, o arrastra los deslizadores hasta cualquier tamaño de 4 a 100 píxeles por lado. El lienzo empieza en 32×32 con fondo transparente, que se muestra como un tablero de ajedrez.
Dibuja el primer fotograma
Usa el lápiz, el relleno, la goma y el cuentagotas sobre una paleta de pixel art de 256 colores, escribe cualquier color hexadecimal o carga una paleta de Lospec. Los botones de tono junto al color actual te dan el siguiente tono más oscuro y más claro del mismo matiz, que es como se construye el sombreado de un sprite.
Añade fotogramas y anima
Duplicar copia el fotograma en el que estás, así que para el siguiente paso del movimiento solo cambias los píxeles que se mueven. Nuevo fotograma empieza en blanco. La vista previa reproduce los fotogramas en orden a la velocidad que elijas, y el papel cebolla muestra el fotograma anterior tenue por debajo.
Exporta un GIF o un sprite sheet
Exportar animación descarga un GIF en bucle a escala 1×, 2×, 4× u 8×, o un sprite sheet PNG con los fotogramas en una fila o en cuadrícula. Cada píxel sigue siendo un cuadrado nítido y los píxeles vacíos siguen siendo transparentes.
Qué hace el creador de sprites
Hasta 32 fotogramas
Añade, duplica, borra y reordena fotogramas desde la tira encima del lienzo. Las teclas coma y punto pasan al fotograma anterior y al siguiente, y deshacer cubre los cambios de fotogramas igual que el dibujo.
Papel cebolla
El fotograma anterior se transparenta, con poca opacidad, por los píxeles vacíos del que estás dibujando, así cada pose se dibuja contra la anterior. Apágalo cuando quieras juzgar un fotograma por sí solo.
Vista previa en vivo de 1 a 24 fps
Una pequeña vista previa junto a los fotogramas reproduce la animación mientras la editas. Cambia la velocidad y la vista previa, el GIF y el sprite guardado usan el nuevo ritmo.
Exportación a GIF y sprite sheet
Un GIF animado en bucle para compartir, o un sprite sheet PNG para un motor de juego, sin huecos entre fotogramas para que se corte limpio por tamaño de fotograma. Un solo fotograma se puede seguir exportando a exactamente 1 píxel por celda.
Un editor de píxeles de verdad
Selección rectangular y de lazo que mueve, voltea y gira, copiar y pegar entre fotogramas, borrado de área, reemplazo de color, una imagen de referencia para calcar y 50 pasos de deshacer.
Se guarda mientras dibujas
Tu sprite se conserva en este navegador mientras dibujas. Guárdalo en tu cuenta para abrirlo en otro dispositivo, o copia el código del patrón, que lleva todos los fotogramas y la velocidad.
Cómo hacer un sprite que se lea a tamaño de juego
Elige primero el tamaño y dibuja para él
Un lienzo de sprite no es una imagen que luego se reduce: el tamaño que eliges es la resolución que ve el jugador. A 16×16 un personaje es una silueta con dos píxeles por ojos, por eso ese tamaño va bien para objetos, iconos y héroes pequeños. A 32×32 hay sitio para una cara, una mano reconocible y una rampa de sombreado. A 64×64 estás más cerca de la ilustración, y cada fotograma de animación cuesta cuatro veces los píxeles de uno de 32×32.
Decide el tamaño a partir de los demás sprites de tu juego, no del detalle que te gustaría. Un tileset en una cuadrícula de 16 píxeles pide personajes de 16 o 32 píxeles de alto. Si un sprite tiene que crecer, el panel de tamaño mantiene el dibujo pegado al borde o la esquina que elijas, y cada fotograma se redimensiona igual, así la animación sigue alineada.
Menos colores, un sprite más fuerte
La mayoría de los buenos sprites usan entre cuatro y dieciséis colores. Una paleta pequeña obliga a que cada color tenga una función: un contorno, una base, una o dos sombras, un brillo. Elige un color base y usa los botones «más oscuro» y «más claro» de al lado para crear una rampa; desplazar un poco el matiz hacia el azul en las sombras y hacia el amarillo en los brillos se lee como luz y no como gris.
El contorno separa el sprite de cualquier fondo sobre el que caiga. Un contorno oscuro completo es la opción más segura para sprites pequeños; en los más grandes, un contorno que toma el color de la forma que rodea (contorno selectivo) se ve más suave. Evita sombrear cada forma desde los bordes hacia dentro (el «pillow shading»), porque aplana el volumen. La luz viene de un lado y la sombra cae del otro.
Animar: fotogramas, ritmo y papel cebolla
Los bucles cortos llevan la mayor parte de la animación de un juego. Una respiración o un balanceo de espera funciona con dos a cuatro fotogramas a cuatro a seis por segundo. Un ciclo de caminar suele llevar de cuatro a ocho fotogramas a ocho a doce: las dos poses de contacto en las que un pie toca el suelo y las poses de paso entre ellas. Un golpe o un ataque se entiende mejor con un fotograma lento de anticipación, uno o dos fotogramas de acción muy rápidos y una pose sostenida después.
Dibuja primero las poses clave y luego rellena entre ellas. Duplicar es la herramienta para eso: copia el fotograma en el que estás y cambia solo los píxeles que se mueven, para que el cuerpo no tiemble de un fotograma a otro. Con el papel cebolla activado, el fotograma anterior se ve tenue bajo los píxeles vacíos, lo que facilita mover un brazo uno o dos píxeles en vez de redibujarlo. Para sostener una pose más tiempo, duplícala; en un GIF cada fotograma dura lo mismo.
Mira la vista previa a la velocidad que usará el juego. Una animación que parece fluida a cámara lenta a menudo resulta entrecortada a velocidad real, y el arreglo casi siempre es que cambien menos píxeles entre fotogramas, no añadir más fotogramas.
Sprite sheets y motores de juego
Un sprite sheet reúne todos los fotogramas de la animación en una sola imagen. El que exporta esta herramienta no tiene márgenes ni huecos entre fotogramas, así que cualquier motor puede cortarlo solo por el tamaño del fotograma: un sprite de 32×32 con ocho fotogramas se exporta como una tira de 256×32, o como una cuadrícula de 3×3 con la última celda vacía.
Exporta a 1× para un motor y deja que el motor lo amplíe. En Godot, pon el filtro de textura en Nearest para que los píxeles sigan nítidos. En Unity, pon Filter Mode en Point (no filter), desactiva la compresión y haz que Pixels Per Unit coincida con el tamaño del sprite. En GameMaker, importa la tira e indica el número de fotogramas. Los píxeles transparentes siguen siendo transparentes, así que el sprite puede ir sobre cualquier fondo.
GIF para compartir
Un GIF de 32×32 a su tamaño real es más pequeño que una miniatura, y la mayoría de los sitios difuminan las imágenes pequeñas al ampliarlas. Exporta a 4× u 8×: cada píxel se convierte en un bloque de 4×4 u 8×8 píxeles iguales, y el archivo sigue siendo ligero porque el GIF comprime muy bien esas secuencias iguales.
La transparencia de un GIF es un color apagado, así que algunas apps de mensajería y redes sociales la muestran en negro o en blanco. Si la animación se va a publicar donde no controlas el fondo, expórtala sobre blanco.
Tamaños de sprite habituales
Los tamaños que más usan los artistas de pixel art y lo que cabe en cada uno. Aquí funciona cualquier tamaño de 4 a 100 píxeles por lado, y el ancho y el alto no tienen por qué coincidir.
| Tamaño | Uso habitual |
|---|---|
| 8×8 | Objetos diminutos, partículas, proyectiles y fuentes de píxeles. |
| 16×16 | Objetos, iconos, tiles y personajes pequeños: una silueta legible con ojos de dos píxeles. |
| 24×24 | Personajes con algo más de espacio para la cara, en juegos con una cuadrícula de tiles de 24 píxeles. |
| 32×32 | Personajes jugables y enemigos con expresiones, manos y rampa de sombreado; el tamaño más común para un héroe. |
| 48×48 | Personajes más grandes y objetos detallados, o personajes de 32 píxeles que necesitan espacio para blandir un arma. |
| 64×64 | Jefes, retratos y personajes en primer plano; cada fotograma es cuatro veces el trabajo de uno de 32×32. |
Preguntas frecuentes
¿El creador de sprites es gratis? ¿Necesito una cuenta?
Es gratis, y dibujar, animar y todas las descargas funcionan sin cuenta. Tu sprite se conserva en este navegador mientras dibujas. Solo necesitas una cuenta para guardarlo en Mis patrones y abrirlo en otro dispositivo.
¿Cuántos fotogramas puede tener una animación?
Hasta 32 fotogramas, cada uno del tamaño del lienzo, lo que da de sobra para un ciclo de caminar largo o un ataque. La velocidad va de 1 a 24 fotogramas por segundo.
¿Cómo hago un GIF animado de mi sprite?
Añade un segundo fotograma con Duplicar o Nuevo fotograma, dibuja el cambio y pulsa Exportar animación en la tira de fotogramas. Elige GIF, una escala (4× u 8× para compartir) y un fondo transparente o blanco, y luego Descargar. El GIF se repite sin fin a la velocidad que muestra la vista previa.
¿Cómo uso el sprite sheet en Godot o Unity?
Exporta un sprite sheet a escala 1×. Los fotogramas van borde con borde sin márgenes, así que córtalo por el tamaño de fotograma que aparece bajo el botón Exportar animación. En Godot usa un recurso SpriteFrames o un AnimatedSprite2D con el filtro de textura en Nearest; en Unity pon la textura en Sprite (Multiple), córtala por tamaño de celda en el Sprite Editor y pon Filter Mode en Point (no filter).
¿Puedo usar mi propia paleta?
Sí. Escribe cualquier código hexadecimal en la búsqueda de colores para pintar con ese color exacto, guarda los colores que repites en Mis colores, o pega el nombre de una paleta de Lospec para cargarla. Al cargar una paleta, el dibujo también se convierte a ella.
¿Puedo convertir una imagen en un sprite?
Usa el conversor de pixel art para convertir una imagen en una cuadrícula de píxeles del tamaño que quieras y abre el resultado en el editor de pixel art. Su botón Fotogramas añade la misma tira de fotogramas, el papel cebolla y la exportación a GIF, así que una imagen convertida también se puede animar.
¿Puedo hacer mi sprite con cuentas de planchar?
Sí, cada píxel es una cuenta. Un sprite de 29×29 cabe justo en un pegboard cuadrado grande de Perler. Exporta un fotograma como patrón PDF imprimible desde el botón Exportar de la barra lateral, o abre el patrón en uno de los diseñadores de cuentas para contarlas por color.