アニメーションの再生 (SDK for Cocos Creator)

最終更新： 2023年3月14日

Cubism Editor から書き出した組み込み用アニメーションファイルを、Cocos Creator プロジェクトのモデルで再生するまでのチュートリアルです。

「SDK をインポート」をおこなったプロジェクトに追加することを前提とした説明となっています。

概要

Cocos Creator プロジェクト上で Cubism のアニメーションを再生させるには、.motion3.json 形式のモーションファイルが必要です。
モーションファイルの書き出しについては「組み込み用データ」を参照してください。
SDK では、モデルと同様に motion3.json 用の Importer も用意しており、motion3.json はインポート時に Cocos Creator のアニメーション形式である AnimationClip に自動で変換されます。
変換された AnimationClip を用いることで、Cocos Creator 上では Live2D の機能は使わず、Cocos Creator のビルトイン機能のみでアニメーションを扱うことが可能となっています。
Cocos Creator プロジェクトでモーションを再生させる手順は以下のとおりです。

• モーションファイルをインポート
• AnimationClip を再生

モーションファイルをインポート

Cubism Editor から書き出した組み込み用モーションファイルを、それが入ったフォルダごと Project ビューにドラッグアンドドロップします。

すると、 以下の画像のように、motion3.json から AnimationClip が生成されます。
生成された AnimationClip に Loop を設定することも可能です。

TIPS

この AnimationClip は、モデルの各パラメータに設定する値をカーブとして持っていますが、
このカーブで設定するパラメータ用のプロパティは、モデルの Prefab の以下の階層にあります。（Value は Inspector 上では非表示になっています）

[モデルのルート]/Parameters/[パラメータ ID]/Cubism Parameter/Value

Value に設定する値の最大値と最小値は、パラメータ ID ごとに異なりますが、その範囲外の値は最大値または最小値として扱われます。

また、パーツの不透明度は、Prefab の以下の階層にあります。（Opacity は Inspector 上では非表示になっています）

[モデルのルート]/Parameters/[パーツ ID]/Cubism Part/Opacity

Opacity に設定する値は 0 ～ 1 の範囲です。この範囲外の値は 0 または 1 として扱われます。

これらのプロパティを指定すれば、Cocos Creator 上で作成した AnimationClip やプログラムから
モデルのパラメータやパーツの不透明度を操作することが出来ます。

AnimationClip を再生

Cocos Creator で AnimationClip を再生させるためには、 Animator を利用します。

• モデルの Prefab を Hierarchy にドラッグアンドドロップします。
• モデルの Prefab の Inspector で、 Animation コンポーネントを追加します。
• 「モーションファイルをインポート」で生成された AnimationClip を、 Animation コンポーネントの Default Clip にドラッグアンドドロップします。
• Animation コンポーネントの Play on load にチェックを入れます。

この状態で Scene を実行すると、アニメーションが再生されるようになっています。