cocos2dx 스켈레톤 애니메이션 Armature 소스 코드 분석(2)_javascript 기술

이전 글에서는 일반적으로 cocos2dx에 포함된 뼈대 애니메이션을 소개했습니다. 이 글에서는 내보낸 구성 데이터의 각 필드의 의미를 소개합니다(내보낸 xml 데이터의 각 필드의 의미도 설명합니다). DragonBone 의미).

스켈레톤 노드

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

이름: 플래시 파일 이름.

frameRate: 플래시 프레임 속도입니다.

버전: Dragonbones 버전 번호.

전기자 노드

첫 번째는 뼈대의 일부 데이터를 가로채는 뼈대 노드입니다.

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

9cceca18598b2a00dd076ce7fa6f5e5d 노드는 뼈입니다(b는 뼈의 약어입니다). 95313544512d1db683232029f316ae35 노드에는 애니메이션의 전체 뼈대인 여러 개의 9cceca18598b2a00dd076ce7fa6f5e5d가 포함되어 있습니다. 다음 두 그림에서 볼 수 있듯이 전체 레이어와 뼈의 관계는 뼈대 노드이고, 빨간색 상자의 각 레이어는 b 노드입니다.

031f985c524add179bc74f3972cb2b62 노드에 여러 개의 아마추어 노드가 있는 이유는 무엇입니까? 플래시에는 여러 골격 애니메이션이 있을 수 있으므로 각 골격 애니메이션은 뼈대에 해당합니다. 예를 들어 아래 플래시를 내보낸 후 뼈대에는 여러 뼈대가 포함됩니다. 프레임 태그가 있는 구성요소는 뼈대로 처리됩니다.

2b0275e1d3eea369286cdd1c2f175664 name 속성은 라이브러리에 있는 구성 요소의 이름(아래 그림)이며 Skeleton의 이름이기도 합니다.

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의 레이어 이름입니다.

부모: 위 그림의 뼈 부모 노드입니다.

x, y: 상위 노드의 원점을 기준으로 하는 구성 요소 회전 기준점의 좌표로, 아래 그림과 같이 y 방향은 양의 방향으로 아래쪽입니다.

kX, kY: SkewX와 SkewY를 나타냅니다. 일반적으로 둘은 동일하며 회전(회전) 크기를 나타냅니다.

cX, cY: scaleX를 나타내고, scaleY는 확대/축소 크기를 나타냅니다.

pX, pY: 구성 요소 원점을 기준으로 한 회전 기준점의 좌표인ivotX, PivotY를 나타냅니다. 다음 그림은 30도 회전을 조정합니다.

z: 레벨, 맨 아래 레이어는 레이어 0으로 하나씩 증가합니다.

d노드

스켈레톤에 표시되는 노드는 스킨으로 이해될 수 있습니다. 라이브러리의 여러 구성 요소가 레이어에 사용되면 여러 개의 a3ac92cb7e65fa28e53b5d109c7708e5

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

name: 라이브러리의 경로와 구성 요소 이름을 연결한 개체 이름을 표시합니다.

pX, pY: 원점을 기준으로 개체의 변위를 표시합니다.

애니메이션 노드

5cac1272d211c4af34126a1540549247 노드는 시간에 따른 뼈대의 변화를 나타냅니다.

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

5cac1272d211c4af34126a1540549247에는 왜 여러 개의 91db72ebe85630ddced6bc3e018eeccb이 있나요? 그 이유는 0dbb597697e8e53242b021ac384cff8d에 여러 개의 95313544512d1db683232029f316ae35가 있고(위 참조), 애니메이션과 armature가 name 속성에 의해 일대일로 대응되기 때문입니다.

mov 노드

mov 노드는 실제로 프로그램의 애니메이션에 해당합니다. TimeLine의 프레임 레이블은 mov를 생성하므로 하나의 91db72ebe85630ddced6bc3e018eeccb에 여러 개의 mov가 있습니다.

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

이름: 프레임 라벨 이름.

dr: 지속 시간, mov가 몇 프레임 동안 지속되는지를 나타냅니다. 위 그림과 같이 스탠드는 7프레임 동안 지속됩니다.

to: 그게 무슨 역할을 하는지 정말 모르겠어요.

drTW: Duration_tween, 애니메이션이 실행되는 시간, 1/24*7=0.29초를 나타냅니다. Dragonbones 패널에서 TotalTime을 설정하면 이 값에 영향을 줍니다.

lp: 루프(loop), 루프 여부를 나타냅니다.

tE: 그게 무슨 역할을 하는지 정말 모르겠어요.

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