모션 재생 종료 콜백(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; } }
Tips
샘플에서는 이하의 상태라면 콜백을 호출할 수 없으므로 주의해 주세요.
- 재생 중인 모션이 「루프」로 설정된 경우
- 콜백에 null이 등록되었을 때
콜백 함수 이용
콜백 함수로 실제로 처리하고 싶은 내용을 구현합니다.
샘플에서는 모션 재생 종료를 통지하는 로그 텍스트를 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 조회함으로써 모션 재생 종료 이외의 부분에도 콜백의 구현이 가능해집니다.