Кнопки — MRTK2

Кнопка предоставляет пользователю возможность вызвать немедленное действие. Это один из базовых компонентов в смешанной реальности. 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

Широкая кнопка HoloLens 2 в стиле оболочки 32x96mm

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

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

PressableButtonHoloLens2ToggleSwitch_32x32

PressableButtonHoloLens2ToggleRadio_32x32

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

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

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

PressableButtonHoloLens2ToggleCheckBox_32x96

PressableButtonHoloLens2ToggleSwitch_32x96

PressableButtonHoloLens2ToggleRadio_32x96

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

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

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

радиальный

ToggleSwitch

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

Флажок

Тумблер

ButtonHoloLens1

PressableRoundButton

кнопка кнопки

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

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

Базовая кнопка

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

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

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

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

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

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

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

• Нажмите кнопку "Преобразовать в холст MRTK"
• Щелкните Add NearInteractionTouchableUnityUI (Добавить NearInteractionTouchableUnityUI).
• Задайте для компонента Rect Transform масштаб 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) в сцену. Эти заготовки кнопок уже настроены для аудиовизуальную обратную связь для различных типов входных данных, включая ввод с помощью рук и взгляда.

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

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

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

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

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

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

ProximityLight	Выделение фокуса	Сжатие клетки	Пульс на триггере

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

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

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

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

Маршрутизатор событий физической прессы Этот скрипт отправляет события от взаимодействия с рукой в Interactable.

InteractableInteractable обрабатывает различные типы состояний и событий взаимодействия. Этот скрипт напрямую обрабатывает взгляд, жесты, голосовой ввод и иммерсивный ввод контроллера движения гарнитуры.

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

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

Макет заготовки

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

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

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

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

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

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

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

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

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

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

   

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

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

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

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

Создание ресурса шрифтов значка 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

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

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

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

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

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

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

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

Изменение размера FrontPlate 1

Изменение размера

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

Настройка "Исправить границы" 4

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

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

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

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

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

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

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

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

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

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

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

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

Если кнопка выполняет двойное нажатие, убедитесь, что свойство Принудительное применение передней кнопки активно, а плоскость Start Push Distance находится перед плоскостью Ближнего взаимодействия Touchable . Плоскость Ближнего взаимодействия с касанием обозначается синей плоскостью, размещенной перед источником белой стрелки в GIF-файле ниже:

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

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

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

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. В этой теме можно указать цвет объекта для определенных состояний взаимодействия, таких как Focus и Pressed. Вы также можете управлять масштабом и смещением. Установите флажок "Упрощение" и задайте длительность, чтобы сделать визуальный переход плавным.

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

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

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

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

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

• Интерактивный объект
• Визуальные темы