cocos2dx スケルトンアニメーション アーマチュアソースコード解析(2)_javascriptスキル

前の記事 では、cocos2dx に付属するスケルトン アニメーションについて一般的に紹介しました。この記事では、エクスポートされた設定データの各フィールドの意味を紹介します (エクスポートされた XML データの各フィールドの意味も説明します)。ドラゴンボーンの意味による）。

スケルトンノード

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

name: フラッシュ ファイル名。

frameRate: フラッシュのフレームレート。

バージョン: Dragonbones のバージョン番号。

アーマチュアノード

1 つ目はアーマチュア ノードで、アーマチュア内の一部のデータをインターセプトします。

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

ノードはボーンです(bはボーンの略称です)ノードにはアニメーション全体の骨格となるが含まれています。次の 2 つの図に示すように、レイヤー全体とボーンの関係はアーマチュア ノードであり、赤枠内の各レイヤーは b ノードです。

ノードに複数のアーマチュア ノードがあるのはなぜですか?フラッシュには複数のスケルトン アニメーションが存在する可能性があるため、各スケルトン アニメーションはアーマチュアに対応します。たとえば、以下のフラッシュをエクスポートした後、アーマチュアには複数のアーマチュアが含まれます。フレームタグが付いたコンポーネントはスケルトンとして扱われます。

name 属性はライブラリ内のコンポーネントの名前 (下の図) であり、スケルトンの名前でもあります。

bノード(アーマチュアノードの子ノード)

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

最初のフレーム情報に基づくスケルトン情報。

name: ボーンの名前は、上に示したように、TimeLine のレイヤーの名前です。

parent: ボーン親ノード、上の図。

x, y: 親ノードの原点を基準としたコンポーネントの回転アンカーポイントの座標。下図に示すように、y 方向が下を正の方向とします。

kX、kY: skewX と SkewY を表します。通常、この 2 つは等しく、Rotate (回転) サイズを表します。

cX、cY:scaleX、scaleYを表し、ズームサイズを表します。

pX、pY: pivotX、pivotY、コンポーネントの原点を基準とした回転アンカー ポイントの座標を表します。次の図は 30 度の回転を調整します。

z: レベル。最下層はレイヤー 0 で、1 つずつ増加します。

d ノード

スケルトンに表示されるノードは、ライブラリの複数のコンポーネントがレイヤーで使用される場合、複数の ノードが存在します。

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

name: ライブラリ内のパスとコンポーネント名を連結したオブジェクトの名前が表示されます。

pX、pY: 原点に対するオブジェクトの変位を表示します。

アニメーション ノード

ノードは、時間の経過に伴うスケルトンの変化を表します。

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

に複数の があるのはなぜですか?理由は、 内に複数の があるのと同じで、アニメーションとアーマチュアは name 属性によって 1 対 1 に対応します。

mov ノード

mov ノードは実際にはプログラム内のアニメーションに対応します。TimeLine 上のフレーム ラベルは mov を生成するため、1 つの 内に複数の mov が存在します。

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

name: フレームラベル名。

dr: モーションが何フレーム続くかを表します。上の図に示すように、スタンドは 7 フレーム続きます。

へ: それが何をするのか本当に分かりません。

drTW:duration_tween の略で、アニメーションの実行時間、1/24*7=0.29 秒。 Dragonbones パネルで TotalTime を設定すると、この値に影響します。

lp: ループを表し、ループするかどうかを示します。

twE: それが何をするのか本当に分かりません。

b ノード (mov ノードの子ノード)

ボーンのステータス。mov にはすべてのボーン b ノードが存在します。

 <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 显示哪个图(中中)。

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