ミッション選択画面は、通常、ゲーム開始時にミッション選択画面が表示され、プレイヤーにミッションの選択肢を提示します。 ゲームのルールや仕組みに慣れるための簡単なチュートリアルが終わると、ミッション選択画面が表示されることもあります。
ミッションを選択するとゲームが開始し、プレイヤーは島の特定のスタート地点に移動してミッションに挑みます。 選択画面には、ミッションの統計情報や、プレイヤーが選択できるミッションの種類に関する情報を提供したり、単にプレイヤーを選択したミッションにドロップしたりできます。
以下のチュートリアルでは、プレイヤーを選択したミッションにドロップするミッション画面の作成方法を説明します。
ステップ 1:ミッションの選択スタイルを考える
メニュー選択画面をデザインする際、プレイヤーに提供しようとする情報量に応じて、いくつかの方法があります。 ミッションの説明やミッション レベルのテクスチャ画像の形で情報を提示することもできます。 この例では、マテリアルだけを使った場合と、デザインに戦略的にテクスチャを加えた場合の両方の例を見て、どれだけの効果が出せるかを確認できます。
テクスチャは多くのメモリを使用するため、島の総メモリ量のかなりの部分を占める可能性があります。
ミッション選択画面に含める情報量を決めておくとデザイン フェーズが楽になります。
ステップ 2:レイアウトをデザインする
UMG を開く前にミッション画面のレイアウトをデザインします。 この時点で選択したデザインは永続的なものでありません。UI の機能を損ねずに再度デザインできます。 画面レイアウトは、ミッション選択画面に含まれる要素によって決まります。
この段階で初期レイアウトに関して決定すべきことは以下の 4 つです。
カラー スキーム - UI に色を使うときは、60/30/10 のルールを適用します。
フォントの選択 - 現在、Burbank と HeadingNow の 2 種類が選択可能です。
マテリアル - UI 機能テンプレート マテリアルを用いて独自の UI を作成します。
画像/テクスチャ - テクスチャはキャラクターやアーティスティック コンテナなど、マテリアルから簡単に再生成できない複雑なアート用に確保してください。
60/30/10 ルールとは、UI デザインで使用する色の 60% をメイン カラー、30% をサブ カラー、10% をアクセント カラーにするという意味です。 このルールを適用すると、読みやすく操作しやすい UI になります。
カラー スキームが決まったら、UI デザインで使用するマテリアルとマテリアル インスタンスを作成します。
ここでは、シンプルなデザインを例に説明します。 画面上部に「Choose Your Mission」と表示され、「Mission 1」、「Mission 2」、「Mission 3」と書かれた 3 つの画像と [START (開始)] ボタンがあります。
ステップ 3:ウィジェット レイアウトをデザインする
ウィジェット レイアウトの例には、4 つの主要な要素があります。
バックグラウンドのデザイン
Mission 1 タイルのデザイン
Mission 2 タイルのデザイン
Mission 3 タイルのデザイン
動作するボタンを持つウィジェットを作成するには、モーダル ダイアログ バリアント ウィジェットを使用する必要があります。モーダル ダイアログ バリアント ウィジェットで使用される特別なビューモデルがあります。これは、ボタンを仕掛けにバインドする方法を提供します。
フォルダ内でモーダルダイアログバリアント ウィジェットを作成します。
このウィジェットに Mission_Select_UI という名前をつけます。
Mission_Select_UI ウィジェットをダブルクリックして ウィジェット エディタを開きます。
バックグラウンドのデザイン
この例では、ミッション選択画面の背景デザインとして、マテリアルを使用して背景に色のブロックを追加し、画面上部にアクションの呼び出しを追加して、キャラクターのテクスチャ画像を追加しています。
ウィジェット エディタで、以下の手順を実行します。
[Palette] パネルから Overlay ウィジェットをウィジェット グラフにドラッグします。 このウィジェットがルート ウィジェットになり、UI が表示される画面として機能します。
ウィジェット グラフで、Overlay ウィジェットのサイズが 1920 X 1080 になるまで拡張します。
[Hierarchy (階層)] パネルで、Overlay ウィジェットを右クリックして、コンテキスト メニュー を開きます。 ドロップダウン メニューから [Rename (名前を変更)] を選択して、ウィジェットに「Root」という名前を付けます。 このウィジェットには、ミッションの選択画面を構成するすべてのウィジェットが含まれます。
グラフ レイアウトを [Desired (望ましいもの)] に変更します。 これにより、画面上に表示したいサイズに UI を設定できます。
[Screen Size (画面サイズ)] ドロップダウン メニューから画面を選択すると、プラットフォームに応じた UI の変化を確認できます。
[Palette] パネルから [Overlay] パネルを Root ウィジェットの下にドラッグし、名前を「Parent Container」に変更します。 この Overlay ウィジェットには、ミッションの選択画面のすべてのパーツが格納されます。
このウィジェットは、Root ウィジェットと同じサイズである必要があります。
Parent Container ウィジェットのアライメント オプションを、[Fill Horizontal (水平方向に塗りつぶし)] と [Fill Vertical (垂直方向に塗りつぶし)] に変更します。
[Palette] パネルから、Parent Container ウィジェットの下の [Hierarchy] パネルに Image ウィジェットをドラッグします。
Image ウィジェットを右クリックして、コンテキスト メニューを開きます。 ドロップダウン メニューから [Rename (名前を変更)] を選択して、ウィジェットに「UI Background Color」という名前を付けます。
[Hierarchy] パネルで UI Background Color ウィジェットを選択し、[Details (詳細)] パネルでオプションを開きます。
[Slot (Overlay Slot) (スロット (オーバーレイ スロット))] オプションで、次のアライメント設定を行います。
[Horizontal Alignment (水平アライメント)] = [Fill Horizontal]
[Vertical Alignment (垂直アライメント)] = [Fill Vertical]
[Appearance (アピアランス)] オプションで [Brush (ブラシ)] > [Image (画像)] ドロップダウン メニューを使用してプライマリ カラー マテリアルを選択します。 これにより、Image ウィジェットがマテリアルの色になります。
Grid Panel ウィジェットを [Palette] パネルから Parent Container ウィジェットにドラッグし、名前を「Body」に変更します。 Grid パネルは、UI のすべてのコンテンツのコンテナとして機能します。 また、横列と縦列に子ウィジェットを整理する柔軟なグリッドをレイアウトに追加します。 この例では、ミッション画面のコンテンツとキャラクター画像が、
[Slot (Overlay Slot)] オプションで、次の設定を行います。
[Horizontal Alignment] = [Center Alignment (中央揃え)]
[Vertical Alignment] = [Center Alignment]
[Padding (パディング)] = 64.0
Stack Box を Body ウィジェットにドラッグし、名前を「Content」に変更します。 Stack Box は、水平または垂直アライメントのいずれかを使用して子ウィジェットをレイアウトします。
Content ウィジェットのアライメント設定を、[Fill Horizontal] と [Fill Vertical] に変更します。
[Behavior (動作)] オプションで、[Orientation (オリエンテーション)] 設定を [Vertical (垂直)] に変更します。
コールアウト テキストを追加する
[Palette] パネルから Text Box ウィジェットをドラッグして、[Content] の下にネストします。 これが、プレイヤーにミッションを選択するよう促すコールアウト テキストになります。
Text Box の名前を「Choose Your Mission」に変更します。
[Hierarchy] パネルで Choose Your Mission ウィジェットを選択し、[Details] パネルでオプションを開きます。
[Slot (Slot Overlay) (スロット (スロット オーバーレイ))] オプションで、次の設定を行います。
[Size (サイズ)] = [Auto (自動)]
[Horizontal Alignment] = [Left Alignment (左揃え)]
[Vertical Alignment] = [Fill Vertical]
[Text (テキスト)] フィールドをクリックし、デフォルトのテキストを削除して、「Choose Your Mission」と入力します。
[Appearance] オプションで、次の設定を行います。
[Color and Opacity (カラーとオパシティ)] = [Hex Linear E0137CFF (Hex 線形 E0137CFF)]
[Font Family (フォントファミリー)] = [HeadingNow]
[Typeface (書体)] = [86Bold (86 太字)]
[Size] = 85
[Outline Size (輪郭サイズ)] = 2
[Mitered Corners (マイターコーナー)] = チェックを入れる
[Outline Color (輪郭色)] = [Hex Linear FFFFFFFF (Hex 線形 FFFFFFFF)]
Image ウィジェットを Content ウィジェットにドラッグして、名前を「Spacer」に変更します。 このウィジェットは、コールアウトとミッション タイルの間にスペースを置くためのスペーサーとして使用されます。
ミッション タイル空間を追加する
Overlay ウィジェットを Content ウィジェットにドラッグして、名前を「Tiles」に変更します。
Image ウィジェットを Tiles ウィジェットにドラッグして、名前を「TileBG」に変更します。
[Hierarchy] パネルで TileBG ウィジェットを選択し、[Details] パネルでオプションを開きます。
[Slot (Overlay Slot)] オプションで、次の設定を行います。
[Horizontal Alignment] = [Fill Horizontal]
[Vertical Alignment] = [Fill Vertical]
[Appearance] オプションで、次の設定を行います。
[Brush] > [Image] = セカンダリ背景マテリアル
[Image Size (画像サイズ)]:
[X] = 1200
[Y] = 32.0
Stack Box ウィジェットを Tiles ウィジェットにドラッグして、名前を「Mission Tiles」に変更します。 この Stack Box はミッション タイルを左から右に並べます。
背景レイアウトが完了しました。 この段階では、ミッションの選択画面は空に見えます。
次に、3 つのミッションの選択タイルをレイアウトし、Stack Box ウィジェット内にビルドします。 また、キャラクター テクスチャをデザインに追加して、視覚的な面白さを加えます。Mission 1 タイルのデザイン
ミッション タイルのデザインは、レベルと目標に関する情報を提供したり、プレイヤー目標に関する統計を表示したり、それらの目標の進捗をトラッキングしたりすることができます。 このタイルの例では、よりシンプルなデザインを提供しています。 レベルの表現、ミッション番号、開始ボタンを表示する背景テクスチャがあります。 一連の Stack Box を使用すると、ウィジェットを左から右または上から下に配置することができます。 垂直または水平レイアウトがある場合、Stack Box はレイアウトの一貫性を保つのに役立ちます。3 つのミッション タイルはすべて、同じデザイン パターンに従っています。 3 つの選択タイルすべてを作成するには、次の手順を実行します。
Overlay ウィジェットを [Hierarchy] パネルの Grid Panel にドラッグして、名前を「Mission 1」に変更します。 これが、Mission 1 タイルのすべてのデザイン要素を含むバケットになります。
[Hierarchy] パネルで Mission 1 ウィジェットを選択し、[Details] パネルでオプションを開きます。
[Slot (Stack Box Slot) (スロット (スタック ボックス スロット))] オプションで、次のパディング設定を行います。
[Left (左)] = 0.0
[Top (上)] = 0.0
[Right (右)] = 24.0
[Bottom (下)] = 0.0
Image ウィジェットを [Hierarchy] パネルの Mission 1 ウィジェットにドラッグして名前を「Mission1Image」に変更します。 このウィジェットは Mission1 をビジュアルに表現したものです。
[Hierarchy] パネルで [Mission1Image] を選択し、[Details] パネルでオプションを開きます。
[Slot (Stack Box Slot)] オプションで、次の設定を行います。
[Horizontal Alignment] = [Full Horizontal (完全水平)]
[Vertical Alignment] = [Full Vertical (完全垂直)]
[Appearance] オプションで、次の設定を変更します。
[Image (画像)] = Mission 1 テクスチャ
[Image Size (画像サイズ)]:
[X] = 256.0
[Y] = 256.0
画像サイズを設定すると、タイルデザインをより細かく制御することができます。
タイル コンテンツの順序付け
Stack Box ウィジェットを Mission 1 ウィジェットにドラッグして、名前を「M1Content」に変更します。
[Hierarchy] パネルで [M1Content] を選択し、[Details] パネルでオプションを開きます。
[Slot (Overlay Slot)] オプションで、次の設定を変更します。
[Horizontal Alignment] = [Central Alignment (中央揃え)]
[Vertical Alignment] = [Central Alignment]
これにより、Stack Box のすべての子ウィジェットが中央に整列されます。
[Behavior] オプションで、[Orientation] を [Vertical] に設定します。 これにより、すべての子ウィジェットが垂直にスタックされます。
Overlay ウィジェットを [M1Content] にドラッグして、名前を「M1Header」に変更します。 このオーバーレイは、すべてのヘッダ アセットのバケットとして機能し、オーバーレイの設定に従って形式を設定します。
[Hierarchy] パネルで [M1Header] を選択し、[Details] パネルでオプションを開きます。
[Slot (Stack Box Slot)] で、次のオプションを変更します。
[Padding]:
[Left (左)] = 0.0
[Top (上)] = 0.0
[Right] = 0.0
[Bottom] = 128.0
[Size (サイズ)] = [Auto (自動)]
[Horizontal Alignment] = [Center Alignment (中央揃え)]
[Vertical Alignment] = [Full Vertical (完全垂直)]
固有のパディング設定によって、Mission 1 タイルの右側にパディングが提供されます。
ミッション タイル テキストをスタイリングする
Image ウィジェットを [M1Header] にドラッグして、名前を「M1Stroke」に変更します。
[Hierarchy] パネルで [M1Stroke] を選択し、[Details] パネルでオプションを開きます。
[Slot (Overlay Slot)] で、アライメントを [Full Horizontal] と [Full Vertical] に設定します。
[Appearance] オプションで、次の設定を行います。
[Image] = [Slice material (スライス マテリアル)]
[Image Size (画像サイズ)]:
[X] = 200.0
[Y] = 32.0
Text Box を M1Header ウィジェットにドラッグして、ウィジェットの名前を「Mission_1」に変更します。
[Hierarchy] パネルで Mission 1 テキスト ウィジェットを選択し、[Details] パネルでオプションを開きます。
[Slot (Overlay Slot)] オプションで、次のアライメント設定を行います。
[Horizontal Alignment] = [Central Alignment]
[Vertical Alignment] = [Top Alignment]
[Text (テキスト)] を [Mission 1] に変更します。
[Brush] > [Image ツールからカラー ピッカーを開き、テキストのアクセント カラーを選択します。
[Font] で次のオプションを設定します。
[Typeface] = [Bold (太字)]
[Size] = 25.0
[Letter Spacing (文字間隔)] = 65
[Skew Amount (歪み量)] = 0.28
[Outline Settings (輪郭設定)] で、次のオプションを設定します。
[Outline Size] = 1
[Separate Fill Alpha (別個に埋めるアルファ)] = チェックを入れる
[Apply Outline to Drop Shadow (ドロップ シャドウに輪郭を適用)] = チェックを入れる
[Outline Color] = カラー ピッカー ツールからメイン カラーを選択
カラー ピッカーツールで [Shadow Color (シャドウ カラー)] をメインカラーに変更します。 フォントは、わずかに立体感があり、コールアウトのテキストとは異なる独自のスタイルを持っている必要があります。
開始ボタンを追加する
Quiet Button ウィジェットを M1Content ウィジェットにドラッグして、名前を「START_M1_Button」に変更します。
[Hierarchy] パネルで START_M1_Button を選択し、[Details] パネルでオプションを開きます。
ボタンの [Text] を選択し、「START」に変更します。
[Slot (Stack Box Slot)] オプションで、[Min Height (最小高さ)] を 56 に設定します。 これにより、ボタンの高さが低くなります。
[Selection (選択項目)] > [Selectable (選択可能)] にチェックを入れます。 これにより、プレイヤーがボタンを選択できるようになります。
[Input (入力)] で、次のオプションを設定します。
[Touch Method (タッチメソッド)] = [Down (下)]
[Press method (押下メソッド)] = [Button Press (ボタンを押す)]
この手順を使用して、Mission 2 と Mission 3 のレイアウトをビルドします。
Mission 2 と Mission 3 のタイルを追加する前のデザインは次の画像のようになります。
すべてのミッション タイルが完了したら、デザインにキャラクターを追加して、UI に視覚的な効果を与えます。
キャラクター テクスチャを追加する
UI にキャラクター テクスチャを追加すると、デザインに選択されたすべての色が取り込まれ、UI のビジュアル スタイルが追加されます。 2の累乗を使用し、使用するテクスチャが高品質で、任意のサイズに拡大できることを確認してください。
Image ウィジェットを Body ウィジェットにドラッグして、名前を「Character」に変更します。
[Hierarchy] パネルで Character ウィジェットを選択し、[Details] パネルでオプションを開きます。
[Appearance] で、次の設定を行います。
[Brush] > [Image] = Character texture
[Image Size (画像サイズ)]:
[X] = 700
[Y] = 700
[Slot (Grid Slot) (スロット (グリッド スロット))] オプションで、次の設定を行います。
[Horizontal Alignment] = [Right Alignment (右揃え)]
[Vertical Alignment] = [Full Vertical (完全垂直)]
[Nudge (ナッジ)] = X と Y 軸ツールを使用して、キャラクター テクスチャを所定の位置に正確に配置します。
ミッション セクションが完了したら、UI のボタンの機能を接続する準備は完了です。
ステップ 4:ビューモデルを追加する
ビューモデルは一連の関数を通じてプレイヤー情報を制御し、UMG ウィジェットをクリエイティブの仕掛けにバインドする特定の方法を提供します。 ボタンで動作する特定のビューモデルである、CreativeModalDialogViewmodel があります。 このビューモデルは、モーダル ダイアログのバリアント ウィジェットでのみ動作し、多数のボタン関数を提供します。
ビューモデルを使用するには、次の手順を実行します。
メインメニュー バーから [Windows] メニューを開きます
ドロップダウン メニューから [Viewmodels (ビューモデル)] を選択します。 [CreativeModalDialogViewmodel] パネルは、[Widget Editor (ウィジェット エディタ)] ウィンドウに自動的にドッキングされます。
すべてのボタン関数がウィジェットに追加されました。 次に、バインディングを追加して、ボタンが機能するようにします。
ステップ 5:仕掛けを追加する
ミッション エリアを設定したら、各エリアで独自のテレポーターの 仕掛けを設定し、プレイヤーを受け取る必要があります。 ポップアップ ダイアログ の仕掛けは、モーダル ダイアログのバリアント ウィジェットを取り、トリガーされるとウィジェット UI を表示します。
ポップアップ ダイアログの仕掛け
まず、ポップアップ ダイアログの仕掛けをプロジェクトに追加します。 オプションを変更し、モーダル ダイアログのバリアント ウィジェットを仕掛けに追加します。
ポップアップ ダイアログの仕掛けをビューポートにドラッグします。
[Details] パネルで、次のユーザー オプションを設定します。
[Description (説明)] = [Mission Select Screen (ミッションの選択画面)]
[Auto Display (自動表示)] = [Game Start (ゲーム開始)]
[Response Type (レスポンスタイプ)] = [3 Buttons (ボタン 3 つ)]
これらのオプションは、ウィジェットを識別し、HUD に UI が表示されるタイミングとウィジェットにアタッチされているボタンの数を決定します。
[Advanced (詳細設定)] オプションで、次のオプションを設定します。
[Default back button (デフォルトの戻るボタン)] = [None (なし)]
[Button 1 Text (ボタン 1 のテキスト)] = [START (開始)]
[Button 2 Text (ボタン 2 のテキスト)] = [START (開始)]
[Button 3 Text (ボタン 3 のテキスト)] = [START (開始)]
[Mask background (背景を隠す)] = チェックを入れる
[Enable During Phase (有効なゲーム フェーズ)] = [Gameplay Only (ゲームプレイのみ)]
[Modal Widget (モーダル ウィジェット)] > [Template Override Class (テンプレート オーバーライド クラス)] まで下にスクロールし、ドロップダウン メニューから Mission_Select_UI ウィジェットを選択します。
[User Options - Functions (ユーザー オプション - 関数)] まで上にスクロールし、[Show (表示)] で [Array Element (配列要素)] を開きます。
[Player 1 Spawn Pad (「プレイヤー 1 スポーン パッド)] を 1 番上のフィールドに追加します。
スポーンパッド関数に、[On Player Spawned (プレイヤー スポーン時)] を選択します。
テレポーターの仕掛け
開発時間を短縮するために、最初のテレポーターの仕掛けを作成してそのオプションを変更し、その仕掛けをコピーして、それぞれのミッション エリアに追加の仕掛けを設置します。
テレポーターの仕掛けをビューポートにドラッグします。
[Details (詳細)] パネルの [User Options] で、[Teleporter Rift Visible (テレポーター裂け目の表示)] と [Play Visual Effects (ビジュアル エフェクトを再生)] のチェックを外します。
[User Options - Functions (ユーザー オプション - 関数)] まで下にスクロールし、[Teleport (テレポート)] で [Array Element (配列要素)] を開きます。
[Pop-Up Dialog (ポップアップ ダイアログ)] を 1 番上のフィールドに追加します。
[On Responding Button 1 (ボタン1で応答時)] を選択します。
テレポーターの仕掛けを 2 回複製します。
追加したテレポーターの [User Options - Functions] > [Teleport] > [Pop-up Dialog Device] の各関数を、対応するボタン ([On Responding Button 2 (ボタン 2 で応答時)]、[On Responding Button 3 (ボタン 3 で応答時)]) に変更します。
プレイヤーがミッションを開始するには、ミッション領域に関連付けられたボタンをクリックすると、選択したミッション領域にテレポートします。 この機能を作成するには、選択画面上のボタンにボタン機能をバインドします。
ステップ 6:バインディングを表示する
ビュー バインディングでは、仕掛けとウィジェット関数をバインドするロジックが追加されます。
この例では、Teleport 関数を通じてボタンをテレポーターの仕掛けにバインドします。 プレイヤーがミッションを選択するとき [START] ボタンをクリックすると、接続されているテレポーターが起動して、プレイヤーをそのミッション領域にテレポートします。
階層に追加されたすべてのボタンには番号が付けられています。 これにより、簡単にボタン機能を仕掛けにバインドできます。
バインディングを追加するには、次の手順を実行します。
[Hierarchy] パネルで、[Start_Mission_1_Button] を選択して強調表示し、下部ツールバーから [View Bindings (ビューバインディング)] を選択します。 [View Bindings] ウィンドウはミュート ボタンが選択された状態で開きます。
[+Add Widget Start_Mission_1_Button] を選択します。 これにより、その下にバインディングされたビューが作成されます。
Start_Mission_1_Button を含む左側のフィールドを選択し、ドロップダウン メニューから [On Clicked (クリック時)] > [Event (イベント)] を選択します。 ミュート ボタンにクリック時のイベントが追加されます。
次に右側のフィールドを選択し、ドロップダウン メニューから CreativeModalDialogViewmodel > [Response (リスポンス)] > [Select (選択)] を選択します。 これにより、ボタンのクリック時のイベントに Response 関数が追加されます。
[Response] ドロップダウン メニューで、[Button 1 (ボタン 1)] を選択します。 1 つ目のミュート ボタンに関数がバインドされます。
この手順を繰り返して、次の 2 つのボタンをバインドします。
この時点で、すべてのボタンがテレポーターにバインドされており、ゲーム開始時にプレイヤーがゲームにスポーンすると、ミッションの選択画面が表示されるようになります。
結果
最後のステップは、プロジェクトをプレイテストして、UI が意図したとおりに動作することを確認することです。 セッションを起動すると、プレイヤーが島にスポーンされたあとにミッションの選択画面が表示され、プレイヤーは UI から選択したミッションにテレポートする必要があります。
応用編
ミッションの選択画面のデザインを変更して、独自のプロジェクトに固有のものにする方法がいくつかあります。
背景のミッション タイルを、テクスチャではなくマテリアルに変更することができます。 これにより、ミッション画面の外観を異なるものにすることができます。
各ミッションにトラッカーを追加して、プレイヤーの統計情報や収集したオブジェクトを追跡することもできます。
ラウンド設定の仕掛けを追加し、プレイヤーをリスポーンして、ミッションの選択画面を戻して、プレイヤーがまだプレイしていない他のミッションを選択できるようにし、正常に完了した後に、選択したミッションを利用不可にすることもできます。