按钮 - MRTK2

  • 项目

Button Main

按钮为用户提供了触发即时操作的方法。 它是混合现实中最基本的组件之一。 MRTK 提供各种类型的按钮预制件。

MRTK 中的按钮预制件

MRTK/SDK/Features/UX/Interactable/Prefabs 文件夹下的按钮预制件示例

Unity UI 图像/基于图形的按钮

  • UnityUIInteractableButton.prefab
  • PressableButtonUnityUI.prefab
  • PressableButtonUnityUICircular.prefab
  • PressableButtonHoloLens2UnityUI.prefab

基于碰撞器的按钮

PressableButtonHoloLens2 PressableButtonHoloLens2

PressableButtonHoloLens2Unplated PressableButtonHoloLens2Unplated

PressableButtonHoloLens2Circular PressableButtonHoloLens2Circular

带有背板的 HoloLens 2 shell 样式按钮，支持各种视觉反馈，如边框光线、邻近光线和压缩前板

不带有背板的 HoloLens 2 shell 样式按钮

带有圆形的 HoloLens 2 shell 样式按钮

PressableButtonHoloLens2_32x96PressableButtonHoloLens2_32x96

PressableButtonHoloLens2Bar3HPressableButtonHoloLens2Bar3H

PressableButtonHoloLens2Bar3VPressableButtonHoloLens2Bar3V

宽 HoloLens 2 shell 样式按钮 32x96 毫米

带有共享背板的水平 HoloLens 2 按钮栏

带有共享背板的垂直 HoloLens 2 按钮栏

PressableButtonHoloLens2ToggleCheckBox_32x32PressableButtonHoloLens2ToggleCheckBox_32x32

PressableButtonHoloLens2ToggleSwitch_32x32PressableButtonHoloLens2ToggleSwitch_32x32

PressableButtonHoloLens2ToggleRadio_32x32PressableButtonHoloLens2ToggleRadio_32x32

HoloLens 2 shell 样式复选框 32x32 毫米

HoloLens 2 shell 样式开关 32x32 毫米

HoloLens 2 shell 样式单选按钮 32x32 毫米

PressableButtonHoloLens2ToggleCheckBox_32x96PressableButtonHoloLens2ToggleCheckBox_32x96

PressableButtonHoloLens2ToggleSwitch_32x96PressableButtonHoloLens2ToggleSwitch_32x96

PressableButtonHoloLens2ToggleRadio_32x96PressableButtonHoloLens2ToggleRadio_32x96

HoloLens 2 shell 样式复选框 32x96 毫米

HoloLens 2 shell 样式开关 32x96 毫米

HoloLens 2 shell 样式单选按钮 32x96 毫米

径向

Checkbox复选框

ToggleSwitchToggleSwitch

径向按钮

复选框

切换开关

ButtonHoloLens1ButtonHoloLens1

PressableRoundButtonPressableRoundButton

Button Base按钮

HoloLens 第 1 代 shell 样式按钮

圆形按钮

“基本”按钮

Button (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/Button.prefab) 基于可交互概念，以便为按钮或其他类型的交互式表面提供简单的 UI 控件。 基线按钮支持所有可用的输入方法，包括近距交互的表达手部输入，以及远距交互的凝视 + 隔空敲击。 还可以使用语音命令触发按钮。

PressableButtonHoloLens2 (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2.prefab) 是 HoloLens 2 shell 样式按钮，支持直接手部跟踪输入的按钮的精确移动。 它将 Interactable 脚本与 PressableButton 脚本结合使用。

对于 HoloLens 2，建议使用带有不透明背板的按钮。 不建议使用透明按钮，因为存在以下可用性和稳定性问题：

  • 在物理环境中难以阅读图标和文本
  • 事件触发时很难理解
  • 与 HoloLens 2 深度 LSR 稳定技术一起使用时，通过透明平面显示的全息影像可能不稳定

Button plated

如何使用可按按钮

基于 Unity UI 的按钮

在场景中创建画布（“游戏对象”->“UI”->“画布”）。 在画布的检查器面板中：

  • 单击“转换为 MRTK 画布”
  • 单击“添加 NearInteractionTouchableUnityUI”
  • 将矩形变换组件的 X、Y 和 Z 比例设置为 0.001

