タイトル画面のデザイン

次のチュートリアル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フォルダにはすべてのスプライトがあります。

注釈

Read the コントロールノードを使用したインターフェイスの設計 first to learn how Godot's UI system works.

ゲームUIの設計方法

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

../../_images/ui_design_rough.png

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

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

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

ちなみに

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

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

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

We will use the first approach, because the first version of your UI may not work as well as you'd like. You're likely to throw parts away and redesign components as you go. When you're sure everything works, it's easy to make some parts reusable, as you'll see below.

../../_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要素を手動で配置することもできますが、コンテナの方が高速で、正確で、応答性に優れています

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

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

We have to add a root node before we can save the scene. Your UI's root should be the outermost container or element. In this case it's a MarginContainer. MarginContainer is a good starting point for most interfaces, as you often need padding around the UI. Press Ctrl + S (Cmd + S on macOS) to save the scene to the disk. Name it MainMenu.

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

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

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

UIスプライトを追加する

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

  1. タイトルまたはロゴ、
  2. 3つのテキスト選択項目を個別のノードで、
  3. バージョン表示、
  4. and the main menu's illustration.

Click the Add Node button or press Ctrl + A (Cmd + A on macOS) on your keyboard. Start to type TextureRect to find the corresponding node and press enter. With the new node selected, press Ctrl + D (Cmd + D on macOS) five times to create five extra TextureRect instances.

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

../../_images/ui_texturerect_load_texture.png

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

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

../../_images/ui_main_menu_6_texturerect_nodes.png

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

注釈

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

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

Our main menu has some margin around the edges of the screen. It is split in two parts: on the left, you have the logo and the menu options. On the right, you have the characters. We can use one of two containers to achieve this: HSplitContainer or HBoxContainer. Split containers split the area into two: a left and a right side or a top and a bottom side. They also allow the user to resize the left and right areas using an interactive bar. On the other hand, HBoxContainer just splits itself into as many columns as it has children. Although you can deactivate the split container's resize behavior, I recommend to favor box containers.

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内に配置するとすぐに画面の右半分の中央に配置されます。

To space out the menu options and the logo on the left, we'll use one final container and its size flags. Select the VBoxContainer and press Ctrl + A (Cmd + A on macOS) to add a new node inside it. Add a second VBoxContainer and name it MenuOptions. Select all three menu options, Continue, NewGame and Options, and drag and drop them inside the new VBoxContainer. The UI's layout should barely change, if at all.

../../_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つの設定は、画面サイズを制御します。詳細については、複数の解像度を参照してください。