コントロールノードを使用したインターフェイスの設計

パソコンのディスプレイ、携帯電話、TV画面などは、あらゆる形と大きさをしています。ゲームを公開する前に、異なるアスペクト比と解像度に対応させなければなりません。すべてのプラットフォームに対応するレスポンシブなインターフェースは、作るのが大変な場合もあります。うれしいことに、Godotにはレスポンシブなインターフェースをデザインして管理するための、強力なツール群が用意されています。

../../_images/godot_editor_ui.png

Godotのエディタは、エンジンのUIフレームワークで作られています

このガイドでは、UI設計を開始します。次の内容を学習します:

  • あなたのゲームのインターフェースを作るのに、特に使える5つのコントロール・ノード
  • UI要素のアンカーを使用する方法
  • コンテナを使用してユーザーインターフェイスを効率的に配置および配置する方法
  • とりわけよく使う5つのコンテナ (この後、コンテナについてもっと知りたければGUI Containers を参照してください)。

インターフェイスを制御し、他のスクリプトに接続する方法については、最初のゲームUIをGodotで構築するを参照してください。

UIを設計するためにコントロール・ノードを使います。エディタ内に緑のアイコンのノードがあります。ライフバーから複雑なアプリケーションまでなんでも作れるようにたくさんあります。Godotエディタそのものもコントロール・ノードを用いて作られています。

コントロールノードは、コントロールノード同士で上手く機能するために一意のプロパティを持ちます。Node2Dやスプライトといった他のヴィジュアルノードはそのような特徴を持ちません。UI作成を楽するためには可能な限りコントロールノードを用いたほうが良いでしょう。

すべてのコントロールノードは、同じメインプロパティを共有します:

  1. アンカー
  2. 境界矩形
  3. フォーカスと、フォーカスの周辺
  4. サイズフラグ
  5. マージン
  6. オプションのUIテーマ

コントロールノードの基本を理解すると、そこから派生するすべてのノードを学習する時間が少なくなります。

最も一般的な5つのUI要素

Godotには多数のコントロールノードが付属しています。 それらの多くは、エディタプラグインやアプリケーションを構築するのを助けるために用意されています。

ほとんどのゲームでは、必要なUI要素は5種類で、コンテナは多くありません。5つのコントロールノードは次のとおりです:

  1. Label:テキストを表示する
  2. TextureRect:背景、または静止画像であるべきものすべてに主に使用
  3. TextureProgress:ライフバー、ロードバー、水平、垂直または放射状のもの
  4. NinePatchRect: スケーラブルなパネル用
  5. TextureButton: ボタンを作成する
../../_images/five_most_common_nodes.png

UI設計の最も一般的な5つのコントロールノード

TextureRect

TextureRect はテクスチャや画像をUI内に表示します。Spriteノードと同じように見えますが、しかし複数のスケーリング・モードが用意されています。Stretch Modeプロパティで以下のように動作を変更できます:

  • Scale On Expand (compat) は、``Expand``プロパティがオンのときにのみテクスチャを長方形の境界まで拡縮します。それ以外では``Keep``モードと同じ動作をします。後方互換のため、これがデフォルトのモードになっています。
  • ``Scale``は、テクスチャを長方形の境界に合わせて拡縮します。
  • ``Tile``は、拡縮させる代わりに、テクスチャを繰り返して並べます。
  • ``Keep``と``Keep Centered``は、強制的にテクスチャを本来のサイズのままにし、前者はフレームの左上に、後者は中央に表示します。
  • Keep Aspect``と``Keep Aspect Centered は、テクスチャを拡縮しますが、しかし元のアスペクト比は保ったままにします。前者はフレームの左上、後者は中央に表示されます。
  • ``Keep Aspect Covered``は``Keep Aspect Centered``と同じように動作しますが、しかし余白の部分を境界線に合わせる一方、はみ出た部分は除いて表示します。

Spriteノードと同じく、TextureRectの色は調節できます。``Modulate``プロパティをクリックして、カラーピッカーを使用してください。

../../_images/five_common_nodes_textureframe.png

赤で変調されたTextureRect

TextureButton

TextureButton is like TextureRect, except it has 5 texture slots: one for each of the button's states. Most of the time, you'll use the Normal, Pressed, and Hover textures. Focused is useful if your interface listens to the keyboard's input. The sixth image slot, the Click Mask, lets you define the clickable area using a 1-bit, pure black and white image.

Base Buttonセクションには、ボタンの動作を変更するチェックボックスがいくつかあります。 Toggle Mode がオンの場合、ボタンを押すとアクティブ状態と通常状態が切り替わります。 Disabled を選択すると、デフォルトで無効になります。この場合、 Disabled テクスチャが使用されます。TextureButtonには、テクスチャフレームと共通するプロパティがいくつかあります。 modulate プロパティを使用してカラーを変更したり、 Resize および Stretch モードを使用してスケール動作を変更したりできます。

../../_images/five_common_nodes_texturebutton.png

TextureButtonとその5つのテクスチャスロット

TextureProgress

