animasi rangka cocos2dx Analisis kod sumber angker (2)_kemahiran javascript

Artikel sebelumnya memperkenalkan animasi rangka yang disertakan dengan cocos2dx secara umum Artikel ini memperkenalkan maksud setiap medan data konfigurasi yang dieksport (ia juga menerangkan maksud setiap medan data xml yang dieksport. dengan maksud DragonBone).

nod rangka

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

nama: nama fail flash.

Kadar bingkai: kadar bingkai denyar.

versi: nombor versi dragonbones.

nod angker

Yang pertama ialah nod angker, yang memintas beberapa data dalam angker.

 <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>

9cceca18598b2a00dd076ce7fa6f5e5dNod ialah tulang (b ialah singkatan daripada tulang 1a39161fc739333d846def77fd0364f3 mengandungi berbilang 9cceca18598b2a00dd076ce7fa6f5e5d, iaitu rangka keseluruhan animasi). Seperti yang ditunjukkan dalam dua rajah berikut, hubungan antara keseluruhan lapisan dan tulang ialah nod angker, dan setiap lapisan dalam kotak merah ialah nod b.

Mengapakah nod b43ef5abf9a02d22928ea191f3efa195 mempunyai berbilang nod angker? Kerana mungkin terdapat berbilang animasi rangka dalam denyar, setiap animasi rangka sepadan dengan angker Contohnya, selepas mengeksport denyar di bawah, angker akan mengandungi berbilang angker. Komponen dengan tag bingkai dianggap sebagai Rangka.

2b0275e1d3eea369286cdd1c2f175664 Atribut nama ialah nama komponen dalam pustaka (gambar di bawah), yang juga merupakan nama Skeleton.

nod b (nod anak nod angker)

<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">

Maklumat rangka, berdasarkan maklumat bingkai pertama.

nama: Nama tulang ialah nama lapisan dalam TimeLine, seperti yang ditunjukkan di atas.

ibu bapa: Nod induk tulang, gambar di atas.

x, y: Koordinat titik penambat putaran komponen berbanding dengan asal nod induk, seperti yang ditunjukkan dalam rajah di bawah, arah y adalah ke bawah sebagai arah positif.

kX, kY: mewakili skewX dan SkewY Secara amnya, kedua-duanya adalah sama dan mewakili saiz Putar (putaran).

cX, cY: mewakili skalaX, skalaY, mewakili saiz zum.

pX, pY: mewakili pivotX, pivotY, koordinat titik penambat putaran berbanding dengan asal komponen Rajah berikut melaraskan putaran 30 darjah.

z: Tahap, lapisan bawah ialah lapisan 0, meningkat satu demi satu.

nod d

Nod yang dipaparkan dalam rangka boleh difahami sebagai kulit Jika beberapa komponen daripada pustaka digunakan dalam satu lapisan, akan terdapat beberapa a3ac92cb7e65fa28e53b5d109c7708e5

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

nama: Memaparkan nama objek, yang merupakan gabungan laluan dan nama komponen dalam pustaka.

pX, pY: Paparkan sesaran objek berbanding dengan asal.

nod animasi

Nod

376a7adc74e463f8c969cb3d1a99ed11 mewakili perubahan rangka dari semasa ke semasa.

<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>

Mengapa 376a7adc74e463f8c969cb3d1a99ed11 mempunyai berbilang 376a7adc74e463f8c969cb3d1a99ed11? Sebabnya adalah sama kerana terdapat berbilang 1a39161fc739333d846def77fd0364f3 dalam 1a39161fc739333d846def77fd0364f3 (lihat di atas), animasi dan angker sepadan dengan satu dengan atribut nama.

nod bergerak

Nod mov sebenarnya sepadan dengan animasi dalam program Label bingkai pada TimeLine akan menjana mov, jadi akan terdapat berbilang pergerakan dalam satu 376a7adc74e463f8c969cb3d1a99ed11.

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

nama: nama label bingkai.

dr: mewakili tempoh, berapa banyak bingkai bergerak Seperti yang ditunjukkan dalam rajah di atas, berdiri bertahan 7 bingkai.

kepada: Saya benar-benar tidak tahu apa yang dilakukannya.

drTW: singkatan untuk duration_tween, berapa lama animasi berjalan, 1/24*7=0.29s. Menetapkan TotalTime pada panel dragonbones mempengaruhi nilai ini.

lp: singkatan untuk gelung, sama ada gelung atau tidak.

twE: Saya benar-benar tidak tahu apa yang dilakukannya.

nod b (nod anak nod mov)

Status tulang, akan ada semua nod tulang b dalam mov.

 <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源码剖析(二)，后续还有更近，请持续关注本站。