Unreal Engine 5 ドキュメントは Epic Developer Community に移動しました

Unreal Match 3 サンプル ゲームの UI は、 UMG UI デザイナ と ブループリント ビジュアル スクリプティング を用いて制作しました。 このサンプルでは、数種類の UI エレメントがあります。フロントエンド メニューからインゲームの HUD まであり、それぞれの構築方法は、モバイル デバイスを念頭において設計しました。

このドキュメントでは各メニューに焦点をあて、制作中の考慮事項、UI のアート作成時に意識すべきことの考察、様々なモバイル デバイスとアスペクト比に対して UI のスケーリングをセットアップする方法、UI を最適化するために行った手順、皆さんのお役に立ち、ワークフローを迅速化するであろう実際に使ったヒントやコツについて説明します。

タイトル画面

タイトル画面は、この Content/UI フォルダ内に TitleScreen Widget Blueprint として置かれています。主にアニメートするいくつかの Text ウィジェットとボタンから構成されています。プレイヤーがボタンをクリックまたは押すと、ゲームのメインメニューに進みます。グラフでは、Timer を使ってパルス アニメーションを呼び出して 5 秒毎に再生します。ボタンをクリックすると、Main Menu Widget ブループリントが作成され、タイトル画面を取り除く前にビューポートに追加されます。

タイトル画面で使われるボタンのセットアップはサンプル全体を通して非常に頻繁に使用されます。

ここでは、スケールボックスでボタンをラップし、全体をリニアにスケーリングできるようにしました。ボタン自体には、カーソルを乗せた状態、通常の状態、ボタンを押した状態が割り当てられていて、緑のボタンをバックグラウンドで使うようになっています。次に、画像 (アイコン) を含むオーバーレイ表示でラップした Scale Box を使用して、全体的なボタンサイズとは独立してアイコンをスケーリングできるようにしました。

アイコンを直接バックグラウンドにベイクしないことにしました。必要があれば置き換えたり、今後、別のバックグラウンドを使えるようにして簡単に置き換えることができるようにするためです。

メイン メニュー

メイン メニューは、 Content/UI フォルダ内に MainMenu Widget Blueprint として置かれています。プレイヤーが数種類のアクションを行うことができるハブであるこの画面には、10 種類のボタンがあります。こうしたボタンを使ってプレイヤーは設定にアクセス、インゲーム ストアにアクセス、ゲームをプレイ、レベル選択などを行うことができます。モバイル デバイスでプレイする場合、プラットフォーム (Android または iOS) に応じて、プレイヤーはプラットフォーム固有の Leaderboard (スコア ランキング) と achievements (アチーブメント、成績) にアクセスできます。

この Widget ブループリントのグラフは、プレイヤーがボタンのひとつをクリックすると、新しいメニュー画面 (設定、レベル選択、ストアなど) に移行するようにセットアップされています。まず、プレイヤーがその画面にこれまでにアクセスしたことがあるかをチェックし、アクセスしたことがなければ、対応する Widget ブループリントを作成して表示し、それを次回その画面にアクセスするための変数として保存します。これにより、毎回ユーザが各画面にアクセスするたびに画面を作成 / 破棄しなくてすむようにします。

この画面のセットアップにおけるデザイン上の決定事項のひとつとして、上部と下部のボタンのレイアウトに関するものがあります。

Horizontal Box (これを使っても同じように簡単にできます) ではなく、 Uniform Grid Panel を使って各ボタンを保持することを決定しました。 このパネルを使うと、 [Details (詳細)] パネルで、追加される各子に加えるスロットのパディング量を指定することができます (個別に追加される各ボタンでこれを行うのではなく)。ボタンに対して行うべきことは、センタリングするだけです。そうするとグリッド パネル内で均等間隔に配置されます。

オプション メニュー

オプション メニューは、 Content/UI フォルダ内に OptionsMenu Widget Blueprint として置かれています。左側の画像のように、オプション メニューは、オプション ボタンを押すと、メイン メニューとインゲームの表示で再利用されます。コンテキストに応じて、コンテンツは若干変わり、追加オプションが表示され、スタイライズド処理が使用されます。

この Widget ブループリントのグラフには、変更されるオプションのロード / 保存のロジックがあり、 Global Game Instance ブループリントによって処理されます。 プレイヤーがインゲームまたはメイン メニューからオプションにアクセスしているかをチェックし、下部のボタンを置き換えるか、バックグラウンドの色調を弱めることを有効/無効にします。

インゲームのオプション メニューは、何らかのアクションを行った場合に確認画面を使用するインスタンスのひとつです。 UI 画面 (ゲーム終了、アイテム購入、アイテム削除など) を作成する場合は常に、ユーザーが誤って何かを選択したり、意図しないアクションを行うことを防ぐために「破壊的 (destructive) 」アクションの確認画面を提示するのがベストプラクティスです。

