Introduction à l'animation spritesheet
Ce tutoriel fait partie d'une collaboration spéciale entre un artiste, un animateur et un gamedev!
Avant de pouvoir commencer à parler de la façon de coder une animation spritesheet, nous devons d'abord définir quelques termes: animation. lutin. et spritesheet.
Retour en 1872, Eadweard Muybridge a été chargé de prouver si un cheval a levé les quatre jambes du sol à la fois quand il a couru. Pour ce faire, il a mis en place une série de caméras le long d'une piste et a pris des photos en succession rapide comme un cheval a couru par. Ce processus lui a permis de capturer 16 images de la course du cheval. Dans l'une des photos, le cheval avait en effet quatre jambes du sol.
« Le cheval en mouvement » photos avec la première photo de Muybridge enlevé.
Muybridge répété plus tard, l'expérience et placé chaque photo sur un dispositif qui pourrait projeter les photos en succession rapide pour donner l'illusion de la course de chevaux, créant ainsi le premier projecteur de film.
Le processus de modification des images en succession rapide pour donner l'illusion du mouvement est appelé animation.
Un sprite est une image graphique qui est incorporé dans une plus grande scène de sorte qu'il semble faire partie de la scène.
Les sprites sont un moyen populaire pour créer de grandes scènes complexes que vous pouvez manipuler chaque sprite séparément du reste de la scène. Cela permet un meilleur contrôle sur la façon dont la scène est rendue, ainsi que sur la façon dont les joueurs peuvent interagir avec la scène.
Il est pas rare que les jeux ont des dizaines à des centaines de sprites. Chargement chacun d'entre eux comme une image individuelle consomme beaucoup de mémoire et de puissance de traitement. Pour vous aider à gérer sprites et évitez d'utiliser tant d'images, de nombreux jeux utilisent spritesheets.
spritesheet
Lorsque vous mettez beaucoup de sprites en une seule image, vous obtenez un spritesheet.
Spritesheets sont utilisés pour accélérer le processus d'affichage d'images à l'écran; Il est beaucoup plus rapide pour récupérer une image et afficher seulement une partie de cette image que de chercher de nombreuses images et les afficher.
Spritesheet animation est rien de plus que de prendre un spritesheet et le changement qui sprite est rendu en succession rapide pour donner l'illusion du mouvement, comme un projecteur de film affichant un film.
Parties d'un spritesheet
Spritesheets sont composées de deux parties: les cadres et les cycles
Une trame est une seule image (ou image-objet) à partir du spritesheet. Pour en revenir à l'exemple cheval du Muybridge, chaque image du cheval dans l'image serait un cadre.
Lorsque les cadres sont mis dans un ordre qui crée un mouvement continu, il crée un cycle.
Mettre les photos du cheval dans l'ordre où ils ont été produit un cycle « run » car le cheval est en cours d'exécution (par opposition à une « marche » ou le cycle « ralenti »).
Animations de codage spritesheet
Il y a trois parties à coder une animation spritesheet:
- Création de l'image
- Mise à jour de l'image pour chaque image de l'animation
- Dessin du cadre à l'écran
Création de l'image
Nous allons commencer par la création de la fonction (ou classe) qui va gérer notre animation spritesheet. Cette fonction crée l'image et définir son chemin afin que nous puissions l'utiliser pour dessiner.
Étant donné que différents spritesheets peuvent avoir différentes tailles de cadre, nous aurons besoin de passer la largeur et hauteur du cadre afin de pouvoir calculer avec précision le nombre d'images dans une ligne et la colonne de l'image. Nous allons utiliser cette information plus tard pour tirer l'animation à l'écran.
Il est important que chaque trame du spritesheet est la même largeur et la hauteur; sinon, l'animation de dessin à l'écran est très difficile.
Mise à jour de l'image
Pour mettre à jour l'animation spritesheet, tout ce que nous avons à faire est de changer le cadre, nous allons dessiner. Ci-dessous le spritesheet divisé en chacun de ses cadres et numérotés.
A chaque cadre du jeu, nous mettrons à jour le spritesheet. Cependant, nous ne voulons pas l'animation pour passer à l'image suivante chaque image, donc nous devons dire à nos spritesheet nombre d'images à attendre avant de passer.
Il est important de noter que tous les spritesheet a un sprite dans chaque image disponible (comme l'image de « The Horse in Motion » de Muybridge). Si nous devions essayer d'animer notre spritesheet avec un cadre vide, il y aurait un soubresaut dans l'animation chaque fois que le cadre blanc est dessiné à l'écran.
Pour compenser cela, nous allons aussi dire spritesheet ce que le dernier numéro de l'image est, de sorte que nous n'animons pas les cadres vides.
En utilisant l'opérateur modulo (%) pour la currentFrame. nous pouvons créer une boucle à chaque fois que continue la endFrame est atteinte, le currentFrame revient à 0. boucle ainsi l'animation.
L'opérateur modulo pour le compteur empêche débordement d'entier.
Dessin de l'image
Dessin d'une image à partir d'un spritesheet fonctionne exactement de la même manière que pour dessiner une image à partir d'une carte de tuiles.
Nous calculons la ligne de l'image que nous voulons tirer en prenant le modulo du cadre actuel et le nombre d'images par ligne. Nous calculons la colonne en divisant la trame en cours par le nombre d'images par ligne.
En utilisant cette ligne et la colonne, on peut alors calculer les coordonnées du cadre de tirer en les multipliant par FrameWidth et FrameHeight. respectivement:
Avec la fonction spritesheet en place, nous pouvons maintenant l'utiliser pour créer une animation spritesheet:
Cycles multiples dans un spritesheet
Le code ci-dessus fonctionnera pour tout spritesheet contenant un cycle. Cependant, il est rare qu'un spritesheet de tenir plusieurs cycles, ce qui signifie qu'il y aura de multiples animations dans un seul spritesheet.
Nous devons changer la façon dont notre spritesheet fonctionne afin de gérer plusieurs animations à partir d'une seule spritesheet.
Création de l'image
Étant donné que l'image reste la même entre les animations, nous allons diviser notre spritesheet en deux fonctions: l'une pour l'image et un pour chaque animation du spritesheet.
Un spritesheet tiendra les informations sur l'image et la taille du cadre.
Mise à jour et l'image Dessin
Une animation sera chargée de la mise à jour et en tirant le spritesheet.
Étant donné que le spritesheet contient plus d'images que toute seule animation aura besoin, nous aurons besoin de savoir quel numéro de trame de début et de fin de l'animation. Grâce à ces informations, nous allons créer un tableau de nombres d'images afin que nous puissions utiliser currentFrame pour accéder au numéro de l'image correcte.
Mettre le spritesheet à utiliser
Avec l'animation prêt à gérer tout spritesheet, nous pouvons l'utiliser pour faire un simple style Canabalt coureur infini:
Vous pouvez trouver le code source complet pour cela dans notre repo GitHub. Quelle est votre score?