タイトル画面のデザイン

次のチュートリアル2つでは、エンジンのUIシステムを使用して、2つのレスポンシブUI(ユーザーインターフェイス)シーンを1ステップずつ構築していきます:

  1. メインメニュー。
  2. 体力バー、エネルギーバー、爆弾およびお金のカウンターからなるゲームUI。

ここでは効率的にゲームUIをデザインする方法と、Godotのコントロールノードの使い方を紹介します。このページでは視覚面に主眼を置き、すべてエディタ操作のみで完結します。ライフバーのコードの書き方を知るには、次を見て下さいコードを使用してゲームのUIを制御する

../../_images/ui_main_menu_design_final_result.png

作成するGUI。

プロジェクト用ファイルui_main_menu_design.zipをダウンロードして、解凍してください。チュートリアルのために、Godotでstart/プロジェクトをインポートしてください。end/フォルダには最終結果が入っています。start/assets/main_menuフォルダにはすべてのスプライトがあります。

注釈

GodotのUIシステムの仕組みを知るには、まずコントロールノードを使用したインターフェイスの設計を見て下さい。

ゲームUIの設計方法

優れたUIを設計するには、まず大まかなモックアップを作成します。必要なのはペンと紙だけです。この段階では、凝った最終的なグラフィックスは使用しないでください。何を選択すればどこに進むか分かる程度の大まかな図で十分です。

../../_images/ui_design_rough.png

UIの大まかな計画またはモックアップ

仮のUIであってもわざわざ醜くする必要はありませんが、少なくとも簡潔なグラフィックスにしてください。プレイヤーがUIをテストプレイする前は、特別なエフェクト、アニメーション、詳細なイラストは避けるべきです。でなければ:

  1. グラフィックがプレイヤーのエクスペリエンスへの認識を歪め、貴重なフィードバックを見逃す可能性があります。
  2. ユーザーエクスペリエンスが機能しない時に、いくつかのスプライトをやり直さないといけなくなる場合があります。

ちなみに

まず、シンプルなテキストとボックスを使用してインタフェースを動作させるようにしてください。テクスチャは後で簡単に置き換えることができます。プロのUXデザイナーは、グレースケールのアウトラインやボックスを使って作業することがよくあります。カラーや派手なビジュアルを排除すれば、UI要素のサイズや配置を適切に行うことがずっと簡単になります。これにより、設計基盤を洗練させることができます。

GodotでUIをデザインするには2つの方法があります。次のことができます:

  1. すべてを1つのシーンに構築し、最終的にはいくつかのブランチを再利用可能なシーンとして保存する方法。
  2. 再利用可能なコンポーネントのテンプレートシーンを作成し、ベースシーンから継承する特定のコンポーネントを作成する方法。

ここでは最初の方法を使います。UIの最初のバージョンは期待どおりには動作しない場合があるためです。そうなると、パーツを廃棄してコンポーネントを1から作り直すことになるでしょう。次に示すように、うまく機能していることが確認してから、一部のパーツを再利用可能にすることは簡単です。

../../_images/ui_main_menu_placeholder_assets.png

Godotにあるファイル。このグラフィックはラフデザインよりもきれいに見えますが、まだその代替品にすぎません。

メインメニューのデザイン

エディタに入る前に、モックアップイメージに基づいてコンテナーをネストする方法を計画します。

UIモックアップを分割

適切なコンテナを見つけるための3つの経験則を以下に示します:

  1. UIを、すべてを含む最大のボックスから、ラベルの付いたバー、パネル、ボタンなどの、1つのウィジェットを含む最小のボックスまで、ボックスに階層構造を持たせて分割します。
  2. 領域の周囲に余白がある場合は、MarginContainer を使用します。
  3. 要素が行または列に配置されている場合は、 HBoxContainer または VBoxContainer を使用します。

これらの規則は、私たちが始めるために十分なものであり、単純なインターフェースに対してはうまく機能します。

メインメニューでは、最大のボックスはゲームウィンドウ全体です。ウィンドウの端と最初のコンポーネントの間には余白があります。これは MarginContainer にする必要があります。次に、画面は2列に分割されているので、 HBoxContainer を使用します。左側の列では、 VBoxContainer を使用して行を管理します。 右側の列では、 CenterContainer を使用して図の中央に配置します。

../../_images/ui_mockup_break_down.png

3つの経験則に基づいて分類されたインタフェースの構成要素。

