모션 재생 시작 및 재생 종료 콜백(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;
}

구현의 발전에 대해서

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