1. Epic GamesDeveloper
  3. カスタム スクワッド ビューを作成する

カスタム スクワッド ビューを作成する

カスタム バックプレートの知識を展開して、プロジェクトのカスタム スクワッド ビューを作成します。

カスタム スクワッド ビューを作成する

カスタム スクワッド ビュー作成の基盤となるのが、スクワッド ビューを作成するためのシングル プレイヤー ネームプレート ウィジェットの設計です。 Stack Box ウィジェットは、ビューモデルを使用してシングル プレイヤー情報ウィジェットを再現することで、プレイヤー ビューをシングル プレイヤーからスクワッドに変換します。

Stack Box は、シングル プレイヤー ウィジェットのコピーを線形的 (左右または上下) に配置するコンテナです。これにより、スクワッドの外観が統一されます。

Stack Box は、シングル プレイヤー ウィジェットのコピーを線形的 (左右または上下) に配置するコンテナです。

たとえば、スクワッド ビューは積み重ねられます。

スクワッドを左から右に重ねる例については、ティーンエイジ ミュータント ニンジャ タートルズに関するドキュメントの「カスタム UI：プレイヤー情報」を参照してください。

プレイヤー情報ウィジェット

ゲーム中にチーム メンバーのプレイヤー情報を利用するには、[Device - HUD Controller Player Info Viewmodel (仕掛け - HUD コントローラー プレイヤー情報ビューモデル)] を使用して Player_Info ウィジェットを設定する必要があります。 この設定により、各ウィジェットで [Device - HUD Controller Player Info Viewmodel] のプロパティを使用して、プレイヤーとそのスクワッド/チームを制御するための個別のウィジェットが作成されます。

[Device - HUD Controller Player Info Viewmodel] を使用して Player_Info ウィジェットを設定する必要があります。

ユーザーは引き続き、バックプレートおよび体力とシールドのチュートリアルのバインディング設定を使用して、プレイヤー情報に必要な要素をバインドできます。

Player_Info ウィジェットが適切に設定されていないと、コンパイラにエラー メッセージが表示されます。

Player_Info ウィジェットが適切に設定されていないと、コンパイラにエラー メッセージが表示されます。

チーム/スクワッド プレイヤー情報リスト ビューモデルをプレイヤー アイコン、プレイヤー名、体力、シールドにバインドするスクワッド スタック ウィジェットを作成する手順は次のとおりです。

ユーザー ウィジェットを作成する

  1. 「UI ポップアップ」の手順に従い、ユーザー ウィジェットを作成します。

  2. ユーザー ウィジェットに「Squad_View」という名前を付けます。

    ユーザー ウィジェットに「Squad_Info」という名前を付けます。

  3. ユーザー ウィジェットのサムネイルをダブルクリックして、Unreal Motion Graphics (UMG) のイベント エディタを開きます。

ウィジェット エディタでは、スクワッド ビューの UI 設計を計画してレイアウトを決定できます。 レイアウトが決まったら、マテリアルを追加して UI の外観をカスタマイズできます。

これで、コンテンツ ブラウザ内で 2 つのユーザー ウィジェット (Player_Info と Squad_View) を利用できるようになりました。

スクワッドのレイアウトを作成する

Stack Box をコンテナとして使用して、Squad_View ウィジェットに完全に機能するシングル Player_Info ウィジェットを導入する方法がベスト プラクティスとなります。 Stack Box 内でシングル プレイヤー設計を再現し、上下方向または左右方向に設計を繰り返すことで、設計の一貫性が保たれます。

ユーザーは、ビューモデルにシングル プレイヤー ウィジェットを追加してから、Stack Box を使用してイベント グラフのレイアウトを整えます。

