모션 재생 종료 콜백(Web)

업데이트： 2020/01/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;
}

구현의 발전에 대해서

샘플에서는 모션의 재생 종료만 구현되었지만, 이러한 구현을 발전시킴으로써 모션의 재생 종료 후에 콜백 함수로 비동기 처리 등을 이용할 수 있게 되거나
콜백을 적용하고자 하는 실제 처리에서 함수를 역방향 DNS 조회함으로써 모션 재생 종료 이외의 부분에도 콜백의 구현이 가능해집니다.