この画面はプロジェクト全体で頻繁に使用されるため、 ConfirmationScreen ( Content/UI フォルダにあります) という Widget ブループリントを別個に作成しました。これは、選択したアクションをプレイヤーがキャンセルする方法を提供したい場合に呼び出して表示することができます。 以下は OptionsMenu ウィジェット内で使用されるスクリプトで、ウィジェットを作成 / 表示し、Accept ボタンと Back ボタンをバインドし、オプション メニューで行いたいアクションを行います。

インゲーム表示

主なインゲームの HUD は、 Content/UI フォルダの GameScreen Widget ブループリントにあります。Widget ブループリントでは全体的な表示を構成する個々の部分のレイアウトを定義します。すなわち、ScoreBoard ( ScoreBoardWB Widget ブループリント) および Bomb Power ( PowerBarHorz Widget ブループリント) および Settings Button (これは OptionsMenu Widget ブループリントを表示します) があります。

GameScreen Widget ブループリントのグラフには、オプション メニューを表示するためのロジックのみがあります。Score Board と Bomb Power メーターを更新するロジックは、それぞれの Widget ブループリントで処理され、モジュール式でわかりやすくなっています (何もかもをひとつの Widget ブループリントに入れることに比べて)。

スコアボード表示

Score Board Widget ブループリントは、現在のスコア、残り時間、トップ スコア、メダルを獲得するために必要なポイントなどゲームの重要な情報を表示します。 Time (時間) と Score (スコア) の値はゲームプレイ中に頻繁に変わります (トップスコアやメダルスコアとは異なります)。Time 表示では、 Size Box を使用して、ヘッダー テキストと時間の値を固定位置に合わせます。 同様に、スコア表示では Horizontal Box (水平ボックス) を使用します。その際、ヘッダーを Auto に設定し、その値を Fill に設定します。水平ボックス自体も水平方向にフィルするように設定できます。これにより、表示される変化するスコアに対して固定のレイアウトを実現します。

スコアボードに関するもうひとつの決定事項は、何もかもを絶えずティックで更新するのではなく、情報の更新を イベント ベース に移すことでした。 これは大きな節減になります。スコアの更新やタイマー値の変更があった場合に、フレーム毎にチェックする必要がなくなるからです。これに合わせて、 Invalidiation Box も使用して木のバックグラウンド部分をキャッシュしました。 このやり方だと、木の部分を一度だけ描画し、それをキャッシュし、フレーム毎に再描画する必要がなくなります (ここでもさらに節減)。

弾薬メーター表示

Bomb Power Meter 表示 ( PowerBarHorz Widget ブループリント) の処理に関しては、Size Box を使用してオーバーライドし、カスタムの Width/Height の値を強制します。 進捗バーのフィル画像のためにあるマテリアルを使用しました( Content/Materials フォルダにある M_JaggedRockFire_MeshEmit_Lit )。

スコアボード同様に、進捗メーターはティックではなくイベントによって更新されますが、そのほうがコスト効率が高くなります。

進捗バーを満たすには、 Set Percent 関数を用いて、20 % のインクリメントで設定します (Match 3 Game Mode から取得します)。

フローティング テキスト表示

フローティング テキストはスコアリングが数種類のブループリントで処理される場合に表示されます。ひとつめは、 FloatingScore Widget ブループリント (これも Content/UI フォルダにあります) で、表示されるテキストを処理します。ふたつめは、 Content/Blueprints 内にある FloatingScoreBP で、FloatingScore Widget に基づき 3D Widget コンポーネント を含むスポーンされるアクタです。このアクタがスポーンされると、アニメーションを呼び出してテキストをフェードアウトし、遅延してから、スポーンしたアクタを破棄します (以下の図参照)。

フローティング スコアをどこにスポーンするかは、 GameLevel_GM ブループリント ( Content/Blueprints フォルダ) および Tile_BP ブループリント ( Content/Blueprints/Tiles フォルダ) の組み合わせによって決まります。Tile_BP 内で、パズルをそろえる試みがあった場合に判断するためにイベントを使用します。スコアが与えられる結果になると、パズルがそろった場所が GameLevel_GM に渡され、ここで与えられるポイント量を処理してから、そろった場所にフローティング テキストをスポーンします。

ゲーム オーバー表示

ゲームオーバー画面 (You Win および You Lose) は、 Content/UI フォルダ内に VictoryScreen Widget Blueprint として置かれています。ゲームオーバーになると同じ Widget ブループリントが呼び出されますが、セッション結果に基づいて更新されます。

勝った場合は、青の背景と達成したメダルが表示されます。負けた場合は、赤の背景が表示され、テキストの内容が対応する "you lose" テキストに置き換えられます。

勝っても負けても、達成したスコアが一連のボタンと共に表示されます。こうしたボタンを使ってメイン メニューに戻ったり、プラットフォーム固有の Leaderboard (ランキング表) や成績を表示したり、レベルを再生したりすることができます。

