Sprites animados gratis

El caballero tiene tres bucles: un reposo en el que desplaza el peso con la espada en alto, un ciclo de caminata y un esprint. Los tres tienen 8 frames en una cuadrícula de 4×2, que se lee de izquierda a derecha y de arriba abajo, con celdas de 209×236 píxeles, así que pasar del reposo a la caminata y a la carrera no lo mueve ni un píxel.

Ocho criaturas se repiten en el sitio: un dragón que bate las alas, un gólem cuyos ojos destellan, una araña mecánica que mueve las patas, una serpiente marina que se enrosca, un murciélago que aletea, una calavera que sube y baja en el aire, un slime que se aplasta y rebota, y un zorro que agita la cola. También se repiten tres objetos: una poción que burbujea en su frasco, un escudo recorrido por un destello y una moneda de oro que gira de cara a canto. Las once son tiras de 4 frames en una fila con celdas de 200×267 píxeles, así que un solo ajuste de importación sirve para todas.

Los bucles perdonan mucho, pero la velocidad sigue importando. Las criaturas grandes se leen mejor despacio, a unos 5 a 8 frames por segundo: el dragón, el gólem y la serpiente parecen pesados cuando respiran lento. Lo pequeño y rápido, como el murciélago y la moneda, queda bien a 10 a 14. El reposo del caballero va a 6 a 8, la caminata a 8 a 12 y la carrera algo más rápida. Ajusta la velocidad de desplazamiento a la animación para que los pies del caballero no patinen.

El destello del escudo se puede repetir, pero queda mejor con una pausa entre destellos: reprodúcelo una vez, espera uno o dos segundos y vuelve a empezar. Cuando coloques varias copias del mismo bucle, como una fila de monedas o un enjambre de murciélagos, haz que cada una empiece en un frame distinto. Los bucles perfectamente sincronizados parecen mecánicos; con desfases la escena cobra vida.

En Phaser, carga la hoja con this.load.spritesheet y el ancho y alto de frame de la página, llama a this.anims.create con generateFrameNumbers para los frames 0 a 7 o 0 a 3 y pon repeat en -1 para que se repita. En Godot, añade la hoja a los SpriteFrames de un AnimatedSprite2D con la importación de hoja de sprites, introduce columnas y filas, ajusta los FPS y comprueba que Loop está activado. En Unity, corta la hoja con Grid By Cell Size, arrastra los frames a la escena para crear un clip y deja marcado Loop Time.

Para el caballero, mete los tres bucles en una misma máquina de estados: reposo sin entrada, caminata mientras se mantiene una dirección y carrera mientras se pulsa el botón de esprint. Como las celdas coinciden, las transiciones no necesitan desplazamientos.

Si el bucle que necesitas no está aquí, tienes tres opciones en este sitio. El generador de sprites de SpriteGen dibuja una hoja animada nueva a partir de una descripción corta, con 6, 8 o 12 frames; reposo, caminata, carrera y vuelo son acciones integradas que se repiten en bucle. El conversor de GIF a sprite sheet convierte un GIF animado que ya tengas en una hoja, dentro de tu navegador. Y el Sprite Sheet Maker junta imágenes de frames sueltas en una sola hoja. Las tres te dan lo mismo que esta página: un PNG transparente con frames espaciados de forma regular que cualquier motor puede repetir.