EyeBlink (Cocos Creator)

最終更新： 2023年3月14日

概述

EyeBlink是将开/关值应用于眨眼参数的当前值的功能。
参考此处了解如何在模型上设置眨眼参数。

除了在模型本身中设置之外，用户还可以在Cocos Creator上任意指定眨眼参数。

Cubism SDK for Cocos Creator中的EyeBlink包含三种类型的元素。

1. 参数指定用组件
2. 将值应用于各参数的组件
3. 操作2中应用的值

1. 参数指定用组件

使用CubismEyeBlinkParameter指定用于EyeBlink的参数。

CubismEyeBlinkParameter是一个继承Component的组件，它通过附加到置入[Prefab根]/Parameters/下的GameObject来使用。

这会将与附加的GameObject具有相同ID的参数视为眨眼的参数。

如果模型本身设置有眨眼参数，则CubismEyeBlinkParameter将在载入时附加到该参数的GameObject上。

由于CubismEyeBlinkParameter用作获取参考目的地的标记，因此它内部不处理任何内容，也没有数据。

2. 将值应用于各参数的组件

使用CubismEyeBlinkController将打开/关闭值应用于各参数。
这是一个继承自Component的组件，使用时会附加到Cubism的Prefab的根。

在原始化期间获取附加到Prefab的所有CubismEyeBlinkParameters的参考。
如果在执行过程中追加/删除眨眼参数，调用CubismEyeBlinkController.refresh()再次获取参考。

  /** Refreshes controller. Call this method after adding and/or removing <see cref="CubismEyeBlinkParameter"/>s. */
  public refresh(): void {
    const model = CoreComponentExtensionMethods.findCubismModel(this);

    // Fail silently...
    if (model == null) {
      return;
    }

    // Cache destinations.
    const tags =
      model.parameters != null
        ? ComponentExtensionMethods.getComponentsMany(model.parameters, CubismEyeBlinkParameter)
        : null;

    this.destinations = new Array(tags?.length ?? 0);

    for (var i = 0; i < this.destinations.length; i++) {
      this.destinations[i] = tags![i].getComponent(CubismParameter);
    }

    // Get cubism update controller.
    this.hasUpdateController = this.getComponent(CubismUpdateController) != null;
  }

...

  /** Called by Cocos Creator. Makes sure cache is initialized. */
  protected start(): void {
    // Initialize cache.
    this.refresh();
  }

CubismEyeBlinkController在每帧的onLateUpdate()时机将CubismEyeBlinkController.eyeOpening的值应用于CubismEyeBlinkParameter标记的参数。

// Apply value.
CubismParameterExtensionMethods.blendToValueArray(
  this.destinations,
  this.blendMode,
  this.eyeOpening
);

EyeOpening的设置值在0.0f～1.0f的范围内。
CubismEyeBlinkController使用CubismEyeBlinkController.blendMode中设置的计算方法将此值应用于对象参数。

通过从外部操纵此EyeOpening值，您可以使模型的眼睛睁开或闭上。

/** Opening of the eyes. */
@property({ type: CCFloat, visible: true, serializable: true, range: [0.0, 1.0, 0.01] })
public eyeOpening: number = 1.0;

3. 操纵2中应用的值

如“2. 将值应用于各参数的组件”中所述，您可以通过操作CubismEyeBlinkController.eyeOpening的值，将值应用于眨眼的参数。
Cubism SDK for Cocos Creator可以通过以下两种方式操作此值：

• 通过动态操纵值
• 按组件操作值

此外，通过在用户端实装对该值的操作处理，可以独立自定义眨眼速度、时间等。

通过动态操纵值

当使用设置有眨眼参数的模型通过Cubism的Animator创建动态时，可以设置眨眼曲线。

如果将带有眨眼曲线的.motion3.json载入项目，AnimationClip将以CubismEyeBlinkController.eyeOpening的值为对象生成该曲线。
因此，CubismEyeBlinkController.eyeOpening的值是通过以Animator组件等播放AnimationClip来操作的。

按组件操作值

在Cubism SDK for Cocos Creator中，CubismAutoEyeBlinkInput组件也可用于操作眨眼值。

CubismAutoEyeBlinkInput根据从Inspector设置的速度、间隔以及添加到间隔的随机摇动的宽度来计算和设置眨眼值。

protected lateUpdate(dt: number): void {
  // Fail silently.
  if (this.controller == null) {
    return;
  }

  // Wait for time until blink.
  if (this.currentPhase == Phase.Idling) {
    this.t -= dt;

    if (this.t < 0) {
      this.t = Math.PI * -0.5;
      this.lastValue = 1;
      this.currentPhase = Phase.ClosingEyes;
    } else {
      return;
    }
  }

  // Evaluate eye blinking.
  this.t += dt * this.timescale;
  let value = Math.abs(Math.sin(this.t));

  if (this.currentPhase == Phase.ClosingEyes && value > this.lastValue) {
    this.currentPhase = Phase.OpeningEyes;
  } else if (this.currentPhase == Phase.OpeningEyes && value < this.lastValue) {
    value = 1;
    this.currentPhase = Phase.Idling;
    const range = this.maximumDeviation * 2;
    this.t = this.mean + random() * range - this.maximumDeviation;
  }

  this.controller.eyeOpening = value;
  this.lastValue = value;
}

CubismAutoEyeBlinkInput具有三个设置项目。

• mean
• maximumDeviation
• timescale

/** Mean time between eye blinks in seconds. */
@property({ type: CCFloat, serializable: true, range: [1.0, 10.0, 0.001] })
public mean: number = 2.5;

/** Maximum deviation from {@link mean} in seconds. */
@property({ type: CCFloat, serializable: true, range: [0.5, 5.0, 0.001] })
public maximumDeviation: number = 2.0;

/** Timescale. */
@property({ type: CCFloat, serializable: true, range: [1.0, 20.0, 0.001] })
public timescale: number = 10.0;

• mean
  设置至眨眼的时间。
  
  单位是秒。
  
  实际上，使用了这个值加上Maximum Deviation所引起误差后的时间。
• maximumDeviation
  设置要添加到Mean中所设置时间的随机波动宽度。
  
  按照以下方式计算值：

const range = this.maximumDeviation * 2;
this.t = this.mean + random() * range - this.maximumDeviation;

• timescale
  这将是眨眼的速度。
  
  它针对从前一帧经过的时间进行正片叠底。