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로 실시하고 있습니다.