Language:
Page Info
Skill Level:
Engine Version:

3D ウィジェットのインタラクションの作成

従来の UI は、2D または 3D のワールドに加えて 2D 空間で構成されます (例、メニュー、ヘルスバー、スコアの表示)。 ただし、3D 環境内にプレイヤーがインタラクションできる UI が必要になることがあるかもしれません (キーパッド、仮想メニュー、アイテム欄、その他のインタラクティブな UI エレメント)。 VR プロジェクトでは、こうしたものが多く使われ、UMG では WidgetInteraction コンポーネントでこうしたインタラクションをサポートしています。

この操作ガイドでは、レベルに配置し、プレイヤーがクリックできるボタンを含む以下の映像のようなウィジェットを作成します。

ステップ

この操作ガイドでは スターター コンテンツ を有効にした状態で Blueprint First Person テンプレートを使用します。

  1. 「Content/FirstPersonBP/Blueprints」 フォルダ内で FirstPersonCharacter ブループリントを開きます。次に、Widget Interaction タイプのコンポーネントを追加します。

    WidgetInteraction_02.png

  2. Widget Interaction コンポーネントを 左クリック してドラッグし、FP_Gun にアタッチされている Sphere コンポーネントの上にドロップします。

    WidgetInteraction_03.png

    これで銃がポイントしている方向に Widget Interaction コンポーネントをポイントすることができます。

  3. Widget Interaction コンポーネントの [Details] パネルで、Location をゼロアウトし、[Show Debug] オプションにチェックを入れます。

    WidgetInteraction_04.png

  4. Event Graph 内で、Right Mouse Button Mouse Event を追加し、Widget Interaction コンポーネントをドラッグして、Press Pointer Key ノードを追加します。

    WidgetInteraction_05.png

  5. Right Mouse Button ノードの Pressed ピンに接続して、KeyLeft Mouse Button に設定します。

    WidgetInteraction_06.png

    デフォルトでは UMG は、click event を左マウスボタンが押されたときに登録します。このノードを使うと、右マウスボタンが押される場合にこれをシミュレートできます。 任意の Key Input event を使ってこの関数を呼び出すことができます (例、トリガーやボタンを押して、左マウスボタンのクリックをシミュレート)。

  6. Release Pointer Key ノード ( Left Mouse Button に設定) を追加して、それを Right Mouse Button ノードの Released ピンに接続します。

    WidgetInteraction_07.png

  7. コンテンツ ブラウザ で、InteractiveWidget という Widget ブループリント を作成します。

    WidgetInteraction_08.png

  8. Visual Designer で、Canvas Panel を取り除きます。次に、ボタン上に Text ウィジェットがある Button を追加します。

    クリックしてフルサイズで表示

    この例では、単にクリックできるボタンを追加します。ボタン上のテキストには、プレイヤーがクリックした回数を示します。どのようなタイプのインタラクティブ ウィジェットでも作成して、Widget Interaction コンポーネントを使ってインタラクションすることができます (スライダー、コンボボックス、チェックボックスなどはワールド空間でインタラクション可能)。

  9. Button[Details (詳細)] パネルの Style/HoveredTint を別の色に設定します。

    WidgetInteraction_10.png

  10. Text[Details] パネルで、Text contentを 0 に変更し、Font Size48 に増やします。

    WidgetInteraction_11.png

  11. Graph で、 Value という Text 変数を作成します。次に、Compile して Value0 に設定します。

    WidgetInteraction_12.png

    これはプレイヤーがボタンをクリックしたときに更新する変数であり、Text ウィジェットにバインドします。

  12. Text ウィジェットの [Designer] タブで、Text の隣にある Bind オプションをクリックし、Value プロパティを選択します。

    WidgetInteraction_13.png

  13. Button ウィジェットの [Details] パネルの Events で、On Clicked の隣にある + をクリックします。

    WidgetInteraction_14.png

    これでボタンがクリックされるたびに、FirstPersonCharacter ブループリント内から呼び出されて発行されます。

  14. Graph タブで、Ctrl キーを押しながら、Value 変数をドラッグして、そこから To String そして、String To Int を使用します。

    WidgetInteraction_15.png

    Text を String に変換しています。次に、String から Int に変換し、ボタンがクリックされたときに値が増えるようにします。

  15. String To Int ピンから + 1 に設定された Integer + Integer ノードを使います。

  16. Alt キーを押しながら、 Value 変数をドラッグして設定し、残りのピンを以下のように OnClicked event に接続します。

    WidgetInteraction_16.png

    Integer + Integer の出力ピンを Value のテキスト入力ピンに接続すると ToText(int) ノードが自動的に作成されます。

  17. コンテンツ ブラウザ で、ExampleWidget と呼ばれる Actor に基づき、新規 ブループリント を作成し、それに Widget コンポーネントを追加します。

    WidgetInteraction_18.png

    これは、InteractiveWidget Widget ブループリントの 3D バージョンを表します。

  18. Widget コンポーネントの [Details] パネルの User InterfaceWidget Class クラスを InteractiveWidget に変更します。

    WidgetInteraction_19.png

  19. コンテンツ ブラウザExampleWidget ブループリントをレベルへドラッグし、必要に応じてスケーリング、回転、配置します。

    WidgetInteraction_20.png

  20. エディタでプレイするには [Play (プレイ)] をクリックします。

最終結果

エディタでプレイすると、以下のようになります。左マウスボタン を使って武器を発射し、ボタンをポイントしている場合、Hovered ステートになります (そのスタイルを変更させます)。ボタン上で Right Mouse Button をクリックすると、押されるたびにテキスト値が増えます。

このステップで説明したように、右マウスボタンを使って click event を登録していますが、ゲームパッド ボタンのクリックを使って Pointer Key Presses/Releases または Motion Controller Trigger を押して (以下のように) 登録することができます。ここでは、 Right Motion Controller (アタッチされた Widget Interaction コンポーネントと共に) でボタンをポイントして、Right Trigger を押してボタン クリックを登録します。

WidgetInteraction_21.png