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; } }
Tips
Please note that in the sample, callbacks cannot be invoked under the following conditions.
- When the motion being played is set as “looping”
- When null is registered in the callback
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.