次の手順を実行します。

  1. Overlay を Squad_Info の下にドラッグし、「Container_Overlay」という名前を付けます。

  2. Container_Overlay のサイズを 2560 x 1440 に変更します。 これはすべての画面に最適なサイズです。

    Container_Overlay のサイズを 2560 x 1440 に変更します。

  3. Stack Box を Container_Overlay の下にネストします。

  4. [Details] パネルで、Stack Box の次の設定を変更します。

    1. Padding (パディング) = 25

    2. Orientation = Vertical (垂直)

    [Details] パネルで、[Padding] を [25] に、[Orientation] を [Vertical] に設定します。

    Stack Box には、画面の端から 25 px のパディングがあります。

  5. メイン メニュー バーから、[Window] > [Viewmodels] の順に選択して、[Viewmodel] パネルを開きます。

    メイン メニュー バーから、[Window] > [Viewmodels] の順に選択して、[Viewmodel] パネルを開きます。

  6. [+Viewmodel] をクリックして、[Device - HUD Controller Team/Squad Player Info List (仕掛け - HUD コントローラー チーム/スクワッド プレイヤー情報リスト)] > [Select] の順に選択します。 HUD 制御の仕掛けのビューモデルが作成されます。

  7. [Details] パネルで、[+Add Viewmodel Extension (+ビューモデル拡張の追加)] をクリックします。 これで、チーム/スクワッド内のプレイヤーの人数に応じて Squad_View ウィジェット内にスクワッド ウィジェットを動的に生成できるオプションが使用できるようになります。

    [+Add Viewmodel Extension] をクリックする前
    [+Add Viewmodel Extension] をクリックした後
    [+Add Viewmodel Extension] をクリックする前
    [+Add Viewmodel Extension] をクリックした後

  8. エントリ ウィジェット クラス設定で、ドロップダウンからユーザーの Player_Info ウィジェットを選択して、エントリ ビューモデルを [HUDPlayerInfoListViewModel] に設定します。

  9. スロット テンプレート オプションを展開して、各プレイヤー ウィジェット間のスペースを調整します。 ウィジェットを追加または削除し、アライメントを変更します。 これらのオプションを使用して、ゲーム内でのウィジェットの見え方を視覚化します。

    利用可能なスペースに対して UI 要素が大きすぎる場合、Player_Info ウィジェットに戻り、Squad_View ウィジェットに合わせて Image ウィジェットのサイズを縮小します。

次に、バインディングを追加して、すべてのスクワッドですべての UI が機能するようにします。

スクワッドのバインディング

Squad_View ウィジェットにスクワッドの情報をバインドするには、[View Bindings] からスクワッド メンバーの情報を参照する必要があります。 各バインディングにより、ウィジェットは、バインドされた仕掛けから取得するべき対象プレイヤーの情報を確認できます。 その各プレイヤー情報は、HUD 制御の仕掛けを介して UI に取り込まれます。

  1. [Hierarchy] パネルで [Stack Box (スタック ボックス)] を選択して [View Bindings] を開き、[+Add Widget] を選択します。 これで Stack Box がウィジェットとして [View Bindings] パネルに加わります。

  2. ウィジェットのドロップダウンで [Squad_View] > [Select] の順に選択します。 これにより、スクワッドのウィジェットと、バインド用のあらゆる内部ウィジェットが選択されます。

    ウィジェットのドロップダウンで [Squad_View] > [Select] の順に選択します。

  3. 左側の [Squad_View] フィールドで [Squad_View] > [StackBox (スタックボックス)] > [StackBox Viewmodel (スタックボックスのビューモデル)] > [Set Items (アイテムを設定)] > [Select] の順に選択します。 これにより Set Items という関数を使用して、新しくセットアップされた拡張機能にプレイヤー情報のビューモデルの配列が渡されます。

    このステップで Set Items 関数が表示されない場合は、ウィジェットをコンパイルしてから再度確認してください。

    [Squad_View] > [StackBox] > [StackBox Viewmodel] > [Set Items] > [Select] の順に選択します。

    リストに PlayerInfoStack_Viewmodel_Extension が表示されない場合は、[Compile (コンパイル)] を押すと表示されるはずです。

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

    右側の空のフィールドで、[Squad_View] > [HUDPlayerInfoListViewModel] > [Team/Squad Player Info Array] > [Select] の順に選択します。

  5. [Compile] をクリックします。これで、HUD コントローラーの仕掛けに追加するウィジェットの準備が完了しました。

HUD 制御にウィジェットを追加し、プロジェクトをプレイテストしてみましょう。

HUD 制御の仕掛けの設定

HUD 制御の変更には重要な設定がいくつかあります。 それらのフォートナイトの HUD 要素を、デフォルトから独自のウィジェット設計に置き換えましょう。

  1. プロジェクトに HUD コントローラーの仕掛けをドラッグし、[Details] パネルでその設定を取り込むために、仕掛けを選択された状態にしておきます。

  2. [Details] パネルで、以下のオプションを設定します。

    1. Show HUD (HUD を表示) = Yes (はい)

    2. Player Info Widget Override (プレイヤー情報のウィジェットをオーバーライド) = Name of Your widget (自分のウィジェット名)

  3. [Save] アイコンをクリックして変更を保存します。

  4. [Launch Session (セッションを起動)] を選択し、カスタム UI をプレイテストします。

作成した島で問題なくレイアウトされ正しく表示されているかを確認するためには、2 人以上のプレイヤーでプレイテストしてみましょう。

作成した島で問題なくレイアウトされて正しく表示されていることを確認するために、2 人以上のプレイヤーでプレイテストします。

Ask questions and help your peers Developer Forums

Write your own tutorials or read those from others Learning Library

On this page