TextureProgressは、最大3つのスプライトをレイヤ化してプログレスバーを作成します。UnderテクスチャとOverテクスチャはProgressテクスチャを挟んでおり、バーの値を表示します。

Mode プロパティは、バーが伸びる方向 (水平、垂直、または放射状) を制御します。radialに設定すると、 Initial AngleFill Degrees プロパティでゲージの範囲を制限できます。

バーをアニメーションさせるには、Rangeセクションを見る必要があるでしょう。 ゲージの範囲を定めるために、MinMax プロパティを設定してください。例えば、キャラクターのライフを表するためには、 Min0,``に、 そして ``Max をキャラクターの最大のライフに設定する必要があるでしょう。 バーを更新するためには、Value``プロパティ変更してください。もし``Min と``Max`` を それぞれデフォルトの``0`` と``100,``に、そして Value プロパティを ``40``にしたならば、 40%の``Progress``テクスチャが現れ、残りの60%は隠れたままになります。

../../_images/five_common_nodes_textureprogress.png

TextureProgressバー、3分の2が塗りつぶされました

Label

Label はスクリーンにテキストを表示します。インスペクタのLabelセクションで全てのプロパティを確認できるでしょう。``Text``プロパティでテキストを書き、もしテキストボックスの大きさを重視しないならAutowrapにチェックを入れてください。もし Autowrapがオフのとき、ノードを拡大することはできないでしょう。AlignとValignを用いることでそれぞれ横方向と縦方向に整列させることができます。

../../_images/five_common_nodes_label.png

ラベルの画像

NinePatchRect

NinePatchRect は3行と3列に分割されたテクスチャを受け取ります。 中央と横のタイルは拡大されますが、隅のタイルは拡大されません。パネルやダイアログボックスや拡大可能なUI用の背景を作るさいに便利です。

../../_images/five_common_nodes_ninepatchrect.png

min_sizeプロパティでスケーリングされたNinePatchRect

応答性の高いUIを構築するための2つのワークフローがあります

Godotには、スケーラブルで柔軟なインターフェイスを構築するための 2 つのワークフローがあります:

  1. UI要素をスケールして配置するコンテナノードが多数あります。それらは子を制御します。
  2. 反対側には、レイアウトメニューがあります。これは、親のUI要素を固定、配置、およびサイズ変更するのに役立ちます。

2つのアプローチはいつも相性が良いわけではありません。コンテナは子ノードを操作し、それらのレイアウトメニューを使えないからです。それぞれのコンテナは特定の効果を持ち、操作画面にたどり着くまでにいくつかのノードをたどらなければならないかもしれません。レイアウトアプローチでは子ノードの下の画面から行うことができます。シーンに追加のコンテナを挿入しないなら、見通しのよい階層を構成できるでしょう。しかし、縦、横、グリッド等にアイテムを配置することは難しくなるでしょう。

ゲームやツールに合わせてUIを作成すると、それぞれの状況に最も適したものに対する感覚が高まります。

アンカーを使用してUI要素を正確に配置する

コントロールノードには位置とサイズがありますが、アンカーと余白もあります。アンカーは、ノードの左端、上端、右端、下端の原点または参照点を定義します。余白の基準点を変更するには、4つのアンカーのいずれかを変更します。

../../_images/anchor_property.png

アンカーのプロパティ

アンカーを変更する方法

他のプロパティと同じく、4個あるアンカーポイントをインスペクタで編集することもできますが、最適な方法ではありません。コントロールノードを選択すると、ビューポートの上にあるツールバーに『レイアウト』メニューが現れます。インスペクタに4個あるプロパティの代わりに、このアイコン付きのリストから選べば、一発ですべてのアンカーを設定できます。『レイアウト』メニューは、コントロールノードを選択したときにのみ出てきます。

../../_images/layout_menu.png

ビューポートのレイアウトメニュー

アンカーは親コンテナに対して相対的です

各アンカーは0から1の間の値です。左アンカーと上端アンカーの場合、値0は余白なしでノードのエッジが親の左端と上端に位置合わせされることを意味します。右端と下端の場合、値が1の場合、親コンテナーの右端と下端に位置合わせされます。一方、余白はアンカー位置(ピクセル単位)を表し、アンカーは親コンテナーのサイズに対して相対的です。

../../_images/ui_anchor_and_margins.png

余白はアンカー位置に対して相対的であり、アンカーに対して相対的です。実際には、コンテナの余白を更新することがよくあります

アンカーによって余白が変化する

コントロールノードを移動またはサイズ変更すると、余白が自動的に更新されます。これらは、コントロールノードのエッジからアンカーまでの距離を表します。そのため、コントロール ノードは常にコンテナ内に配置する必要があります。親がない場合、余白は、インスペクタのRectセクションで設定されたノード独自の境界矩形に対して相対的になります。

../../_images/control_node_margin.png

「Full Rect」アンカーに設定されたセンターコンテナの余白

アンカーを変更するか、コンテナ内にコントロールノードをネストしてみてください。余白が更新されます。 余白を手動で編集する必要はほとんどありません。 あなたを助けるために常に最初にコンテナを見つけるようにしてください。 Godotはあなたのためのすべての一般的なケースを解決するためにノードを持っています。 ライフバーと画面の境界の間にスペースを追加する必要がありますか? MarginContainerを使用してください。 垂直メニューを作りたいですか? VBoxContainerを使用してください。 これらの詳細は下記をご覧ください。

