Maison >interface Web >js tutoriel >animation du squelette cocos2dx Analyse du code source de l'armature (2)_compétences javascript

animation du squelette cocos2dx Analyse du code source de l'armature (2)_compétences javascript

WBOY
WBOYoriginal
2016-05-16 15:40:121963parcourir

L'article précédent a présenté l'animation squelettique fournie avec cocos2dx en général. Cet article présente la signification de chaque champ des données de configuration exportées (il explique également la signification de chaque champ des données XML exportées. par DragonBone signifiant).

nœud squelette

<skeleton name="Dragon" frameRate="24" version="2.2">

nom : nom du fichier flash.

frameRate : fréquence d'images du flash.

version : numéro de version de Dragonbones.

noeud d'armatures

Le premier est le nœud armatures, qui intercepte certaines données dans les armatures.

 <armatures>
  <armature name="Dragon">
  <b name="tail" parent="body" x="." y="-." kX="" kY="" cX="" cY="" pX="." pY="." z="">
   <d name="parts-tail" pX="" pY="-."/>
  </b>
  <b name = "LegR" ... />
  <b/>
  ……
  <b/>
  </armature>
 </armatures>

9cceca18598b2a00dd076ce7fa6f5e5dLe nœud est un os (b est l'abréviation de os). Le nœud 95313544512d1db683232029f316ae35 contient plusieurs 9cceca18598b2a00dd076ce7fa6f5e5d, qui est le squelette global de l'animation. Comme le montrent les deux figures suivantes, la relation entre la couche entière et les os est le nœud d'armature, et chaque couche dans la case rouge est un nœud b.


Pourquoi le nœud 031f985c524add179bc74f3972cb2b62 possède-t-il plusieurs nœuds d'armature ? Comme il peut y avoir plusieurs animations de squelette dans un flash, chaque animation de squelette correspond à une armature. Par exemple, après avoir exporté le flash ci-dessous, les armatures contiendront plusieurs armatures. Les composants avec une balise frame sont traités comme un squelette.

2b0275e1d3eea369286cdd1c2f175664 L'attribut name est le nom du composant dans la bibliothèque (image ci-dessous), qui est également le nom du Squelette.

nœud b (nœud enfant du nœud d'armature)

<b name="tail" parent="body" x="45.9" y="-70.8" kX="30" kY="30" cX="1" cY="1" pX="11.5" pY="176.35" z="10">

Informations sur le squelette, basées sur les informations de la première image.

name : Le nom de l'os est le nom du calque dans TimeLine, comme indiqué ci-dessus.

parent : nœud parent osseux, illustré ci-dessus.

x, y : les coordonnées du point d'ancrage de rotation du composant par rapport à l'origine du nœud parent, comme le montre la figure ci-dessous, la direction y est vers le bas comme direction positive.

kX, kY : représente skewX et SkewY. Généralement, les deux sont égaux et représentent la taille de rotation (rotation).

cX, cY : représente scaleX, scaleY, représente la taille du zoom.

pX, pY : représente pivotX, pivotY, les coordonnées du point d'ancrage de rotation par rapport à l'origine du composant. La figure suivante ajuste la rotation de 30 degrés.

z : Niveau, la couche inférieure est la couche 0, augmentant une à une.

nœud d

Les nœuds affichés dans le squelette peuvent être compris comme du skin. Si plusieurs composants de la bibliothèque sont utilisés dans un calque, il y aura plusieurs nœuds a3ac92cb7e65fa28e53b5d109c7708e5

 <d name="parts-tail" pX="0" pY="-63.8"/>

name : affiche le nom de l'objet, qui est la concaténation du chemin et du nom du composant dans la bibliothèque.

pX, pY : Afficher le déplacement de l'objet par rapport à l'origine.

nœud d'animations

Le nœud

5cac1272d211c4af34126a1540549247 représente l'évolution du squelette au fil du temps.

<animations>
  <animation name="Dragon">
  <mov name="stand" dr="" to="" drTW="" lp="" twE="">
    <b name="tail" sc="" dl="">
     <f x="." y="-." cocosd_x="." cocosd_y="-." kX="" kY="" cX="" cY="" pX="." pY="." z="" dI="" dr=""/>
     <f x="." y="-." cocosd_x="." cocosd_y="-." kX="." kY="." cX="" cY="" pX="." pY="." z="" dI="" dr=""/>
     <f x="." y="-." cocosd_x="." cocosd_y="-." kX="" kY="" cX="" cY="" pX="." pY="." z="" dI="" dr=""/>
    </b>
  </mov>
  <mov name="walk" dr="" to="" drTW="" lp="" twE="">
  </mov>
  <mov name="jump" dr="" to="" drTW="" lp="" twE="NaN">
  </mov>
  <mov name="fall" dr="" to="" drTW="" lp="" twE="NaN">
  </mov>
  </animation>
 </animations>

Pourquoi 5cac1272d211c4af34126a1540549247 a-t-il plusieurs 91db72ebe85630ddced6bc3e018eeccb ? La raison est la même qu'il y a plusieurs 95313544512d1db683232029f316ae35 dans 0dbb597697e8e53242b021ac384cff8d (voir ci-dessus), l'animation et l'armature correspondent une à une par l'attribut name.

nœud mov

Le nœud mov correspond en fait à une animation dans le programme. Une étiquette d'image sur TimeLine générera un mov, il y aura donc plusieurs mouvements dans une seule 91db72ebe85630ddced6bc3e018eeccb.

<mov name="stand" dr="7" to="6" drTW="30" lp="1" twE="0">

name : nom de l'étiquette du cadre.

dr : représente la durée, combien d'images dure le mouvement. Comme le montre la figure ci-dessus, le support dure 7 images.

à : Je ne sais vraiment pas ce que ça fait.

drTW : signifie durée_tween, durée de l'animation, 1/24*7=0,29 s. La définition de TotalTime sur le panneau dragonbones affecte cette valeur.

lp : signifie boucle, qu'il faut boucler ou non.

twE : Je ne sais vraiment pas ce que ça fait.

nœud b (nœud enfant du nœud mov)

Statut de l'os, il y aura tous les nœuds de l'os b dans le mouvement.

 <b name="tail" sc="1" dl="0">

name:骨骼名字

sc:代表movement_scale,不知是啥。总帧数调整,dragonBones面板可调整

dl:代表movement_delay,不知是啥。dragonBones面板中PlayDelay设置应该和其有关。


f节点

 <f x="45.9" y="-70.8" cocos2d_x="124.1" cocos2d_y="-229.25" kX="30" kY="30" cX="1" cY="1" pX="11.5" pY="176.35" z="10" dI="0" dr="2"/>

对应关键帧信息。stand动画有3个关键帧,所以会有三个f节点。x,y,kX,kY,cX,cY,pX,pY,z与b节点(armature节点的子节点)中对应属性相同,cocos2d_x和cocos2d_y也不知道怎么来的。

dI:display_index 显示哪个图(42272462d2c96339e487aa53d54897b3b5ca92f89c0db1b672bc4bc49dd5a9be中a4b561c25d9afb9ac8dc4d70affff4190d36329ec37a2cc24d42c7229b69747a中a3ac92cb7e65fa28e53b5d109c7708e5abd73b85f7c61f178e6945240bab1a8e)。

dr: duration 帧数.

TextureAtlas节点

dragonbone导出方式可以选择,如果选择导出大图,那么TextureAtlas节点代表了大图中小图的相关信息,可以理解成TexturePacker产生的plist文件,比如

 <TextureAtlas name="Dragon" width="" height="">
 <SubTexture/>
 <SubTexture name="parts-tail" width="" height="" cocosd_pX="" cocosd_pY="-." x="" y=""/>
 <SubTexture/>
 <SubTexture/>
 <SubTexture/>
 </TextureAtlas>

SubTexture节点为小图信息,width和height为长和宽,x和y为在大图中的坐标。cocos2dpX和cocos2dpY依然不晓得有什么用。

以上内容是脚本之家的小编给大家分享的cocos2dx骨骼动画Armature源码剖析(二),后续还有更近,请持续关注本站。

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn