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 ブループリントを開きます。

    WidgetInteraction_01.png

  2. [Add Component (コンポーネントを追加)] ボタンをクリックして、 Widget Interaction コンポーネントを検索して追加します。

    WidgetInteraction_02.png

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

    WidgetInteraction_03.png

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

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

    WidgetInteraction_04.png

  5. Event Graph 内で、Right Mouse Button Mouse Event ノードを追加します。

  6. Widget Interaction コンポーネントをグラフにドラッグします。次に、そこからドラッグして、Press Pointer Key ノードを追加します。

    WidgetInteraction_05.png

  7. Right Mouse Button ノードの Pressed ピンに接続して、KeyLeft Mouse Button に設定します。デフォルトでは UMG は、click event を左マウスボタンが押されたときに登録します。このノードを使うと、右マウスボタンが押される場合にこれをシミュレートできます。

    任意の Key Input event を使ってこの関数を呼び出すことができます (例、トリガーやボタンを押して、左マウスボタンのクリックをシミュレート)。

    WidgetInteraction_06.png

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

    WidgetInteraction_07.png

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

    WidgetInteraction_08.png

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

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

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

    WidgetInteraction_10.png

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

    WidgetInteraction_11.png

  13. Graph で、 Value という Text 変数を作成します。次に、Compile して Value0 に設定します。これはプレイヤーがボタンをクリックしたときに更新する変数であり、Text ウィジェットにバインドします。

    WidgetInteraction_12.png

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

    WidgetInteraction_13.png

  15. Button ウィジェットの [Details] パネルの Events で、On Clicked の隣にある + をクリックします。これでボタンがクリックされるたびに、FirstPersonCharacter ブループリント内から呼び出されて発行されます。

    WidgetInteraction_14.png

  16. Graph タブで、Ctrl キーを押しながら、Value 変数をドラッグして、そこから To String そして、String To Int を使用します。Text を String に変換しています。次に、String から Int に変換し、ボタンがクリックされたときに値が増えるようにします。

    WidgetInteraction_15.png

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

  18. Alt キーを押しながら、 Value 変数をドラッグして設定し、残りのピンを以下のように OnClicked event に接続します。Integer + Integer の出力ピンを Value のテキスト入力ピンに接続すると ToText(int) ノードが自動的に作成されます。

    WidgetInteraction_16.png

  19. コンテンツ ブラウザ で、ExampleWidget と呼ばれる Actor に基づき、新規 ブループリント を作成し、それに Widget コンポーネントを追加します。これは、InteractiveWidget Widget ブループリントの 3D バージョンを表します。

    WidgetInteraction_18.png

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

    WidgetInteraction_19.png

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

    WidgetInteraction_20.png

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

最終結果

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

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

WidgetInteraction_21.png