ちなみに

コンテナはウィンドウの解像度と幅と高さの比率に適応します。UI要素を手動で配置することもできますが、コンテナの方が高速で、正確で、応答性に優れています

メインメニューシーンの準備

注釈

This tutorial is based on a window size of 1366×768. To change the project's base window size, open Project > Project Settings at the top of the editor then change Display > Window > Size > Width to 1366 and Display > Window > Size > Height to 768.

If you forget to change the window size, anchors and containers may not behave as expected.

メインメニューを作成してみましょう。単一のシーンで構築します。空のシーンを作成するには「シーンメニュー」 の「新規シーン」をクリックします。

シーンを保存する前に、ルートノードを追加する必要があります。 UIのルートは、最も外側のコンテナまたは要素である必要があります。この場合、それは MarginContainer です。多くの場合、UIの周囲にはパディングが必要になるため、MarginContainer はほとんどのインタフェースの出発点として適しています。Ctrl + S (macOSでは Cmd + S) を押してシーンをディスクに保存します。それにMainMenu という名前を付けます。

もう一度 MarginContainer を選択し、インスペクタに進んで余白のサイズを定義します。 Control クラスを下にスクロールして Custom Constants セクションに移動します。余白を次のように設定します:

  • 右マージン: 120
  • 上マージン: 80
  • 左マージン: 120
  • 下マージン: 80

コンテナをウィンドウに合わせます。 ビューポートの上のツールバー中のレイアウトメニューを開き、最後のオプションRect全面を選択します。

UIスプライトを追加する

MarginContainer を選択し、UI要素を TextureRect ノードとして作成します。必要なもの:

  1. タイトルまたはロゴ、
  2. 3つのテキスト選択項目を個別のノードで、
  3. バージョン表示、
  4. そしてメインメニューのイラスト。

ノードを追加 ボタンをクリックするか、キーボードの Ctrl + A (macOSでは Cmd + A) を押します。TextureRect と入力して対応するノードを検索し、Enterキーを押します。新しいノードを選択した状態で、Ctrl + D (macOSでは Cmd + D) を5回押して、追加の TextureRect インスタンスを5つ作成します。

各ノードをクリックして選択します。インスペクタで Texture プロパティを見つけ、[空] > 読込み をクリックします。ファイルブラウザが開き、テクスチャスロットにロードするためのスプライトを選択できます。

../../_images/ui_texturerect_load_texture.png

ファイルブラウザを使用すると、テクスチャを検索してロードすることができます。

すべての TextureRect ノードに対して操作を繰り返します。ロゴ、イラスト、3つのメニューオプション、バージョンノートがそれぞれ別個のノードとして必要です。次に、[シーン]タブの各ノードをダブルクリックして、名前を変更します。コンテナにはまだ何も配置されていないため、このままでは乱雑に見えるはずです。

../../_images/ui_main_menu_6_texturerect_nodes.png

テクスチャがロードされた6つのノード。

注釈

ゲームを多言語化対応させたい場合は、TextureRect の代わりにメニューオプションに Labels を使用してください。

UI要素を自動配置するコンテナを追加する

メインメニューは画面の端にマージンがあります。2つの部分に分かれていて、左側にはロゴとメニュー項目があります。右側にはキャラクターたちがいます。これを実現するには、 HSplitContainer または HBoxContainer という2つのコンテナのいずれかを使用します。分割(Split)コンテナは、領域を左右または上下に分割します。また、インタラクティブなバーを使用して、左右の領域のサイズを変更することもできます。一方、 HBoxContainer は、子の数と同数の列に分割します。分割コンテナでもサイズ変更動作を無効にできますが、Boxコンテナを優先することをお勧めします。

MarginContainer を選択してから、 HBoxContainer を追加します。次に、 HBoxContainer の子として2つのコンテナが必要です。左側にはメニュー項目用として VBoxContainer 、右側にはイラスト用として CenterContainer を使います。

../../_images/ui_main_menu_containers_step_1.png

4つの入れ子になったコンテナと、それとは別に複数のTextureRectノードがあるはずです。

ノードツリーで、左側にあるすべての TextureRect ノードを選択します (ロゴ、メニュー項目、バージョン表記)。それから、それらを VBoxContainer にドラッグ&ドロップします。これらのノードは自動配置されるはずです。

../../_images/ui_main_menu_containers_step_2.png

コンテナは自動的にテクスチャを配置してサイズを変更します

