动态播放开始和播放结束回调（Web）

最終更新： 2024年12月19日

概述

现在在Cubism SDK for Web中可以在动态播放开始和结束时使用回调获取Event。

在范例中，回调函数输出通知播放开始和结束的记录文本。

回调实装

此次，由于在动态播放开始和结束时通过回调进行处理，因此进行实装，使其能够通过管理动态的抽象类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);
    }
}

在范例中，回调函数是从执行获取点击Event的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;
}

关于实装的发展

范例中只实装了退出动态播放，但通过发展这些实装，可以在动态播放开始和结束后通过回调函数进行异步处理等，通过从要应用回调的实际处理中反转函数，您可以在动态播放开始和结束以外的地方实装回调。