6. Создание пользовательских интерфейсов6. Creating user interfaces

В этом учебнике показано, как создать простой пользовательский интерфейс, используя кнопки MRTK и заготовки меню вместе с компонентом Unity TextMeshPro.In this tutorial, you will learn how to create a simple user interface using MRTK's button and menu prefabs alongside Unity's TextMeshPro component. Кроме того, здесь приведены сведения о том, как настроить кнопки для запуска событий и добавить динамические элементы интерфейса подсказки, чтобы предоставить пользователю дополнительную информацию.You will also learn how to configure the buttons to trigger events and add dynamic tooltip UI elements to provide the user with additional information.

ЗадачиObjectives

  • Упорядочивание кнопок в коллекцииLearn how to organize buttons in a collection
  • Использование заготовок меню MRTKLearn how to use MRTK's menu prefabs
  • Взаимодействие с голограммами через кнопки и меню элементов пользовательского интерфейсаLearn how to interact with holograms using UI menus and buttons
  • Добавление текстовых элементовLearn how to add text elements
  • Динамическое создание подсказок для объектовLearn how to spawn tooltips on objects dynamically

Создание статической панели кнопокCreating a static panel of buttons

В окне Hierarchy (Иерархия) щелкните правой кнопкой мыши объект RoverExplorer и выберите Create Empty (Создать пустой), чтобы добавить пустой объект в качестве дочернего объекта RoverExplorer, присвойте имя объекту Buttons (Кнопки) и настройте компонент Transform (Преобразование), как описано ниже.In the Hierarchy window, right-click on the RoverExplorer object and select Create Empty to add an empty object as a child of the RoverExplorer, name the object Buttons, and configure the Transform component as follows:

  • Position (Положение): X = –0,6, Y = 0,036, Z = –0,5Position: X = -0.6, Y = 0.036, Z = -0.5
  • Rotation (Поворот): X = 90, Y = 0, Z = 0.Rotation: X = 90, Y = 0, Z = 0
  • Scale (Масштаб): X = 1, Y = 1, Z = 1.Scale: X = 1, Y = 1, Z = 1

Unity с выбранным и расположенным новым объектом Buttons

В окне Project (Проект) перейдите к папке Assets > MRTK.Tutorials.GettingStarted > Prefabs, щелкните и перетащите заготовку PressableRoundButton к объекту Buttons (Кнопки), затем щелкните правой кнопкой мыши объект PressableRoundButton и выберите Duplicate (Дублировать), чтобы создать копию. Повторяйте эти действия до тех пор, пока у вас не будет три объекта PressableRoundButton:In the Project window, navigate to the Assets > MRTK.Tutorials.GettingStarted > Prefabs folder, click-and-drag the PressableRoundButton prefab on to the Buttons object, then right-click on the PressableRoundButton and select Duplicate to create a copy, repeat until you have a total of three PressableRoundButton objects:

Unity с новыми заготовками PressableRoundButton

В окне Hierarchy (Иерархия) выберите объект Buttons (Кнопки), затем в окне Inspector (Инспектор) с помощью кнопки Add Component (Добавить компонент) добавьте компонент GridObjectCollection и настройте его, как описано ниже.In the Hierarchy window, select the Buttons object, then in the Inspector window, use the Add Component button to add the GridObjectCollection component and configure it as follows:

  • Sort Type (Тип сортировки): Child Order (В порядке дочерних объектов)Sort Type: Child Order
  • Layout (Макет): По горизонталиLayout: Horizontal
  • Cell Width (Ширина ячейки): 0,2Cell Width: 0.2
  • Anchor (Привязка): Посередине слеваAnchor: Middle Left

Затем нажмите кнопку Update Collection (Обновить коллекцию), чтобы обновить положение дочерних объектов объекта Buttons (Кнопки):Then click the Update Collection button to update the position of the Buttons object's child objects:

Объект Buttons в Unity с добавленным, настроенным и примененным компонентом GridObjectCollection

В окне Hierarchy (Иерархия) присвойте имя кнопкам Hints (Подсказки), Explode (Развернуть) и Reset (Сброс).In the Hierarchy window, name the buttons Hints, Explode, and Reset.

