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>

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

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

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

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

ソースコードの概要

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

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

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

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

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

ArmatureData: XML の に対応します。

AnimationData: XML の に対応します。

TextureData: XML の に対応します。

BoneData: XML の に対応します。

DisplayData: XML の に対応します。

MovementData: XML の に対応します。

MovementBoneData: XML の に対応します。

FrameData: XML の に対応します。

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

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

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

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

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

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

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

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

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

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