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

パソコンのディスプレイ、携帯電話、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 は、拡縮させる代わりに、テクスチャを繰り返して並べます。
  • KeepKeep Centered は、強制的にテクスチャを本来のサイズのままにし、前者はフレームの左上に、後者は中央に表示します。
  • Keep AspectKeep Aspect Centered は、テクスチャを拡縮しますが、しかし元のアスペクト比は保ったままにします。前者はフレームの左上、後者は中央に表示されます。
  • Keep Aspect CoveredKeep Aspect Centered と同じように動作しますが、しかし余白の部分を境界線に合わせる一方、はみ出た部分は除いて表示します。

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

../../_images/five_common_nodes_textureframe.png

赤で変調されたTextureRect

TextureButton

TextureButton is like TextureRect, except it has 6 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 プロパティ変更してください。もし MinMax を それぞれデフォルトの 0100, に、そして 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を作っていけば、それぞれの状況で何がいちばん適しているのか分かるようになっていきます。

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

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

../../_images/anchor_property.png

アンカーのプロパティ

アンカーを変更する方法

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

../../_images/layout_menu.png

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

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

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

../../_images/ui_anchor_and_margins.png

余白(Margin size)はアンカー位置(Anchor pin)に対して相対的であり、そしてアンカー位置もまた相対的です。実際には、余白の更新はコンテナに任せることが多くなるでしょう。

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

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

../../_images/control_node_margin.png

「Rect全面」アンカーで設定した CenterContainer の余白

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

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

各コントロールノードにはサイズフラグ(Size Flags)があります。これらは、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は、すべての子をバウンディング矩形の内側にセンタリングします。これはタイトルスクリーンにおいて、オプションをビューポートの中央に表示しておきたい場合によく使用する方法です。これはすべてを中央に配置してしまうため、多くの場合、もうひとつのコンテナを中にネストして配置したくなるでしょう。そうせずにテクスチャやボタンを使用すると、重なってしまいます。

../../_images/five_containers_centercontainer.png

CenterContainerの使用例。ライフバーは、親コンテナの中央に配置されます。

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

../../_images/five_containers_margincontainer.png

MarginContainer で、ゲームUIの周囲に 40ピクセルの余白を追加しています

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

../../_images/five_containers_boxcontainer.png

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

VBoxContainerは、子を自動的に縦一列に配置し、並べていきます。Separation (分離) パラメータを使用すると、子と子の間に隙間をつくります。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の節へと進んでください。