1. Epic GamesDeveloper
  3. TMNT カスタム UI: プレイヤー情報

TMNT カスタム UI: プレイヤー情報

TNMT Arcade テンプレートで使用されるカスタム プレイヤー情報 UI 要素を作成する方法を説明します。

TMNT カスタム UI: プレイヤー情報
Prerequisite topics

In order to understand and use the content on this page, make sure you are familiar with the following topics:

このセクションでは、TMNT アーケード テンプレートのプレイヤー UI を再作成する手順に従って、ゲーム用に完全にカスタマイズされた UI オーバーレイを作成する方法を説明します。

TMNT プレイヤー UI

手順の基本的な内訳は次のとおりです。

  1. カスタム ウィジェットの外観を設定します。

  2. 各インタラクティブ ウィジェット要素にバインディング表示を追加します。

  3. 複数の同時接続プレイヤー用のプレイヤー情報スタックを作成します。

  4. カスタム UI を表示するための HUD 制御の仕掛けを設定します。

UI マテリアル ラボをダウンロードしてください。テクスチャ パックは無料でダウンロードできます。独自の UI 構成を試してみてください。

UI マテリアル ラボ
UI マテリアル ラボ

画像をクリックすると拡大します。

というわけで、早速見ていきましょう！

カスタム ウィジェットを設定する

コンテンツ ブラウザで、[All (全て)] > [自分のプロジェクト名] > UI > [Widgets (ウィジェット)] を選択して、UW_HUD_PlayerInfoBlock ウィジェットのブループリントを開きます。

TMNT プレイヤー UI

左側には、[Hierarchy (階層)] タブが表示されます。これは、メイン エディタ ウィンドウのアウトライナーと同じように機能し、完成したウィジェットのさまざまなコンポーネントを表示します。

[Hierarchy] タブ

バックプレート

UI のレイヤー化されたルックを定義する 3 つのバックプレート イメージで構成されています。 以下のようなものが含まれます。

  • Backplate1_Image - グレーがかった背景レイヤー

  • Backplate2_Image - オレンジのアウトライン レイヤー

  • Backplate3_Image - 白いアウトライン レイヤー

これらの画像は組み合わさって、プレイヤー情報パネルのフレーム付きスタイルを作り出します。

UI に使用する画像をインポートするときは、必ず Texture Group (テクスチャ グループ) を [UI] に、[Compression Settings (圧縮設定)] を [UserInterface2D(RGBA8)] に選択してください。

テクスチャと圧縮の設定

プレイヤー名

このコンポーネントは、アクティブ プレイヤー名と非アクティブ プレイヤー名という 2 つの要素で構成されており、ゲーム内でプレイヤーが生きているとき、排除されたとき、または切断されたときに表示されます。

アクティブ プレイヤー名の UI
非アクティブ プレイヤー名の UI

チーム内で現在アクティブなメンバーと、排除されたメンバーをプレイヤーにわかるようにするため、2 つの異なる色を選択します。

アクティブなプレイヤー名の場合は、[Visibility (可視性)] を [Visible (表示)] に設定し、非アクティブな場合は、[Hidden (非表示)] に設定します。 これは特定の条件下でのみ表示されます。

長いプレイヤー名がプレイヤーのアバター アイコンと重ならないように、[Width Override (幅のオーバーライド)] を「220.0」に設定します。

プレイヤー アバター アイコン

このコンポーネントは、ゲーム内で選択したスキンに基づいてプレイヤーのキャラクター ポートレートを表示します。

コンポーネントは、「UI」 > 「Material Instances」フォルダにある「MI_UI_PlayerCard」というマテリアル インスタンスにバインドされています。

[Details (詳細)] パネルの設定を変更することで、このマテリアル インスタンスを好みに合わせてカスタマイズできます。 独自の画像をインポートし、アウトラインの色を追加してみてください。

アバターのマテリアル インスタンス設定

この例では、後でキャラクターのスキンに接続される空の透明な画像が選択されています。

体力

このコンポーネントには、プレイヤーの体力とシールド レベルを表示する領域が含まれています。

Health Component

親レベルでは、許容される領域全体の大きさを決定するサイズ ボックスが表示されます。

次は、「MI_UI_Health_Backplate」と呼ばれるヘルス バックプレート イメージです。 この UI マテリアルは、[Fortnite] > [UI] > [Materials] でも提供されています。 非常にカスタマイズ性が高く、プレイヤーの体力ゲージを表示する際のオプションが多く用意されている上、すぐに利用可能です。

バックプレートの上には、体力ゲージと、それぞれ「Health_Image」と「Health_Shadow」と呼ばれるシャドウの 2 つのコンポーネントで構成されたスタック ボックスがあります。

ヘルス シャドウ

Health_Image はカスタマイズ可能な進行状況バーの UI マテリアルです。 マテリアル インスタンスを開くと、[Preview Size (プレビューサイズ)] を変更して拡大できます。

プレビューサイズ

ここでは、[Details (詳細)] パネルの設定をいくつか変更して、既存のマテリアルにどのような影響があるか確認します。

スカラー パラメータ値 (進行状況バーの塗りつぶし状態) の範囲は 0 から 1 であり、フォートナイトの体力とシールドの値は通常 0 から 100 の範囲であるため、体力とシールドの値がプレイヤーに正しく表示されるように、乗数を 0.01 に設定することが重要です。

スカラーパラメータ値

Health_Shadow バーは、美観目的で追加されたシンプルな陰影付きオーバーレイです。

盾

シールド コンポーネントは、空のシールド領域を濃い灰色で表示する Shields_Container の背景と、進行状況バーの UI マテリアルを含む Shields_Image で構成されます。

シールド バー

Shield_Image は、Health_Image マテリアルの簡略化されたバージョンである基本的な進行状況バー マテリアル インスタンスを使用します。

バインディング表示を追加する

これでゲームの UI のコア コンポーネントをビルドできました。次は、ライブ セッションから受信したデータに基づいて各コンポーネントを更新できるようにするバインディング表示を追加する練習をしてみます。

プレイヤー名

プレイヤー名を正しいフィールドに表示するには、次の手順に従います。

  1. [Window (ウィンドウ)]> [View Bindings (バインディングを表示)] をクリックするか、画面の下部にある [View Bindings] を選択してドッキングし、[View Bindings] タブを開きます。

    [View Bindings] タブ

    バインディング表示の HUDPlayerInfoViewModel リストを表示するには、下記を実行します。

    1. [Window] > [Viewmodels (ビューモデル)] を選択して、[Viewmodels] ウィンドウを開きます。

    1. [+Viewmodel] に移動し、[HUD - Player Info Viewmodel Base (HUD - プレイヤー情報ビューモデル ベース)] を選択します。

    1. [Device - HUD Controller Player Info Viewmodel (デバイス - HUD 制御プレイヤー情報ビューモデル)] をクリックし、[Select (選択)] をクリックします。

    HUD プレイヤー情報ビューモデル

  2. Hierarchy リストから NameActive_Text を選択するか、UI プレビュー画面の [Playername] 領域をクリックします。

  3. [+ Add Widget NameActive_Text] をクリックし、ドロップダウン メニューから [Text (テキスト)] を選択します。

    Text ウィジェット

  4. 右側の空のフィールドで、HUDPlayerInfoViewmodel を選択し、次のドロップダウンから [Player Name] を選択します。

    プレイヤー名の取得

  5. 最終的なバインディングは次のようになります。

    バインディング名の表示

  6. NameInactive_Text 要素に対して手順 1～3 を繰り返します。

  7. 非アクティブな名前の表示設定を変更するには、NameInactive_Text に新しいウィジェットを追加し、ドロップダウンから [Visibility] を選択します。

  8. 右側の空のフィールドをクリックし、[Conversion Functions (変換関数)] > [To Visibility (Boolean)] を選択します。

    可視性変換関数

  9. このオプションを選択すると、3 つの新しいフィールドがポップアップ表示されます。 [Is Visible] の横にある [Link (リンク)] アイコンをクリックします。 メニューから、[HUDPlayerInfoViewModel] と [Is Eliminated] を選択します。

    Is Eliminated

  10. 以下で、[True Visibility (真の可視性)] を [Not Hit-Testable (Self Only (ヒットテスト不可 (セルフのみ))] に設定します。 [False Visibility (False の可視性)] は [Collapsed] のままにします。 これにより、プレイヤーが撃破されたり切断されたりすると、名前が NameActive_Text に置き換わりますが、プレイヤーが生きている場合は折りたたまれたままになります。

  11. 最終的な NameInactive_Text バインディングは次のようになります。

    NameInactive_Text バインディング

  12. [Compile (コンパイル)] を押して変更を送信すると、プレイヤー名の作成は完了です。

プレイヤー アバター アイコン

  1. 階層から Profile_Image を選択するか、UI プレビュー画面のプレイヤー アイコン領域をクリックします。

  2. [+ Add Widget Profile_Image] をクリックします。

  3. [Profile_Image] > [Brush (ブラシ)] に移動して、[Select] を押します。 このバインディングは基本的に、Profile_Image 詳細パネルから選択されたブラシ設定を参照します。

    プロフィール画像

  4. 右側の空のフィールド内をクリックし、[Conversion Functions] > [Set Texture Parameter (テクスチャパラメータを設定)] を選択します。

    Set Texture Parameter

  5. [Parameter Name (パラメータ名)] フィールドに「Texture」と入力します。 このフィールドの名前を見つけるには、プレイヤーのアバター マテリアル インスタンスを開きます。

    Set Vector/Scalar/Texture Parameter 関数の場合、マテリアル インスタンス パラメータ名が [Parameter Name] フィールドと完全に一致していることを確認してください。

  6. [Value (値)] フィールドの横にあるリンク アイコンをクリックし、HUDPlayerInfoViewModel > [Player Avatar Icon] を選択します。

  7. 最終的なバインディングは次のようになります。

    プロフィール画像のバインディング

体力とシールド

  1. 階層から Health_Image を選択するか、UI プレビュー画面のヘルス バー領域をクリックします。

  2. [+ Add Widget Health_Image] をクリックします。

  3. [Profile_Image] > [Brush (ブラシ)] に移動して、[Select] を押します。

  4. 右側の空のフィールド内をクリックし、[Conversion Functions] > [Set Scalar Parameter (スカラーパラメータを設定)] を選択します。

  5. [Parameter Name (パラメータ名)] フィールドに「Progress」と入力します。 このフィールドの名前を見つけるには、プレイヤーのアバター マテリアル インスタンスを開きます。

  6. [Value] の横にある [Link (リンク)] アイコンをクリックし、[HUDPlayerInfoViewModel] > [Health (体力)] を選択します。

    1. 進行状況はプレイヤーの残りの体力のパーセンテージで示され、Multiplier は 0.1 に設定されているため、パーセンテージ ポイントごとに進行状況バーが 1/100 ずつ変化します。 これをテストするには、マテリアル インスタンスのパーセンテージ値を任意に変更して、進行状況バーの動きを確認してください。

      ヘルス値のパーセンテージ
      ヘルス値のパーセンテージ

      画像をクリックすると拡大します。

  7. 最終的なバインディングは次のようになります。

    ヘルスのバインディング

  8. シールド バーについては、手順 1 ～ 6 を繰り返しますが、ここでは [Health] ではなく [Shield (シールド)] を選択します。

  9. シールドの最終的なバインディングは次のようになります。

    シールドのバインディング

  10. 変更を送信するには、[Compile] を押します。

フル ウィジェット

このバインディングを使用すると、プレイヤーがゲームに接続された後にのみウィジェット全体が表示されるようになります。

  1. [Hierarchy] から PlayerInfoBlock_Overlay を選択します。

  2. [+ Add Widget PlayerInfoBlock_Overlay] を選択し、ドロップダウン メニューから [Visibility] を選択します。

  3. 右側の空のフィールドをクリックし、[Conversion Functions (変換関数)] > [To Visibility (Boolean)] を選択します。 このオプションを選択すると、3 つの新しいフィールドがポップアップ表示されます。

  4. [Is Visible] の横にある [Link (リンク)] アイコンをクリックします。 メニューから、[HUDPlayerInfoViewModel] と [Is Disconnected] を選択します。

  5. [True Visibility] を [Collapsed] に、[False Visibility] を [Not Hit-Testable (Self Only)] に設定します。

  6. 最終的なバインディングは次のようになります。 変更を保存するには、[Compile (コンパイル)] を押します。

    プレイヤー情報ブロックの可視性

これで、ゲーム内情報を表示する UI ウィジェットが完全にセットアップされました。

プレイヤー スタックを作成する

このセクションでは、制御しているプレイヤーとともに追加のチーム プレイヤーを表示するユーザー ウィジェットを作成する方法を説明します。

  1. まず、コンテンツ ブラウザを右クリックし、[User Interface (ユーザーインターフェース)] > [Widget Blueprint (ウィジェット ブループリント)] を選択して、新しいウィジェット ブループリントを作成します。

    新しいウィジェット ブループリント

  2. ダイアログ ボックスから [User Widget (ユーザーウィジェット)] を選択し、名前を「HUDInfoStack」に変更します。

  3. ユーザー ウィジェットをダブルクリックして、新しいエディタ ウィンドウを開きます。

  4. 開始するには、[Palette (パレット)] パネルから Overlay (オーバーレイ) 要素を [Hierarchy] パネルにドラッグします。

  5. スタック ボックスをオーバーレイの下のレベルにドラッグし、名前を「PlayerInfoStack」に変更します。

    プレイヤー情報スタック

  6. [Viewmodels (ビューモデル)] パネルから、[+Viewmodel] を押して、[Device - HUD Controller Team/Squad Player Info List] を選択します。

  7. [Details] パネルに移動し、[+Add Viewmodel Extension] を押します。 これにより、PlayerInfoStack は Entry Widget クラスを受け入れられるようになります。

    ビューモデル拡張

    これらのオプションが表示されない場合は、ウィジェットをもう一度コンパイルしてみてください。

  8. エントリ ウィジェット クラスでは、以前に作成した PlayerInfoBlock を選択します。 以下では、Entry Viewmodel として HUDPlayerInfoViewmodel を選択します。

    エントリビューモデル

  9. [Slot Template (スロット テンプレート)] セクションでは、各ウィジェット間の間隔と配置を調整し、特定の数のウィジェットがゲーム内でどのように表示されるかをプレビューできます。

    ウィジェット間の間隔

    gif をクリックすると拡大します。

  10. [View Bindings] パネルで、[+Add Widget] をクリックし、HUDInfoStack を選択します。 PlayerInfoStack_Viewmodel_Extension を選択し、展開して Set Items を表示し、それをクリックします。 リストに PlayerInfoStack_Viewmodel_Extension が表示されない場合は、[Compile (コンパイル)] を押すと表示されるはずです。

    スタック ビューモデルの拡張

  11. 右側の空のフィールドで、HUDPlayerInfoListViewModel > [Team/Squad Players Info Array] を選択します。 これにより Set Items という関数を使用して、新しくセットアップされた拡張機能にプレイヤー情報のビューモデルの配列が渡されます。

    フル スタック ビューモデルの拡張

  12. 変更を保存するには、[Compile (コンパイル)] を押します。 これで、HUD 制御 の仕掛けを使用してこれらをゲームに追加する準備が整いました。

チームの残りのメンバーとは別に、コントロールしているプレイヤー用のウィジェットを作成する場合は、次の手順に従います。

  1. 制御プレイヤー用の新しいウィジェットを作成し、以前に Device - HUD Controller Player Info Viewmodel を使用していたのと同じようにバインディング表示を設定します。

  2. このウィジェットを、スタック ボックスを保持する親ウィジェットの下に移動します。

  3. そのウィジェットのバインディングを作成します。 左側のフィールドで、Device - HUD Controller Player Info Viewmodel を選択します。 右側のフィールドで、Device - HUD Controller Team/Squad Player Info List > Controlling Player Info を選択します。

親子ウィジェット

HUD コントローラーの仕掛けを設定する

  1. コンテンツ ブラウザで HUD Controller device を検索し、シーンにドラッグします。

    HUD制御

  2. ユーザー オプションで、プレイヤーに表示する内容を選択し、[Show HUD (HUD の表示)] が [Yes (はい)] に設定され、[Show Team Info (チーム情報を表示)] が [No (いいえ)] に設定されていることを確認します。

  3. [Player Info Widget Override (プレイヤー情報ウィジェット オーバーライド)] まで下にスクロールし、「HUDInfoStack」ウィジェットを空のフィールドにドラッグします。 これが、作成した元のウィジェットではなく、新しく作成されたスタック ウィジェットであることを確認してください。

    HUD 制御オプション

  4. [Save] をクリックします。

以上です。 これでゲームのプレイテスト時に新しい UI が表示されるようになりました。

次にプレイ

次は、横スクロール ゲームのカメラならびにコントロールの仕掛けの設定について説明します。

Ask questions and help your peers Developer Forums

Write your own tutorials or read those from others Learning Library

On this page