従来の UI は、2D または 3D のワールドに加えて 2D 空間で構成されます (例、メニュー、ヘルスバー、スコアの表示など)。 ただし、3D 環境内にキーパッド、仮想メニュー、アイテム欄などプレイヤーがインタラクションできる UI が必要になることがあるかもしれません (VR プロジェクトでは基本的に普及しています)。 Widget Interaction コンポーネントを使用して、 (スライダー、コンボボックス、チェックボックスなど、ワールド空間でインタラクションが可能なあらゆる種類のインタラクト可能なウィジェットを作成できます。

この操作ガイドでは、レベルに配置し、プレイヤーがカーソルを当ててクリックすると数値が増えるボタンとやりとりができるウィジェットを作成します。

1 - Widget Interaction のスクリプト処理

最初に、FirstPersonCharacter ブループリントでウィジェットとのマウス インタラクションを指示するスクリプトを設定する必要があります。

1. Content > FirstPersonBP > Blueprints フォルダ内で FirstPersonCharacter ブループリントを開きます。

2. First Person Camera > Mesh2P > FP_Gun > Sphere から Widget Interaction コンポーネントを追加します。

   これで銃がポイントしている方向にインタラクションのフォーカスを向かせることができます。

3. Widget Interaction コンポーネントの [Details] パネルで、Location をゼロアウトし、[Show Debug (デバッグを表示)] にチェックを入れます。

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

5. Right Mouse Button ノードの Pressed ピンを Press Pointer Key に接続して Key を Left Mouse Button に設定します。

   デフォルトで、UMG は Left Mouse Button キーが押された結果として、click event を登録します。Right Mouse Button ノードを使用すると、Right Mouse Button が押された時にインタラクションをシミュレーションできます。任意の Key Input event を使ってこの関数を呼び出すことができます (例、トリガーやボタンを押して、Left Mouse Button のクリックをシミュレート)。

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

   Pressed Pointer Key ノードと Released Pointer Key ノードはよく似ているので、ノードが正しいか再確認してください。これらのノードがないと、整数カウンタは正しく機能しません。

7. ブループリントを コンパイル して、保存 します。[Blueprint] タブを最小化または閉じます。

2 - Interactive Widget を作成する

スクリプト処理を設定したので、次はウィジェットを作成します。この例では、Right Mouse Button でクリックできるボタンを追加します。ボタン上のテキストには、プレイヤーがクリックした回数を示します。

1. コンテンツ ブラウザ > [Add New] > [User Interface] を選択し、InteractiveWidget という Widget ブループリント を作成します。

2. Visual Designer で、Canvas Panel (中央の協調表示されたボックス) を取り除き、ボタン上に Text ウィジェットがある Button を追加します。

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

3. Button 要素を選択し、[Details (詳細)] パネルの [Appearence (外観)] > [Style (スタイル)] で Tint を別の色に設定します。

4. Text の [Details] パネルで、Text を 0 に変更し、Font Size を 48 に増やします。

5. イベントグラフで、 Value という Text 変数を作成します。次に、Compile して Value を 0 に設定します。
   

   ボタンをクリックすると更新される変数です。

6. Visual Designer で Text 要素を選択し、[Details (詳細)] パネスでテキストを作成した Value プロパティと バインド します。

7. Button 要素の [Details (詳細)] で Events を開きます。On Clicked 要素を検索して 「+」 記号をクリックします。
   

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

8. イベントグラフで、Ctrl キーを押しながら、Value 変数をグラフにドラッグします。ピンを引き出して To String ノード、String To Int ノードの順で追加します。

   これで Text が String に、そして String から Int に変換され、ボタンがクリックされたときに値が増えます。

9. String To Int ピンを引き出して Integer + Integer ノードを追加し、 ノードを + 1 に設定します。

10. Alt を長押ししたまま Value 変数をグラフへドラッグし、Integer + Integer ノードを On Clicked イベントへ接続します。

    Value ノードを接続すると、ブループリントは自動的に ToText(int) 変換ノードを作成します。

11. ブループリントを コンパイル して、保存 します。[Blueprint] タブを最小化または閉じます。

3 - Widget ブループリントの作成

1. コンテンツ ブラウザ で、Actor から派生した新規 ブループリント を作成して ExampleWidget と名づけ、Widget コンポーネントをブループリントへ追加します。

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

2. Widget コンポーネントの [Details (詳細)] パネルの User Interface で Widget Class を InteractiveWidget に変更します。

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

4. プロジェクトを コンパイル して 保存 します。[Play] をクリックするとウィジェットとインタラクトします。

最終結果

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

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