CubismMotionApplier

Updated: 03/14/2023

Summary

The CubismMotionApplier component enables animation using Cocos Creator’s AnimationController (AnimationGraph).

To use it, you need CubismMotionApplier, CubismModel component and Cocos Creator’s AnimationController in the same Node.
AnimationGraph must be set for the AnimationController component.

Click here for the corresponding tutorial article.

In order to reflect the animation in AnimationController (AnimationGraph) on the CubismModel parameters and parts, the following processing is performed.

Get Reference to Parameters and Parts to Be Manipulated

Cache references to CubismModel parameters and parts manipulated by AnimationClip set in AnimationController (AnimationGraph) with CubismMotionApplier.start.

At that time, a map is cached based on the path information in order to search for the operation target based on the path information recorded in the AnimationClip.

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]));
  }
}

This is done by CubismMotionApplier.refresh.

Value Reflection

Every frame, CubismMotionApplier.onLateUpdate is used to calculate and reflect the value.

The following process is repeated for the number of layers.

Calls for processing according to the current playback status.

If a transition is in progress, the process is performed additionally.

this.valueUpdate(currentClipStatuses, currentStateStatus.progress);

this.valueUpdate(nextClipStatuses, nextStateStatus.progress, transProgress);

Retrieving Values from an AnimationClip

Get the destination Path and current value from AnimationClip with CubismMotionApplier.setCache, and separately call CubismMotionApplier.setParameterCache and CubismMotionApplier.setPartCache.

CubismMotionApplier.setParameterCache and CubismMotionApplier.setPartCache cache the information obtained from the AnimationClip for calculation.

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);
}

Reflecting Layer Weights

Blends the pre-processed layer with the currently processed layer at the current layer’s weight value.

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;
});

This is done by CubismMotionApplier.calcCache.