Godotの組み込みUIノード全種類解説

Gobot

Godot 組み込みUIノード全種類解説

Godot Engine は、ゲーム開発におけるユーザーインターフェース (UI) の構築を容易にする、強力で柔軟な組み込み UI ノード群を提供しています。これらのノードは、ボタン、ラベル、コンテナ、スライダーなど、ゲームに必要なあらゆる UI 要素を効率的に作成するための基盤となります。本稿では、Godot に標準搭載されている UI ノードを網羅的に解説し、それぞれの機能、用途、および関連するプロパティについて掘り下げていきます。

主要な UI ノードファミリー

Godot の UI ノードは、その機能や目的によっていくつかの主要なファミリーに分類できます。これらのファミリーを理解することで、UI の設計と実装がより体系的かつ効率的になります。

コントロール (Control) ノード

すべての UI ノードの基底クラスであり、UI 要素の配置、サイズ調整、およびインタラクションの基本機能を提供します。Control ノード自体は、画面上の矩形領域を表し、他の UI ノードの親として機能します。以下のプロパティが重要です。

  • rect_min_size: ノードの最小サイズを指定します。UI のレスポンシブデザインにおいて、要素が極端に小さくなるのを防ぐために使用されます。
  • size_flags_horizontal, size_flags_vertical: コンテナノード内でのノードのサイズ拡張方法を制御します。FILL, EXPAND, SHRINK_CENTER などのフラグがあります。
  • margin_left, margin_top, margin_right, margin_bottom: 親コンテナからのマージンを設定します。
  • mouse_filter: マウスイベントをどのように処理するかを定義します。STOP (イベントを処理し、親に伝えない), PASS (イベントを親に伝える), IGNORE (イベントを無視する) があります。
  • focus_mode: ノードがフォーカスを受け取れるかどうかを定義します。NONE, ALL, MOUSE があります。

ボタン (Button) ノード

ユーザーからのクリックやタップに応答する基本的なインタラクティブ要素です。Button ノードは、テクスチャやテキストを表示し、押された状態、ホバー状態、無効状態などを視覚的に表現できます。

  • text: ボタンに表示されるテキストです。
  • icon: ボタンに表示されるアイコンテクスチャです。
  • pressed シグナル: ボタンが押されたときに発火します。
  • button_group: 複数のボタンをグループ化し、一度に1つだけ選択できるようにします。ラジオボタンやチェックボックスの実装に役立ちます。

ラベル (Label) ノード

ゲーム内でテキストを表示するためのノードです。フォント、サイズ、色、アラインメントなどの豊富なテキスト描画オプションを提供します。

  • text: 表示するテキストです。
  • align, valign: テキストの水平および垂直方向のアラインメントを設定します。
  • autowrap: テキストがノードの境界を超えた場合に自動的に折り返すかどうかを制御します。
  • font_color: テキストの色を設定します。
  • font_size: フォントサイズを設定します。

コンテナ (Container) ノード

子ノードの配置とサイズ調整を自動的に管理するノードです。UI 要素を整理し、画面サイズの変化に柔軟に対応させるために不可欠です。

  • VBoxContainer: 子ノードを垂直方向に並べます。
  • HBoxContainer: 子ノードを水平方向に並べます。
  • GridContainer: 子ノードをグリッド状に配置します。
  • ItemList: 項目リストを表示し、選択や編集が可能です。
  • Tree: ツリー構造のデータを表示します。

コンテナノードでは、size_flags プロパティが特に重要となり、子ノードがコンテナ内でどのようにスペースを占有するかを決定します。

スライダー (Slider) ノード

一定の範囲内の値を調整するためのインタラクティブなスライダーです。音量調整や難易度設定などに使用されます。

  • min_value, max_value: スライダーの最小値と最大値を設定します。
  • value: 現在のスライダーの位置に対応する値です。
  • step: 値の増減ステップを指定します。
  • orientation: スライダーの向きを水平または垂直に設定します。
  • value_changed シグナル: 値が変更されたときに発火します。

チェックボックス (CheckBox) ノード

オン/オフの状態を切り替えるためのチェックボックスです。設定オプションなどに使用されます。

  • pressed シグナル: チェックボックスの状態が変更されたときに発火します。
  • is_checked() メソッド: 現在の状態を取得します。

ラジオボタン (RadioButton) ノード

複数のオプションから1つだけを選択するためのラジオボタンです。ButtonGroup と組み合わせて使用されます。

  • pressed シグナル: ラジオボタンが選択されたときに発火します。
  • is_checked() メソッド: 現在の状態を取得します。

インジケーター (Indicator) ノード

進捗状況や状態を示すためのノードです。

  • ProgressBar: プログレスバーを表示し、進行状況を示します。
  • VideoStreamPlayer: 動画を再生します。

その他の重要な UI ノード

  • LineEdit: ユーザーがテキストを入力するための単一行編集フィールドです。
  • TextEdit: 複数行のテキスト編集を可能にするエディタです。
  • RichTextLabel: 色、フォント、スタイルなどをリッチに表現できるテキストラベルです。HTML ライクな BBCode を使用して書式設定を行います。
  • TextureRect: テクスチャを表示するためのノードです。UI 要素の背景やアイコンとして使用されます。
  • MarginContainer: 子ノードの周囲にマージンを設定するためのコンテナです。
  • ScrollContainer: 子ノードがコンテナのサイズを超えた場合にスクロールバーを表示します。
  • HTTPRequest: HTTP リクエストを送信し、Web サーバーと通信します。
  • PopupMenu: コンテキストメニューやドロップダウンメニューを表示します。
  • GraphEdit: ノードベースのグラフエディタを作成します。

UI ノードの配置とレイアウト

Godot の UI システムは、 Anchors (アンカー) と Margins (マージン)、そして Size Flags (サイズフラグ) を組み合わせることで、柔軟なレイアウトを実現します。アンカーは、ノードが親コンテナのどのエッジに追従するかを定義し、マージンはそのエッジからのオフセットを指定します。サイズフラグは、コンテナノード内でノードがどのようにリサイズされるかを制御します。

これらのメカニズムを理解することで、異なる画面解像度やアスペクト比に対応できる、スケーラブルでレスポンシブな UI を構築することが可能になります。特に、Control ノードの layout_mode プロパティは、UI の自動配置をさらに強力にサポートします。

まとめ

Godot の組み込み UI ノードは、ゲーム開発における UI 実装を強力に支援します。Control ノードを基盤とし、Button, Label, Container などの多様なノードを組み合わせることで、インタラクティブで視覚的に魅力的なインターフェースを効率的に作成できます。本稿で解説した各ノードの機能とプロパティを理解し、適切に活用することで、より洗練されたゲーム体験を提供できるようになるでしょう。