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

  • 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

    Screenshot of Unity with newly created Buttons object selected and positioned.

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

    Screenshot of Unity with newly added PressableRoundButton prefabs.

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

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

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

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

    Screenshot of Unity Buttons object with GridObjectCollection component added, configured, and applied.

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

    Screenshot showing button text labels configured.

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

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

    Screenshot of Hints button object OnClick event configured.

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

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

    Screenshot of Unity with Explode button object OnClick event configured.

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

    Screenshot of Unity Play mode split view with Hints button being pressed.

  8. “Explode”按钮将打开和关闭分解视图：

    Screenshot of Unity Play mode split view with Explode button being pressed.

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

创建跟随用户的动态菜单

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

    • 验证 SolverHandler 组件的“跟踪的目标类型”是否设置为“头部”
    • 选中“RadialView”求解器组件旁边的复选框，使其在默认情况下处于启用状态

    Screenshot of Unity with newly added near menu prefab selected.

  2. 在“层次结构”窗口中，将对象重命名为 Menu，然后展开其 MenuContent-HorizontalLayout (Menu and Pin) > Buttons-GridLayout (Buttons) 子对象以显示三个按钮：

    Screenshot of Unity with Menu object selected and ButtonCollection object expanded.

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

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

    Screenshot of Unity with Indicator button object Button Config Helper configured.

  4. 若要禁用 V 形 Indicator 对象，请在“层次结构”窗格中，选择起来像 V 形的 Indicator 对象，然后在“检查器”窗格中执行以下操作：

    • 清除其名称旁边的复选框，使其在默认情况下处于停用状态
    • 使用“添加组件”按钮添加“方向指示器控制器(脚本)”组件

    Screenshot of Unity with Indicator object selected, disabled, and DirectionalIndicatorController component added.

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

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

    Screenshot of Unity with TapToPlace button object Button Config Helper configured.

  6. 在“层次结构”窗口中选择“RoverAssembly”对象，然后在“检查器”窗口中配置“点击放置(脚本)”组件，如下所示 ：

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

    Screenshot of Unity with TapToPlace component reconfigured.