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

最終更新： 2024年12月19日

概要

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

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

コールバックの実装

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

export namespace Live2DCubismFramework
{
    // モーション再生開始コールバック関数の定義
    export type BeganMotionCallback = (self: ACubismMotion) => void;

    // モーション再生終了コールバック関数の定義
    export type FinishedMotionCallback = (self: ACubismMotion) => void
  
    export abstract class ACubismMotion
    {
        ・
        ・
        ・
        // モーション再生開始コールバックの登録
        public setBeganMotionHandler =
            (onBeganMotionHandler: BeganMotionCallback) =>
                (this._onBeganMotion = onBeganMotionHandler);

        // モーション再生終了コールバックの登録
        public setFinishedMotionHandler =
            (onFinishedMotionHandler: FinishedMotionCallback) =>
                this._onFinishedMotion = onFinishedMotionHandler;

        //モーション再生開始コールバックの取得
        public getBeganMotionHandler = () => this._onBeganMotion;

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

        // モーション再生終了時に呼び出されるコールバック関数を入れる変数
        public _onFinishedMotion?: FinishedMotionCallback;
    }
}

コールバック関数の利用

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

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

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

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

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

public startMotion(
    group: string,
    no: number,
    priority: number,
    onFinishedMotionHandler?: FinishedMotionCallback,
    onBeganMotionHandler?: BeganMotionCallback
): 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(
                    arrayBuffer,
                    arrayBuffer.byteLength,
                    null,
                    onFinishedMotionHandler,
                    onBeganMotionHandler);
                ・
                ・
                ・
            }
        );
    } else {
        motion.setBeganMotionHandler(onBeganMotionHandler);
        motion.setFinishedMotionHandler(onFinishedMotionHandler);
    }
}

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

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

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

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

    return ret;
}

実装の発展について

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