Кнопки — MRTK2

Статья
06/27/2022
Чтение занимает 9 мин

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

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

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

PressableButtonHoloLens2ToggleCheckBox_32x32

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, которая поддерживает точное перемещение кнопки для ввода прямого отслеживания рук. Он объединяет Interactable скрипт со скриптом PressableButton .

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

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

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

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

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

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

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

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

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


ProximityLight	Выделение фокуса	Сжатие клетки	Pulse on trigger

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

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

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

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

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

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

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

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

Макет prefab

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

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

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

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

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

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

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

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

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

Чтобы добавить значки четырех и спрайтов, просто перетащите их в соответствующие массивы. Чтобы добавить значки 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Проверьте 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.

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

Кнопки — MRTK2

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

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

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

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

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

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

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

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

Макет prefab

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

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

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

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

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

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

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

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

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

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

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

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

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