ゲームのユーザー インターフェース (UI) とは、メニュー、一時停止画面、インベントリ、ダイアログ ボックス、プレイヤーのヘッドアップ ディスプレイ (HUD) など、プレイヤーが視覚的に操作するものを指します。 HUD とは、プレイヤーのヘルス値や装備、目標インジケータなど、ゲームプレイ中に画面上に表示されたままになる UI のことを指します。
これでキャラクターがアイテムをピックアップできるようになったので、今度は Unreal Engine の UMG (Unreal Motion Graphics) システムを使用して、プレイヤーがピックアップした鍵の一部を示す HUD をビルドする方法について説明します。 UMG では、ビジュアル エディタに UI 要素をドラッグして配置することで HUD をデザインできるため、ゲーム内でプレイヤーに表示されるものが正確にわかります。
開始する前に
「パズル アドベンチャーの設計」の以前のセクションで取り上げた、これらのトピックを理解できていることを確認します。
変数、関数、イベント グラフなど、ブループリントの基本を説明し、ノードを追加します。
キーの作成には、次のアセットが必要になります。
BP_Keyブループリント クラスBP_AdventureCharacterブループリント クラスEnum_KeyType列挙型
ウィジェット ブループリントを作成する
UMG には、さまざまな UI 要素をビルドするために使用するウィジェットと呼ばれる特殊な型のブループリントが含まれています。 HUD の作成を開始するには、新しいウィジェット ブループリントアセットを作成します。
新しいウィジェット ブループリントを作成するには、次の手順を実行します。
コンテンツ ブラウザで、「Content」>「AdventureGame」>「Designer」>「Blueprints」の順に移動し、
「Widgets」という名前のフォルダを作成して、UI アセットを格納します。新しい「Widgets」フォルダで、フォルダ内の空白の領域を右クリックし、[User Interface (ユーザー インターフェース)] > [Widget Blueprint (ウィジェット ブループリント)] を選択して、新しいアセットを作成します。
[Pick Parent Class (親クラスを選択)] ウィンドウで [User Widget (ユーザーウィジェット)] をクリックします。
ウィジェットの名前を入力します。 このチュートリアルでは
WBP_PlayerHUDを使用します。このブループリントをダブルクリックして開きます。
ウィジェット ブループリント エディタを活用する
ウィジェット ブループリントが特別なウィジェット エディタで開きます。デザイナーとグラフの 2 つのモードがあります。 モードを切り替えるには、エディタの右上隅にあるボタンを使用します。
デザイナー モードでは、UI の個々の部分を追加および編集できます。
ウィジェット エディタの左側にあるパレットには、UI に追加できるさまざまな種類のあらゆるウィジェットが用意されています。 Hierarchy パネルには、UI コンポーネントの構造が表示されます。 このパネルでのウィジェットの順序とネスティングは、UI のレイアウトとレンダリングに影響を及ぼします。
ウィンドウの中央にあるグリッドはビジュアル デザイナーです。 ブループリント イベント グラフと同様に、マウス スクロール ホイールを使用してズームイン/アウトしたり、マウスの右ボタンを使用してデザイン内をパンしたりできます。
グリッドの左上隅のズーム レベルは、ズームインまたはズームアウトを行うと更新されます。 「1:1 のズーム」は UI を 100% のスケールで表示し、その解像度の画面に UI 要素がインゲームでどのように表示されるかを示すことを意味します。 プレイヤーが小さい画面でゲームを実行すると、Unreal Engine は DPI スケーリング を使用して、その画面に合うように UI をスケールします。
グリッドの左下隅には、現在のスクリーン サイズ プリセットに関する情報が含まれています。 ウィジェット ブループリントがプレビューしている画面サイズです。 デフォルトでは、720p のテレビ画面です。
キャンバス パネルから始める
[Palette (パレット)] タブでは、ウィジェットが型別に表示されています。 パネル型ウィジェットは画面上に何も表示しません。ウィジェットは、内部に配置されるウィジェットのレイアウトと配置を制御するコンテナのようなものです。 パネルは、異なる TV 画面のサイズやモニターの解像度に合わせて UI を自動的にスケーリングするのに役立ちます。
キャンバス パネルは、最も柔軟なタイプのパネル ウィジェットで、HUD に最適です。 他のパネルではウィジェットが特定のレイアウトや向きに配置されますが、キャンバス パネルではアンカーを使用して画面上の必要な場所にウィジェットを正確に配置できるため、画面のサイズが変更されてもすべての配置が保たれます。
キャンバス パネルを作成するには、次の手順を実行します。
[Palette (パレット)] タブで、
[キャンバス]を検索し、[キャンバス パネル] を [WBP_PlayerHUD] の上の [Hierarchy] パネルにドラッグし、下にネスティングされるようにします。ウィンドウ中央のビジュアル デザイナ領域に長方形が表示されます。
このキャンバスは UI のルート ウィジェットです。 すべてのウィジェット ブループリントには、その他すべてのウィジェットを保持する最上位の UI 要素であるルート ウィジェットが 1 つ含まれている必要があります。 キャンバス内に別のウィジェットを配置する場合、2 つのウィジェットの間には、キャンバスが親、もう 1 つのウィジェットが子という階層関係があります。
デフォルトのキャンバス パネルは 1920x1080 ピクセルで、画面全体を表します。 これが一般的な解像度であり、作業の起点として優れているため、このキャンバス サイズを維持します。 ランタイム時に、Unreal Engine によってプレイヤーの画面に合うように UI がスケールされます。
HUD のレイアウトをビルドする
キャンバスを作成できたので、プレイヤーのヘルスおよびインベントリの領域を UI の左上隅に固定します。
人が画面を見るとき、まず左上隅近くを見る傾向があるため、これはプレイヤーのヘルスなどの重要な情報には最適です。
キャンバス上でテキストの領域を定義するには、次の手順を実行します。
パレットで
Overlayを検索し、Overlay パネルを階層にドラッグして、キャンバス パネルの下の子ウィジェットとしてネスティングします。オーバーレイは、同じ空間で複数のウィジェットを重ねるパネルの型です。 これらは、UI 要素の背後に背景画像を追加したり、UI 要素の上部に静的なアイコンやテキスト ラベルを追加したりするのに便利です。 この HUD では、UI テキストの後ろにぼかしエフェクトを重ねて読みやすくします。
新しいオーバーレイを選択します。 このパネルはキャンバスの子であるため、アンカー ポイントはキャンバスの左上隅に設定されます。
このチュートリアルでは、アンカー ポイントはその位置を維持しますが、[詳細パネル] では Anchors プロパティを使用してアンカー ポイントを移動することができます。
[Details (詳細)] パネルで [Position X]と [Position Y] を
20に設定します。 これは、アンカーから離れて配置されるオーバーレイ パネルのピクセル数です。 オフセットを追加すると、UI の外観が向上し、テキストが画面のエッジで欠落するのを防ぎます。UI テキストを描画する領域を定義するには、オーバーレイ パネルのバウンディング ボックスのハンドルをドラッグして、幅が 250 ピクセル、高さが 200 ピクセルになるようにサイズを変更します。
または、[Details (詳細)] パネルで、Size X (サイズ X) と Size Y (サイズ Y) を使用して、パネルのサイズを変更することができます。
このエリアには、プレイヤーのヘルス (HP) と収集したキーの名前が表示されます。
パレットで Vertical Box (縦方向ボックス) パネルを検索してドラッグし、Overlay の下の子にします。 この型のパネルは、表の列のように、パネル内の UI 要素を垂直方向に配置します。
Vertical Box の子として 2 つの Horizontal Box パネルを追加します。 横方向ボックスは、テーブルの行のように、中にある UI 要素を横方向に配置します。 1 つの横方向ボックスはプレイヤーのヘルス情報のためのコンテナで、もう 1 つの横方向ボックスは Keys Collected ラベルのコンテナです。
縦方向および横方向のボックスはレイアウト ウィジェットです。 これらのパネルは、目に見えないオーガナイザーのようなもので、デザイナには表示可能なフレームはなく、コンテンツに合わせて自動的にサイズが変更されます。
各ボックスの型により、UI に追加するテキストが整理され、整列されます。
[Overlay] パネルではオーバーラップが可能になるため、縦方向ボックスは横方向ボックスを互いに重ねるのではなく、縦方向に整列させます。
最初の行には 2 つのテキスト ボックスがあるため、横方向ボックスを追加することで、行内の各テキスト ボックスのアライメントと間隔を制御することができます。
テキストラベルを追加
HUD の構造を定義したので、ゲーム内で何が起きても変化しないスタティック テキストを追加することができます。
プレイヤーのヘルス値の前に HP ラベルが必要で、キーの名前のリストの前に Keys Collected ラベルが必要です。 ここでは、プレイヤーの現在の HP 値に対するプレースホルダー テキストも追加します。 このチュートリアル シリーズの後続のセクションで、このプレースホルダーを変数に変更して、プレイヤーの実際のヘルス値を反映します。
プレイヤーのヘルス (HP) のテキスト ラベルを追加するには、次の手順を実行します。
パレットで、
textを検索し、2 つの Text ウィジェットを、1 つ目の Horizontal Box の子として階層にドラッグします。Text Box ではなく Text ウィジェットを追加します。
Horizontal Box の下にある最初の Text ウィジェットを選択します。 [Details] パネルの [Slot (Horizontal Box Slot)] セクションで、[Padding] を
5に設定します。 これにより、水平ボックスのエッジから 5 ピクセルの内側にテキストが設定されます。[Content (コンテンツ)] セクションで Text を
HP:に設定します。[Appearance (外見)] セクションで [Color and Opacity ( 色と透明度)] の横にある色見本をクリックして、テキストの色を選択します。 このチュートリアルでは緑色 (Hex sRGB =
78FF3FFF) が使用されています。2 つ目の Text ウィジェットを選択します。 [Details (詳細)] パネルの一番上で、ウィジェットの名前を
TextBlockからtxtHPに変更します。 このチュートリアルの後の部分でこのウィジェットを参照する必要があるため、ここで一意かつわかりやすい変数名に指定します。Padding を
5にText を100に設定します。
プレイヤーが収集したキーのテキスト ラベルを追加するには、次の手順を実行します。
パレットで、Text ウィジェットをドラッグして、2 つ目の Horizontal Box の子にします。
Paddingを
「5」に変更し、TextをKeys Collected :に変更します。[Color and Opacity (色と透明度)]では色を選択します。 このチュートリアルでは、オレンジ色 (Hex sRGB =FF6200FF) を使用しています。
これで、それぞれの横方向ボックスにテキストが追加されたことから、このレイアウトの柔軟な構造がわかります。 横方向ボックスまたはテキスト ウィジェットを選択すると、矢印ボタンがそのウィジェットのエッジに表示されます。 矢印をクリックすると、ウィジェットの順序を変更できます。 各テキスト ウィジェットのアラインメントとパディングのオプションを使用することで、同じ行内および異なる行間における要素間の間隔を細かくコントロールすることができます。
変数用のスペースを追加する
ゲームでは、ダメージを受けたり、アイテムを受け取ったり使用したり、パワーアップしたりするなど、ユーザーが行うアクションに対応して、ほとんどのプレイヤーの HUD をゲームプレイ中に更新する必要があります。 プロジェクトでこれを行うには、プレイヤーのキーを追跡する変数に HUD を接続し、プレイヤーがキーを収集すると更新できるようにします。
キーのリストを表示するための入力テキスト ボックスを追加するには、次の手順を実行します。
パレットで [Text Box (Multi-Line)] を検索してドラッグし、Vertical Box の最後の子になります。 この入力ウィジェットは、ユーザーが入力する複数行のテキストを受け取ります。 ただし、イベント グラフ ロジックを使用して、ユーザーがキーを収集したときにこのウィジェットにテキストを追加することはできます。
階層で、テキストボックスを選択します。 [Details (詳細)] パネルで名前を
txtKeysに変更します。階層内で右クリックすると、ウィジェットの名前を表示および変更することもできます。
ビジュアル デザイナーでは、入力テキスト ボックスにデフォルトの背景が設定されていることがわかります。つまりこれを削除します。
[Details (詳細)] パネルの上部近くにある [Padding (パディング)] を展開し、テキスト ボックスをインデントするために次の値を設定します。
左：
15上、右、下：
4
Style (スタイル) セクションで Style (スタイル) > Background Image Normal (背景画像法線) を展開し、Tint の横にある色見本をクリックします。
Hex sRGB を
FFFFFF00に変更し、背景を透明にして、[OK] をクリックします。
このウィジェットにはデフォルトのフォント スタイルが含まれないため、フォントのプロパティを自分で設定する必要があります。 [Style (スタイル)] セクションで [Text Style (テキスト スタイル)] > [Font (フォント)] を展開し、以下を設定します。
[Font Family (フォント ファミリー)] を [Roboto] に変更します。
[Typeface (書体)] を [Bold (太字)] に変更します。
[Size (サイズ)] を
「24」に変更します。[Color (カラー)] を白に変更します。
「txtKeys」が選択された状態で、[Details (詳細)] パネルの上部を見ると [Is Variable] が有効になっていることがわかります。 テキストボックスはユーザーが入力したテキストを想定しているため、自動的に変数として設定されます。 Is Variable を有効にすると、ウィジェット ブループリントのイベント グラフで txtKey を参照および使用できるようになります。
特殊エフェクト内のレイヤー
オーバーレイのバウンディング ボックスの背景をぼかすことで、HUD テキストを読みやすくすることができます。 オーバーレイ パネルのレイヤー化機能を使用して、縦方向ボックスおよび横方向ボックスの背後にブラー エフェクトを配置します。
ウィジェットを使用して、HUD テキストの背後の画面領域をぼかすには、次の手順を実行します。
パレットで
blurを検索し、背景ブラー ウィジェットをオーバーレイの子として階層にドラッグします。エディタによって 背景ブラー がリストの一番下に追加されるので、オーバーレイ の下の 垂直ボックス の上の最初の子になるようにこれをドラッグします。
詳細パネルの [Appearance (外見)] セクションで [Blur Strength (ブラー強度)] を
2に設定します。大きなブラー エフェクトを使用すると、GPU でのランタイム負荷が大きくなります。 負荷の低い方法として、不透明型の境界線ウィジェットを使用したり、画像ウィジェットでテクスチャを適用したりすることもできます。
エフェクトがオーバーレイ ウィジェットの寸法を埋めるようにします。
Slot (Overlay Slot) セクションの Horizontal Alignment (水平アライメント) の横にある Fill Horizontally (横方向にフィル) をクリックします。
[Vertical Alignment (垂直アライメント)] の隣にある [Fill Vertically (塗りつぶし垂直方向)] を選択します
以下の例では、背景がぼやけていない場合と、ぼかしが強すぎた場合の UI テキストがどのように表示されるかを示しています。
HUD のロジックをビルドする
ウィジェット ブループリントを完成させるには、プレイヤーが手に入れたキーの名前を表示するロジックをビルドします。
キー ピックアップのための構成要素を設定する
キー名を HUD に追加するロジックの作成を開始するには、次のものが必要です。
プレイヤーのキーを追跡する配列変数。
プレイヤーが新しいキーを見つけた時点で、キャラクターのブループリントが呼び出せる機能。
他のブループリントから HUD のロジックの実行をトリガーするには、イベント グラフではなく関数を使用します。 この関数は、プレイヤーが収集したキーを受け取り、それを名前付き変数に保存し、その変数のキーの名前を txtKeys ボックスに入力します。
プレイヤーのキーをトラッキングする新しい変数と関数を追加するには、次の手順を実行します。
ウィンドウの右上隅近くにある [Graph (グラフ)] をクリックして、ウィジェット ブループリントのイベント グラフを編集します。 このグラフは、これまでに作業してきた他のブループリントと同じように機能します。
txtKeys変数がウィンドウの左側のパネルにリストされます。呼び出されたときに HUD ロジックをすべて実行する関数を作成します。
[Functions (関数)] セクションで、プラス (+) ボタンをクリックして関数を追加します。 その関数の新しいタブがグラフの上に表示されます。
関数を
「fnAddKeyHUD」という名前にします。関数を選択した状態で、[Details (詳細)] パネルの [Inputs (入力)] セクションで [+] をクリックして新しい関数入力を追加します。
入力に
KeyTypeという名前を付けて、その型を列挙型に変更します。
[My Blueprint (マイ ブループリント)] パネルで、プレイヤーのキーを格納する配列変数を作成します。
Variables (変数) セクションで、[+] をクリックして新しい変数を作成します。
変数に
KeysToDisplayという名前を付けます。タイプを列挙型キー型に変更します。 これは、赤、黄、青のキー型オプションを使用して作成した列挙型です。
変数の型を右クリックして配列に変換します。 または、[Details (詳細)] パネルを使用してコンテナ タイプを変更することができます。
ここで再ビルドするのではなく、キャラクター ブループリントのキー配列を関数に渡すこともできますが、各キーの画像を表示するなど、HUD 固有のロジックを実行する場合は、HUD でキーを追跡することで柔軟性が高まります。
複数行のテキスト ボックスにキー名を出力するには、それらすべてを文字列に結合する必要があります。
[Local Variables (ローカル変数)] セクションで、[+] ボタンをクリックして新しい変数を追加します。 「
Keys」という名前を付けて そのタイプを String に変更し コンテナのタイプを Single に変更します。
プレイヤーのキーを画面に出力する
これで、fnAddKeyHUD 関数にロジックを追加できるようになりました。
この関数が呼び出されると、赤、黄、または青の KeyType で開始されます。 そのキー型を KeysToDisplay 配列に追加し、すべてのキーを文字列変数に追加して、その文字列をテキストに変換し、画面に表示できるようにする必要があります。
最初に、KeysToDisplay 配列をビルドするには、以下の手順に従います。
ウィジェット ブループリントのグラフビューで、fnAddKeyHUD タブが表示されていることを確認します。
KeysToDisplay 配列をビルドするには、機能 Entry ノードの後に Add Unique ノードを追加します。
Target Array で、KeysToDisplay 変数への参照を接続します。
2 つ目の入力では、Key Type 関数の入力を接続します。
Add Unique ノードは配列と新しい値を受け取り、その値を配列に追加します (まだ配列内にない場合)。 このノードは、キー名が HUD に複数回表示されないようにします。
収集したすべてのキーを Keys 文字列に結合するには、以下の手順に従います。
KeysToDisplay 配列内の各アイテムをループします。 Add Unique ノードの後に For Each Loop ノードを追加します。
もう 1 つ KeysToDisplay の参照をループの Array 入力に接続します。
配列内の各アイテム (または要素) またはループの各イテレーションに対して、その要素を文字列に変換し、Keys 文字列変数に追加してから、そのキー名の後に新しい行を追加する (Enter キーを押すなど)入力してみます。
ループ本体の実行ピンに接続したロジックは、配列項目ごとに 1 回実行されることを忘れないでください。 ループが完了すると、Completed ピンで実行が渡されます。
ノード グラフ内を右クリックして
Append Stringを検索し、文字列型の Append ノードを追加します。 これは文字列入力を組み合わせて、単一の文字列の値を形成します。Append ノードを設定し、Keys 変数の現在のコンテンツを取得し、新しい配列要素を追加してから、改行を追加します。
その A 入力で、Keys の参照を接続します。
その B 入力では、loop ノードの Array Element ピンを接続します。 Unreal Engine は、この値を変換するために Enum to String ノードを追加します。
[Add pin (ピンを追加)] をクリックして C入力を追加します。 テキストボックス内でクリックしてから Shift + Enter キーを押し、新しい行を追加します。
Append ノードの Return Value ピンをドラッグし、Set Keys ノードを追加します。
ループの実行出力ピンを Set Keys ノードに接続します。
ループ本体が完了すると、プレイヤーのすべてのキーの名前を含む長い文字列が 1 つ生成されます。
Keys 文字列を HUD の TxtKeys テキスト ボックスに渡すには、次の手順を実行します。
ループの Completed 実行ピンをドラッグして、SetText (Multi-Line Text Box) ノードを追加します。
このノードが見つからない場合は、ノード アクション リストの右上付近にある Context Sensitive (コンテキストに応じて変化) を無効にします。
SetText ノードはテキスト型の入力を受け取り、それをターゲット テキスト ボックスに表示します。
SetText (Multi-Line Text Box) ノードを設定します。
Target に TxtKeys への参照を接続します。
In Text では Keys への参照を接続します。 Unreal Engine では、キーの文字列をテキストに変換する To Text (String) ノードを追加します。
テキストは別のデータタイプです 文字列はプログラミングとデバッグのために使用されますが、テキストはユーザー向けのテキスト用に設計されており、平行移動とフォーマットをサポートしています。
ブループリントをコンパイルして保存します。
完全な fnAddKeyHUD 関数は次のようになります。
このスニペットをプロジェクトにコピーする場合は、関数入力ノードのピンを Add Unique ノードに接続する必要があります。
HUD の準備は完了です。 次に、作成したテンプレートをプレイヤー キャラクターに追加して、ゲームを開始したときに画面に表示する必要があります。
プレイヤー キャラクターを更新する
HUD の設定を完了するには、キャラクター ブループリントに、ゲームが開始したときに HUD ウィジェットを追加し、プレイヤーがキーを拾ったときに更新するロジックを追加する必要があります。
キャラクター ブループリントから FnAddKeyHUD を呼び出す
BP_AdventureCharacter のキー ロジックを HUD のロジックに接続し、プレイヤーにキーを追加することで、HUD にもキーを追加します。
プレイヤーがキーを取得したときに HUD をトリガーするには、次の手順に従います。
BP_AdventureCharacterブループリントを開きます。 My Blueprint (マイ ブループリント) パネルの Variables (変数) セクションで、+ をクリックして新しい変数を追加します。変数に
HUDと名前を付け、型を WBP プレイヤー HUD (オブジェクト参照) に変更します。これには、キャラクターのイベント グラフで作成する HUD ウィジェットが格納されます。
イベント fnBPIAddKey がプレイヤーの HeldKeys 配列に新しいキーを追加するイベント グラフのセクションに移動します。
[My Blueprint (マイ ブループリント)] パネルの [Graphs (グラフ)] セクションで、EventGraph を展開し、イベントをダブルクリックしてグラフのその領域に移動します。
Add ノードの後に、FnAddKeyHUD ノードを接続します。
FnAddKeyHUD ノードを設定します。
Target では、HUD 変数への参照を接続します。
Key Type では、ピンを Event fnBPIAddKey ノードの Key Type ピンに接続します。
ここで、プレイヤーの新しいキーを取得し、HUD ウィジェット ブループリントの FnAddKeyHUD 関数を呼び出します。
ブループリントを保存してコンパイルします。
ゲーム開始時に HUD を表示する
レベルにプレイヤーをスポーンしたときに HUD を作成するには、次の手順を実行します。
キャラクターのイベント グラフで空いている領域を見つけて、Event Possessed ノードを追加します。 これは、プレイヤーがプレイヤー キャラクターのコントロールを取得したとき、または所有したときにブロードキャストされるイベントです。
Event Possessed ノードを右クリックし、[Add Call To Parent Function (親関数への呼び出しを追加)] を選択して、親キャラクタークラスの Event Possessed ロジックが引き続き実行されるようにします。 各ノードの実行ピンと新しいコントローラーピンを接続します。
キャラクター ブループリントの右上に、
BP_FirstPersonCharacterブループリント クラスから派生していることが表示されています。 これは、キャラクターが自身と親からロジックを使用することを意味します。 親にすでに存在するイベントをキャラクター ブループリントに追加した場合、それをオーバーライドします。 イベントをオーバーライドする場合は、必ず親のバージョンも呼び出し、そのロジックが実行されてから、自分のイベントを追加するようにしてください。HUD を作成するために、Create Widget ノードを接続し、その クラス を WBP Player HUD に変更します。 これにより、ウィジェット ブループリントのインスタンスが作成されます。
Create Widget ノードの後に Set HUD ノードを追加し、両方のピンを接続します。 これにより、新しいウィジェット ブループリントが変数に保存されます。
HUD オブジェクトを画面に表示するには、Add to Viewport ノードを追加します。 Target を HUD 変数に設定します。
Create Widget ノードを Add to Viewport ノードに直接接続することもできますが、このチュートリアルではウィジェットの作成と画面での描画を分けます。 プレイヤーが数回ヒットを当てたときに表示されるコンボ アラートのように、ウィジェットの準備は完了しているが、特定の瞬間まで非表示にしたい場合に便利です。 ウィジェットに大量のアニメーション、エフェクト、サウンドがある場合、ゲームプレイの遅延を回避するために事前にロードすることが推奨される場合があります。
コンパイルして保存します。
新しいキャラクター ブループリント ロジックは次のようになります。
HUD をテストする
[Play] をクリックしてゲームをテストします。 ゲームが始まると、プレイヤーの HP と収集したキーのラベルが HUD に表示されます。 キーにタッチすると、そのキーの名前が HUD に追加されます。
必要に応じて HUD を調整します。 独自に試すことができるのは、以下の通りです。
オーバーレイ パネルのサイズを調整します。
フォント サイズやスタイルを変更します。
左上以外の領域に配置を移動します。
テクスチャ、マテリアルなど、背景用のさまざまなウィジェットを追加します。
HUD をさらに発展させるには、テキスト ラベルをアイコンに置き換えて試してみます。 これを行うには、コンテンツ ブラウザに画像をインポートし、画像ウィジェットを使用して HUD に追加します。 アセットの Unreal Editor へのインポートの詳細については、アセットを直接インポートするを参照してください。
効果的な HUD をデザインする
クリーンでプレイヤー フレンドリーな HUD を作成するための、その他のデザイン手法を次に示します。
読みやすくするために、次の点に配慮してください。
コントラストの高いテキスト、きれいなフォント、適切なフォント サイズを使用します。 HUD は、画面からの一般的な表示距離で、静止しているときだけでなく、プレイヤーがビジー環境を移動するときにも読み取れるようにします。
明瞭で簡潔にするために、次の点に配慮してください。
プレイヤーが今必要としているものだけを表示し、必要になるまで関連性の低い情報は非表示にするか、小さくします。 ただし、プレイヤーが確信を持って決定できるように、常に一目で必要なものがわかるようにしてください。
以下の場合、フィードバックを追加します。
HUD を更新するとき (鍵を拾うときなど) は、短いアニメーション、色の変更、サウンドを使用して、プレイヤーに変更を気づかせます。
サイズと配置で目立つようにします。
重要な情報は目立つようにします。テキストを大きくし、色も太くします。また、この情報をプレイヤーが自然に最初に視認できる左上または中央に配置します。
次の内容
次のセクションでは、レベルにゲームプレイ要素をさらに追加し続け、スイッチを押したときにアクションを実行するようにプログラムする方法を学習します。
