按钮 — MRTK2

按钮主

按钮为用户提供了触发即时作的方法。 它是混合现实中最基础的组件之一。 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的外壳式按钮,带背板,支持各种视觉反馈,如边框灯、邻近灯和压缩前板

没有背板的HoloLens 2外壳式按钮

具有圆形的HoloLens 2外壳样式按钮

PressableButtonHoloLens2_32x96 PressableButtonHoloLens2_32x96

PressableButtonHoloLens2Bar3H PressableButtonHoloLens2Bar3H

PressableButtonHoloLens2Bar3V PressableButtonHoloLens2Bar3V

宽HoloLens 2外壳式按钮 32x96mm

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

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

PressableButtonHoloLens2ToggleCheckBox_32x32 PressableButtonHoloLens2ToggleCheckBox_32x32

PressableButtonHoloLens2ToggleSwitch_32x32 PressableButtonHoloLens2ToggleSwitch_32x32

PressableButtonHoloLens2ToggleRadio_32x32 PressableButtonHoloLens2ToggleRadio_32x32

HoloLens 2的 shell 样式复选框 32x32mm

HoloLens 2的外壳式交换机 32x32mm

HoloLens 2的外壳式无线电 32x32mm

PressableButtonHoloLens2ToggleCheckBox_32x96 PressableButtonHoloLens2ToggleCheckBox_32x96

PressableButtonHoloLens2ToggleSwitch_32x96 PressableButtonHoloLens2ToggleSwitch_32x96

PressableButtonHoloLens2ToggleRadio_32x96 PressableButtonHoloLens2ToggleRadio_32x96

HoloLens 2的 shell 样式复选框 32x96mm

HoloLens 2的外壳式交换机 32x96mm

HoloLens 2的外壳式无线电 32x96mm

径向 径向

复选框

ToggleSwitch ToggleSwitch

径向按钮

复选框

切换开关

ButtonHoloLens1 ButtonHoloLens1

PressableRoundButton PressableRoundButton

按钮基 按钮

HoloLens 第一代的 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 防抖动

已镀按钮

如何使用可按下按钮

Unity基于 UI 的按钮

在场景中创建画布 (GameObject -> UI -> Canvas) 。 在 Canvas 的“检查器”面板中:

  • 单击“转换为 MRTK 画布”
  • 单击“添加 NearInteractionTouchableUnityUI”
  • 将 Rect 转换组件的 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/PressableButtonHoloLens2Unity.prefab) 画布上。

基于碰撞的按钮

只需将 PressableButtonHoloLens2 (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2.prefab) 或 PressableButtonHoloLens2Unplated (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2Unplated.prefab) 拖动到场景中。 这些按钮预制件已配置为具有各种类型的输入(包括关节手输入和凝视)的音频-视觉反馈。

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

如何使用可交互

可以配置可按下按钮通过PhysicalPressEventRouter按钮触发 OnClick 事件的时间。 例如,可以通过设置“单击时可交互”设置为“按下事件”,将“OnClick”设置为在首次按下按钮时触发,而不是按下和松开按钮。

如何使用事件

若要利用特定的关节手输入状态信息,可以使用可按下按钮事件 - 触摸开始触摸结束按下按钮释放按钮。 但是,这些事件不会因空气敲击、手部射线或眼睛输入而触发。 若要支持近距和远端交互,建议使用 Interactionable 的 OnClick 事件。

如何使用可按下按钮

交互状态

处于空闲状态时,按钮的前板不可见。 当手指接近或凝视输入的光标瞄准表面时,前板的发光边框变得可见。 前板表面的指尖位置有其他突出显示。 用手指推动时,前板会用指尖移动。 当指尖接触前板的表面时,它将显示一种微妙的脉冲效果,以提供触摸点的视觉反馈。

在HoloLens 2 shell 样式的按钮中,有许多视觉提示和提供,以提高用户对交互的信心。

邻近感应灯 焦点突出显示 压缩笼 触发器上的脉冲
邻近感应灯 焦点突出显示 压缩笼 触发器上的脉冲

细微的脉冲效果由可按下按钮触发,该按钮查找位于当前交互指针上的 ProximityLight () 。 如果找到任何邻近感应灯, ProximityLight.Pulse 则调用 方法,该方法会自动对着色器参数进行动画处理以显示脉冲。

检查器属性

按钮结构

Box 碰撞体Box Collider 用于按钮的前板。

可按下按钮 按钮移动与手按交互的逻辑。

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

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

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

NearInteractionTouchable.cs 需要使用关节手输入使任何对象可触摸。

Prefab 布局

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