解決すべき問題はあと2つ残されています:

  1. 右側のキャラクターたちが中央に配置されていません。
  2. ロゴと他のUI要素の間にスペースがありません。

キャラクターたちを右に中央揃えするには、最初に CenterContainer を選択します。次に、インスペクタで Size Flags カテゴリまで下にスクロールし、 Vertical プロパティの右側のフィールドをクリックして、 Fill に加えて Expand をチェックします。 Horizontal プロパティについても同じことを行います。これにより、 CenterContainer は、隣接する VBoxContainer を尊重しながら、使用可能なすべてのスペースに拡張されます。最後に、Charactersノードを CenterContainer にドラッグ&ドロップします。Characters要素は自動的に中央に配置されます。

../../_images/ui_main_menu_containers_step_3.png

キャラクターノードは、CenterContainer内に配置するとすぐに画面の右半分の中央に配置されます。

メニューオプションと左側のロゴの間隔を空けるために、1つの最終コンテナとそのサイズフラグを使用します。VBoxContainer を選択して Ctrl + A (macOSでは Cmd + A) を押し、その中に新しいノードを追加します。2番目の VBoxContainer を追加して、MenuOptions という名前を付けます。3つのメニューオプション ContinueNewGameOptions をすべて選択し、新しい VBoxContainer 内にドラッグ&ドロップします。 UIのレイアウトは、もし変わるとしてもわずかです。

../../_images/ui_main_menu_containers_step_4.png

UIのレイアウトを保持するには、他の2つのノードの間(LogoとVersionの間)に新しいコンテナーを配置します。

ここで、メニューオプションをグループ化して、コンテナを拡張し、できるだけ多くの垂直方向のスペースを取るように指示することができます。まず MenuOptions ノードを選択します。インスペクタで、 Size Flags カテゴリまでスクロールダウンします。 Vertical プロパティの右側のフィールドをクリックし、 Fill に加えて Expand をチェックします。コンテナは、隣接する Logo 要素と Version 要素を尊重しながら、利用可能なすべての垂直方向のスペースを取るように拡張します。

ノードを VBoxContainer の中央に配置するには、インスペクタの一番上までスクロールし、 Alignment プロパティを Center に変更します。

../../_images/ui_main_menu_containers_step_5.png

メニューオプションは、UIの左カラムの縦方向の中央に配置する必要があります。

最後に、メニューオプションの間に区切りを追加します。 Size Flags の下の Custom Constants カテゴリを展開し、 Separation パラメータの横のフィールドをクリックして、値を30に設定します。Enterキーを押すと、 Separation プロパティがアクティブになり、Godotはメニューオプションの間に30ピクセルを追加します。

../../_images/ui_main_menu_design_final_result.png

完成したインターフェイス。

一行のコードも書かずに、正確で応答性の高いメインメニューができました。

おめでとうございます! 自分で作ったメニューとの比較用に、完成済みメニューui_main_menu_design.zipをダウンロードできます。次のチュートリアルでは、バーとアイテムカウンターを含むゲームユーザーインターフェイスを作成します。

UIモックアップを分割

レスポンシブなユーザーインターフェイスとは、すべての画面タイプで適切にスケーリングされるように作られたUIです。テレビ画面とコンピューターのディスプレイは、サイズと比率が異なります。 Godotでは、コンテナを使用してUI要素の位置とサイズを制御します。

ネストの順序が重要です。UIがさまざまな画面比率にうまく適応しているかどうかを確認するには、ルートノードを選択し、Q を押して[選択モード]をアクティブにしてコンテナを選択し、コンテナのコーナーの1つをクリック&ドラッグしてサイズを変更します。UIコンポーネントはその内部を流れて移動する必要があります。

コンテナはスプライトを動かしていますが、スケーリングはしていません。これは正常です。UIシステムがさまざまな画面比率を処理できるようにしたいのですが、ゲーム全体をさまざまな画面解像度に適応させる必要もあります。これを行うために、Godotはウィンドウ全体を上下にスケーリングします。

プロジェクト設定でスケールモードを変更するには、上部メニューからプロジェクト → プロジェクト設定 をクリックします。ウィンドウ左側のカラムにある、Displayカテゴリを探します。Windowサブカテゴリをクリックします。ウィンドウの右側に、Stretchセクションがあります。ModeAspectShrinkの3つの設定は、画面サイズを制御します。詳細については、複数の解像度を参照してください。