Unreal での UMG とキーボードUMG and keyboard in Unreal

Unreal Motion Graphics (UMG) は、メニューやテキストボックスなどのインターフェイスを作成するために使用される Unreal Engine の組み込み UI システムです。Unreal Motion Graphics (UMG) is Unreal Engine’s built-in UI system, used to create interfaces such as menus and text boxes. UMG で作成されたユーザーインターフェイスは、ウィジェットで構成されます。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. UMG の詳細については、公式の Unreal Engine の ドキュメントを参照してください。You can learn more about UMG in the official Unreal Engine documentation.

新しいウィジェットを作成するCreate a new widget

  • ゲームの UI をレイアウトするウィジェットのブループリントを作成します。Create a Widget Blueprint to lay out the game’s UI:

Unreal メニューからウィジェットのブループリントを追加するスクリーンショット

  • 新しいブループリントを開き、パレットからキャンバスにコンポーネントを追加します。Open the new blueprint and add components from the Palette to the canvas. この例では、"Input" セクションから2つのテキストボックスコンポーネントを追加しました。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

  • 新しいアクターを作成し、ウィジェットコンポーネントを追加して、アクターをシーンに追加します。Create a new Actor, add a Widget component, and add the actor to the scene:

ウィジェットがアタッチされているアクターのスクリーンショット

  • ウィジェットの詳細パネルで、 ウィジェットクラス を、前に作成したウィジェットのブループリントに設定します。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 ウィジェットは、通常、マウスから入力を受け取ります。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
    • 相互作用ソースカスタム に設定するSet the Interaction Source to custom
    • 開発の場合は、[ デバッグを表示]true に設定します。For development, set Show Debug to true:

ウィジェットの相互作用とデバッグコンポーネントのプロパティのスクリーンショット

相互作用ソースの既定値は "World" で、ウィジェット相互作用コンポーネントの世界の位置に基づいて raycasts を送信する必要があります。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. この回避策は、カスタムソースを使用し、ハンドレイのイベントグラフで raycast を設定することです。The workaround is to use a custom source and set the raycast in the event graph from the hand ray.

ここでは、イベントティックからこれを呼び出しています。Here we're calling this from Event Tick:

イベントティックのブループリント

次に、HoloLens 入力に反応するウィジェット対話コンポーネントに仮想マウスポインターイベントを追加します。Then add virtual mouse pointer events to the widget interaction component reacting to HoloLens input. この例では、手が grasped のときにマウスの左押しイベントを送信し、grasped がない場合はマウスの左解放イベントを送信します。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 システムキーボードには、Unreal Engine 4.26 以降が必要です。The HoloLens system keyboard requires Unreal Engine 4.26 or later. また、アプリがデバイスで実行されている場合にのみ、アプリが Unreal エディターからヘッドセットにストリーミングされても、キーボードは表示されません。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: