모션 재생 종료 콜백(Web)
[마지막 갱신일: 2020/01/30]
개요
Cubism SDK for Web에서는 모션 재생이 끝날 때 콜백으로 이벤트를 얻을 수 있습니다.
샘플에서는, 콜백 함수로 재생 종료를 통지하는 로그 텍스트를 출력하고 있습니다.
콜백 구현
이번은 모션의 재생 종료시에 콜백에 의한 처리를 행하기 위해, 모션을 관리하는 추상 클래스이다
Framework/src/motion/acubismmotion에서 콜백을 처리할 수 있도록 구현합니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
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() 를 사용해 출력하도록 구현하고 있습니다.
모션 재생 종료시의 처리를 변경하고 싶은 경우는, 하기 함수의 구현을 변경해 주세요.
|
1 2 3 4 |
_finishedMotion = (self: ACubismMotion) => { LAppPal.printMessage("Motion Finished:" ); console.log(self); } |
또, 콜백 함수의 등록은 모션 데이터를 읽어들이는 Framework 계층의 CubismUserModel.loadMotion() 사용시에 모션의 생성과 동시에 콜백 함수를 건네주고 있습니다.
이미 모션이 있을 때는 「콜백의 구현」에서 소개한 setFinishedMotionHandler() 를 사용하고 있습니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
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 에 콜백 함수를 건네줄 수 있도록 구현을 행하고 있습니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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; } |
구현의 발전에 대해서
샘플에서는 모션의 재생 종료만의 구현입니다만, 이러한 구현을 발전시킴으로써, 모션의 재생 종료 후에 콜백 함수로 비동기 처리등을 이용할 수 있게 되거나,
콜백을 적용하고자 하는 실제 처리에서 함수를 역방향으로 함으로써 모션 재생 종료 이외의 부분에도 콜백의 구현이 가능하게 됩니다.