Для каждой кнопки выберите дочерний объект SeeItSayItLabel > TextMeshPro, а затем в окне Inspector (Инспектор) измените текст соответствующего компонента TextMeshPro - Text (TextMeshPro — текст), чтобы он соответствовал именам кнопок:For each button, select the SeeItSayItLabel > TextMeshPro child object, then in the Inspector window, change the respective TextMeshPro - Text component text to match the button names:

Unity с настроенными текстовыми подписями кнопок

После этого сверните дочерние объекты объекта Buttons (Кнопки).Once done, collapse the Buttons object's child objects.

В окне Hierarchy (Иерархия) выберите объект кнопки Hints (Подсказки), затем в окне Inspector (Инспектор) настройте событие Interactable.OnClick () следующим образом:In the Hierarchy window, select the Hints button object, then in the Inspector window, configure the Interactable.OnClick () event as follows:

  • В поле None (Object) (Отсутствует (объект)) укажите объект RoverAssembly.Assign the RoverAssembly object to the None (Object) field
  • В раскрывающемся списке No Function (Функция отсутствует) выберите PlacementHintsController > TogglePlacementHints () , чтобы задать эту функцию как действие, выполняемое при срабатывании события.From the No Function dropdown, select PlacementHintsController > TogglePlacementHints () to set this function as the action to be executed when the event is triggered

Unity с настроенным событием OnClick для объекта кнопки Hints

Совет

Компонент Interactable — это общий контейнер, который позволяет сделать любой объект интерактивным с возможностью реагирования на ввод.The Interactable component is an all-in-one container to make any object easily interactable and responsive to input. Компонент Interactable выступает в качестве приемника всех типов ввода, в том числе прикосновений, движений руками, речи и т. д., а также передает такие взаимодействия в события и ответы визуальных тем.Interactable acts as a catch-all for all types of input including touch, hand rays, speech, etc. and funnels these interactions into events and visual theme responses. Чтобы узнать, как настроить его для разных типов ввода и изменить визуальную тему, см. руководство по Interactable на портале документации по MRTK.To learn how to configure it for different input types and customize it's visual theme, you can refer to the Interactable guide in the MRTK Documentation Portal.

В окне Hierarchy (Иерархия) выберите объект кнопки Explode (Развернуть), затем в окне Inspector (Инспектор) настройте событие Interactable.OnClick () следующим образом:In the Hierarchy window, select the Explode button object, then in the Inspector window, configure the Interactable.OnClick () event as follows:

  • В поле None (Object) (Отсутствует (объект)) укажите объект RoverAssembly.Assign the RoverAssembly object to the None (Object) field
  • В раскрывающемся списке No Function (Функция отсутствует) выберите ExplodedViewController > ToggleExplodedView () , чтобы задать эту функцию как действие, выполняемое при срабатывании события.From the No Function dropdown, select ExplodedViewController > ToggleExplodedView () to set this function as the action to be executed when the event is triggered

Unity с настроенным событием OnClick для объекта кнопки Explode

Нажмите кнопку Play (Воспроизведение), чтобы перейти в игровой режим. Затем нажмите и удерживайте клавишу пробела, чтобы активировать руку, и с помощью мыши нажмите кнопку Hints (Подсказки), чтобы переключить видимость объектов с подсказками о размещении:Press the Play button to enter Game mode, then press-and-hold the space bar button to activate the hand and use the mouse to press the Hints button to toggle the visibility of the placement hint objects:

Разделенное представление Unity в режиме воспроизведения с нажатой кнопкой Hints

и кнопку Explode (Развернуть) для включения и выключения развернутого представления:and the Explode button to toggle the exploded view on and off:

Разделенное представление Unity в режиме воспроизведения с нажатой кнопкой Explode

Создание динамического меню, которое следует за пользователемCreating a dynamic menu that follows the user

