タイトル画面のデザイン

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

  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はあなたの期待どおりに動作しない場合があり、パーツを廃棄してコンポーネントを再度作り直すことがある為です。(最終的に)すべてが正常に機能していることが確認できたら、次に示すように、一部のパーツを再利用可能にすることは容易です。

../../_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 Meta + S to save the scene to the disk. Name it MainMenu.

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

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

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

UIスプライトを追加する

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

  1. タイトルまたはロゴ、
  2. 個別のノードとしての3つのテキストオプション、
  3. バージョンノート、
  4. メインメニューのイラスト。

Click the Add Node button or press Meta + A on your keyboard. Start to type TextureRect to find the corresponding node and press enter. With the new node selected, press Meta + D 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要素を自動的に配置するコンテナを追加する

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

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 Meta + A 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要素の位置とサイズを制御します。

The order in which you nest matters. To see if your UI adapts nicely to different screen ratios, select the root node, press Q to activate the Select Mode, select the container and click and drag on one of the container's corners to resize it. The UI components should flow inside of it.

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

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