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

cocos2dx はエディター (cocostudio または Flash プラグイン DragonBones) から xml または json データを取得し、次のようなコードを呼び出してアニメーション効果を表示します

ArmatureDataManager::getInstance()->addArmatureFileInfoAsync(
  "armature/Dragon.png", "armature/Dragon.plist", "armature/Dragon.xml",
   this, schedule_selector(TestAsynchronousLoading::dataLoaded));
Armature *armature = nullptr;
armature = Armature::create("Dragon");
armature->getAnimation()->playWithIndex(1);
addChild(armature);

では、内部呼び出しはどのように実装されるのでしょうか?

Armature::create と armature->getAnimation()->playWithIndex は何を実装しますか??これらの記事では、ソースコードからアーマチュアを分析します。

この記事はアーマチュア解析の最初の記事です。cocos2dxにおけるスケルトンアニメーション全体を解析します。含まれるコンテンツは次のとおりです:

スケルトンアニメーションとは

エディターのエクスポート データ形式の概要

ソースコードの概要

スケルトンアニメーションとは

ゲーム内のアニメーションは大きく以下の 3 種類に分けられます。

フレームアニメーション

トゥイーン

スケルトンスキンアニメーション

フレームアニメーション

これは最も基本的なアニメーションであり、以下の 2 つのアニメーションの基礎となります。 cocos2dx のアニメーションは、フレーム アニメーションです。利点は実装が簡単なことですが、欠点はリソースを無駄に消費することです (フレームごとに 1 つの画像、以下の 2 つのアニメーションを比較してください)。

トゥイーンアニメーション

フラッシュではトゥイーン アニメーションがよく使用されます。フレームごとに 1 枚の画像を必要とせず、開始状態と終了状態のみを差分と経過時間に基づいて計算できます。利点は、リソースを節約し、アーティストにとって馴染みやすいことです。

スケルトンスキンアニメーション

スケルトン アニメーションは、アニメーションのさまざまな部分が関連する構造 (スケルトン) を生成し、グラフィックスをボーンにバインドできるようにするトゥイーン アニメーションの拡張であると考えることができます。欠点はプログラムの実装が複雑になることですが、トゥイーンアニメーションと比較した利点は以下の2点です(その他の利点はまだ発見されていません):

1. エクスポート設定データが少なく、アート制作が簡単です

次のような構造のボーンがあるとします

本体

左腕

左手

右腕

右手

頭

脚左

右脚

トゥイーン アニメーションを使用して、アニメーション全体を右に移動して新しいフレームを作成する必要があるとします。ただし、スケルトン アニメーションでは、移動するだけで済みます。ボディとその子ノードの位置は親ノードの動きに従います。エクスポートに対応する構成では、トゥイーン アニメーションは body や armLeft などのすべてのサブノードによってエクスポートされたデータを処理する必要がありますが、スケルタル アニメーションはボディの 1 つのノードのデータのみを変更するため、エクスポートされるデータははるかに小さくなります。

2. ジョイントクラック補修

下の写真は『ゲームエンジンアーキテクチャ』の449ページより拝借しました。描画時に注意しないと関節のリンクに亀裂が入る可能性があるということです。この問題は、スケルタル アニメーションを使用することで解決できます。スケルタル アニメーションのスキンは、重みに応じて (ボーン内の) 複数のジョイントにバインドでき、重みに応じて伸縮できます。 . もっとバインドできるのかと思いますが、Flash 用の DragonBones プラグインは動作しません。スパインは、この種のマルチバインディングを適切にサポートしています。

エディターのエクスポート データ形式の概要

cocostudio によってエクスポートされる json 構造は、dragonbones によってエクスポートされる xml 構造に似ています。これらは両方ともボーン レイヤー、アニメーション レイヤー、イメージ レイヤーの 3 層構造です (削除あり)。 >

