ウィジェット テンプレートを作成する

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

Windows
MacOS
Linux
このページ中

UMG で作成するすべての Widget ブループリントUser Widget とみなされ、他の Widget ブループリント内で再利用したり、配置したりすることができます。 これにより、他の Widget ブループリントで使用可能な UI の各部のテンプレートを作成することができます。 ウィジェットのビジュアル面を、それを入れた Widget ブループリントに引き継ぐだけでなく、スクリプト化した機能も引き継ぎます。

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

ステップ

ここでは Starter Content Enabled (スターター コンテンツを有効にした状態)Blueprint Third Person Template を使います。

  1. コンテンツ ブラウザ 内で 右クリック して、2 つの Widget ブループリント を作成します。ひとつは、CustomButton でもうひとつは HUD と呼ばれます。CustomButton は、メインの HUD Widget ブループリント内で使用する UserWidget です。

    UserWidget01.png

  2. CustomButton Widget ブループリント内で キャンバス パネル を削除し、Button を追加し、その上で 右クリック し、Size BoxWrap With (ラップ) します。

    UserWidget02.png

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

    UserWidget03.png

  4. [Graph] タブで、Ctrl キーを押したまま、[My Blueprint] パネルから Button_0 を ドラッグし、そこからドラッグして Set Style ノードを追加します。Variables > Apperance カテゴリのオプションを選択します。もうひとつは、ボタンの背景のカラー乗数を扱うものです。

    UserWidget04.png

  5. Event Construct ノードを Set Widget Style ノードに接続します。次に Widget Style 上で 右クリック し、Promote to Variable (変数化) します。

    UserWidget05.png

  6. 新しい変数に ButtonStyle と名前を付けて コンパイル し、Normal スタイルの Image を任意のテクスチャに設定します。

    UserWidget06.png

  7. Normal セクション上で 右クリック し、Copy を選択します。次に、右クリック し、Hovered ステートと Pressed ステートに Paste します。

    UserWidget07.png

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

    UserWidget08.png

  9. ButtonStyle に対して、[Editable][Expose on Spawn] のチェックボックスにチェックを入れます。これで、この Widget ブループリントをどこかで使う場合、他の Widget ブループリントから変数の値を変更することができます。

    UserWidget08b.png

  10. Button_0 変数を選択し、OnClicked+ 記号をクリックします。

    UserWidget09.png

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

    UserWidget10.png

  12. ButtonClicked をグラフへドラッグして [Call] を選択します。次に、それを OnClicked event に接続します。これで、ボタンがクリックされるたびに、固有のスクリプト化された機能を作成することができます。このボタンに複数のインスタンスがあって、OnClicked event だけを使用する場合、各インスタンスが反応し、同じ機能を実行します。ただし、イベント ディスパッチャー を作成すると、インスタンス毎にイベントを実装し、実際にクリックされたボタンだけが追加のスクリプトを実行するようになります。

    UserWidget11.png

  13. HUD Widget ブループリントを開き、Vertical Boxキャンバス パネル に追加し、以下のようにサイズ変更します。

    UserWidget12.png

  14. PaletteUser Created で、3 つの カスタム ボタンVertical Box に追加します。

    UserWidget13.png

  15. グラフ 上で、CustomButton を選択し、Event の Button Clicked+ をクリックします。以下は CustomButton Widget ブループリント内に作成した イベント ディスパッチャー です。このボタンがクリックされるたびに反応します。

    UserWidget15.png

  16. もうひとつのボタンで、Button Clicked+ をクリックし、異なるテキストをプリントする Print String ノードをそれぞれ接続します。この例では、いずれかのボタンがクリックされたときに画面に表示しますが、クリックされるボタンに応じて異なるテキストが画面に表示されます。実際の例では、各ボタンで異なるメニューを開き、様々なゲーム設定を変更したり、プレイヤー キャラクターに修正を加えたりします。

    UserWidget16.png

  17. レベル エディタのメイン ツールバーで [Blueprints (ブループリント)] をクリックし、[Open Level Blueprint] をクリックします。

    UserWidget17.png

  18. 右クリック し、Event BeginPlay を追加します。次にそれを、ClassHUD に設定した Create Widget ノードに接続します。

    UserWidget18.png

  19. Add to Viewport (ビューポートに追加) ノードを作成して接続し、Get Player ControllerSet Show Mouse Cursor (True に設定) に接続します。

    UserWidget19.png

  20. コンパイル して、Level ブループリント を閉じて、Play をクリックしてエディタで再生します。

最終結果

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

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

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

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

フィードバックを送信