モーション再生終了のコールバック(Web)

最終更新： 2020年1月30日

概要

Cubism SDK for Webでは、モーションの再生終了時にコールバックによるイベントの取得がおこなえるようになりました。

サンプルでは、コールバック関数で再生終了を通知するログテキストを出力しています。

コールバックの実装

今回はモーションの再生終了時にコールバックによる処理をおこなうため、モーションを管理する抽象クラスである
Framework/src/motion/acubismmotion でコールバックを扱えるように実装をおこなっています。

export namespace Live2DCubismFramework
{
    // モーション再生終了コールバック関数の定義
    export type FinishedMotionCallback = (self: ACubismMotion) => void
  
    export abstract class ACubismMotion
    {
        ・
        ・
        ・
        // モーション再生終了コールバックの登録
        public setFinishedMotionHandler =
            (onFinishedMotionHandler: FinishedMotionCallback) =>
                this._onFinishedMotion = onFinishedMotionHandler;

        //モーション再生終了コールバックの取得
        public getFinishedMotionHandler = () => this._onFinishedMotion;
        ・
        ・
        ・
        // モーション再生終了時に呼び出されるコールバック関数を入れる変数
        public _onFinishedMotion?: FinishedMotionCallback;
    }
}

コールバック関数の利用

コールバック関数で実際に処理させたい内容を実装します。

サンプルでは、モーション再生終了を通知するログテキストを LAppPal.printMessage() を使用して出力するように実装しています。
モーション再生終了時の処理を変更したい場合は、下記関数の実装を変更してください。

_finishedMotion = (self: ACubismMotion) => {
    LAppPal.printMessage("Motion Finished:");
    console.log(self);
}

また、コールバック関数の登録はモーションデータを読み込むFramework層の CubismUserModel.loadMotion() 使用時にモーションの生成と同時にコールバック関数を渡しています。
既にモーションがある際は 「コールバックの実装」で紹介した setFinishedMotionHandler() を使用しております。

public startMotion(
    group: string,
    no: number,
    priority: number,
    onFinishedMotionHandler?: FinishedMotionCallback
): CubismMotionQueueEntryHandle {
    ・
    ・
    ・
    if(motion == null)
    {
        let path: string = fileName;
        path = this._modelHomeDir + path;

        fetch(path).then(
            (response) =>
            {
                return response.arrayBuffer();
            }
        ).then(
            (arrayBuffer) =>
            {
                let buffer: ArrayBuffer = arrayBuffer;
                let size = buffer.byteLength;

                // モーションデータを読み込むのと同時にコールバック関数を渡して登録する
                motion = <CubismMotion>this.loadMotion(buffer, size, null, onFinishedMotionHandler);
                ・
                ・
                ・
            }
        );
    } else {
        motion.setFinishedMotionHandler(onFinishedMotionHandler);
    }
}

サンプルでは、タップイベントを取得する OnTap() 実行時に呼び出される startRandomMotion() からコールバック関数を渡しています。

また、実際にモーションを再生しているのは CubismMotion.doUpdateParameters() となるので、CubismMotion にコールバック関数を渡せるように実装をおこなっています。

public static create(
    buffer: ArrayBuffer,
    size: number,
    onFinishedMotionHandler?: FinishedMotionCallback
): CubismMotion {
    const ret = new CubismMotion();

    ret.parse(buffer, size);
    ret._sourceFrameRate = ret._motionData.fps;
    ret._loopDurationSeconds = ret._motionData.duration;
    // コールバック関数の登録
    ret._onFinishedMotion = onFinishedMotionHandler;

    return ret;
}

実装の発展について

サンプルではモーションの再生終了のみの実装ですが、これらの実装を発展させることにより、モーションの再生終了後にコールバック関数で非同期処理などが利用できるようになったり、
コールバックを適用したい実際の処理から関数を逆引きすることによって、モーション再生終了以外の箇所にもコールバックの実装が可能になります。