<skeleton name="DragonBones_Tutorial_MultiBehavior" frameRate="24" version="2.2">
 <armatures>
  <armature name="Dragon">
   <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">
    <d name="parts-tail" pX="0" pY="-63.8"/>
   </b>
  </armature>
 </armatures>
 <animations>
  <animation name="Dragon">
   <mov name="stand" dr="7" to="6" drTW="100" lp="1" twE="0">
   </mov>
   <mov name="walk" dr="8" to="5" drTW="200" lp="1" twE="0">
   </mov>
   <mov name="jump" dr="5" to="3" drTW="5" lp="1" twE="NaN">
   </mov>
   <mov name="fall" dr="5" to="6" drTW="5" lp="1" twE="NaN">
   </mov>
  </animation>
 </animations>
 <TextureAtlas name="DragonBones_Tutorial_MultiBehavior" width="512" height="512">
 </TextureAtlas>
</skeleton>

031f985c524add179bc74f3972cb2b62db0f662b56ce326847cc07ec202a961fはフラッシュのエリア1に相当するスケルトン部分で、レイヤーはボーンです。

ec48449cb61873d5e7b87658fbddfc1d5a366519b1981adca6be91f5faf21047 は、Flash の 2 つの領域に対応するアニメーション部分で、フレーム ラベルを使用して、立つ、歩く、ジャンプなどのアニメーションを区別します。

c7b678c1511d81bfb3f6217278ea81d0306332f7e00d2ebbe809c14cd91e309dはフラッシュの3つの領域に相当するスケルトン部分であり、画像情報であるスキンです。

この情報を使用すると、プログラムで Flash のアニメーション効果を復元できます。dr、drTW、x、kX、kY などの具体的な意味については、次の記事で説明します。

ソースコードの概要

コードは大きく 2 つの部分に分けることができます。xml または json データの解析と、解析されたデータを使用したアニメーションの生成です。

データ解析関連コードの UML

各クラスの役割の簡単な紹介:

DataReaderHelper: アーマチュア、アニメーション、および TextureAtlas を解析するデータ生成プログラムによって直接使用できるデータ構造体 ArmatureData、AnimationData、および TextureData。

ArmatureDataManager: DataReaderHelper とその解析データを管理します。

ArmatureData: XML の 42272462d2c96339e487aa53d54897b3b5ca92f89c0db1b672bc4bc49dd5a9be に対応します。

AnimationData: XML の 7c29fd164dc9c189f07464aede213def1b9b914a75b85bfcfcc28a69d6511bab に対応します。

TextureData: XML の 2eb80949e68bb309b7a57afd4be2e2feb992ebf4aaf4a251b54037e36bb1b0b9 に対応します。

BoneData: XML の a4b561c25d9afb9ac8dc4d70affff4190d36329ec37a2cc24d42c7229b69747a に対応します。

DisplayData: XML の a3ac92cb7e65fa28e53b5d109c7708e5abd73b85f7c61f178e6945240bab1a8e に対応します。

MovementData: XML の cd194de5e5bfcb04f00343babb70903498011551e877b751002db1bd5aa30b32 に対応します。

MovementBoneData: XML の cd194de5e5bfcb04f00343babb709034a4b561c25d9afb9ac8dc4d70affff4190d36329ec37a2cc24d42c7229b69747a98011551e877b751002db1bd5aa30b32 に対応します。

FrameData: XML の に対応します。

アニメーション関連コードの UML を生成

各クラスの役割の簡単な紹介:

アーマチュア: スケルトン情報とアニメーション情報が含まれており、これを使用してアニメーションを再生できます。

トゥイーン: 骨格アニメーション用のトゥイーン、ボーンごとに 1 つのトゥイーン。上記の対応するフラッシュ パネルは、スタンド アニメーションの尻尾レイヤーの 1 番目から 7 番目のフレームです。

ArmatureAnimation: アニメーションを形成するには、すべてのトゥイーンのコレクションで十分です。

ボーン: Tween によるボーン情報。特定の時点でのボーンの状態を取得できます。

DisplayFactory: スキンなどの表示オブジェクトを作成します。

DisplayManager: 各ボーンに 1 つあり、ボーン上の表示オブジェクトを管理します。

スキン: 画像の表示オブジェクト。

上記の内容はスクリプトハウスの編集者が共有したcocos2dxスケルタルアニメーションアーマチュアソースコード解析(1)です。