Unreal Engine 5 ドキュメントは Epic Developer Community に移動しました

UMG を使って作成する ウィジェット ブループリント はすべて ユーザー ウィジェット とみなされ、他のウィジェット ブループリントで再利用することができます。 視覚機能およびスクリプト処理された機能は両方ともブループリント内で継承されます。

一部のブループリントのスクリプト処理では、UI ウィジェットがどのように機能するか、見えるかについてインスタンス毎に上書き可能な変数を作成することができます。 このガイドでは、ボタンを作成し、スタイルを決めますが、他の Widget ブループリントに配置した場合にスタイルをオーバーライドできるようにセットアップします。 最後に、ボタンがクリックされた場合に起きる挙動をインスタンスごとにカスタマイズします。これはメニュー内に一連のボタンがあって、同じような外観と動作で機能するようにしたいが、押すと異なる結果が得られるようにしたい場合に役立ちます。

1 -Button Widget のセットアップ

まず、ボタンを作成し、ボタンをクリックすると起こることのスクリプトを設定する必要があります。

1. コンテンツ ブラウザ で右クリックして 2 つの ウィジェット ブループリント を作成します。1 つは CustomButton 、もう 1 つは HUD です。
   

   CustomButton は、 HUD ウィジェット ブループリントに追加するユーザー ウィジェットです。

   ウィジェット ブループリントは、 コンテンツ ブラウザ > [Add New (新規追加)] > [User Interface (ユーザー インターフェース)] で追加します。

2. CustomButton Widget ブループリント内で キャンバス パネル を削除します。次に Button を追加し、 [Wrap With] > [Size Box] を選択します。

3. [Size Box] の [Details (詳細)] パネルで、 [Width Override] を「 300 」に、 [Height Override] を「 100 」に変更します。グラフのレイアウトを [Desired on Screen (画面上で望ましいサイズ)] に変更してボタンの実際のサイズを把握することができます。

4. Event Graph で、 Ctrl キーを押しながら、 My Blueprint から Button をドラッグします。ピンを引き出して Set Style ノードを追加します。Button Function ノードではなく、 Variable Apperance ノードを必ず選択してください。
   

5. Event Construct ノードを Set Widget Style ノードにつないで、 Widget Style で 右クリック し、 Promote to Variable を選択します。

6. 新しい変数に「 ButtonStyle 」と名前を付けてブループリントを コンパイル します。すべてのテクスチャに [Normal] > [Image] スタイルを設定します。

7. Normal セクション上で右クリックし [Copy] を選択します。次に、画像設定を Hovered 値と Pressed 値にペーストします。3 つの値すべてが同じ画像テクスチャとなりました。
   

8. [Hovered] を展開し、 [Tint] の色を黄色など任意の色に変更します。

9. ButtonStyle で [Instance Editable] と [Expose on Spawn] にチェックを入れます。

   これで、この Widget ブループリントをどこかで使う場合、他の Widget ブループリントから変数の値を変更することができます。

10. Button 変数を選択し、 [+] 記号をクリックして OnClicked ノードをグラグに追加します。

11. [MyBlueprint] パネルで、 [+ Event Dispatcher] ボタンをクリックし、新しい イベント ディスパッチャー を作成し、 ButtonClicked と名前を付けます。

12. ButtonClicked イベントをグラフにドラッグし、 Call を選択してノードを OnClicked イベントへつなぎます。

    これにより、ボタンを押した時にユニークなスクリプト機能を作成します。このブタンに複数のインスタンスがあり、 OnClicked イベントのみで使用するのであれば、各インスタンスは同じ機能に対して応答および実行します。ただし、 イベント ディスパッチャー を作成すると、インスタンス毎にイベントを実装し、実際にクリックされたボタンだけが追加のスクリプトを実行するようになります。

2 - ボタン ウィジェットを HUD ウィジェットに追加する

ボタン ウィジェットを作成しスクリプト化したので、ボタンを HUD ウィジェットに追加し、HUD をビューポート追加し、ボタンをインゲームで見ることができるようになります。

1. HUD ウィジェット ブループリントを開いて、 [Vertical Box] を キャンバス パネル に追加します。ボックスのサイズを小さくします。
   

2. [User Created] の [Palette] から 3 つの カスタムボタン を [Vertical Box] に追加します。

3. イベント グラフでそれぞれの カスタムボタン を選択し、 + をクリックして Button Clicked イベントをグラフに追加します。1 つのボタンに 3 つのイベントがあります。

   これは CustomButton ウィジェット ブループリント内で作成した イベント ディスパッチャー です。特定のボタンがクリックされると反応します。

4. それぞれの ButtonClicked イベントに対して、ピンを引き出し各イベントに Print String ノードをつなぎます。別のテキストを In String のテキスト ボックスに追加します。

   この例では、クリックされたボタンによって異なるテキストが画面に表示されます。現実世界の例では、各ボタンで異なるメニューを立ち上げて、異なるゲーム設定に変更したり、プレイヤー キャラクターに修正を加えることができます。

   この操作ガイドでは、例としてボタンをクリックした後をシミュレーションします。HUD メニューを作成するには、UMG UI デザイナー向けクイックスタート ガイドの メインメニューを変更する を参照してください。

5. レベル エディタのツールバーから [Blueprints] > [Open Level Blueprint (レベル ブループリントを開く)] を選択します。

6. イベント グラフ内を右クリックして Event BeginPlay ノードを追加します。追加したノードを Create Widget ノードにつないで、 Class を HUD に設定します。

7. Add to Viewport ノードを追加して Create HUD Widget ノードにつなぎます。 Get Player Controller 関数を Set Show Mouse Cursor ノードに接続してボックスにチェックを入れます (True に設定)。

8. コンパイル 、 保存 をして Level Blueprint １を終了し、インゲームのボタンで操作するためにエディタの [Play (再生)] をクリックします。

   最終結果

エディタで再生すると、定義した ButtonStyle 変数に基づき各ボタンのスタイルが自動的に決まります。各ボタンをクリックすると、スクリプトの異なる部分が実行されます。 イベントディスパッチャー が呼び出され、対応する ButtonClicked Event が呼び出されるからです。オプションで、 ButtonStyle 変数が公開されて、スポーン時に編集可能であるため、それを入れた他の Widget ブループリントでボタンのスタイルをオーバーライドすることができます。これは、毎回、再作成したくない何らかのアニメーションや他の複雑なスクリプト化されたロジックがある場合に、それを UserWidget として作成することで、追加の作業を必要とせずに他の Widget ブループリントで再利用できるため便利です。