Callback for End of Motion Playback (Web)

Updated: 01/30/2020

Summary

Cubism SDK for Web allows callbacks to retrieve events when motion playback ends.

In the sample, the callback function outputs log text to notify of the end of playback.

Callback Implementation

In order to use callbacks when motion playback ends, callbacks have been implemented in Framework/src/motion/acubismmotion, an abstract class that manages motion.

export namespace Live2DCubismFramework
{
    // Definition of the motion playback end callback function
    export type FinishedMotionCallback = (self: ACubismMotion) => void
  
    export abstract class ACubismMotion
    {
        ・
        ・
        ・
        // Register motion playback end callback
        public setFinishedMotionHandler =
            (onFinishedMotionHandler: FinishedMotionCallback) =>
                this._onFinishedMotion = onFinishedMotionHandler;

        // Obtain motion playback end callback
        public getFinishedMotionHandler = () => this._onFinishedMotion;
        ・
        ・
        ・
        // Variable that contains the callback function to be called when motion playback ends
        public _onFinishedMotion?: FinishedMotionCallback;
    }
}

Use Callback Functions

Implement what you actually want to be processed in the callback function.

In the sample, log text notifying of the end of motion playback is implemented to be output using LAppPal.printMessage().
To change the processing at the end of motion playback, change the implementation of the following function.

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

The callback function is registered when CubismUserModel.loadMotion() is used in the Framework layer to load motion data, and the callback function is passed at the same time the motion is generated.
When there is already a motion, setFinishedMotionHandler() introduced in “Callback Implementation” is used.

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;

                // Register motion data by passing a callback function at the same time it is loaded.
                motion = <CubismMotion>this.loadMotion(buffer, size, null, onFinishedMotionHandler);
                ・
                ・
                ・
            }
        );
    } else {
        motion.setFinishedMotionHandler(onFinishedMotionHandler);
    }
}

In the sample, the callback function is passed from startRandomMotion(), which is called when OnTap() is executed to obtain the tap event.

In addition, since CubismMotion.doUpdateParameters() is actually playing back the motion, the implementation is made so that the callback function can be passed to 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;
    // Register callback functions
    ret._onFinishedMotion = onFinishedMotionHandler;

    return ret;
}

On the Development of Implementation

In the sample, only the end of motion playback is implemented, but by developing the implementation, asynchronous processing can be used in callback functions after motion playback is finished. Alternately, by reversing the function from the actual process to which the callback is to be applied, callbacks can be implemented at points other than the end of motion playback.