UMG и клавиатура в UnrealUMG and keyboard in Unreal

Нереалная графика движения (УМГ) — это встроенная система пользовательского интерфейса нереального механизма, используемая для создания таких интерфейсов, как меню и текстовые поля.Unreal Motion Graphics (UMG) is Unreal Engine’s built-in UI system, used to create interfaces such as menus and text boxes. Пользовательские интерфейсы, созданные с помощью УМГ, состоят из мини-приложений.User interfaces built with UMG consist of widgets. Мы покажем вам создание нового мини-приложения, его добавление в мировое пространство и включение взаимодействия с помощью системной клавиатуры в качестве примера.We'll guide you through creating a new widget, adding it to world space, and enabling interaction using the system keyboard as an example. Дополнительные сведения о УМГ см. в официальной документации понереальному подсистеме.You can learn more about UMG in the official Unreal Engine documentation.

Создание нового мини-приложенияCreate a new widget

  • Создайте проект мини-приложения для размещения пользовательского интерфейса игры:Create a Widget Blueprint to lay out the game’s UI:

Снимок экрана: Добавление схемы мини-приложения из нереального меню

  • Откройте новый проект и добавьте компоненты из палитры на холст.Open the new blueprint and add components from the Palette to the canvas. В этом случае мы добавили два компонента текстового поля из раздела input:In this case, we've added two Text Box components from the “Input” section:

Снимок экрана: окно иерархии с выделенным и развернутым компонентом текстового мини-приложения

  • Выберите мини-приложение в окне "иерархия" или "Конструктор" и измените параметры на панели сведений.Select a widget in the Hierarchy or Designer window and modify parameters in the details panel. В этом случае мы добавили текст подсказок по умолчанию и цвет оттенков, который появляется при наведении указателя мыши на текстовое поле.In this case, we’ve added some default “Hint Text” and a tint color that appears when you hover over the text box. Текстовое поле будет отображать виртуальную клавиатуру на HoloLens, когда она взаимодействует с:A text box will pop up a virtual keyboard on HoloLens when it's interacted with:

Снимок экрана измененных параметров в окне иерархии

  • На панели подробностей можно также подписываться на события.Events can also be subscribed to in the details panel:

Снимок экрана событий на панели подробностей

Добавление мини-приложения в мировое пространствоAdd a Widget to World Space

  • Создайте субъект, добавьте компонент Widget и добавьте субъект в сцену:Create a new Actor, add a Widget component, and add the actor to the scene:

Снимок экрана субъекта с присоединенным мини-приложением

  • На панели подробностей для мини-приложения задайте класс Widget для созданной ранее схемы мини-приложения:In the details panel for the Widget, set the Widget Class to the Widget Blueprint created earlier:

Снимок экрана: панель сведений о проекте с набором классов мини-приложений

  • Для мини-приложения текста убедитесь, что флажок получить аппаратные входные данные не установлен, поэтому мы обновляем только текст с виртуальной клавиатуры:For a text Widget, ensure Receive Hardware Input is unchecked so we only update its text from the virtual keyboard:

Снимок экрана раздела "взаимодействие" с параметром "получить аппаратное устройство ввода" снят

Взаимодействие мини-приложенияWidget Interaction

Мини-приложения УМГ обычно получают входные данные от мыши.UMG Widgets typically receive input from a mouse. В HoloLens или VR необходимо имитировать мышь с компонентом взаимодействия мини-приложения, чтобы получить те же события.On HoloLens or VR, we need to simulate a mouse with a Widget Interaction component to get the same events.

  • Создайте субъект, добавьте компонент взаимодействия с мини -приложением и добавьте субъект в сцену:Create a new Actor, add a Widget Interaction component, and add the actor to your scene:

Снимок экрана: новый субъект с выделенным компонентом взаимодействия мини-приложения

  • На панели подробностей для компонента взаимодействия мини-приложения выполните следующие действия.In the details panel for the Widget Interaction component:
    • Установка расстояния взаимодействия до нужного значения расстоянияSet the interaction distance to the distance value you want
    • Задайте для источника взаимодействия значение Custom .Set the Interaction Source to custom
    • Для разработки задайте для параметра Показывать отладку значение true:For development, set Show Debug to true:

Снимок экрана: свойства компонента взаимодействия и отладки мини-приложения

По умолчанию для источника взаимодействия используется «World», который должен отсылать райкастс на основе расположения в мире компонента взаимодействия мини-приложения.The default for Interaction Source is “World”, which should send raycasts based on the world position of the Widget Interaction component. В AR и VR это не так.In AR and VR, that's not the case. Включение функции "показывать отладку" и добавление оттенок при наведении для мини-приложений важно для проверки того, что компонент взаимодействия мини-приложения выполняет предполагаемое действие.Enabling “Show Debug” and adding a hover tint to widgets is important to check the widget interaction component is doing what you expect. Обходной путь заключается в использовании настраиваемого источника и задании райкаст в графе событий с рука-Ray.The workaround is to use a custom source and set the raycast in the event graph from the hand ray.

Здесь мы вызываем этот метод из Tick события:Here we're calling this from Event Tick:

План такта события

Затем добавьте виртуальные события указателя мыши в компонент взаимодействия мини-приложения, передействующий в входные данные HoloLens.Then add virtual mouse pointer events to the widget interaction component reacting to HoloLens input. В этом случае отправьте событие щелчка левой кнопкой мыши, когда продается рука, и событие выпуска левой кнопки мыши при невозможности:In this case, send a Left Mouse press event when the hand is grasped, and a Left Mouse release event when not grasped:

Схема с добавленными виртуальными событиями указателя мыши

Теперь, когда вы развертываете приложение в HoloLens 2, вы увидите, что с правой стороны будет расширяться луч.Now, when you deploy the app to the HoloLens 2, you’ll see a hand ray extending from your right hand. Если вы направите его по одному из редактируемых текстовых полей и просто коснитесь, системная клавиатура появится перед вами и позволит ввести текст.If you direct it at one of the editable text boxes and air tap, the system keyboard will appear in front of you and allow you to enter text.

Примечание

Для системной клавиатуры HoloLens требуется нереалия ядра 4,26 или более поздней версии.The HoloLens system keyboard requires Unreal Engine 4.26 or later. Кроме того, клавиатура не отображается при потоковой передаче приложения из нереального редактора в гарнитуру, только если приложение выполняется на устройстве.Additionally, the keyboard will not appear when your app is being streamed from the Unreal editor to the headset, only when the app is running on device.

См. также:See Also: