Godot UIレイアウトの基本

UIレイアウトは主にControlノード体系 + コンテナ + アンカーポイントによって構成されます。

レイアウトコンポーネント

コンテナ（自動レイアウトの鍵）

コンテナ用途HBoxContainer横方向に配置VBoxContainer縦方向に配置GridContainerグリッド形式MarginContainer余白を設定CenterContainer中央に配置PanelContainer背景を持つコンテナ...その他のコンテナ

コンテナとその設定により、配置方向（上、下、左、右、中央）や拡張・収縮の挙動が決まります。

アンカーポイントによる配置

Godotでは重要なルールがあります：「親ノードの属性が子ノードの動作を決定する。」
簡単に言うと：もし親ノードがコンテナであれば、子ノードのアンカーポイントは無効になります。
アンカーポイントを使って配置を行うこともできます。事前設定されたものを使うことも、独自に設定することも可能です。

アンカーポイント（百分比で位置を指定）

アンカーポイントの値は通常0.0から1.0の範囲です。これは親ノードのサイズに対する各辺（左、上、右、下）の比率を定義します。

  • 0.0： 親ノードの左端または上端。
  • 0.5： 親ノードの中央。
  • 1.0： 親ノードの右端または下端。

アンカーオフセット（ピクセルでの微調整）

オフセットはアンカーポイントに基づいたピクセル数の加算または減算です。

  • Anchor Left が0.5（中央）で、Offset Left が20の場合：
    • ノードの左端は親コンテナの中央 + 20ピクセルの位置になります。
  • Anchor Right が1.0（右端）で、Offset Right が-50の場合：
    • ノードの右端は親コンテナの右端から50ピクセル内側の位置になります。

コンテンツコンポーネント

基本的なUIコントロール

テキスト系

ノード説明Label静的テキストを表示RichTextLabelフォント色や画像、BBCode対応のテキストLineEdit単一行入力TextEdit複数行入力

ボタン系

ノード説明Button標準ボタンCheckBoxチェックボックスCheckButtonスイッチ式ボタンOptionButtonドロップダウン選択MenuButtonメニュー付きボタンLinkButtonリンクスタイルのボタン

画像 / 表示系

ノード説明TextureRect画像表示NinePatchRect九分割拡大背景ColorRect純色矩形（マスク、背景）VideoStreamPlayer動画再生（UIで使用可能）

進捗 / 数値表示コントロール

血条、ロードバー、音量調節などに使われます。

ノード説明ProgressBarプログレスバーTextureProgressBarカスタム画像のプログレスバーSpinBox数値入力（増減ボタンあり）HSlider / VSliderスライダーHScrollBar / VScrollBarスクロールバー

ウィンドウ / パネル系

ノード説明Panel標準パネルWindow独立ウィンドウ（Godot 4で強化）PopupポップアップベースPopupPanelパネル型ポップアップAcceptDialog確認用ダイアログConfirmationDialog確認/キャンセルダイアログFileDialogファイル選択ColorPicker / ColorPickerButtonカラーピッカー

Panel = 背景と枠線を持ち、Themeで制御可能なUIコンテナ/背景コントロール
よく使う場面：パネル設定、ポップアップの背景、HUDの背景、カード
PanelはTheme内のStyleBoxTextureを使用して背景と枠線を描画します：

  • 背景色や背景画像
  • 枠線の幅、色、角丸
  • すべてThemeで統一的に制御可能
  • 子ノードの配置やスペースを自動処理しない
  • 内部にレイアウトコンテナを追加するか、PanelContainerを使用する必要があります

テーマ内で新しいPanelタイプを設定し、スタイルを変更することも可能です。また、パネル内の「テーマオーバーライド」で新しい「StyleBoxTexture」を設定し、「AtlasTexture」を「サブ領域編集」することで、サブ領域を指定できます。

Panelのサイズについて、Panelは「サイズがある（rect）」場合にのみ背景を描画します。Panelは自身でサイズを生成しません。したがって、以下の2つの方法しかありません：

1️⃣ 親コンテナによって広げる（推奨）
2️⃣ 手動でサイズを指定

リスト / データ表示系

ノード説明ItemListシンプルなリストTreeツリー構造TabBarタブバーOptionButton軽量なドロップダウンリスト

インタラクティブ & アシストコントロール

ノード説明TooltipLabelヒント情報を表示TextureButton画像を表示するボタンTouchScreenButtonタッチスクリーン用ボタンControlすべてのUIの基底クラスCanvasLayerUIレイヤー管理（HUDでよく使われる）

