Godot入門：Panelの使い方と活用法

はじめに

ゲームのUIを作っているとき、背景となる矩形のコンテナが必要になることがあります。Panel（パネル）はUIを整理し、視覚的にまとめるための基本的なノードです。

この記事では、Panelの役割と使い方、そして画面に配置する際のポイントを解説します。

Panelとは？

Panel は 背景色や枠線を持つ矩形の UI コンテナです。ボタンやラベルなど、他の UI ノードをまとめて配置するための「箱」として機能します。

Panelは、ゲーム画面上に「看板」や「ウィンドウ枠」を作るイメージです。中に様々な情報や操作要素を詰め込むことができます。

Panel は Control を継承しており、Godot の UI システムの中核を担っています。色、透明度、枠線のスタイルなど、外観をカスタマイズできるプロパティが揃っています。

このノードを使うべき場面

  • ゲームのメニュー画面：ゲーム開始、設定、終了などの選択肢を視覚的にまとめるパネル
  • ステータス画面：プレイヤーのHPやステータス情報を表示する背景パネル
  • ダイアログウィンドウ：会話やメッセージを表示する背景として機能
  • ゲーム内の案内表示：スコア表示やミッション情報など、関連する情報をひとつのパネルにまとめる
  • 複数の UI 要素をグループ化：ボタンやラベルをパネル内に配置して、全体を一度に移動・表示・非表示にできます

別のノードが適切な場面：

  • 単純なテキスト表示だけが必要 → Label
  • 背景画像を表示したい → TextureRect
  • 複数行のテキストをリッチに表示したい → RichTextLabel

主なプロパティと機能

プロパティ / メソッド 役割 使用例
modulate 色と透明度を設定（Color 型） panel.modulate = Color.WHITE
self_modulate 子ノードに影響しない色設定 panel.self_modulate = Color(1, 1, 1, 0.5)
visible 表示・非表示を切り替え（bool 型） panel.visible = false
size パネルのサイズを設定（Vector2 型） panel.size = Vector2(300, 200)
position 画面上の位置を設定（Vector2 型） panel.position = Vector2(100, 100)
add_child() パネルに子ノードを追加 panel.add_child(label)

Panelの背景はThemeという仕組みでカスタマイズします。Themeを使うことで、背景色、枠線、padding（内側の余白）などを一括管理できます。

もっと使いこなす：カスタマイズできるパラメータ

まずは基本を動かしてみてから、余裕が出たら試してみてください。

背景色（Background Color）

Panel の背景色は Theme の bg_color で設定します。


var theme = Theme.new()
theme.set_color("bg_color", "Panel", Color(0.2, 0.3, 0.4, 1.0))
panel.theme = theme

RGBA（赤、緑、青、透明度）の4つの値で色を指定します。透明度は 0.0（完全透明）から 1.0（完全不透明）です。

枠線（Border）

Panel に枠線を加えると、視認性が向上します。


var theme = Theme.new()
theme.set_constant("border_width_left", "Panel", 3)
theme.set_constant("border_width_right", "Panel", 3)
theme.set_constant("border_width_top", "Panel", 3)
theme.set_constant("border_width_bottom", "Panel", 3)
theme.set_color("border_color", "Panel", Color.WHITE)
panel.theme = theme

border_width を 0 に設定すると枠線は非表示になります。

内側の余白（Padding）

Panel 内のコンテンツを枠から離すために padding を設定します。


var theme = Theme.new()
theme.set_constant("margin_left", "Panel", 10)
theme.set_constant("margin_right", "Panel", 10)
theme.set_constant("margin_top", "Panel", 10)
theme.set_constant("margin_bottom", "Panel", 10)
panel.theme = theme

padding を大きくするとコンテンツは中央に寄り、小さくすると枠に近づきます。

透明度の調整

Panel を半透明にして、背後の画像を見せることができます。


panel.modulate = Color(1.0, 1.0, 1.0, 0.7)

最後の値が透明度です。0.7 なら 70% の不透明度、つまり 30% 透明になります。

レイアウト・コンテナとの組み合わせ

Panel と HBoxContainer や VBoxContainer を組み合わせると、内部の要素を自動的に整列できます。


var panel = Panel.new()
var vbox = VBoxContainer.new()
panel.add_child(vbox)

var label = Label.new()
label.text = "ステータス"
vbox.add_child(label)

var button = Button.new()
button.text = "OK"
vbox.add_child(button)

子ノードを Panel 内に追加するだけで、視覚的にグループ化できます。

動的な表示・非表示の切り替え

ゲーム実行中に Panel を表示・非表示にするのはよくあるパターンです。


# メニューを表示
menu_panel.visible = true

# メニューを隠す
menu_panel.visible = false

アニメーション（Tween）と組み合わせることで、フェードイン・フェードアウト効果も実現できます。

まとめ

Panel はゲーム UI を作る際の「基本的な箱」です。シンプルながら、背景色や枠線、透明度をカスタマイズすることで、様々な表現が可能になります。

  • Panel は Control を継承した UI ノードで、背景色や枠線をカスタマイズできます
  • メニュー、ステータス画面、ダイアログなど、UI 要素をグループ化するのに使います
  • Theme や modulate を使って、色や透明度、枠線を細かく調整できます

次の記事では、UI レイアウトを自動的に整える ScrollContainer を解説します。Panel の中に多くの要素を詰め込みたいときに活躍するノードです。

シリーズ：Godot 4 ノード解説

この記事はGodot 4.xをもとに執筆しています。

コメント