Кнопки

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

Создайте холст в сцене (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/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 для передней пластины кнопки.

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

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

InteractableInteractable обрабатывает различные типы состояний и событий взаимодействия. 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)
  • Значки char отрисовываются с помощью TextMeshPro компонента. Это полезно, если вы предпочитаете использовать шрифт значка. Чтобы использовать шрифт значка HoloLens, необходимо создать ресурс шрифтаTextMeshPro.

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

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

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

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

    Screenshot of the Icon Set menu item.

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

В MRTK 2.4 и за ее пределами рекомендуется переместить настраиваемые текстуры значков в IconSet. Чтобы обновить ресурсы на всех кнопках проекта до нового рекомендуемого формата, используйте ButtonConfigHelperMigrationHandler. (Смешанная реальность набор средств — служебные программы —>> окно миграции —> выбор обработчика миграции —> Microsoft.MixedReality.набор средств. 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 через window > TextMeshPro > Font Asset Creator. Ниже приведены рекомендуемые параметры для создания HoloLens atlas шрифта. Чтобы включить все значки, вставьте следующий диапазон Юникода в поле "Последовательность символов ":

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

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

Затем нажмите кнопку "Исправить границы" в скрипте 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 standard.

Pressable button cube 4

Проверьте Hover Light параметры Fluent и Proximity Light в разделе "Параметры". Это обеспечивает визуальную обратную связь для взаимодействия с близкой рукой (близкого света) и дальнего указателя (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 и перетащите объект куба в поле Target в разделе "Профили". Затем создайте новую тему с типом ScaleOffsetColorTheme. В этой теме можно указать цвет объекта для определенных состояний взаимодействия, таких как фокус и нажатие. Кроме того, можно управлять масштабированием и смещением. Проверьте анимацию и задайте длительность, чтобы сделать визуальный переход плавным.

Select profile theme

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

Pressable Button Cube Run 3Pressable Button Cube Run 4

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

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

Pressable Custom1Pressable Custom2

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

Pressable Custom3

См. также