CubismMotionApplier
업데이트: 2023/03/14
개요
CubismMotionApplier 구성 요소를 사용하면 Cocos Creator의 AnimationController (AnimationGraph)를 사용하여 애니메이션을 실행할 수 있습니다.
사용하려면 동일한 Node에 CubismMotionApplier, CubismModel 구성 요소 및 Cocos Creator의 AnimationController가 필요합니다.
AnimationController 구성 요소에는 AnimationGraph를 설정해야 합니다.
해당 튜토리얼 기사는 여기를 참조하십시오.
CubismModel의 파라미터와 파츠에 AnimationController (AnimationGraph)에서의 애니메이션을 반영시키기 위해 다음 처리를 실시합니다.
조작할 파라미터 및 파츠 참조 취득
CubismMotionApplier.start
로 AnimationController (AnimationGraph)에 설정된 AnimationClip에 의해 조작하는 CubismModel의 파라미터와 파트에 대한 참조를 캐시합니다.
이때 AnimationClip에 기록된 Path 정보를 바탕으로 조작 대상을 찾기 위해 Path 정보를 바탕으로 Map에서 캐시를 실시합니다.
if (parameters ! = null) { for (let i = 0; i < parameters.length; i++) { const path = makePath(parameters[i], model); this.parameters.set(path, new ValueCache(parameters[i])); } } if (parts ! = null) { for (let i = 0; i < parts.length; i++) { const path = makePath(parts[i], model); this.parts.set(path, new ValueCache(parts[i])); } }
이 처리는 CubismMotionApplier.refresh
로 실시하고 있습니다.
값 반영
매 프레임 CubismMotionApplier.onLateUpdate
에서 값 계산 및 반영을 수행합니다.
다음 작업을 레이어 수만큼 반복합니다.
현재 재생 상황에 따라 처리를 호출합니다.
또한 천이 중인 경우 추가로 처리를 실시합니다.
this.valueUpdate(currentClipStatuses, currentStateStatus.progress);
this.valueUpdate(nextClipStatuses, nextStateStatus.progress, transProgress);
AnimationClip에서 값 회수
CubismMotionApplier.setCache
로 AnimationClip으로부터 변경처의 Path와 현재의 값을 취득해,CubismMotionApplier.setParameterCache
, CubismMotionApplier.setPartCache
를 구분해서 호출합니다.
CubismMotionApplier.setParameterCache
, CubismMotionApplier.setPartCache
로는 AnimationClip에서 얻은 정보를 계산용으로 캐시합니다.
const cache = this.parameters.get(nodePath); if (cache == null) { return; } if (Number.isNaN(cache.calcValue)) { cache.calcValue = value; } else { cache.calcValue = math.lerp(cache.calcValue, value, transProgress); }
레이어 가중치 반영
현재 레이어의 가중치로 전처리 레이어와 현재 처리 레이어를 혼합합니다.
this.parameters.forEach((cache, _key, _map) => { if (Number.isNaN(cache.value)) { cache.value = cache.calcValue; } else if (!Number.isNaN(cache.calcValue)) { cache.value = math.lerp(cache.value, cache.calcValue, layerWeight); } cache.calcValue = Number.NaN; }); this.parts.forEach((cache, _key, _map) => { if (Number.isNaN(cache.value)) { cache.value = cache.calcValue; } else if (!Number.isNaN(cache.calcValue)) { cache.value = math.lerp(cache.value, cache.calcValue, layerWeight); } cache.calcValue = Number.NaN; });
이 처리는 CubismMotionApplier.calcCache
로 실시하고 있습니다.