通常ほとんどのゲームでは、ユーザー インターフェース (UI) を通してプレイヤーに情報を伝えます。 UI インターフェースには、メイン メニュー、インゲームの一時停止メニューや、ヘルス値や経験値などの HUD 要素、インベントリ アイテム、または任意の状況でのプレイヤーの対応を指示をするヘルプ テキストなどがあります。
Unreal Motion Graphics (UMG) を使用すると、Widget ブループリント を作成してプロジェクトで UI エレメントの表示を処理することができます。 Widget ブループリントでは、ブループリント ビジュアル スクリプティング を使ってレイアウトをデザインし、UI エレメントの機能をスクリプトします。
この操作ガイドでは、Widget ブループリントを作成し、それにいくつかテキストを追加して、キーが押されると Level ブループリントによって表示されるようにします。
1 - UI Widget Blueprint を設定する
まず、User Interface (UI) Widget ブループリントを設定する必要があります。
この操作ガイドでは、Blueprint Third Person Template プロジェクトを使用していますが、必要に応じて他のプロジェクトを使用することもできます。
-
コンテンツ ブラウザ の [Add (追加)] ボタンをクリックして [User Interface] > [Widget Blueprint] を選択します。
UMG UI 要素はすべて Widget ウィジェット内に作成されます。
-
Widget ブループリントの名前に「SampleUI」を入力し、ダブルクリック して開きます。
Widget ブループリントを開くと、UMG のエディタ インターフェースが表示されます。
クリックしてフルサイズで表示
Widget ブループリントはデフォルトで [Designer] タブで開きます。ここで、UI エレメントの視覚的レイアウトを行います。Widget ブループリントの機能をスクリプトするには、エディタの右上隅にある [Graph] ボタンをクリックします。
-
[Palette (パレット)] ウィンドウ内で、[Text] ウィジェットを Visual Designer グラフへドラッグします。
[Palette] ウィンドウには、複数種類のウィジェットがあり、これらを使って UI エレメントを作成することができます。
-
Text ウィジェットの [Details] パネルで アンカー ドロップダウンをクリックして [Anchor] を中央位置に選択します。
これでビューポート サイズが変わっても、[Text] ウィジェットが画面中央に相対的に固定されます。
-
[Details (詳細)] パネルで Text ウィジェットの以下のプロパティを設定します。
- Text ウィジェット名:作成した他の要素と区別がつきやすい名前に変更することを推奨します。
- Size to Content:チェックを入れるとウィジェットの大きさにウィジェットを自動調節します。
- Text:UI で表示されるウィジェット内のテキストです。
- Color and Opacity:テキストの色を選択します。
- Font Size:[Font] グループを開いてサイズを 56 に変更します。このセクションで、[Font Family] と [Typeface] も変更できます。
- また、テキスト ウィジェットを画面の中央に配置します。以下のようになります。
-
変更した後で、[Compile] > [Save] を選択します。Widget ブループリントを終了します。
2 - UI Blueprint ウィジェットをレベルに追加する
インゲームで作成したテキストを確認するには、Blueprint ウィジェットをレベルに追加します。[Enter] を押すとテキストがインゲームに表示するようにレベルに指示するためのスクリプト処理も追加します。
-
メイン ツールバー で [Blueprints] ドロップダウン > [Open Level Blueprint (Level ブループリントを開く)] を選択します。
-
右グラフで右クリックして Create Widget ノードを検索します。
-
ノード上で、[Class] ドロップダウン メニューをクリックし、作成した Widget ブループリント「SampleUI」を検索します。
-
**Return Value ピンを右クリックして Promote to Variable を選択します。変数を「SampleUI」に変更します。
Widget ブループリント (UI) を作成するたびに、それを変数に昇格し、後でブループリント スクリプトを通してアクセスできるようにするとよいでしょう。
-
Set ノードの出力ピンからドラッグして、Add to Viewport ノードを探して追加します。
Widget ブループリントをインゲームで表示するように指示する方法です。
-
グラフ内を右クリックして Enter Keyboard Event を探して追加します。
-
Pressed ピンを Create Sample UI Widget ノードに接続します。
[Enter] を押した時にウィジェットを変数として作成および格納し、[SampleUI] ウィジェットをインゲームで表示するようにビューポートに伝えます。
-
[Ctrl] を押したまま SampleUI 変数を [My Blueprint] パネルからグラフへドラッグします。
-
新しいノードのピンを引き出して、Remove from Parent ノードへドラッグします。
Remove from Parent はブループリントにいつ要素をビューポートから削除するかを指示します。
-
Enter ノードの Release ピンを Remove from Parent 実行ピンに接続します。
ゲームプレイ中に Enter キーを押すと、テキストが表示されて、キーを放すとテキストが取り除かれます。
-
Level Blueprint を閉じる前に [Compile] と [Save] を選択します。メイン ツールバーで [Play] ボタンをクリックします。[Enter] を押して放して SampleUI ウィジェットの動作を確認します。
最終結果
エディタでプレイすると、Enter キーを押したり、放したりするたびに以下のようになります。