Animation de squelette implémentée dans Canvas

Cet article présente principalement les informations pertinentes sur l'exemple de code d'animation squelettique basée sur un canevas. Le contenu est assez bon, je vais le partager avec vous maintenant et le donner comme référence.

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

À propos de l'animation squelettique, je l'ai vue pour la première fois accidentellement dans 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 de téléchargement officiel est également C'est étrange qu'il ne peut pas fonctionner. Peut-être que mon opération est fausse, mais cela n'a pas d'importance. Découvrons cette animation de squelette très avancée à travers cette petite démo, je suis nouveau dans ce domaine et ma compréhension n'est pas très complète.

Avant de commencer, découvrons d'abord AlloyStick

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 des jeux HTML5 développés ; AlloyStick est principalement composé de deux parties : un moteur d'animation squelettique et un éditeur d'animation squelettique fournit de puissantes fonctions d'édition d'animation squelettique et en s'appuyant sur de puissantes relations d'interpolation et d'os automatiques. peut créer une animation squelette Canvas réaliste et vive, qui peut fonctionner sans problème sur PC, téléphones mobiles, 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 à ça, c'est conforme aux attentes. Après tout, ils ont une fonction d'interpolation automatique très puissante. Vous pouvez penser au nombre de pièces. sont utilisés. Connectés de manière fluide, c'est un peu comme le mise en drapeau PS

Comme c'est une fonction très puissante, il doit y avoir quelqu'un avec ses propres avantages uniques

1. L'animation est plus réaliste, c'est sûr

2. L'image prend très peu de place, ce qui se voit aussi du fait que cette personne n'est composée que de trois parties : tête, mains et les jambes

3. Les animations de transition sont automatiquement interpolées, ce qui rend les mouvements plus flexibles

4. Contrôlable par les os

5. Images d'événements osseux, l'animation va directement attendre une 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 ensemble de données d'animation

7. Peut être combiné avec le moteur de la maison

8. Combinez l'animation de sprite pour créer une animation hybride

Commençons par une petite démo

Une animation squelettique est principalement composée de 3 parties : les données de squelette, 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 généré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().

// 第一步 还是要先搭建canvas
<canvas id="canvas" width="800px" height="600px">抱歉，你的浏览器不支持canvas，建议你使用Chrome浏览器</canvas>

// 第二步 以图片形式或者js方式引入蒙皮资源
<img src="img/texture.png" id="xiaoxiaoImg" style="display:none;">

// 第三步 引入alloysk.js和resource.js
// 第四步 准备工作
var canvas = document.getElementById('canvas')
var textureImg = document.getElementById('xiaoxiaoImg')
var scene = new alloyge.Scene(canvas.getContext('2d'))
var player = new alloysk.Armature('xiaoxiao',textureImg)
// 第五步 制作动画
// 动作快慢 参数：动作状态，速度，初始速度，是否一直执行，这里还可以设置其他动作，比如翻滚 roll
// 更新了几个动作状态：run 奔跑  roll 翻滚  simpleHit 右手扔东西   secondHit  右手打拳
 //  jump_kick  侧踢 comeon 挑衅   relax 放松  soap 捡肥皂
player.playTo('run',50,15,true);
// 动画位置
player.setPos(300,300); 

player.setEaseType(true);		
scene.addObj(player);
 // 启动FPS监听器 (辅助功能 非必须)
alloyge.monitorFPS(scene);
// 开始场景里的动画，并且可以传入callback循环调用
// 最后一步 执行动画
scene.start(); 
// 效果就是下面这样奔跑的少年啦，原谅我还没开通做gif动画的大门……

Comme je suis nouveau dans ce domaine, je ne connais pas très bien beaucoup de choses, je réglerai ça 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'apprentissage de tout le monde. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Utilisez html5 Canvas encapsule un diagramme circulaire que les echarts ne peuvent pas implémenter

Comment utiliser Canvas pour maintenir la souris enfoncée et se déplacer pour tracer une trajectoire

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!