> For the complete documentation index, see [llms.txt](https://octanta-studio.gitbook.io/zi-dong-jiao-cheng-sheng-cheng-qi-you-xi-nei-ti-shi-cn/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://octanta-studio.gitbook.io/zi-dong-jiao-cheng-sheng-cheng-qi-you-xi-nei-ti-shi-cn/usage-guide/advanced-creating-visual-prefab.md).

# Advanced: Creating Visual Prefab

## Custom UI Pointer or Hover

* 在 UI 层创建一个 GameObject，并为其添加指针图像。
* 将 UIPointerGraphAnimation 组件添加到主 GameObject。
* 在 Settings 字段中分配设置。可通过 Create > Tutorial System > Pointer Graphic Settings 创建新的设置。要完全控制动画，请使用 UIPointerNone 设置。
* 可选：添加文本元素并分配到 Text Element 字段，以显示步骤文本。
* 将指针的所有图像添加到 Images To Lerp 列表，以实现自动禁用射线检测和淡入淡出动画。
* 对于鼠标样式指针，将鼠标部件添加到对应字段以进行动画。
* 将其拖入文件夹制作成预制件。现在可以将此预制件分配给教程步骤中的 Pointer Prefab 和 Hover Prefab 字段。

## Custom UI Graphic

<figure><img src="/files/SSnJTD7YgtYUHbbm1E15" alt=""><figcaption><p>Graphic Prefab all possible components</p></figcaption></figure>

* 在 UI 层创建一个 GameObject，并为其添加所需图形——主组成、弹出窗口、动画等。
* 将 UIGraphicAnimation 组件添加到主 GameObject。
* 在 Settings 字段中分配设置。可通过 Create > Tutorial System > Graphic Settings 创建新的设置。要完全控制动画，请使用 UI Graphics None 设置。
* 可选：为图形背景设置 Background color，以实现背景暗化效果。
* 选择相对于画布的定位或使用当前锚点。
* 可选：添加文本元素并分配到 Text Element 字段，以显示步骤文本。
* 将图形的所有图像添加到 Images To Lerp 列表，以实现自动禁用射线检测和淡入淡出动画。
* 在 Confirm Button 字段中分配一个按钮，该按钮需在完成步骤前被按下。重要提示：按钮点击必须触发 UIGraphicAnimation 中的 InitializeByConfirm 方法。
* 在 Gesture Graphic 字段中分配滑动动画对象，以反映滑动方向，而无需重复图形。
* 将其拖入文件夹制作成预制件。现在可以将此预制件分配给教程步骤中的 Graphic Prefab 字段。

<figure><img src="/files/JHtKpbBLy4p0ono8Is2l" alt=""><figcaption><p>Confirm Button should have a reference to the graphic script and activate InitializeByConfirm method</p></figcaption></figure>

## Custom World Pointer or Hover

* 在世界坐标中创建一个 GameObject，并为其添加指针精灵/网格。
* 将 WorldPointerAnimation 组件添加到主 GameObject。
* 在 Settings 字段中分配设置。可通过 Create > Tutorial System > World Pointer Settings 创建新的设置。要完全控制动画，请使用 WorldPointerNone 设置。
* 可选：添加世界文本元素并分配到 Text Element 字段，以显示步骤文本。
* 将指针的所有精灵添加到 Sprites To Lerp 列表，所有指针网格添加到 Meshes To Lerp 列表，以实现自动禁用射线检测和淡入淡出动画。
* 对于 Frame 样式的指针，添加左上角的 Frame Corner 预制件。
* 将其拖入文件夹制作成预制件。现在可以将此预制件分配给教程步骤中的 World Pointer Prefab 和 World Hover Prefab 字段。

## Custom World Graphic

* 在世界坐标中创建一个 GameObject，并为其添加所需图形。
* 将 WorldGraphicAnimation 组件添加到主 GameObject。
* 在 Settings 字段中分配设置。可通过 Create > Tutorial System > World Graphic Settings 创建新的设置。要完全控制动画，请使用 UI Graphics None 设置。选择相对于摄像机的定位或使用当前位置。
* 可选：添加文本元素并分配到 Text Element 字段，以显示步骤文本。
* 将所有指针精灵添加到 Sprites To Lerp 列表，将所有指针网格添加到 Meshes To Lerp 列表，以实现自动禁用射线检测和淡入淡出动画。
* 将其拖入文件夹制作成预制件。现在可以将此预制件分配给教程步骤中的 World Graphic Prefab 字段。