按钮布局

如何更改图标和文本

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

按钮配置帮助程序

创建和修改图标集

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

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

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

创建新按钮图标:

  1. “项目 ”窗口中,右键单击“ 资产 ”以打开上下文菜单。 (还可以右键单击 Assets 文件夹或其子文件夹之一中的任何空白区域。)

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

    “图标集”菜单项的屏幕截图。

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

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

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

升级窗口对话框

如果在迁移期间的默认图标集中找不到图标,则会在 MixedRealityToolkit.Generated/CustomIconSets 中创建一个自定义图标集。 对话框将指示已发生此事件。

自定义图标通知

创建 HoloLens 图标字体资产

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

接下来,通过 Window > 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

按钮创建 1

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

按钮创建 3

按钮创建 2

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

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

按钮图标集

如何更改按钮的大小

HoloLens 2的 shell 样式按钮的大小为 32x32mm。 若要自定义维度,请在按钮预制件中更改这些对象的大小:

  1. FrontPlate
  2. BackPlate 下的四边形
  3. 根上的 Box 碰撞体

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

更新 FrontPlate 按钮大小自定义的大小 1

更新四 边形按钮大小自定义的大小 2

更新 Box 碰撞体按钮大小自定义 3 的大小

单击“修复边界” 按钮大小自定义 4

语音命令 ('see-it,say-it')

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

按钮语音

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

按钮语音 2

See-it、Say-it label 可按下按钮预制件在 SeeItSayItLabel 对象下具有占位符 TextMesh Pro 标签。 可以使用此标签向用户传达按钮的语音命令关键字 (keyword) 。

按钮语音 3

如何从头开始创建按钮

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

可按下按钮立方体 0

1. 创建具有立方体 (仅靠近交互) 的可按下按钮

  1. (GameObject > 3D 对象>多维数据集) 创建Unity多维数据集
  2. 添加 PressableButton.cs 脚本
  3. 添加 NearInteractionTouchable.cs 脚本

PressableButton的“检查器”面板中,将多维数据集对象分配给 “移动按钮视觉对象”。

可按下按钮立方体 3

选择立方体时,将在对象上看到多个彩色层。 这会在 “按设置”下可视化距离值。 使用句柄,可以配置何时开始按 (移动对象) 以及何时触发事件。

可按布顿立方体 1 可按下按钮立方体 2

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

可按下按钮多维数据集运行 1

疑难解答

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

突出显示了“强制前推”属性的可按下按钮脚本组件

在近交互可触摸平面前面移动开始推距离的动画示例

2. 向基本多维数据集按钮添加视觉反馈

MRTK Standard着色器提供各种功能,便于添加视觉反馈。 创建材料并选择着色器 Mixed Reality Toolkit/Standard。 或者,可以使用或复制下使用 MRTK Standard 着色器的现有材料/SDK/StandardAssets/Materials/之一。

可按下按钮立方体 4

“Fluent 选项”下选中 Hover LightProximity Light 。 这为近手 (邻近感应灯) 和远指针 (悬停灯) 交互提供视觉反馈。

可按下按钮立方体 5 可按下按钮立方体运行 2

3. 将音频反馈添加到基本多维数据集按钮

由于 PressableButton.cs 脚本公开诸如 TouchBegin () 、TouchEnd () 、ButtonPressed () 、ButtonReleased () 等事件,因此我们可以轻松地分配音频反馈。 只需将 Unity Audio Source 添加到多维数据集对象,然后通过选择“AudioSource.PlayOneShot () ”来分配音频剪辑。 可以在文件夹下 /SDK/StandardAssets/Audio/ 使用MRTK_Select_Main和MRTK_Select_Secondary音频剪辑。

可按下按钮立方体 7 可按下按钮立方体 6

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

可交互 是一个脚本,它可以轻松地为各种类型的输入交互创建视觉状态。 它还处理远距离交互事件。 将多维数据集对象添加Interactable.cs并拖放到“配置文件”下的“目标”字段。 然后,创建一个类型为 ScaleOffsetColorTheme 的新主题。 在此主题下,可以为特定交互状态指定对象的颜色,例如 “焦点 ”和 “按下”。 还可以控制“缩放”和“偏移量”。 选中 “缓动” 并设置持续时间,使视觉转换流畅。

选择配置文件主题

你将看到对象对远 (手部光线或凝视光标) 和 (手部) 交互做出响应。

可按下按钮多维数据集运行 3 可按下按钮多维数据集运行 4

自定义按钮示例

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

可按下 Custom1 可按下的 Custom2

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

可按 Custom3

另请参阅