然后，将 PressableButtonUnityUI (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonUnityUI.prefab)、PressableButtonUnityUICircular (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonUnityUICircular.prefab) 或 PressableButtonHoloLens2UnityUI (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2UnityUI.prefab) 拖到画布上。

基于碰撞器的按钮

只需将 PressableButtonHoloLens2 (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2.prefab) 或 PressableButtonHoloLens2Unplated (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2Unplated.prefab) 拖到场景中。 这些按钮预制件已配置为对各种类型的输入进行视听反馈，其中包括表达手部输入和凝视。

预制件本身以及可交互组件中公开的事件可用于触发其他操作。 HandInteractionExample 场景中的可按按钮使用可交互的 OnClick 事件来触发立方体颜色的更改。 此事件是针对不同类型的输入方法触发的，例如凝视、隔空敲击、手部射线，以及通过可按按钮脚本的物理按钮按下。

How to Use Interactable

可以配置可按按钮通过按钮上的 PhysicalPressEventRouter 引发 OnClick 事件的时间。 例如，可以将 OnClick 设置为第一次按下（而不是按下并释放）按钮时引发，方法是将“单击时可交互”设置为“按下时引发事件”。

How to use events

若要利用特定的表达手部输入状态信息，可以使用可按按钮事件 -Touch Begin、Touch End、Button Pressed、Button Released。 但不会引发这些事件来响应隔空敲击、手部射线或眼部输入。 为了同时支持近距离交互和远距离交互，建议使用可交互的 OnClick 事件。

How to use Pressable Buttons

交互状态

在空闲状态下，按钮的前板不可见。 一旦手指接触到表面或凝视输入中的光标指向表面，前板的发光边框就会变得可见。 前板面上的指尖位置还有其他突出显示。 当用手指按下时，前板会随指尖移动。 当指尖接触到前板面时，会显示微弱脉冲效果来提供触摸点的视觉反馈。

在 HoloLens 2 shell 样式按钮中，有很多视觉提示和启示可用来提高用户的交互置信度。

Proximity light Focus highlight Compressing cage Pulse on trigger
邻近感应灯 焦点突出显示 压缩笼罩 触发脉冲

微弱脉冲效果由可按按钮触发，该按钮查找当前正在交互的指针上的 ProximityLight。 如果找到任何邻近光线，则会调用 ProximityLight.Pulse 方法，这会自动对着色器参数进行动画处理以显示脉冲。

检查器属性

Button Structure

按钮前板的盒碰撞体Box Collider。

可按按钮：采用手部按下交互的按钮移动的逻辑。

物理按下事件路由器：此脚本将事件从手部按下交互发送到可交互。

可交互可交互处理各种类型的交互状态和事件。 HoloLens 凝视、手势和语音输入以及沉浸式头戴显示设备运动控制器输入直接由此脚本处理。

音频源：音频反馈剪辑的 Unity 音频源。

NearInteractionTouchable.cs：需要采用表达手部输入使任何对象可触摸。

预制件布局

ButtonContent 对象包含前板、文本标签和图标。 前板使用 Button_Box 着色器响应索引指尖的邻近感应。 它显示发光边框、邻近光线和触摸时的脉冲效果。 文本标签是使用 TextMesh Pro 制作的。 SeeItSayItLabel 的可见性由可交互的主题控制。

Button Layout

如何更改图标和文本

MRTK 按钮使用 ButtonConfigHelper 组件来帮助你更改按钮的图标、文本和标签。 （请注意，如果所选按钮上不存在元素，则某些字段可能不存在。）

Button Config Helper

创建和修改图标集

图标集是 ButtonConfigHelper 组件使用的一组共享图标资产。 支持三种图标样式。

  • “四面体”图标是使用 MeshRenderer 在四面体上呈现的。 这是默认图标样式。
  • “子画面”图标是使用 SpriteRenderer 呈现的。 如果你希望将图标导入为子画面表，或者希望与 Unity UI 组件共享图标资产，这很有用。 若要使用此样式，将需要安装子画面编辑器包（“Windows”->“包管理器”->“2D 子画面”）
  • “字符”图标是使用 TextMeshPro 组件呈现的。 如果你希望使用图标字体，这很有用。 若要使用 HoloLens 图标字体，需要创建 TextMeshPro 字体资产。

若要更改按钮使用的样式，请展开 ButtonConfigHelper 中的“图标”下拉列表，然后从“图标样式”下拉列表中进行选择。

若要创建新按钮图标：

  1. 在“项目”窗口中，右键单击“资产”以打开上下文菜单。 （还可以右键单击资产文件夹或其子文件夹中的任何空白空间。）

  2. 选择创建 > 混合现实 > 工具包 > 图标集。

    Screenshot of the Icon Set menu item.

若要添加四边形和子画面图标，只需将它们拖动到各自的数组中。 若要添加“字符”图标，必须先创建并分配字体资产。

在 MRTK 2.4 及更高版本中，建议将自定义图标纹理移动到图标集中。 若要将项目中所有按钮上的资产升级到新的推荐格式，请使用 ButtonConfigHelperMigrationHandler。 （混合现实工具包 -> 实用程序 -> 迁移窗口 -> 迁移处理程序选择 -> Microsoft.MixedReality.Toolkit.Utilities.ButtonConfigHelperMigrationHandler）

导入升级按钮所需的 Microsoft.MixedRealityToolkit.Unity.Tools 包。

Upgrade window dialogue

如果在迁移过程中在默认图标集中找不到图标，则将在 MixedRealityToolkit.Generated/CustomIconSets 中创建自定义图标集。 一个对话框将指示已发生此情况。

Custom icon notification

创建 HoloLens 图标字体资产

首先，将图标字体导入到 Unity 中。 在 Windows 计算机上，可以在 Windows/Fonts/holomdl2.ttf 中找到默认 HoloLens 字体。将此文件复制并粘贴到“资产”文件夹中。

接下来，通过“窗口”>“TextMeshPro”>“字体资产创建程序”打开 TextMeshPro 字体资产创建程序。下面是用于生成 HoloLens 字体图集的推荐设置。 若要包括所有图标，请将以下 Unicode 范围粘贴到“字符序列”字段中：

E700-E702,E706,E70D-E70E,E710-E714,E718,E71A,E71D-E71E,E720,E722,E728,E72A-E72E,E736,E738,E73F,E74A-E74B,E74D,E74F-E752,E760-E761,E765,E767-E769,E76B-E76C,E770,E772,E774,E777,E779-E77B,E782-E783,E785-E786,E799,E7A9-E7AB,E7AF-E7B1,E7B4,E7C8,E7E8-E7E9,E7FC,E80F,E821,E83F,E850-E859,E872-E874,E894-E895,E8A7,E8B2,E8B7,E8B9,E8D5,E8EC,E8FB,E909,E91B,E92C,E942,E95B,E992-E995,E9E9-E9EA,EA37,EA40,EA4A,EA55,EA96,EB51-EB52,EB65,EB9D-EBB5,EBCB-EBCC,EBCF-EBD3,EC03,EC19,EC3F,EC7A,EC8E-EC98,ECA2,ECD8-ECDA,ECE0,ECE7-ECEB,ED17,EE93,EFA9,F114-F120,F132,F181,F183-F186

Button creation 1

生成字体资产后，将其保存到你的项目，并将其分配给图标集的“字符图标字体”字段。 此时将填充“可用图标”下拉列表。 若要使图标可供按钮使用，请单击它。 它将被添加到“选定的图标”下拉列表中，此时将显示在 ButtonConfigHelper. 中。可以选择为图标指定标记。 这会在运行时设置图标。

Button creation 3

Button creation 2

public void SetButtonToAdjust()
{
    ButtonConfigHelper buttonConfigHelper = gameObject.GetComponent<ButtonConfigHelper>();
    buttonConfigHelper.SetCharIconByName("AppBarAdjust");
}

若要使用图标集，请选择一个按钮，展开 ButtonConfigHelper 中的“图标”下拉列表，并将其分配给“图标集”字段。

Button Icon set

如何更改按钮的大小

HoloLens 2 shell 样式按钮的大小为 32x32 毫米。 若要自定义维度，请更改按钮预制件中这些对象的大小：

  1. 前板
  2. 背板下的四面体
  3. 根上的盒碰撞体

然后，单击按钮的根中的 NearInteractionTouchable 脚本中的“修复边界”按钮。

更新前板Button Size customization 1的大小

更新四边形的大小Button Size customization 2

更新盒型碰撞器的大小Button Size customization 3

单击“修复边界”Button Size customization 4

