EyeBlink (Cocos Creator)
最終更新: 2023年3月14日
概述
EyeBlink是将开/关值应用于眨眼参数的当前值的功能。
参考此处了解如何在模型上设置眨眼参数。
除了在模型本身中设置之外,用户还可以在Cocos Creator上任意指定眨眼参数。
Cubism SDK for Cocos Creator中的EyeBlink包含三种类型的元素。
- 参数指定用组件
- 将值应用于各参数的组件
- 操作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可以通过以下两种方式操作此值:
- 通过动态操纵值
- 按组件操作值
此外,通过在用户端实装对该值的操作处理,可以独立自定义眨眼速度、时间等。
TIPS
如果操作CubismEyeBlinkController.eyeOpening的组件在CubismEyeBlinkController之后执行,它可能不会按预期动作。
如果动作出现问题,可以通过在用户端显式控制组件的执行顺序来避免。
在Cubism SDK for Cocos Creator中,各组件的执行顺序由CubismUpdateController控制,因此您也可以使用它。
另外,由于上述两种设置方法在不同的时间操作相同的值,因此很难在不作任何努力的情况下将两者共存于一个模型中。
通过动态操纵值
当使用设置有眨眼参数的模型通过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
这将是眨眼的速度。
它针对从前一帧经过的时间进行正片叠底。