サイズタグを使用して、UI要素が使用可能な領域を埋める方法を変更する

各コントロールノードにはサイズフラグがあります。UI要素のスケーリング方法をコンテナに指示します。「Fill」フラグをHorizontalまたはVerticalプロパティに追加すると、ノードのバウンディングボックスは可能な限りのスペースを使用しますが、兄弟を考慮してサイズを保持します。HBoxContainerに3つのTextureRectノードがあり、両方の軸に「Fill」フラグが設定されている場合、それぞれが使用可能なスペースの最大3分の1を使用しますが、それ以上は使用できません。コンテナがノードを引き継ぎ、自動的にサイズが変更されます。

../../_images/textureframe_in_box_container_fill.png

HBoxContainer内の3つのUI要素は、水平方向に整列します

「Expand」フラグを使用すると、UI要素は可能な限りのスペースを使用して、兄弟要素をプッシュできます。そのバウンディングボックスは、親のエッジに向かって、または別のUIノードによってブロックされるまで大きくなります。

../../_images/textureframe_in_box_container_expand.png

上記と同じ例ですが、中央ノードには「Expand」サイズフラグがあります

サイズタグの効果はインターフェイスの設定方法によって大きく異なるため、サイズタグを理解するにはある程度の練習が必要です。

コンテナを使用してコントロールノードを自動的に配置する

コンテナは、子になったコントロールノード(他のコンテナも可)をすべて、自動的に縦や横などに並べます。インターフェースの周りにパディングを追加したり、ノードを四角形の中央に配置するのに使えます。組み込みのコンテナは、すべてエディタの中で更新されるので、すぐに反映された結果を見ることができます。

コンテナには、UI要素の配置方法を制御するための特別なプロパティがいくつかあります。変更するには、インスペクタのカスタム定数セクションに移動します。

最も有用な5つのコンテナ

ツールを構築する場合は、すべてのコンテナが必要になる場合があります。しかし、ほとんどのゲームでは、一握りで十分です:

  • MarginContainer、UIの一部に余白を追加します
  • CenterContainerは、その子を境界ボックスに中央に配置します
  • VboxContainerおよびHboxContainer、行または列にUI要素を配置します
  • GridContainer、グリッドのようなパターンでコントロールノードを配置します

CenterContainerは、すべての子をバウンディング矩形の内側にセンタリングします。これは、オプションをビューポートの中央に表示しておきたい場合に、タイトルスクリーンでよく使用する方法です。すべてを中央に配置するため、1つのコンテナを内部にネストしたい場合があります。代わりにテクスチャとボタンを使用すると、それらが重なってしまいます。

../../_images/five_containers_centercontainer.png

CenterContainerのアクション。ライフバーは、親コンテナ内に配置されます。

MarginContainerは、子ノードの任意の側に余白を追加します。ビューポート全体を含むMarginContainerを追加して、ウィンドウのエッジとUIの間に分離を追加します。コンテナの上部、左、右、下側に余白を設定できます。チェックボックスをオンにする必要はありません: 対応する値のボックスをクリックし、任意の数を入力すると、自動的に有効になります。

../../_images/five_containers_margincontainer.png

MarginContainer は、ゲームユーザーインターフェイスの周囲に 40ピクセルのマージンを追加します

ボックスコンテナには、VBoxContainerとHBoxContainerの2つがあります。BoxContainerノード自体はヘルパー クラスなので追加できませんが、垂直および水平のボックスコンテナを使用できます。ノードは行または列に配置されます。ショップ内のアイテムを並べて作成したり、さまざまなサイズの行と列を持つ複雑なグリッドを構築したりするために使用します。

../../_images/five_containers_boxcontainer.png

HBoxContainerはUI要素を水平方向に揃えます

VBoxContainerは、子を自動的に列に配置し、それらを次々に置きます。分割パラメータを使用すると、子の間にギャップが残ります。HBoxContainerは、UI要素を一列に並べます。これはVBoxContainerに似ていますが、スクリプトから最初の子ノードの前または最後の子ノードの後にspacerコントロールノードを追加する add_spacer メソッドが追加されています。

GridContainerを使用すると、グリッドのようなパターンでUI要素を配置できます。列の数のみを制御でき、子の数に基づいて行数を単独で設定します。9つの子と3つの列がある場合は、9÷ 3= 3行があります。さらに3つの子を追加すると、4行になります。つまり、テクスチャとボタンを追加すると、新しい行が作成されます。ボックスコンテナと同様に、行と列の間の垂直方向と水平方向の分離をそれぞれ設定する2つのプロパティがあります。

../../_images/five_containers_gridcontainer.png

2つの列を持つGridContainer。各列のサイズは自動的に設定されます。

GodotのUIシステムは複雑で、さらに多くの機能があります。より高度なインターフェースをデザインする方法を学ぶには、ドキュメントのGUIの節へと進んでください。