対象読者:Godotの基本操作を少し触ったことがある初級者の方
はじめに
ボタンやラベル、コンテナなど、Godotの画面上に表示するUI部品はすべてControlという共通の土台の上に成り立っています。UIを扱うなら、Controlは避けて通れない基底クラスです。普段はButtonやLabelなど、より専門的な派生ノードを使うことが多いですが、Control自体を直接使う場面もあります。
Controlとは?
Controlは、画面上に配置されるすべてのUIノードの基底クラスです。位置やサイズを画面(矩形領域)で管理し、アンカーやマウス入力の受付といった、UIに共通する機能を提供します。
たとえるなら、Controlは「何も印刷されていない透明な台紙」です。そのままでは見た目に何も変化を与えませんが、ボタンやラベルなど、あらゆるUI部品はこの台紙の上に成り立っています。
Control は CanvasItem → Node を継承しています。Node2D がゲーム世界の座標(X, Y)を扱うのに対し、Controlは画面上の矩形領域(アンカーとオフセット)で位置とサイズを管理する点が大きな違いです。
このノードを使うべき場面
- 見た目は不要だが、マウス入力だけを受け付けたい透明な当たり判定エリアを作るとき
_draw()を使って独自の描画を行うオリジナルUI部品を自作するとき- 他のControl系ノードをまとめて配置するための、装飾なしの土台として
- UIの規模が大きくなるほど重要度が増すノードです: 画面が複雑になるほど、Controlの継承関係やアンカーの仕組みを理解しているかどうかでレイアウト崩れの直しやすさが変わってきます
使わない・別のノードが適切な場合:
- 背景色や枠線など、見た目のパネルが欲しい → Panel を使う
- クリックできるボタンの挙動が欲しい → Button を使う
- 子要素を自動で横並び・縦並びにしたい → HBoxContainer や VBoxContainer などのContainer系ノードを使う
使うかどうかの目安: 「見た目も自動整列も要らない、ただの透明な土台が欲しい」という場合だけControlを直接使います。少しでも装飾や整列が欲しくなったら、専用の派生ノードに切り替えましょう。
主なプロパティと機能
Controlの代表的なプロパティとメソッドを以下にまとめました。
| プロパティ/メソッド | 役割 | 型 |
|---|---|---|
anchor_left / top / right / bottom | 親領域に対する位置の基準(0.0〜1.0) | float |
offset_left / top / right / bottom | アンカーからのズレ(ピクセル単位) | float |
custom_minimum_size | ノードが持つ最小サイズ | Vector2 |
size_flags_horizontal / vertical | 親Container内での拡張・整列の挙動 | int |
mouse_filter | マウス入力を受け取るかどうか | int |
focus_mode | キーボードフォーカスを受け取れるか | int |
get_global_rect() | 画面全体における矩形領域を取得 | Rect2 |
もっと使いこなす:カスタマイズできるパラメータ
まずは基本を動かしてみてから、余裕が出たら試してみてください。
1. 透明な当たり判定エリアを作る
貼り付け先の準備: ①シーンツリーで+ボタンから「Control」を検索して追加 ②インスペクターでサイズ・位置を調整 ③右クリックして「アタッチスクリプト」→GDScriptのまま「作成」を押し、開いたエディタに以下を貼り付け
extends Control
func _ready() -> void:
# マウスが入った・出たときの検知だけ行う透明エリア
mouse_entered.connect(_on_mouse_entered)
mouse_exited.connect(_on_mouse_exited)
func _on_mouse_entered() -> void:
print("エリアにカーソルが入りました")
func _on_mouse_exited() -> void:
print("エリアからカーソルが出ました")
2. _draw() で独自の見た目を描く
Controlは見た目を持ちませんが、_draw()を使えば自由に図形を描画できます。既存のControl系ノードにない特殊な表示が必要なときに使います。
func _draw() -> void:
# 自分の矩形領域いっぱいに円を描く
var center = size / 2
draw_circle(center, 20, Color.SKY_BLUE)
よくある質問:似たノードとの違い
Q. ControlとNode2Dの違いは?
A. どちらもCanvasItemを継承していますが、Node2Dはゲーム世界の座標(X, Y)で位置を管理するのに対し、Controlは画面上の矩形領域(アンカーとオフセット)で位置とサイズを管理します。UIを作るならControl系、キャラクターや背景などゲーム世界のものを作るならNode2D系を使います。
Q. ControlとContainer(HBoxContainerなど)の違いは?
A. HBoxContainer や VBoxContainer は、いずれもControlを継承した「子ノードを自動で整列させる」特別な仲間です。Controlをそのまま使う場合、子ノードは自動整列されません。
Q. ControlとPanelの違いは?
A. Panel はControlを継承し、背景色や枠線などの見た目を追加したノードです。見た目が要らない透明な土台ならControl、見た目のある箱が欲しいならPanelを使います。
まとめ
Control は、GodotのすべてのUIノードを支える基底クラスです。
- Button、Label、各種Containerなど、UIノードはすべてControlを継承しています
- アンカーとオフセットによる位置・サイズ管理の考え方は、他のUIノードにもそのまま引き継がれます
- 装飾なしの透明な当たり判定エリアや、独自描画のUIを作りたいときに直接使います
次の記事では、複数行のテキストを編集できる TextEdit を解説します。
関連性の高いノード解説記事
- Godot入門:Node
- Godot入門:Node2D
- Godot入門:Sprite2D
- Godot入門:AnimatedSprite2D
- Godot入門:CharacterBody2D
- Godot入門:CollisionShape2D
- Godot入門:Control
- Godot入門:Button
- Godot入門:Label
- Godot入門:TextEdit
- Godot入門:ItemList
この記事はGodot 4.xをもとに執筆しています。


コメント