Meilleures pratiques d'animation Sprite


18

Je voudrais mieux comprendre comment les gens du monde réel gèrent leur animation.

Chargez-vous 1 grande image puis dessinez-vous différents rectangles en fonction du cadre d'animation?

Chargez-vous des fichiers d'image X dans un tableau et dessinez-vous l'élément dans le tableau en fonction du cadre d'animation?

Comment gérez-vous avoir différentes longueurs d'animations pour différents sprites.

Supposons qu'un personnage marchant prenne 4 à 8 images et que les vagues sur la plage ne prennent que 2 à 3 images. Comment géreriez-vous cette situation? Voir ci-dessous

Dim Waves(1) as Sprite
Dim Char(5) as Sprite

Sub Animate()
     Frame += 1
     Draw Char(Frame)
     Draw Waves(Frame)
     If Frame = 5 Then Frame = 0
End Sub

De toute évidence, Waves se retrouverait avec une erreur hors limites.

Ou avez-vous votre souci de sprite sur sa propre animation, et ne vous souciez pas du tout du cadre. Faire en sorte que chaque sprite connaisse sa propre boucle d'animation?

Réponses:


23

Je l'ai fait par le passé en séparant les données d' animation de la lecture d'animation . Un Animationpeut alors devenir fondamentalement un tableau de Frameset quelques propriétés qui décrivent comment l'animation doit se comporter (si elle boucle, etc.).

Je charge généralement une image et en dessine des morceaux.

Chacune Framedes animations est essentiellement un rectangle et une durée. Cela permet à certains cadres de s'afficher plus longtemps que d'autres, ce qui peut ou non être quelque chose que vous souhaitez. Si vous souhaitez que toutes les images de votre animation s'affichent pendant la même durée, stockez-les dans votre Animationobjet.

Tout ce qui a besoin de jouer une animation a sa propre AnimationPlayerqui peut être pointée vers un Animation. L'objet joueur s'occupe de la lecture de l'animation et rend disponible "l'image courante".

L'avantage pour moi était que je pouvais avoir une seule instance d'un objet sur Animationlequel de nombreux objets pouvaient pointer et jouer différentes parties en même temps. Il était également facile de modifier les animations en pointant simplement le AnimationPlayersur un autre Animationobjet et en réinitialisant la lecture.

Edit : Voici une implémentation JavaScript assez basique du système décrit ci-dessus . Je l'ai jeté ensemble en quelques minutes en guise de démonstration . Le "vrai" code aurait plus de fonctionnalités. Cependant, vous aurez besoin d'un navigateur moderne qui prend en charge Canvas et Data URI pour que cela fonctionne.


1
Ce qu'il a dit. En outre, il est souvent pratique d'avoir un décalage x / y pour chaque image d'une animation afin de pouvoir compresser les images de sprite dans leurs cadres de délimitation, puis de les placer où vous le souhaitez dans une animation. Il vous permet également de faire des trucs de base comme le sautillement en utilisant simplement une seule image.
munificent

Oui, je suis totalement d'accord. En fait, le système d'animation que j'utilise le permet. Il est beaucoup plus facile de changer la position d'un cadre sans avoir à modifier les données d'image.
Zack The Human

Bel exemple de travail, WOW Thumbs up. Je le recommanderais.
DFectuoso

Une limitation importante du type d'animation est que la figure ne peut pas être vue sous un angle différent - s'éloigner du spectateur, se diriger vers le spectateur, etc. Ou ai-je tort?
Majid Fouladpour

@MajidFouladpour Je ne pense pas que ce type de limitation existe en utilisant cette technique. Vous avez simplement différents objets AnimationData pour chaque "angle de vue".
Zack The Human

1

J'aurais une animation savoir combien d'images il a. Où et comment ceux-ci sont stockés est relativement hors de propos, sauf pour les problèmes de performances (comme vous pourriez les vouloir dans la même texture). Je n'ajouterais jamais 1 au nombre d'images, j'ajouterais deltaTime * animSpeed ​​et convertirais cette valeur en entier lors de l'affichage. De cette façon, vous pouvez ralentir ou accélérer les animations et être indépendant de la fréquence d'images.

Ainsi, un sprite aurait une animation qui se met à jour.


0

Pourquoi ne pas simplement stocker le nombre d'images pour chacun de vos objets? Personnellement, je transmets le nombre d'images dans l'animation à mes objets dans leurs constructeurs, puis j'ai une fonction Animate () standard qui prend le nombre d'images dans l'animation.


0

Cela dépend de la mise en œuvre. Dans mon moteur, je fais de l'animation dans Direct3D et DirectDraw.

Dans DirectDraw, je crée une grande image. De toute façon, tout est stocké dans la mémoire système, ce qui se résume finalement à un bloc de données unidimensionnel.

Avantages:

  • Facile à déplacer entre les cadres. Changez le pointeur de départ, ajoutez le pas (la largeur totale de l'image) tous les ans et vous êtes doré.

Les inconvénients:

  • Vous ne pouvez pas simplement copier une image sur l'écran, vous devez le faire manuellement.

  • Bloc de mémoire géant. Le tourbillon des cadres est sanctionné.

Dans Direct3D, j'utilise des textures distinctes. C'est parce que je n'ai aucune idée des limitations de texture d'un appareil, donc je ne sais pas s'il prend même en charge les textures qui sont de la taille de l'image entière.

Avantages:

  • Vous pouvez copier un cadre directement sur l'écran, car ce sont toutes des entités distinctes.

Les inconvénients:

  • Manque d'alignement de la mémoire.

0

Dans mes jeux , j'ai donné à ma classe de base Sprite les connaissances sur la façon de se dessiner, et tous les éléments animés héritent de ces connaissances: nombre et durée des images d'animation, position sur l'écran, etc. La boucle principale du jeu parcourt tout des sprites, demandant à chacun de se dessiner comme bon lui semble. Semble fonctionner assez bien et est un peu plus modulaire pour démarrer: si vous ajoutez un nouveau sprite qui a une boucle d'animation différente (ou même plus complexe: plusieurs états d'animation), vous n'avez pas besoin de revenir en arrière et de réécrire votre Animate () routine pour s'adapter à la complexité supplémentaire:

Dim Waves as Sprite
Dim Char as Sprite

Sub Animate()
     Char.update()
     Waves.update()
End Sub

Chaque fois que la méthode update () d'un sprite est appelée, il sait s'il doit redessiner la même image que la dernière fois, passer à l'image suivante dans son animation actuelle, passer à une nouvelle animation, etc.

Cela a l'avantage supplémentaire de faciliter considérablement le réglage de la fréquence d'images pour s'adapter aux différentes vitesses de rendu d'horloge / plate-forme, car le seul changement est la fréquence à laquelle vous appelez Animate ().

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.