В окне Project (Проект) перейдите к папке Assets > MRTK > SDK > Features > UX > Prefabs > Menus, перетащите заготовку NearMenu4x1 в окно Hierarchy (Иерархия), установите для параметра преобразования Position (Позиция) значения X = 0, Y = -0,4, Z = 0 и настройте его следующим образом:In the Project window, navigate to the Assets > MRTK > SDK > Features > UX > Prefabs > Menus folder, click-and-drag the NearMenu4x1 prefab into the Hierarchy window, set its Transform Position to X = 0, Y = -0.4, Z = 0 and configure it as follows:

  • Убедитесь, что для параметра Tracked Target Type (Тип отслеживаемой цели) компонента SolverHandler указано значение Head (Головной).Verify that the SolverHandler component's Tracked Target Type is set to Head
  • Установите флажок рядом с компонентом Solver RadialView, чтобы он был включен по умолчанию.Check the checkbox next to the RadialView Solver component so it is enabled by default

Unity с выбранной добавленной заготовкой NearMenu

В окне Hierarchy (Иерархия) переименуйте объект в Menu (Меню), затем разверните его дочерний объект ButtonCollection, чтобы открыть четыре кнопки:In the Hierarchy window, rename the object to Menu, then expand its ButtonCollection child object to reveal the four buttons:

Unity с выбранным объектом Menu и развернутым объектом ButtonCollection

Переименуйте первую кнопку на Indicator (Индикатор), затем в окне Inspector (Инспектор) настройте компонент Button Config Helper (Script) (Вспомогательная конфигурация кнопки — скрипт), как описано ниже.Rename the first button to Indicator, then in the Inspector window, configure the Button Config Helper (Script) component as follows:

  • Измените значение для параметра Main Label Text (Текст основной метки), чтобы он соответствовал названию кнопки.Change the Main Label Text to match the name of the button
  • В поле None (Object) (Отсутствует (Объект)) укажите объект Indicator (Индикатор).Assign the Indicator object to the None (Object) field
  • В раскрывающемся списке No Function (Функция отсутствует) выберите GameObject > SetActive (bool) , чтобы задать эту функцию как действие, выполняемое при срабатывании события.From the No Function dropdown, select GameObject > SetActive (bool) to set this function as the action to be executed when the event is triggered
  • Убедитесь, что флажок аргумента установлен.Verify that the argument checkbox is checked
  • Измените параметр Icon (Значок) на значок поиска.Change the Icon to the 'search' icon

Unity с объектом кнопки Indicator с настроенным скриптом Button Config Helper

В окне иерархии выберите объект Indicator (Индикатор), а затем в окне инспектора сделайте следующее:In the Hierarchy window, select the Indicator object, then in the Inspector window:

  • Снимите флажок рядом с его именем, чтобы сделать его неактивным по умолчанию.Uncheck the checkbox next to its name to make it inactive by default
  • Добавьте компонент Directional Indicator Controller (Script) (Контроллер индикатора направления (скрипт)) с помощью кнопки Add Component (Добавить компонент).Use the Add Component button to add the Directional Indicator Controller (Script) component

Unity с выбранным и отключенным объектом Indicator и добавленным компонентом DirectionalIndicatorController

Примечание

Теперь после запуска приложения объект Indicator (Индикатор) будет по умолчанию отключен (его можно включить с помощью кнопки Indicator (Индикатор)).Now, when the app starts, the Indicator is disabled by default and can be enabled by pressing the Indicator button.

Переименуйте вторую кнопку на TapToPlace, затем в окне Inspector (Инспектор) настройте компонент Button Config Helper (Script) (Вспомогательная конфигурация кнопки — скрипт), как описано ниже.Rename the second button to TapToPlace, then in the Inspector window, configure the Button Config Helper (Script) component as follows:

  • Измените значение для параметра Main Label Text (Текст основной метки), чтобы он соответствовал названию кнопки.Change the Main Label Text to match the name of the button
  • В поле None (Object) (Отсутствует (Объект)) укажите объект RoverExplorer > RoverAssembly.Assign the RoverExplorer > RoverAssembly object to the None (Object) field
  • В раскрывающемся списке No Function (Функция отсутствует) выберите TapToPlace > bool Enabled (Активация по логическому значению), чтобы обновлять это значение свойства при срабатывании события.From the No Function dropdown, select TapToPlace > bool Enabled to update this property value when the event is triggered
  • Убедитесь, что флажок аргумента установлен.Verify that the argument checkbox is checked
  • Измените параметр Icon (Значок) на значок руки с лучом.Change the Icon to the 'hand with ray' icon

