Exemple de code pour une animation squelettique basée sur un canevas

Récemment, j'ai entendu parler d'une animation squelettique de toile. Comme son nom l'indique, elle est différente de l'animation précédente de toile. Je me demande si cela vous intéresse ?

À propos de l'animation squelettique, je l'ai vue pour la première fois accidentellement sur l'équipe Tencent, mais comme il y a très peu de tutoriels sur son site officiel, il n'y a qu'une petite démo pour référence, et le cas officiellement téléchargé ne peut étrangement pas être exécuté, peut-être que mon opération est. faux, mais ce n'est pas grave, découvrons cette animation de squelette très avancée à travers cette petite démo. Je suis également nouveau dans ce domaine et ma compréhension n'est pas très complète. Veuillez me pardonner.

L'introduction officielle indique qu'AlloyStick est un moteur d'animation squelettique développé à l'aide de la technologie HTML5 et peut être utilisé pour le développement d'animations HTML5 et le développement de jeux HTML5 ; AlloyStick est principalement composé d'un moteur d'animation squelettique et d'un éditeur d'animation squelettique fournit un squelette puissant. animation. Avec la fonction d'édition, en définissant des images clés d'animation et en vous appuyant sur de puissantes interpolations automatiques et des relations squelettiques, vous pouvez créer des animations squelettiques Canvas réalistes et vives, qui peuvent fonctionner de manière fluide sur les PC, les téléphones mobiles, les tablettes et autres appareils. Eh bien, c'est facile à dire et très attrayant.

La soi-disant animation squelettique signifie littéralement une animation dessinée à travers les os. Alors, à quoi ressemblent les os ici ?

Oui, même si cela ressemble à ceci, c'est conforme aux attentes. Après tout, ils ont une fonction d'interpolation automatique très puissante. Vous pouvez y penser car chaque pièce est connectée de manière très fluide, un peu comme le contour progressif du PS.

Puisqu’il s’agit d’une fonction très puissante, elle doit avoir ses propres avantages uniques.

1. L'animation est plus réaliste, c'est sûr
2. L'image prend très peu de place. Cela se voit également au fait que cette personne ne se compose que de trois parties : la tête, les mains et les jambes.
3. Les animations de transition sont automatiquement interpolées pour rendre les mouvements plus flexibles
4. Os contrôlable
5. Cadre d'événement squelette, l'animation continue jusqu'à une certaine action ou une certaine image, déclenchant un comportement d'événement personnalisé
6. Héritage des données d'action, plusieurs personnages peuvent utiliser un seul ensemble de données d'animation
7. Peut être combiné avec un moteur intérieur
8. Combinez l'animation de sprite pour créer une animation hybride

Commençons la petite démo ci-dessous

Une animation squelettique se compose principalement de trois parties : les données squelettiques, les données de skinning et les données d'animation. Avec ces trois parties de données, AlloyStick peut restituer une animation squelettique vivante. Bien entendu, ces trois parties de données n'ont pas besoin d'être générées manuellement. Il suffit de les exploiter dans l'éditeur pour les générer automatiquement. Une fois les données générées, vous pouvez appeler et exécuter l'animation squelettique comme suit. La première étape consiste à introduire alliagesk.js, puis à ajouter la ressource resource.js. Il est à noter que le png skinné est introduit avec la balise img, et bien sûr il peut également être chargé en js. Resource.js inclut des données de skinning, des données sur les relations entre les os et toutes les données d'action, y compris les noms et paramètres d'animation. Dans la deuxième étape, l'objet de scène Stage et l'objet de rôle Armature sont créés en fonction du nouveau fichier de ressources, et l'objet Stage gère l'objet Armature. La méthode playTo est la méthode principale, permettant au personnage de jouer différentes animations d'action. Vous pouvez ajouter des événements pour basculer entre différentes actions. Enfin, démarrez la scène stage.start().

 // La première étape consiste à créer le canevas <canvas id=canvas width=800px height=600px> Désolé, votre navigateur ne prend pas en charge le canevas. Il est recommandé d'utiliser le navigateur Chrome</canvas>. 

 // La deuxième étape consiste à introduire les ressources du skin sous forme d'images ou de js <img src=img/texture.png id=xiaoxiaoImg style=display:none;> 

 // La troisième étape introduit Alloysk.js et Resource.js // La quatrième étape est la préparation var canvas = document.getElementById('canvas')var textureImg = document.getElementById('xiaoxiaoImg')var scene = new alliagege.Scene( canvas.getContext('2d'))var player = new alliagesk.Armature('xiaoxiao',textureImg)//La cinquième étape consiste à créer une animation// Paramètres de vitesse d'action : état d'action, vitesse, vitesse initiale, s'il faut toujours exécuter d'autres actions ici, telles que rouler rouler// Mise à jour de plusieurs états d'action : courir courir rouler rouler simpleFrapper lancer quelque chose avec la main droite secondeFrapper avec. la main droite // jump_kick coup de pied latéral comeon provoquer relax relax savon ramasser savon player.playTo('run',50,15,true);// Position de l'animation player.setPos(300,300); player.setEaseType(true);scene.addObj(player); // Démarre le moniteur FPS (les fonctions auxiliaires ne sont pas requises) alliage.monitorFPS(scene); scene, Et vous pouvez passer la boucle de rappel pour appeler // La dernière étape pour exécuter l'animation scene.start( //); L'effet est comme le garçon qui court ci-dessous. Pardonnez-moi de ne pas encore ouvrir la porte à la création d'animation gif...

Le code pertinent peut être téléchargé sur github https://github.com/aurora-polaris/canvas3

Comme je suis nouveau dans ce domaine, je ne comprends pas très bien beaucoup de choses, je les réglerai quand j'aurai le temps.

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.