Comment Construire une animation multi-états dans votre jeu HTML5

Avec tout ce mouvement en cours dans votre jeu HTML5, vous êtes sûr de vouloir plusieurs animations sophistiquées. Vous pouvez utiliser la fonction changeImage () ou setImage () (il s'agit de deux noms différents pour la même chose) pour modifier l'image associée à une image-objet à tout moment. Parfois, cependant, vous voulez des animations beaucoup plus sophistiquées. Jetez un oeil à walkAnim. html

Il y a beaucoup d'échanges d'images ici. L'animation de marche est en fait une série de huit images différentes échangées rapidement pour donner l'illusion de marcher. Il y a 4 animations différentes (une pour chacune des directions cardinales), soit un total de 32 images différentes. Cependant, si vous regardez le code, vous verrez que le sprite du personnage ne contient qu'une seule image.

Cette image est une animation composite. Chaque ligne représente une direction et chaque ligne contient un cycle ou une série d'images destinées à être répétées.

Le rpg_sprite_walk. L'image png a été créée par Franck Dupont. Il a généreusement posté cette image sur OpenGameArt. site d'organisation, où il est connu comme "Arikel. "Il a publié son travail sous une licence spéciale appelée" Attribution - Share Alike ". "Cela signifie que les gens peuvent utiliser ou remixer gratuitement son travail, à condition qu'ils attribuent l'auteur original.

L'image de fond est d'un auteur nommé Hyptosis, qui a publié des images sous le domaine public sur le même site. Des contributeurs talentueux et réfléchis comme Franck et Hyptosis sont la clé de la communauté créative florissante. N'hésitez pas à regarder par-dessus le site d'art de jeu ouvert pour plus d'œuvres d'art à utiliser dans vos jeux, mais assurez-vous de remercier et d'attribuer les auteurs comme ils le méritent.

Le jeu simple. La bibliothèque js contient une fonctionnalité permettant de créer facilement des animations multi-images. Regardez par-dessus le code de walkAnim. html pour voir comment cela fonctionne:

walkAnim. jeu html var; arrière-plan de var; caractère var; Fonction init () {game = new Scène (); background = new Sprite (jeu, "rpgMap. png", 800, 600); Contexte. setSpeed ​​(0, 0); Contexte. setPosition (400, 300); character = new Sprite (jeu, "rpg_sprite_walk.png", 192, 128); caractère. loadAnimation (192, 128, 24, 32); caractère. generateAnimationCycles (); caractère. renameCycles (nouveau tableau ("bas", "haut", "gauche", "droite")); caractère. setAnimationSpeed ​​(500); // commence le caractère en pause. setPosition (440, 380); personnage. setSpeed ​​(0); caractère. pauseAnimation (); caractère. setCurrentCycle ("bas"); jeu.start ();} // fin de la fonction d'initialisation update () {game. clair(); checkKeys (); Contexte. mettre à jour(); personnage. update ();} // fin de la fonction de mise à jour checkKeys () {if (keysDown [K_LEFT]) { caractère. setSpeed ​​(1); caractère. playAnimation () caractère. setMoveAngle (270); caractère. setCurrentCycle ("left"); } if (keysDown [K_RIGHT]) {caractère. setSpeed ​​(1); personnage. playAnimation () caractère. setMoveAngle (90); personnage. setCurrentCycle ("right");} if (keysDown [K_UP]) {caractère. setSpeed ​​(1); personnage. playAnimation () caractère. setMoveAngle (0); personnage. setCurrentCycle ("up");} if (keysDown [K_DOWN]) {caractère. setSpeed ​​(1); personnage. playAnimation () caractère. setMoveAngle (180); personnage. setCurrentCycle ("bas");} if (keysDown [K_SPACE]) { caractère. setSpeed ​​(0); caractère. pauseAnimation (); caractère. setCurrentCycle ("bas"); }} Vous devez prendre quelques nouvelles mesures pour créer une animation, mais les résultats en valent vraiment la peine. Obtenez une image d'animation.

Vous pouvez soit créer vous-même une image, soit regarder les excellentes ressources comme OpenGameArt. org pour trouver du travail que d'autres ont fait. Bien sûr, vous avez la responsabilité de respecter le travail des autres, mais il y a du bon travail dans les licences très permissives aujourd'hui. Assurez-vous que l'image est organisée en lignes et en colonnes et que chaque sous-image a exactement la même taille.

1. Vous devrez peut-être jouer avec votre éditeur d'image pour vous assurer que l'image est au bon format et que vous connaissez la taille de chaque sous-image.

   Joignez l'image d'animation à votre sprite.

   Vous joindrez toute l'image à votre image-objet, mais n'en afficherez qu'une petite partie à la fois. C'est plus facile que de travailler avec un tas d'images, et c'est aussi plus efficace.

2. Créez un objet d'animation avec la méthode loadAnimation ().

   Lorsque vous appelez la méthode loadAnimation () d'un objet, vous créez un outil d'animation qui permet de gérer l'animation. Les deux premiers paramètres sont la taille de l'image entière (largeur et hauteur), et les deux autres paramètres sont la largeur et la hauteur de chaque sous-image. Si vous obtenez ces valeurs incorrectes, l'animation semblera défiler. Continuez à jouer jusqu'à ce que vous obteniez ces valeurs:

3. caractère. loadAnimation (192, 128, 24, 32);

   Construire les cycles d'animation.

   Chaque ligne sera transformée en cycle d'animation. La version par défaut (sans aucun paramètre) fonctionne correctement dans la plupart des situations. Recherchez dans la documentation les utilisations les plus avancées de cet outil: caractère
   

4. . generateAnimationCycles ();

   Renommez les cycles.

   Les animations créées avec la commande buildAnimationCycles () ont des noms par défaut, mais il est presque toujours préférable de joindre vos propres noms, plus significatifs. Ajoutez un tableau avec un nom indiquant ce que représente chaque ligne: caractère
   

5. . renameCycles (nouveau tableau ("bas", "haut", "gauche", "droite"));

   Définir la vitesse d'animation.

   La vitesse d'animation indique à quelle vitesse l'animation va tourner. Une valeur de 500 semble correcte pour la plupart des applications, mais vous pouvez ajuster cette valeur afin que le cycle de marche du personnage semble propulser le caractère:
   

6. .setAnimationSpeed ​​(500);

   Définissez le cycle que vous souhaitez afficher.

   La méthode setCurrentCycle () vous permet de choisir le cycle avec l'un des noms que vous avez indiqués dans l'étape renameAnimationCycles ():
   

7. . setCurrentCycle ("bas");

   Utilisez la commande pauseAnimation () pour suspendre l'animation.

   La commande pauseAnimation () arrête temporairement l'animation.
   

8. Utilisez playAnimation () pour lancer l'animation.

   Cette méthode boucle en boucle le cycle d'animation en cours.

9. Comme vous pouvez le voir, l'animation ajoute énormément de plaisir au jeu et ouvre tout le domaine des jeux de rôles à votre répertoire.