Unity с объектом кнопки TapToPlace с настроенным скриптом Button Config Helper

В окне Hierarchy (Иерархия) выберите объект RoverAssembly, затем в окне Inspector (Инспектор) настройте компонент Tap To Place (Script) (Размещение касанием — скрипт), как описано ниже.In the Hierarchy window, select the RoverAssembly object, then in the Inspector window, configure the Tap To Place (Script) component as follows:

  • Снимите флажок рядом с его именем, чтобы сделать его неактивным по умолчанию.Uncheck the checkbox next to its name to make it inactive by default
  • В разделе события On Placing Stopped () щелкните значок + , чтобы добавить новое событие:In the On Placing Stopped () event section, click the + icon to add a new event:
  • В поле None (Object) (Отсутствует (Объект)) укажите объект RoverExplorer > RoverAssembly.Assign the RoverExplorer > RoverAssembly object to the None (Object) field
  • В раскрывающемся списке No Function (Функция отсутствует) выберите TapToPlace > bool Enabled (Активация по логическому значению), чтобы обновлять это значение свойства при срабатывании события.From the No Function dropdown, select TapToPlace > bool Enabled to update this property value when the event is triggered
  • Убедитесь, что флажок аргумента снят.Verify that the argument checkbox is unchecked

Unity с перенастроенным компонентом TapToPlace

Примечание

Теперь при запуске приложения функция Tap to Place (Размещение касанием) будет отключена по умолчанию (ее можно включить с помощью кнопки Tap to Place (Размещение касанием)).Now, when the app starts, the Tap to Place functionality is disabled by default and can be enabled by pressing the Tap to Place button. Кроме того, когда операция размещения нажатием завершена, функция отключится автоматически.Additionally, when the tap to place is completed, it will disable itself.

Добавление текста в сценуAdding text to the scene

В окне Hierarchy (Иерархия) щелкните правой кнопкой мыши объект Table (Таблица) и выберите 3D Object (Трехмерный объект) > Text - TextMeshPro (Текст — TextMeshPro), чтобы добавить текстовый объект в качестве дочернего для объекта Table (Таблица), а затем в окне Inspector (Инспектор) настройте компонент Rect Transform (Прямоугольное преобразование), как описано ниже.In the Hierarchy window, right-click on the Table object and select 3D Object > Text - TextMeshPro to add a text object as a child of the Table object, then in the Inspector window, configure the Rect Transform component as follows:

  • Укажите для параметра Pos Y (Позиция Y) значение 1.Change Pos Y to 1
  • Укажите для параметра Width (Ширина) значение 1.Change Width to 1
  • Укажите для параметра Height (Высота) значение 1.Change Height to 1
  • Укажите для параметра Rotation X (Поворот X) значение 90.Change Rotation X to 90

Unity с выбранным созданным объектом TextMeshPro

Затем настройте компонент TextMeshPro - Text (TextMeshPro — текст), как описано ниже.Then configure the TextMeshPro - Text component as follows::

  • Укажите для параметра Text (Текст) значение Rover Explorer.Change Text to Rover Explorer
  • Укажите для параметра Font Style (Стиль шрифта) значение "Полужирный".Change Font Style to Bold
  • Укажите для параметра Font Size (Размер шрифта) значение 1.Change Font Size to 1
  • Укажите для параметра Extra Settings (Дополнительные параметры) > Margins (Поля) значение 0,03.Change Extra Settings > Margins to 0.03

Unity с настроенным компонентом TextMeshPro

Добавление подсказокAdding tooltips

В окне Project (Проект) перейдите в папку Assets > MRTK > SDK > Features > UX > Prefabs > ToolTip, чтобы найти заготовки подсказок:In the Project window, navigate to the Assets > MRTK > SDK > Features > UX > Prefabs > ToolTip folder to locate the tooltip prefabs:

Окно проекта Unity с выбранной папкой ToolTips

