练习 - 按钮和动态菜单面板

  • 10 分钟

可通过多种方式提供输入。 输入会触发某些事件并执行一些更改。 UI 组件可帮助用户与场景中的全息影像交互。

创建按钮的静态面板

  1. 在“层次结构”窗口中，右键单击 RoverExplorer 对象，然后选择“ 创建空 ”以将空对象添加为 RoverExplorer 的子级。 将对象 命名为 Buttons，并按如下所示配置 转换 组件：

    • 位置：X = -0.6，Y = 0.036，Z = -0.5
    • 旋转：X = 90，Y = 0，Z = 0
    • 比例：X = 1，Y = 1，Z = 1

    选中并定位了新创建的 Buttons 对象的 Unity 屏幕截图。

  2. 在“项目”窗口中，导航到 资产>MRTK。Tutorials.GettingStarted>Prefabs 文件夹，单击并拖动 PressableCylinderButton prefab 到 Buttons 对象，然后右键单击 PressableCylinderButton 并选择 “复制 ”以创建副本，重复，直到 按钮下总共有三个 PressableCylinderButton 对象：

    Unity 的屏幕截图，其中新增了 PressableRoundButton 预制件。

    窗口将提示你导入 TextMesh Pro。 选择第一个选项“导入 TMP Essentials”。

  3. 在“层次结构”窗格中，选择 “按钮 ”对象，然后在检查器窗格中，选择“ 添加组件 ”以添加 对象栏 组件。 按如下所述对其进行配置：

    • 对象栏流方向：水平
    • 间距介于：X = 0.2、Y = 0

    将按钮下的每个对象分配到对象栏组件上的对象栏对象列表：

    添加了、配置和应用的 GridObjectCollection 组件的 Unity Buttons 对象的屏幕截图。

  4. 在“层次结构”窗格中，将按钮命名为“Hints”、“Explode”和“Reset”。 对于每个按钮，在“可按按钮”组件中的“高级 StatefulInteractable 设置”下更改“SpeechRecognitionKeyword”属性，以匹配按钮名称：

    显示配置的按钮文本标签的屏幕截图。

  5. 在“层次结构”窗格中，选择 “提示 ”按钮对象，然后在检查器窗口中配置 PressableButton.OnClicked （） 事件，如下所示：

    • 将 RoverAssembly 对象分配到 None （对象） 字段
    • 从 “无函数 ”下拉列表中，选择 PlacementHintsController>TogglePlacementHints （） 将此函数设置为触发事件时要运行的作

    配置的 Hints 按钮对象 OnClick 事件的屏幕截图。

  6. 在“层次结构”窗格中，选择“ 爆炸 ”按钮对象，然后在检查器窗口中配置 PressableButton.OnClicked （） 事件，如下所示：

    • 将 RoverAssembly 对象分配到 None （对象） 字段
    • 从“无函数”下拉列表中，选择“ExplodedViewController”>ToggleExplodedView()，将此函数设置为事件触发时要执行的操作。

    在 Unity 中配置了“展开”按钮对象 OnClick 事件的屏幕截图。

  7. 按 “播放 ”按钮进入游戏模式。 按住空格键激活手部，然后使用鼠标按“Hints”按钮切换放置提示对象的可见性：

    Unity Play模式拆分视图的屏幕截图，其中“提示”按钮被按下。

  8. “爆炸”按钮 打开和关闭爆炸视图：

    Unity Play 模式拆分视图的屏幕截图，其中按下了“爆炸”按钮。

    稍后将在模块中实现 “重置” 按钮。

创建用户后面的动态菜单

  1. 在“项目”窗格中，进入“包>MRTK UX 组件>近菜单”文件夹，将NearMenuBase预制件单击并拖动到“层次结构”窗口中，将其变换位置设置为 X = 0，Y = -0.4，Z = 0，并按如下所示对其进行配置：

    • 验证“SolverHandler”组件的“跟踪目标类型”是否设置为“头部”。
    • 选中 RadialView 规划求解组件旁边的复选框，以便默认启用它。

    Unity 屏幕截图，其中选中了新添加的近距离菜单预制件。

  2. 在“层次结构”窗口中，将对象重命名为 Menu，然后展开其 MenuContent-HorizontalLayout（菜单和固定） > Buttons-GridLayout（按钮） 子对象以显示三个按钮：

    Unity 的屏幕截图，其中选择了 Menu 对象，并展开了 ButtonCollection 对象。

  3. 将 Buttons-GridLayout（按钮） 中的第一个按钮重命名为 “指示器”，然后在“层次结构”窗口中配置 指示器 游戏对象，如下所示：

    • 选择 Frontplate > AnimatedContent > Icon > Label 对象，并更改 TextMesh Pro 组件以匹配按钮的名称。 确保在层次结构中激活 Label 对象。
    • 通过将类似于 V 形的 Indicator 对象分配给 None（Object） 字段，并从“无函数”下拉列表中选择 GameObject > SetActive （bool）来配置 PressableButton.OnClicked（） 事件（验证是否选中了参数复选框）。
    • 选择 Frontplate > AnimatedContent > Icon > UIButtonFontIcon 对象，并将图标更改为 字体图标选择器 组件上的搜索图标。 可以在图标列表中找到此名称，或将 “当前图标名称 ”设置为 “图标 130”。

    Unity 的屏幕截图，其中配置了“Indicator 按钮”对象的按钮配置帮助器。

  4. 若要禁用 V 形指示器对象，请在“层次结构”窗格中，选择类似于 V 形的指示器对象，然后在检查器窗格中：

    • 清除其名称旁边的复选框，使其默认处于非活动状态。
    • 使用 “添加组件 ”按钮添加 方向指示器控制器（脚本） 组件。

    Unity 的屏幕截图，其中 Indicator 对象被选中、禁用，并且添加了 DirectionalIndicatorController 组件。

  5. 将第二个按钮重命名为 TapToPlace，然后在“层次结构”窗口中配置 TapToPlace 游戏对象，如下所示：

    • 选择 Frontplate > AnimatedContent > Icon > Label 对象，并更改 TextMesh Pro 组件以匹配按钮的名称。 确保在层次结构中激活 Label 对象。
    • 通过将 RoverExplorer > 对象分配到 None （Object） 字段，并从“无函数”下拉列表中选择 TapToPlace>bool Enabled（验证参数复选框是否已选中），配置 PressableButton.OnClicked（） 事件。
    • 选择 Frontplate > AnimatedContent > Icon > UIButtonFontIcon 对象，并将图标更改为 字体图标选择器 组件上的手图标。 可以在图标列表中找到此名称，或将 “当前图标名称 ”设置为 “图标 13”。

    Unity 中配置了 TapToPlace 按钮对象的按钮配置帮助器的屏幕截图。

  6. 在“层次结构”窗口中，选择 RoverAssembly 对象，然后在检查器窗口中配置 Tap To Place（脚本） 组件，如下所示：

    • 取消选中其名称旁边的复选框，使其默认处于非活动状态。
    • 在Placing Stopped ()事件部分中，选择“+”图标以添加新事件。
    • 将 RoverExplorer>RoverAssembly 对象分配到 None（对象） 字段。
    • 在“ 无函数 ”下拉列表中，选择 TapToPlace>bool Enabled 以在触发事件时更新此属性值。
    • 验证参数复选框是否已 取消选中。

    Unity 的屏幕截图，其中已重新配置 TapToPlace 组件。