motion3.jsonに設定されたイベントを取得 (SDK for Cocos Creator)

最終更新： 2023年3月14日

ここでは、motion3.jsonに設定されたイベントの情報を、自動生成されるAnimationClipから発行されるイベントから取得する方法を説明します。

概要

［UserData］は、ユーザがモーションの任意のタイミングでイベントを発行することができます。
Cocos Creatorでは、motion3.jsonから変換されるAnimationClipからイベントが発行されます。
イベントの扱い方によっては、モーションの途中から音声を再生させたり、パーツの表示状態を変更するなど、様々なことに活用できます。

motion3.jsonへのイベントの設定方法については こちら をご覧下さい。

モーションから発行されるイベントの取得には、以下の手順を行ないます。

1. イベントを受け取るコンポーネントの作成
2. CubismMotion3Jsonに記述を追加
3. モデルとモーションをSceneに配置

イベントを受け取るコンポーネントの作成

Assetsウィンドウを右クリックし、［Create］-［TypeScript］-[New Component]をクリックしてTypeScriptスクリプトを作成します。
ここでは名前はUserDataTestとします。

作成したUserDataTestの中身を以下のように書き換えます。

import { _decorator, Component, Animation } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('UserDataTest')
export class UserDataTest extends Component {

  UserDataEventListener(value: String) {

    const anim = this.getComponents(Animation)[0];
    const currentState = anim.getState(anim.defaultClip!!.name)

    console.log("Time: " + currentState.current + "\n" + "Value: " + value);
  }

}

CubismMotion3Jsonに記述を追加

CubismMotion3Jsonクラスを開き、 toAnimationClipB() のAnimationEventを作成している箇所を以下のように記述します。

const frame = this.userData[i].time;
const functionName = `UserDataEventListener`
const params = new Array<string>();
params.push(this.userData[i].value);
animationClip.events.push({ frame: frame, func: functionName, params: params });

functionName には、前項で作成したUserDataTestクラスのイベントを受信するメソッドの名前を設定します。

モデルとモーションをSceneに配置

イベントが設定されたmotion3.jsonをインポート、または再インポートします。

インポートや再インポートについては、「SDK をインポート」「インポートしたモデルを更新」をご覧ください。

HierarchyウィンドウにモデルのPrefabを配置し、PrefabのルートにAnimationコンポーネントとUserDataTestコンポーネントをアタッチします。

motion3.jsonから生成されたAnimationClipを、Hierarchyに配置したPrefabへのAnimationコンポーネント内のDefault Clip 欄へドラッグ・アンド・ドロップします。

以上で設定は終了です。

この状態でSceneを実行すると、再生中のAnimationClipから特定のタイミングでイベントが発行され、Consoleウィンドウやブラウザのconsoleに、イベントに設定された文字列が出力されます。