В окне Hierarchy (Иерархия) разверните объект RoverExplorer > RoverParts и выберите все его дочерние объекты лунохода, затем в окне Inspector (Инспектор) нажмите кнопку Add Component (Добавить компонент), чтобы добавить ToolTipSpawner ко всем выбранным объектам и настроить его, как описано ниже.In the Hierarchy window, expand the RoverExplorer > RoverParts object and select all its child rover part objects, then in the Inspector window, use the Add Component button to add the ToolTipSpawner component and configure it as follows:

  • Убедитесь, что установлен флажок Focus Enabled (Фокус включен), чтобы пользователь смог посмотреть на часть, где должна появиться подсказка.Ensure the Focus Enabled checkbox is checked to require the user to look at the part for the tooltip to appear
  • Укажите заготовку Simple Line ToolTip (Подсказка в отдельной строке) из окна Project (Проект) в поле Tool Tip Prefab (Заготовка подсказки).Assign the Simple Line ToolTip prefab from the Project window to the Tool Tip Prefab field
  • Измените значение параметра ToolTip Override Settings (Параметры переопределения подсказок) > Settings Mode (Режим параметров) на значение Override (Переопределение).Change the ToolTip Override Settings > Settings Mode to Override
  • Измените значение параметра ToolTip Override Settings > Manual Pivot Location Position Y (Параметры переопределения подсказок > Позиция по оси Y расположения ручного поворота) на 1,5.Change the ToolTip Override Settings > Manual Pivot Local Position Y to 1.5

Unity со всеми выбранными объектами частей лунохода, а также добавленным и настроенным компонентом ToolTipSpawner

В окне Hierarchy (Иерархия) выберите первую часть лунохода (RoverParts > Camera_Part) и настройте компонент ToolTipSpawner, как описано ниже.In the Hierarchy window, select the first rover part, RoverParts > Camera_Part, and configure the ToolTipSpawner component as follows:

  • Измените параметр Tool Tip Text (Текст подсказки), чтобы в нем было указано имя части (например, Camera (Камера)).Change Tool Tip Text to reflect the name of the part, i.e., Camera

Unity с заданным в поле текста подсказки значением Camera (Камера)

Повторите этот шаг для каждого из объектов частей лунохода, чтобы настроить компонент ToolTipSpawner, как описано ниже.Repeat this step for each of the rover part objects to configure the ToolTipSpawner component as follows:

  • Для объекта Generator_Part измените значение параметра Tool Tip Text (Текст подсказки) на Generator.For the Generator_Part, change the Tool Tip Text to Generator
  • Для объекта Lights_Part измените значение параметра Tool Tip Text (Текст подсказки) на Lights.For the Lights_Part, change the Tool Tip Text to Lights
  • Для объекта UHFAntenna_Part измените значение параметра Tool Tip Text (Текст подсказки) на поле UHF Antenna.For the UHFAntenna_Part, change the Tool Tip Text to UHF Antenna field
  • Для объекта Spectrometer_Part измените значение параметра Tool Tip Text (Текст подсказки) на Spectrometer.For the Spectrometer_Part, change the Tool Tip Text to Spectrometer

Нажмите кнопку Play (Воспроизведение), чтобы перейти в игровой режим, а затем нажмите и удерживайте правую кнопку мыши, перемещая указатель мыши, пока не будет нажата одна из частей и не отобразится подсказка для этой части:Press the Play button to enter Game mode, then press-and-hold the right mouse button while moving your mouse until the gaze hit's one of the parts and the tooltip for that part will be displayed:

Разделенное представление Unity в режиме воспроизведения с подсказкой, срабатывающей при попадании взгляда

Поздравляем!Congratulations

Из этого учебника вы узнали, как создать простой пользовательский интерфейс с помощью предоставляемых кнопок MRTK и заготовок меню вместе с компонентом Unity TextMeshPro, а также как настроить кнопки для запуска событий при их нажатии.In this tutorial, you learned how to create a simple user interface using MRTK's provided button and menu prefabs alongside Unity's TextMeshPro component and how to configure the buttons to trigger events when they are pressed. Вы также узнали, как добавлять динамические элементы интерфейса подсказки, чтобы предоставить пользователю дополнительную информацию.You also learned how to add dynamic tooltip UI elements to provide the user with additional information.

Следующее руководство: 7. Взаимодействие с трехмерными объектамиNext Tutorial: 7. Interacting with 3D objects