Кнопки — MRTK2

Button Main

Кнопка предоставляет пользователю возможность вызвать немедленное действие. Это один из базовых компонентов в смешанной реальности. MRTK предоставляет различные типы заготовок кнопок.

Заготовки кнопок в MRTK

Примеры заготовок кнопки в MRTK/SDK/Features/UX/Interactable/Prefabs папке

Кнопки на основе изображения и графического интерфейса Unity

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

Кнопки на основе коллайдера

PressableButtonHoloLens2 PressableButtonHoloLens2

PressableButtonHoloLens2Unplated PressableButtonHoloLens2Unplated

PressableButtonHoloLens2Circular PressableButtonHoloLens2Circular

кнопка в стиле оболочки HoloLens 2 с задней панелью, которая поддерживает различные визуальные отзывы, такие как свет границы, свет близкого взаимодействия и сжатый передний лист

кнопка в стиле оболочки HoloLens 2 без задней панели

Кнопка в стиле оболочки HoloLens 2 с круглой фигурой

PressableButtonHoloLens2_32x96PressableButtonHoloLens2_32x96

PressableButtonHoloLens2Bar3HPressableButtonHoloLens2Bar3H

PressableButtonHoloLens2Bar3VPressableButtonHoloLens2Bar3V

Кнопка оболочки в стиле оболочки wide HoloLens 2 32x96mm

Горизонтальная панель кнопки HoloLens 2 с общей задней панелью

Вертикальная панель кнопки HoloLens 2 с общей задней панелью

PressableButtonHoloLens2ToggleCheckBox_32x32PressableButtonHoloLens2ToggleCheckBox_32x32

PressableButtonHoloLens2ToggleSwitch_32x32PressableButtonHoloLens2ToggleSwitch_32x32

PressableButtonHoloLens2ToggleRadio_32x32PressableButtonHoloLens2ToggleRadio_32x32

флажок в стиле оболочки HoloLens 2 32x32mm

переключатель в стиле оболочки HoloLens 2 32x32mm

радио в стиле оболочки HoloLens 2 32x32mm

PressableButtonHoloLens2ToggleCheckBox_32x96PressableButtonHoloLens2ToggleCheckBox_32x96

PressableButtonHoloLens2ToggleSwitch_32x96PressableButtonHoloLens2ToggleSwitch_32x96

PressableButtonHoloLens2ToggleRadio_32x96PressableButtonHoloLens2ToggleRadio_32x96

флажок в стиле оболочки HoloLens 2 32x96mm

переключатель в стиле оболочки HoloLens 2 32x96mm

радио в стиле оболочки HoloLens 2 32x96mm

RadialРадиальные

CheckboxФлажок

ToggleSwitchToggleSwitch

Радиальная кнопка

Флажок

Тумблер

ButtonHoloLens1ButtonHoloLens1

PressableRoundButtonPressableRoundButton

Button BaseКнопку

кнопка стиля оболочки HoloLens 1-го поколения

Кнопка нажатия фигуры вокруг фигуры

Кнопка "Базовый"

Button (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/Button.prefab) основан на концепции Взаимодействия, чтобы обеспечить простые элементы управления пользовательского интерфейса для кнопок или других типов интерактивных поверхностей. Базовая кнопка поддерживает все доступные методы ввода, включая сформулированные входные данные рук для близких взаимодействий, а также взгляд + касание воздуха для дальних взаимодействий. Вы также можете использовать голосовую команду для активации кнопки.

PressableButtonHoloLens2(Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2.prefab) — это кнопка стиля оболочки HoloLens 2, которая поддерживает точное перемещение кнопки для ввода прямого отслеживания рук. Он объединяет Interactable скрипт со скриптом PressableButton .

Для HoloLens 2 рекомендуется использовать кнопки с непрозрачной задней платформой. Прозрачные кнопки не рекомендуется использовать из-за этих проблем удобства использования и стабильности:

  • Значок и текст трудно прочитать в физической среде
  • Трудно понять, когда триггеры событий
  • Голограммы, отображаемые через прозрачную плоскость, могут быть нестабильными при стабилизации глубины LSR HoloLens 2

Button plated

Как использовать нажатые кнопки

Кнопки на основе пользовательского интерфейса Unity

Создайте Canvas в сцене (GameObject —> UI —> Canvas). На панели инспектора для Canvas:

  • Нажмите кнопку "Преобразовать в MRTK Canvas"
  • Щелкните "Добавить 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/Pressable/PressableButtonUnityUICircular.prefab) или PressableButtonHoloLens2UnityUI (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2UnityUI.prefab) на Canvas.

Кнопки на основе коллайдера

Просто перетащите PressableButtonHoloLens2 (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2.prefab) или PressableButtonHoloLens2Unplated (Assets/MRTK/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2Unplated.prefab) в сцену. Эти префабы кнопок уже настроены для обратной связи с аудиовизуалами для различных типов входных данных, в том числе с помощью сформулированных рукописных данных и взгляда.

События, предоставляемые в самом заготовке, а также компонент "Взаимодействие" , можно использовать для активации дополнительных действий. Нажатые кнопки в сцене HandInteractionExample используют событие OnClick в Interactable для активации изменения цвета куба. Это событие активируется для различных типов методов ввода, таких как взгляд, касание воздуха, ручной луч, а также физическое нажатие кнопки с помощью скрипта нажатой кнопки.

How to Use Interactable

Вы можете настроить, когда нажатая кнопка запускает событие OnClick с помощью PhysicalPressEventRouter кнопки. Например, при первом нажатии кнопки можно задать значение OnClick , а не нажатие и освобождение, задав для параметра Interactable On Click to Event On Press.

How to use events

Для использования определенных сведений о состоянии ввода рук можно использовать события кнопок с возможностью нажатия : Touch Begin, Touch End, Button Pressed, Button Released. Эти события не будут стрелять в ответ на касание воздуха, ручной луч или входные данные глаза, однако. Для поддержки как близких, так и дальних взаимодействий рекомендуется использовать событие OnClick Для взаимодействия.

How to use Pressable Buttons

Состояния взаимодействия

В состоянии простоя передовая пластина кнопки не видна. По мере приближения пальца или курсора от входных данных взгляда на поверхность, светящаяся граница передней пластины становится видимой. Дополнительное выделение положения пальца на передней поверхности пластины. При нажатии пальцем переднюю пластину перемещается пальцем. Когда палец касается поверхности передней пластины, он показывает тонкий импульсный эффект, чтобы дать визуальную обратную связь точки касания.

В HoloLens 2 кнопке в стиле оболочки существует множество визуальных подсказок и возможностей для повышения уверенности пользователя в взаимодействии.

Proximity light Focus highlight Compressing cage Pulse on trigger
ProximityLight Выделение фокуса Сжатие клетки Pulse on trigger

Тонкий импульсный эффект активируется нажатой кнопкой, которая ищет приложения ProximityLight , которые живут на текущем взаимодействующих указателях. При обнаружении ProximityLight.Pulse индикаторов близкого взаимодействия вызывается метод, который автоматически анимирует параметры шейдера для отображения импульса.

Свойства инспектора

Button Structure

Box ColliderBox Collider для передней пластины кнопки.

Кнопка с возможностью нажатия Логика перемещения кнопки с взаимодействием с помощью нажатия руки.

Маршрутизатор событий физического прессы Этот скрипт отправляет события из взаимодействия с помощью ручного нажатия в взаимодействие.

Взаимодействие с возможностьювзаимодействия обрабатывает различные типы состояний и событий взаимодействия. HoloLens взгляд, жест и голосовой ввод и иммерсивный ввод контроллера движения гарнитуры напрямую обрабатываются этим сценарием.

Источник звука Источник звука Unity для звуковых клипов обратной связи.

NearInteractionTouchable.cs Требуется, чтобы сделать любой объект сенсорным с помощью сформулированного ввода руки.

Макет prefab

Объект ButtonContent содержит переднюю пластину, текстовую метку и значок. FrontPlate реагирует на близость указателя пальца с помощью Button_Box шейдера. Он показывает светящиеся границы, близкое освещение и импульсный эффект на прикосновение. Метка текста создается с Pro TextMesh. Видимость SeeItSayItLabel управляется темой Interactable.

Button Layout

Изменение значка и текста

Кнопки MRTK используют ButtonConfigHelper компонент для изменения значка, текста и метки кнопки. (Обратите внимание, что некоторые поля могут отсутствовать, если элементы отсутствуют на выбранной кнопке.)

Button Config Helper

Создание и изменение наборов значков

Набор значков — это общий набор ресурсов значков, используемых компонентомButtonConfigHelper. Поддерживаются три стиля значков .

  • Значки квадроцикла отображаются на квадроцикле с помощью MeshRenderer. Это стиль значка по умолчанию.
  • Значки спрайта отрисовываются с помощью .SpriteRenderer Это полезно, если вы предпочитаете импортировать значки в виде листа спрайта или хотите, чтобы ресурсы значков были совместно использоваться с компонентами пользовательского интерфейса Unity. Чтобы использовать этот стиль, необходимо установить пакет редактора sprite (Windows —> диспетчер пакетов —> 2D Sprite)
  • Значки символов отрисовываются с помощью TextMeshPro компонента. Это полезно, если вы предпочитаете использовать шрифт значка. Чтобы использовать шрифт значка HoloLens, необходимо создать ресурс шрифтаTextMeshPro.

Чтобы изменить стиль, который использует кнопка, разверните раскрывающийся список значков в ButtonConfigHelper и выберите его в раскрывающемся списке "Стиль значка ".

