Comment construire une animation multi-états dans votre jeu de html5

Avec toute cette motion passe dans votre jeu HTML5, vous êtes sûr de vouloir multiples animations sophistiquées. Vous pouvez utiliser le ChangeImage () ou setImage () fonction (ils sont deux noms différents pour la même chose) pour changer l'image associée à un sprite tout moment. Parfois, cependant, vous voulez des animations beaucoup plus sophistiqués. Jeter un coup d'œil à walkAnim.html.

Il ya tout un tas de l'image-échange se passe ici. L'animation de marche est en fait une série de huit images différentes échangés rapidement pour donner l'illusion de la marche. Il ya 4 animations différents (un pour chacune des directions cardinales), Voilà donc un total de 32 images différentes. Toutefois, si vous regardez sur le code, vous verrez que le personnage sprite contient 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é à être répétée.

La rpg_sprite_walk.jpg image a été créée par Franck Dupont. Il a posté généreusement cette image sur le site OpenGameArt.org, où il est connu comme "Arikel." Il a sorti son travail sous une licence spéciale appelée “. Paternité - Partage à l'Identique ” Cela signifie les gens peuvent utiliser ou de remixer son travail gratuitement, tant qu'ils attribuent l'auteur original.

L'image de fond est par un auteur nommé Hyptosis, qui a publié des images dans le domaine public sur le même site. Contributeurs talentueux et réfléchies comme Franck et Hyptosis sont la clé de la communauté florissante. Sentez-vous libre de regarder sur le site de l'art de jeu ouvert pour plus grande illustration à utiliser dans vos jeux, mais être sûr à remercier et à attribuer les auteurs comme ils le méritent.

La simpleGame.js bibliothèque contient une fonctionnalité pour faire des animations multi-images très facilement. Rechercher sur le code de walkAnim.html pour voir comment cela fonctionne:

Vous avez besoin de prendre quelques nouvelles étapes pour construire une animation, mais les résultats sont complètement en vaut la chandelle.

1. Obtenir une image de l'animation.

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

   Vous pourriez avoir à mess avec votre éditeur d'image pour assurer que l'image est dans le bon format et que vous savez la taille de chaque sous-image.

2. 
   
   
   
   

   Joindre l'image d'animation à votre sprite.

   Vous serez Fixation de la totalité de l'image à votre sprite, mais simplement afficher une petite partie de celui-ci à tout moment. Cela est plus facile que de travailler avec un tas d'images, et il est aussi plus efficace.

3. Créer un objet d'animation avec le loadAnimation () Procédé.

   Lorsque vous appelez le loadAnimation () méthode 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 deuxièmes paramètres sont la largeur et la hauteur de chaque sous-image. Si vous obtenez ces valeurs tort, l'animation apparaîtra pour faire défiler. Continuez à jouer jusqu'à ce que vous obtenez ces valeurs droite:

   character.loadAnimation (192, 128, 24, 32) -

4. Construire les cycles d'animation.

   Chaque ligne sera transformé en un cycle d'animation. La version par défaut (sans paramètres) fonctionne très bien dans la plupart des situations. Consulter la documentation pour les usages les plus avancées de cet outil:

   character.generateAnimationCycles () -

5. Renommez les cycles.

   Les animations créées avec le buildAnimationCycles () commande ont des noms par défaut, mais il est presque toujours mieux d'attacher vos propres noms, plus significatives. Ajouter un tableau avec un nom indiquant ce que chaque ligne représente:

   character.renameCycles (new Array ("bas", "haut", "gauche", "droite")) -

6. Réglez la vitesse d'animation.

   La vitesse d'animation indique à quelle vitesse l'animation se déroulera. Une valeur de 500 semble bon pour la plupart des applications, mais vous pouvez ajuster cette valeur pour le cycle de marche du personnage ressemble à ça effectivement propulser le caractère:

   character.setAnimationSpeed ​​(500) -

7. Définissez quel cycle vous souhaitez afficher.

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

   character.setCurrentCycle ("down") -

8. Utilisez le pauseAnimation () commander pour mettre en pause l'animation.

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

9. Usage PlayAnimation () pour commencer l'animation.

   Cette méthode continue boucler le cycle de l'animation actuelle.

Comme vous pouvez le voir, l'animation ajoute une énorme quantité de plaisir au jeu et ouvre tout le royaume des jeux de rôle à votre répertoire.