语音命令（“看到它，说出来”）

语音输入处理程序：可按按钮中的可交互脚本已实现 IMixedRealitySpeechHandler。 可以在此处设置语音命令关键字。

Buttons Speech

语音输入配置文件 此外，还需要在全局语音命令配置文件中注册语音命令关键字。

Button speech 2

“看到它，说出来”标签：可按按钮预制件在 SeeItSayItLabel 对象下有一个占位符 TextMesh Pro 标签。 可以使用此标签将按钮的语音命令关键字传达给用户。

Button Speech 3

如何从头开始创建按钮

可以在 PressableButtonExample 场景中找到这些按钮的示例。

Pressable button cube 0

1. 创建具有立方体的可按按钮（仅近距离交互）

  1. 创建 Unity 立方体（“游戏对象”>“3D 对象”>“立方体”）
  2. 添加 PressableButton.cs 脚本
  3. 添加 NearInteractionTouchable.cs 脚本

在 PressableButton 的检查器面板中，将立方体对象分配给“移动按钮视觉对象”。

pressable button cube 3

选择立方体时，你将在对象上看到多个彩色层。 这会直观显示“按下设置”下的距离值。 使用句柄，可以配置何时开始按下（移动对象）以及何时触发事件。

Pressable Buton cube 1Pressable button cube 2

当你按下该按钮时，将移动并生成 PressableButton.cs 脚本中公开的正确事件，例如 TouchBegin()、TouchEnd()、ButtonPressed()、ButtonReleased()。

Pressable button cube run 1

疑难解答

如果按钮执行双击，请确保“强制执行前端推送”属性处于活动状态，并且“开始推送距离”平面置于“近距交互可触摸对象”平面之前。 “近距交互可触摸对象”平面由置于下方 gif 中白色箭头原点之前的蓝色平面指示：

Pressable button script component with Enforce Front Push property highlighted

Animated example of moving the start push distance in front of the near interaction touchable plane

2. 向基本立方体按钮添加视觉反馈

MRTK 标准着色器提供各种功能，可以很方便地添加视觉反馈。 创建材质择着色器 Mixed Reality Toolkit/Standard。 或者，可以使用或复制 /SDK/StandardAssets/Materials/ 下使用 MRTK 标准着色器的现有材质之一。

Pressable button cube 4

选中“Fluent 选项”下的 Hover Light 和 Proximity Light。 这会提供近距离（邻近光线）和远指针（悬停光线）的视觉反馈。

pressable button cube 5pressable button cube run 2

3. 向基本立方体按钮添加音频反馈

由于 PressableButton.cs 脚本公开了 TouchBegin()、TouchEnd()、ButtonPressed()、ButtonReleased() 等事件，因此我们可以轻松地分配音频反馈。 只需将 Unity 的 Audio Source 添加到立方体对象，然后通过选择 AudioSource.PlayOneShot() 来分配音频剪辑。 可以使用 /SDK/StandardAssets/Audio/ 下的 MRTK_Select_Main 和 MRTK_Select_Secondary 音频剪辑。

pressable button cube 7Pressable Button Cube 6

4. 添加视觉状态并处理远距交互事件

可交互是一个脚本，可以很方便地为各种类型的输入交互创建视觉状态。 它还处理远距交互事件。 添加 Interactable.cs 并将立方体对象拖放到“配置文件”下的“目标”字段上。 然后，创建类型为 ScaleOffsetColorTheme 的新主题。 在此主题下，可以指定特定交互状态（如“焦点”和“已按”）的对象的颜色。 还可以控制“比例”和“偏移量”。 检查“缓动”并设置持续时间，以使视觉对象顺利过渡。

Select profile theme

你将看到对象同时响应远距离交互（手部射线或凝视光标）和近距离交互。

Pressable Button Cube Run 3Pressable Button Cube Run 4

自定义按钮示例

在 HandInteractionExample 场景中，请参阅使用 PressableButton 的钢琴和圆形按钮示例。

Pressable Custom1Pressable Custom2

每个钢琴键均已分配 PressableButton 和 NearInteractionTouchable 脚本。 请务必验证 NearInteractionTouchable 的“本地转发”方向是正确的。 它由编辑器中的白色箭头表示。 请确保箭头指离按钮的正面：

Pressable Custom3

另请参阅