Rumah > hujung hadapan web > tutorial js > animasi rangka cocos2dx Analisis kod sumber angker (2)_kemahiran javascript

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

WBOY
Lepaskan: 2016-05-16 15:40:12
asal
1957 orang telah melayarinya

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">
Salin selepas log masuk

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>
Salin selepas log masuk

Nod ialah tulang (b ialah singkatan daripada tulang mengandungi berbilang , 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 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.

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">
Salin selepas log masuk

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

 <d name="parts-tail" pX="0" pY="-63.8"/>
Salin selepas log masuk

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

pX, pY: Paparkan sesaran objek berbanding dengan asal.

nod animasi

Nod

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>
Salin selepas log masuk

Mengapa mempunyai berbilang ? Sebabnya adalah sama kerana terdapat berbilang dalam (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 .

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

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">
Salin selepas log masuk

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"/>
Salin selepas log masuk

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

dI:display_index 显示哪个图()。

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>
Salin selepas log masuk

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

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

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan