Кнопки — MRTK2

Статья
07/04/2024

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

Префабы кнопок в MRTK

Примеры префаб кнопки в MRTK/SDK/Features/UX/Interactable/Prefabs папке

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

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

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

PressableButtonHoloLens2

PressableButtonHoloLens2Unplated

PressableButtonHoloLens2Circular

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

Кнопка оболочки HoloLens 2 без задней панели

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

PressableButtonHoloLens2_32x96

PressableButtonHoloLens2Bar3H

PressableButtonHoloLens2Bar3V

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

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

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

PressableButtonHoloLens2ToggleCheckBox_32x32

PressableButtonHoloLens2ToggleSwitch_32x32

PressableButtonHoloLens2ToggleRadio_32x32

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

Коммутатор стиля оболочки HoloLens 2 32x32mm

HoloLens 2 оболочки радио 32x32mm

PressableButtonHoloLens2ToggleCheckBox_32x96

PressableButtonHoloLens2ToggleSwitch_32x96

PressableButtonHoloLens2ToggleRadio_32x96

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

Коммутатор стиля оболочки HoloLens 2 32x96mm

HoloLens 2 оболочки радио 32x96mm

Радиальный

Флажок

ПереключательSwitch

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

Флажок

Тумблер

ButtonHoloLens1

PressableRoundButton

Пуговица

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

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

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

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

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

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

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

Использование кнопок с возможностью нажатия

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

Создайте холст в сцене (GameObject —> UI —> 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/PressableButtonHoloLens2UnityUI.prefab) на холсте.

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

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

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

Можно настроить, когда нажатие кнопки запускает событие OnClick с помощью PhysicalPressEventRouter кнопки. Например, при первом нажатии кнопки можно настроить OnClick, а не нажимать и освобождать, задав для параметра "Взаимодействие при нажатии кнопки на нажатие на событие".

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

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

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

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


Источник близкого света	Выделение фокуса	Сжатие клетки	Пульс на триггере

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

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

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

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

Маршрутизатор событий физической прессы этот скрипт отправляет события из взаимодействия с помощью клавиши "Взаимодействие" в "Взаимодействие".

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

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

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

Макет предварительной подготовки

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

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

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

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

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

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

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

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

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

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

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

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

Диалоговое окно обновления

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

Уведомление о пользовательском значке

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

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

Затем откройте создатель ресурса шрифта TextMeshPro с помощью средства создания ресурса шрифта Window > TextMeshPro > . Ниже приведены рекомендуемые параметры для создания атласа шрифтов 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

После создания ресурса шрифта сохраните его в проекте и назначьте его полю "Значок " в поле "Значок" в наборе значков . Теперь будет заполнен раскрывающийся список доступных значков . Чтобы сделать значок доступным для использования кнопкой, щелкните его. Он будет добавлен в раскрывающийся список "Выбранные значки" и теперь появится в ButtonConfigHelper. списке "Вы можете при необходимости предоставить значок тегу". Это позволяет задать значок во время выполнения.

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

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

Изменение размера кнопки

Размер кнопки в стиле оболочки HoloLens 2 составляет 32x32mm. Чтобы настроить измерение, измените размер этих объектов в предварительной кнопке:

FrontPlate
Четыре в разделе BackPlate
Box Collider в корневом каталоге

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

Обновление размера FrontPlate

Обновление размера четырехкратного размера

Обновление размера коллидера Box

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

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

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

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

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

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

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

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

Создание куба Unity (куб объекта GameObject > 3D > )
Добавление PressableButton.cs скрипта
Добавление NearInteractionTouchable.cs скрипта

PressableButtonНа панели инспектора назначьте объект куба визуальным элементам кнопки перемещения.

При выборе куба вы увидите несколько цветных слоев объекта. Это визуализирует значения расстояния в разделе "Параметры нажатия". С помощью дескрипторов можно настроить время начала нажатия (переместить объект) и когда следует активировать событие.

При нажатии кнопки он будет перемещать и генерировать соответствующие события, предоставляемые в скрипте PressableButton.cs , например TouchBegin(), TouchEnd(), ButtonPressed(), ButtonReleased().

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

Если кнопка выполняет двойное нажатие, убедитесь, что свойство принудительной отправки активно, а плоскость начального расстояния помещается перед плоскости близкого взаимодействия с сенсорным подключением. Близкое взаимодействие сенсорной плоскости указывается синей плоскости, размещенной перед источником белой стрелки в gif ниже:

2. Добавление визуальной обратной связи к базовой кнопке куба

Шейдер MRTK уровня "Стандартный" предоставляет различные функции, упрощающие добавление визуальной обратной связи. Создайте материал и шейдер Mixed Reality Toolkit/Standardвыбора. Или можно использовать или дублировать один из существующих материалов в соответствии /SDK/StandardAssets/Materials/ с использованием шейдера MRTK standard.

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

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

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

4. Добавление визуальных состояний и обработка событий удаленного взаимодействия

Взаимодействие — это скрипт, который упрощает создание визуального состояния для различных типов входных взаимодействий. Он также обрабатывает события удаленного взаимодействия. Добавьте Interactable.cs и перетащите объект куба в поле "Целевой" в разделе "Профили". Затем создайте новую тему с типом ScaleOffsetColorTheme. В этой теме можно указать цвет объекта для определенных состояний взаимодействия, таких как фокус и нажатие. Кроме того, можно управлять масштабированием и смещением. Проверьте упрощение и задайте длительность, чтобы сделать визуальный переход гладкой.

Вы увидите, что объект реагирует как на дальние (луч или курсор взгляда), так и на взаимодействие с близкой (рукой).

Примеры настраиваемых кнопок

На сцене HandInteractionExample см. примеры пианино и круглых кнопок, которые используются.PressableButton

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

Поделиться через

Кнопки — MRTK2

Префабы кнопок в MRTK

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

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

Использование кнопок с возможностью нажатия

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

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

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

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

Макет предварительной подготовки

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

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

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

Изменение размера кнопки

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

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

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

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

2. Добавление визуальной обратной связи к базовой кнопке куба

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

4. Добавление визуальных состояний и обработка событий удаленного взаимодействия

Примеры настраиваемых кнопок

См. также

Дополнительные ресурсы