コンテナのサイズ

GodotのUI（Control / Container）コンテナのサイズは基本的に以下の3つのいずれかからのものです：
1️⃣ 親ノードが割り当てた空間（最も一般的）
2️⃣ 自身の anchors / offsets（手動または予設）
3️⃣ Containerがルールに従って子ノードのサイズを計算・割り当て（逆は少数例外）

Godot UIにおいて：

🔽 親 → 子：サイズを制御できる
🔼 子 → 親：サイズには影響しない

これはWeb（HTML）の考え方に大きく異なります。

コンテナの状況分類

サイズが(0, 0)のコンテナ

通常のControl（Panelを含む）はサイズを設定しなければ：

  • デフォルトのサイズは(0, 0)
  • 子ノードがあるからといってサイズが大きくなるわけではない
  • 親ノードのサイズを継承しない

👉 結果：

  • Buttonは表示される（自身にサイズがある）
  • Panelの背景は見えない（サイズが0）

✅ Control / Panel = 必ず親によってサイズを広げられるか、手動でサイズを指定する必要がある

Container（VBox / HBox / Gridなど）

コンテナの基本的なルール

コンテナのサイズ：親ノードに依存
コンテナは子ノードのサイズを割り当てるだけ

唯一の「子 → 親」への影響（例外）

🔹 最小サイズ（Minimum Size）

一部のControlは最小サイズの提案を提供します：

  • Label（文字サイズ）
  • Button（テキスト + パディング）
  • TextureRect（画像サイズ）
  • Panel

これらが有効になるのは以下のときのみ：

  • 親ノードがContainer
  • 親ノードがレイアウトを計算するときにmin_sizeを参照する
    ⚠️ しかし、親コンテナのサイズは変化しない

テーマの作成

Web開発におけるCSSとは異なり、Godotは**Theme（テーマ）とStyleBox（スタイルボックス）**を組み合わせたシステムを使用しています。
以下のような3つの主な方法でスタイルを作成または設定できます：

1. テーマエディタを使用（推奨）

これは最も一般的かつ効率的な方法です。Themeリソースを作成することで、ボタンやラベルなどのコントロールの外観を全体的に定義できます。

  • テーマの作成：ファイルシステムで右クリック -> 新しいリソース -> Theme を作成
  • スタイルボックスの編集 (StyleBox)：
    • StyleBoxFlat：純色、角丸、枠線、影を表現する（最も一般的）
    • StyleBoxTexture：画像を背景として使用（9分割拡大に対応、CSSのborder-imageに似る）
  • タイプのバリエーション (Type Variations)：ツールバーの特定のボタンを赤くしたい（例：「削除」ボタン）場合、テーマ内でToolButtonのバリエーションを作成します。基本タイプを設定した後、デフォルトのスタイルを編集できます。
  • テーマの適用：特定のタイプのテーマバリエーションを使用するには、インスペクターの「Type Variation」で設定します（gd 4.6以前は手動で入力が必要、4.6では時々自動読み込みされず、テーマバリエーションを作成する必要がある場合があります）。

2. 局所的なオーバーライド（Theme Overrides）

特定のノードのスタイルを変更したいが、全体のテーマに影響させたくない場合は、この機能を使用します。ノードの「インスペクター (Inspector)」パネルにあるTheme Overridesを使用してください。

  • この場所でフォントサイズ、色を変更したり、StyleBoxを置き換えることができます。
  • 注意：局所的なオーバーライドを多用するとUIの保守性が低下します。できる限り全体のテーマで処理することを推奨します。

3. GDScriptでコードでスタイルを記述

ゲームのロジックに応じてスタイルを動的に変更したい場合は、コードを使用します。

基本的な属性の変更

# 色を変更
$Label.add_theme_color_override("font_color", Color.RED)

# フォントサイズを変更
$Label.add_theme_font_size_override("font_size", 32)

動的にStyleBoxを作成

円角矩形の背景をコードで作成する場合：

func _ready():
    var style = StyleBoxFlat.new()
    style.bg_color = Color(0.2, 0.6, 1.0) # 天青色
    style.set_corner_radius_all(10)      # 角丸を設定
    style.border_width_left = 2          # 枠線の幅を設定
    
    # ボタンの"normal"状態に適用
    $Button.add_theme_stylebox_override("normal", style)

タグ: Godot UI Layout Container Anchor

5月16日 22:04 投稿

ホットタグ

©2026 異端開発室