画面下部に表示されるボタンは GameOverButtons Widget ブループリント内にあります。これらは、Game Over Screen ウィジェットからは分けられ、こうしたオプションをユーザー向けに表示する必要があるたびに、毎回このセットアップを再作成するのではなく他の画面で再利用できるようになっています。

リーダーボード / アチーブメント (成績)

レベル選択

レベル選択メニューは、 「Content/UI」 フォルダ内に LevelSelect Widget ブループリントとして置かれています。この画面では、プレイヤーはゲーム内のレベル間や各メダルを獲得するためにレベルで必要なスコアの間を循環することができます。

この画面をナビゲーションするために必要な中心的機能は、Level Select Widget ブループリントにあります。ただし、その情報は同じく **Content/UI** にある **LevelSelectWidget** という別の Widget ブループリントを通して送られます。 

ユーザーがまだそのレベルを購入していなければ、アクセプト ボタンをストアへのリンクに置き換えて、ユーザーが購入のために直接ストア メニューに進めるようにします。

レベル選択ウィジェット

レベル選択ウィジェットは、公開されている変数を使って単一ソースにすべての情報を格納できるように作成されるため、今後、レベルの追加が簡単になります。このやり方で行うと、Level Select Widget ブループリントを隅から隅まで探して、どこに進むべきかを見つけたり、フォーマットなどに関して気にしたりする必要はありません。それを実装した Widget ブループリントの [Details (詳細)] パネルから直接情報を提供するだけです。

このセットアップは、様々な方法で使用することができます。各レベルに対して Level Select ウィジェットを追加し、各レベルで表示する情報のデフォルト値を定義し、メニューを循環しながら各レベル選択ウィジェットの表示、非表示を切り替えることができます。もうひとつの方法は、あるレベル選択ウィジェットを用意し、次にスクリプトを通してウィジェットを通して送られる情報を更新します (これは Unreal Match 3 の実装です)。

How To Play

How To Play 画面は、 Content/UI フォルダに HowToScreen Widget Blueprint として置かれています。この画面には、ゲームのプレイ方法の説明があり、非常にシンプルなレイアウトになっています。テキストには数種類の Text ウィジェットが使用されており、画面は一貫性を持たせるためにメインメニューと同じレイアウトとフォーマットになっています。

他の数種類の画面と同様に、このプレイ方法画面は、Google Play Store 認証の要件であるいくつかの特殊機能を実装しています。デバイスの戻るボタンを使用して画面を戻ることができます。

Android の Back ボタン

Android のアプリの要件として、デバイスの Back ボタンを使って各画面を戻ることができる機能の実装が必須です。Widget ブループリントでは、入力関数に直接アクセスできません。入力関数は通常Player Controller、Character、場合によっては Actor のようにブループリント内にあります。従って、 Match3PC Player Controller ( Content/Blueprints フォルダ) を使用します。この場合、Android Back コマンドがイベント ディスパッチャーを呼び出し、続いて各メニューでその機能を与えたいものにバインドすることができます。

以下は、How To 画面に Android Back Button 機能を持たせるために使用したスクリプトです。

ここでは Android Button が押された場合に、イベントを Match 3 PC ブループリントから呼び出されたイベントディスパッチャーにバインドしています。次に、Main Menu Widget を表示に、How To 画面を非表示に設定する前に、How To 画面が Branch ノードで表示されるようにします。

ストア メニュー

Store 画面は、 Content/UI フォルダに StoreScreen Widget として置かれています。この画面のレイアウトは、意図的にレベル選択レイアウトに非常に類似させており、プレイヤーがレベル選択メニューからプレイのために利用できる新しいレベルをアンロックできるようにします。

メインメニューからこの画面に入ると、まずプレイヤーに対して確認メッセージ (ConfirmationScreen Widget ブループリント) が表示されます。この画面からアイテムが購入可能であることと、先に進む前にプレイヤーが戻ることが可能であることが示されます。確認メッセージをアクセプトしたら、プレイヤーはメインのストア メニューに進みます。 

この画面のコンテンツの大部分は、ボーダー、オーバーレイ、テキスト ウィジェット、画像、アライメントのためのVertical Box (垂直ボックス) から構成されます。レイアウトの構造上、レベル間を移動するためのメニューのナビゲーションをこのメニューにコピー / 貼り付け可能であり、ストアから購入可能なアイテムのページをさらに追加できます。

ストアから購入

参考文献

参考文献については、以下のリストを参照してください。

• UI エレメントのスケーリングの詳しい情報は、 様々なデバイス向けに UI をスケーリングする の操作ガイドをご覧ください。

• イベントによる最適化の詳しい情報は、 イベントで UI の更新を操作する の操作ガイドをご覧ください。

• ベストプラクティス、ヒント、コツについての詳しい情報は、 UMG (Unreal Motion Graphics) のベスト プラクティス ページをご覧ください。