视线跟踪设置 (SDK for Cocos Creator)

最終更新： 2023年3月14日

这里将说明如何使模型的视线跟踪鼠标光标。

概述

为了设置视线跟踪，Cubism SDK中使用了一个名为Lookat的组件。

SDK中包含一个使用了该组件的名为[LookAt]的范例场景，因此请同时参考。
这是一个通过视线跟踪围绕模型头部的Node位置的范例。
/assets/resources/Samples/Lookat

要设置Lookat，请执行以下三项操作。

1. 附加管理Lookat的组件
2. 指定要跟踪的参数
3. 设置视线跟踪对象

附加管理Lookat的组件

将管理视线跟踪、名为CubismLookController的组件附加到作为模型根的Node上。

CubismLookController有四个设置项目。

• – Blend Mode：设置如何将视线跟踪时波动的值应用到参数。可以设置以下三项。
  • Multiply：正片叠底到当前设置的值。
  • Additive：加算到当前设置的值。
  • Override：覆盖当前设置的值。
• Center：在这里设置作为跟踪座标中心的Node。
  中心是设置的Node的Bounds中心。
  Center中设置的是[模型]/Drawables/下的Node。
  如果此项目没有设置任何内容，则使用附加CubismLookController的Node的中心。
• Damping：跟踪对象所需的时间。值越小，跟踪速度越快。
• Target：设置视线跟踪的目标。稍后将描述细节。

此次，请将Blend Mode设置为[Override]。

指定要跟踪的参数

在[模型]/Parameters/下，置入了管理该模型参数的Node。
另外，这个Node中设置的名称就是参数的ID。
这些与您可以使用CubismModel.parameters获得的内容相同。

从该参数用Node中，将名为CubismLookParameter的组件附加到希望跟踪的ID。

如果CubismLookParameter附加到参数用Node上，则上述CubismLookController将参考它并跟踪它。

CubismLookParameter有两个设置项目。

• Axis：指定将设置参数视为哪个轴的变换。例如，如果指定了X，它将根据Target的X轴的值进行计算并设置。
• Factor：设置要乘以计算值的数值。由于计算结果的值在−1～+1的范围内，
  根据参数，增加或减少范围、或者反转+和-可能更自然。

设置视线跟踪对象

最后，准备要跟踪的对象。

在CubismLookController组件的[Target]中，设置实装[ICubismLookTarget]接口的组件。

根据目标设置，可以设置特定条件，例如将对象设置为视线跟踪到鼠标光标或Node的位置，或者使其仅在拖动时跟踪等。

创建一个名为“CubismLookTarget”的TypeScript脚本并重写代码如下：
这里将跟踪被拖动鼠标的座标。

import { _decorator, Component, Node, Input, EventTouch, input, math, Vec3, __private, Camera, Vec2, screen } from 'cc';
import ICubismLookTarget from '../../Framework/LookAt/ICubismLookTarget';
const { ccclass, property } = _decorator;

@ccclass('CubismLookTarget')
export class CubismLookTarget extends Component implements ICubismLookTarget {
  readonly [ICubismLookTarget.SYMBOL]: typeof ICubismLookTarget.SYMBOL = ICubismLookTarget.SYMBOL;

  private _position: math.Vec3 = Vec3.ZERO;

  public getPosition(): math.Vec3 {
    return this._position;
  }

  public isActive(): boolean {
    return true;
  }

  protected start() {
    input.on(Input.EventType.TOUCH_MOVE,this.onTouchMove,this);
    input.on(Input.EventType.TOUCH_END,this.onTouchEnd,this);
  }

  public onTouchMove(event: EventTouch) {
    let targetPosition = event.getLocationInView();
    targetPosition.x = targetPosition.x / screen.resolution.width;
    targetPosition.y = targetPosition.y / screen.resolution.height;

    targetPosition = targetPosition.multiplyScalar(2).subtract(Vec2.ONE);

    this._position = new Vec3(targetPosition.x, targetPosition.y, this._position.z);
  }

  public onTouchEnd(event: EventTouch) {
    this._position = Vec3.ZERO;
  }
}

创建一个空的Node并附加CubismLookTarget。

选择模型并将上面创建的Node从Inspector视图拖放到CubismLookController的[Target]。

这样就完成了设置。

运行场景并使用鼠标左键拖动Game视图以跟踪模型的视线。