Чтобы создать значок кнопки, выполните приведенные действия.

  1. В окне Project щелкните правой кнопкой мыши "Ресурсы", чтобы открыть контекстное меню. (Можно также щелкнуть правой кнопкой мыши любое пустое пространство в папке Assets или одну из ее вложенных папок.)

  2. Выберите "Создать набор > значков набора средств Смешанная реальность>".>

    Screenshot of the Icon Set menu item.

Чтобы добавить значки четырех и спрайтов, просто перетащите их в соответствующие массивы. Чтобы добавить значки Char, необходимо сначала создать и назначить ресурс шрифта.

В MRTK 2.4 и более чем рекомендуется перемещать настраиваемые текстуры значков в IconSet. Чтобы обновить ресурсы на всех кнопках проекта до нового рекомендуемого формата, используйте ButtonConfigHelperMigrationHandler. (набор средств Смешанная реальность — служебные программы —>> окно миграции —> выбор обработчика миграции —> Microsoft.MixedReality.Toolkit.Utilities.ButtonConfigHelperMigrationHandler)

Импорт пакета Microsoft.MixedRealityToolkit.Unity.Tools, необходимый для обновления кнопок.

Upgrade window dialogue

Если во время миграции значок не найден в наборе значков по умолчанию, в MixedRealityToolkit.Generated/CustomIconSets будет создан настраиваемый набор значков. Диалоговое окно указывает, что это произошло.

Custom icon notification

Создание ресурса шрифта значка HoloLens

Сначала импортируйте шрифт значка в Unity. На Windows компьютерах можно найти шрифт по умолчанию HoloLens в Windows/Fonts/holomdl2.ttf. Скопируйте и вставьте этот файл в папку Assets.

Затем откройте создатель ресурса шрифта TextMeshPro с помощью окна > TextMeshPro > Font Asset Creator. Ниже приведены рекомендуемые параметры для создания HoloLens шрифтового атласа. Чтобы включить все значки, вставьте следующий диапазон Юникода в поле "Последовательность символов ":

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 равен 32 x 32 мм. Чтобы настроить измерение, измените размер этих объектов в заготовке кнопки:

  1. FrontPlate
  2. Quad под BackPlate
  3. Box Collider в корневом каталоге

Затем нажмите кнопку "Исправить границы " в скрипте NearInteractionTouchable, который находится в корне кнопки.

Обновление размера FrontPlate Button Size customization 1

Обновление размера четырехугольника Button Size customization 2

Обновление размера коллайдера Box Button Size customization 3

Щелкните "Исправить границы" Button Size customization 4

Голосовая команда ('see-it, say-it')

Обработчик голосового вводаИнтерактивный скрипт в кнопке с возможностью нажатия уже реализуется.IMixedRealitySpeechHandler Здесь можно задать ключевое слово голосовой команды.

Buttons Speech

Профиль ввода речи Кроме того, необходимо зарегистрировать ключевое слово голосовой команды в глобальном профиле голосовых команд.

Button speech 2

See-it, Say-it label Заготовка кнопки с нажатием содержит заполнитель TextMesh Pro метку под объектом SeeItSayItLabel. Эту метку можно использовать для передачи ключевого слова голосовой команды для кнопки пользователю.

Button Speech 3

Как сделать кнопку с нуля

Примеры этих кнопок можно найти в сцене PressableButtonExample .

Pressable button cube 0

1. Создание нажатой кнопки с кубом (только для взаимодействия)

  1. Создание куба Unity (куб трехмерного объекта > GameObject>)
  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

Устранение неполадок

Если кнопка выполняет двойное нажатие, убедитесь, что свойство Принудительной принудительной отправки переднего плана активно, а плоскость начального push-расстояния помещается перед плоскости близкого взаимодействия с сенсорным взаимодействием . Близкое взаимодействие сенсорной плоскости обозначается синей плоскости, размещенной перед происхождением белой стрелки в 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

Проверьте Hover Light и Proximity Lightв разделе "Параметры Fluent". Это обеспечивает визуальную обратную связь для взаимодействия близкого взаимодействия (близкого света) и дальнего указателя (Hover Light).

pressable button cube 5pressable button cube run 2

3. Добавление обратной связи со звуком на кнопку "Базовый куб"

Так как PressableButton.cs скрипт предоставляет такие события, как TouchBegin(), TouchEnd(), ButtonPressed(), ButtonReleased(), мы можем легко назначить обратную связь со звуком. Просто добавьте Unity Audio Source в объект куба, а затем назначьте звуковые клипы, выбрав AudioSource.PlayOneShot(). В папке можно использовать MRTK_Select_Main и MRTK_Select_Secondary аудиоклипы /SDK/StandardAssets/Audio/ .

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

Каждый клавиша фортепиано имеет назначенный PressableButtonNearInteractionTouchable скрипт. Важно убедиться, что направление локальной пересылкиNearInteractionTouchable правильно. Она представлена белой стрелкой в редакторе. Убедитесь, что стрелка указывает от переднего лица кнопки:

Pressable Custom3

См. также раздел