How to Operate Parameters Cyclically (SDK for Cocos Creator)

Updated: 03/14/2023

This section describes how to set up periodic movement of parameter values, like breathing or a pendulum.


If you want to move any parameter cyclically, you can do so by using the CubismHarmonicMotionController.ts and CubismHarmonicMotionParameter.ts.

Implementation involves two things.

  1. Set Up to Control Parameters
  2. Specify Parameters to Be Moved

Set Up to Control Parameters

First, attach a script to the model’s foremost parent to control the motion.
The name is CubismHarmonicMotionController.ts.

CubismHarmonicMotionController.ts has two setting items.

  • Blend Mode: Specify how to calculate for the value currently set for the specified parameter.
    • Override: Overwrite the currently set value with a numerical value.
    • Additive: Add a numerical value to the currently set value.
    • Multiply: Multiply the currently set value by a numerical value.
  • Channel Timescales: You can optionally create multiple timescales and resize the timescales.

In this case, the Blend Mode settings are as follows.

  • Blend Mode: Override

Specify Parameters to Be Moved

Then, select the parameters you want to move and attach CubismHarmonicMotionParameter.ts.
Here, it attaches to angle X.
Angle X will be in [root]/Parameters/ParamAngleX.

CubismHarmonicMotionParameter.ts has five setting items.

  • Channel: Specify the Channel Timescale set in CustomHarmonicMotionController.ts.
  • Direction: Specify the width of the movement with respect to the center of the parameter.
    • Left: Only the left half moves from the center of the parameter.
    • Right: Only the right half moves from the center of the parameter.
    • Centric: The whole object moves from the center of the parameter.
  • Normalized Origin: Set the position of the parameter to be centered.
  • Normalized Range: Set the maximum distance to be moved from the center point based on the center determined by Normalized Origin.
  • Duration: Adjust the parameter cycle.

In this case, the settings are as follows:

  • Channel: 0
  • Direction: Centric
  • Normalized Origin: 0.5
  • Normalized Range: 0.5
  • Duration: 3

With the above settings, the parameters can be moved periodically as shown in the video below.

Was this article helpful?
Please let us know what you think about this article.