Sprites animés gratuits

Le chevalier a trois boucles : un repos où il déplace son poids l'épée levée, un cycle de marche et un sprint. Les trois font 8 frames sur une grille de 4×2, lue de gauche à droite et de haut en bas, avec des cellules de 209×236 pixels : passer du repos à la marche puis à la course ne le décale jamais d'un pixel.

Huit créatures bouclent sur place : un dragon qui bat des ailes, un golem aux yeux qui s'embrasent, une araignée mécanique qui remue les pattes, un serpent de mer qui s'enroule, une chauve-souris qui bat des ailes, un crâne qui flotte dans les airs, un slime qui s'écrase puis rebondit et un renard qui agite la queue. Trois objets bouclent aussi : une potion qui bouillonne dans sa fiole, un bouclier balayé par un reflet et une pièce d'or qui tourne de face sur la tranche. Les onze sont des bandes de 4 frames sur une ligne en cellules de 200×267 pixels : un seul préréglage d'import les couvre toutes.

Les boucles pardonnent beaucoup, mais la vitesse compte toujours. Les grandes créatures se lisent mieux lentement, vers 5 à 8 frames par seconde : le dragon, le golem et le serpent paraissent lourds quand ils respirent lentement. Les choses petites et rapides, comme la chauve-souris et la pièce, rendent bien entre 10 et 14. Le repos du chevalier se joue à 6 à 8, la marche à 8 à 12 et la course un peu plus vite. Accordez la vitesse de déplacement à l'animation pour que les pieds du chevalier ne glissent pas.

Le reflet du bouclier peut boucler, mais il rend mieux avec une pause entre deux reflets : jouez la bande une fois, attendez une ou deux secondes, puis rejouez-la. Quand vous placez plusieurs copies de la même boucle, une rangée de pièces ou un essaim de chauves-souris par exemple, démarrez chaque copie sur une frame différente. Des boucles parfaitement synchronisées font mécanique ; un décalage rend la scène vivante.

Dans Phaser, chargez la planche avec this.load.spritesheet et la largeur et la hauteur de frame indiquées sur la page, appelez this.anims.create avec generateFrameNumbers pour les frames 0 à 7 ou 0 à 3, et mettez repeat à -1 pour qu'elle boucle. Dans Godot, ajoutez la planche aux SpriteFrames d'un AnimatedSprite2D via l'import de sprite sheet, indiquez les colonnes et les lignes, réglez les FPS et vérifiez que Loop est activé. Dans Unity, découpez la planche avec Grid By Cell Size, faites glisser les frames dans la scène pour créer un clip et laissez Loop Time coché.

Pour le chevalier, placez les trois boucles dans une même machine à états : repos sans commande, marche tant qu'une direction est tenue, course tant que le bouton de sprint est enfoncé. Comme les cellules sont identiques, les transitions n'ont besoin d'aucun décalage.

Si la boucle qu'il vous faut n'est pas ici, ce site vous offre trois options. Le générateur SpriteGen dessine une nouvelle planche animée à partir d'une courte description, en 6, 8 ou 12 frames ; repos, marche, course et vol sont des actions intégrées qui bouclent. L'outil GIF en planche de sprites transforme un GIF animé que vous avez déjà en planche, directement dans le navigateur. Et le créateur de planches de sprites assemble des images de frames séparées en une seule planche. Les trois vous donnent la même chose que cette page : un PNG transparent aux frames régulièrement espacées, que n'importe quel moteur peut faire boucler.