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

ゲームプレイ中に画面に UI エレメントを作成、表示、削除する方法の例です。

Windows
MacOS
Linux

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

詳細は、Widget Interaction コンポーネント ページをご参照ください。

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

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

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

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

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

    WidgetInteraction_01.png

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

    widgetinteractionNEW_02.png

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

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

    WidgetInteraction_04.png

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

    WidgetInteraction_05.png

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

    WidgetInteraction_06.png

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

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

    WidgetInteraction_07.png

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

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

2 - Interactive Widget を作成する

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

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

    WidgetInteraction_08.png

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

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

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

    WidgetInteraction_10.png

  4. Text の [Details] パネルで、Text0 に変更し、Font Size48 に増やします。

    WidgetInteraction_11.png

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

    WidgetInteraction_12.png

    この変数はボタンをクリックすると更新されます。

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

    WidgetInteraction_13.png

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

    WidgetInteraction_14.png

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

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

    widgetinteractionNEW_14.1.png widgetinteractionNEW_14.2.png

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

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

    widgetinteractionNEW_16.2.png

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

    widgetinteractionNEW_16.png

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

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

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

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

    widgetinteractionNEW_17.png

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

  2. Widget コンポーネントの [Details (詳細)] パネルの User InterfaceWidget ClassInteractiveWidget に変更します。

    widgetinteractionNEW_18.png

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

    WidgetInteraction_20.png

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

最終結果

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

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

WidgetInteraction_21.png

Select Skin
Light
Dark

新しい Unreal Engine 4 ドキュメントサイトへようこそ!

あなたの声を私たちに伝えるフィードバックシステムを含め、様々な新機能について開発をおこなっています。まだ広く使える状態にはなっていないので、準備ができるまでは、ドキュメントフィードバックフォーラムで、このページについて、もしくは遭遇した問題について教えていただけると助かります。

新しいシステムが稼働した際にお知らせします。

フィードバックを送信