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

対象読者：Godotの基本操作を少し触ったことがある初級者の方

はじめに

設定画面やダイアログなど、コンテンツの周りに背景と余白をつけて見た目を整えたいときに便利なのが PanelContainer です。中身のControlを自動的に配置しつつ、パネル風の背景を表示できます。

PanelContainerとは？

PanelContainerは、子として置いたひとつのControlを、パネルの背景（スタイルボックス）の余白分だけ内側に自動配置するコンテナです。背景の描画とレイアウトの調整を同時に行ってくれます。

たとえるなら、額に入った一枚の絵です。額（背景）と絵（中身）がセットになっていて、額の縁の分だけ絵が内側に収まるイメージです。

PanelContainer は Container → Control → CanvasItem → Node を継承しています。直接の子は1つだけですが、その子にVBoxContainerなどを置けば、複数のコントロールをまとめて背景付きで配置できます。

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

  • 設定パネルやダイアログの背景と余白をまとめて用意したいとき
  • HBoxContainerやVBoxContainerでまとめたUI群に、背景と枠を付けたいとき
  • カード風のUI（プレイヤー情報カードなど）を作りたいとき

UIのまとまりが増えるほど、背景付きのグループ化が整理に役立ちます。

使わない・別のノードが適切な場合：

  • 背景がいらず、ただ並べたいだけ → HBoxContainer や VBoxContainer をそのまま使う
  • 背景をテクスチャで細かく制御したい → NinePatchRect を使う
  • 単に色を敷きたいだけ → ColorRect を使う

使うかどうかの目安：背景とレイアウトをまとめて扱いたいならPanelContainer、並べるだけでよいならHBoxContainerやVBoxContainerを直接使う、と考えるとよいでしょう。

主なプロパティと機能

プロパティ／メソッド役割型
panel（テーマオーバーライド）背景に使うStyleBoxを指定するStyleBox
子ノードの配置子を1つだけ内包し、スタイルボックスの余白分だけ内側に自動配置–
clip_contents子の描画を境界内でクリップするかbool

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

スタイルボックスをコードで設定する

貼り付け先の準備：①シーンツリーで＋ボタンから「PanelContainer」を検索して追加　②その子として「VBoxContainer」などを追加しラベルやボタンを配置　③PanelContainerを右クリックして「アタッチスクリプト」→GDScriptのまま「作成」を押し、開いたエディタに以下を貼り付け

extends PanelContainer

func _ready() -> void:
	var style := StyleBoxFlat.new()
	style.bg_color = Color(0.15, 0.15, 0.2)
	style.set_corner_radius_all(8)
	style.set_content_margin_all(12)
	add_theme_stylebox_override("panel", style)

よくある質問：似たノードとの違い

Q. Panelとの違いは？

Panel は背景を描画するだけで、子ノードの配置は自動的には行いません。PanelContainerは背景の描画に加えて、子ノードをスタイルボックスの余白に合わせて自動配置してくれます。詳しくはPanelの記事を参照してください。

Q. 子を複数置きたい場合は？

PanelContainerの直接の子は1つまでがレイアウト対象です。複数のコントロールをまとめたい場合は、間にVBoxContainerやHBoxContainerを挟んでからPanelContainerの子にします。

まとめ

PanelContainerは、背景の描画と子ノードの自動配置をまとめて行ってくれるコンテナです。

  • 子は1つ、背景はスタイルボックスの余白に合わせて自動配置される
  • 複数のコントロールをまとめたい場合はVBoxContainer等と組み合わせる
  • 背景がいらない場合はHBoxContainer・VBoxContainerを直接使う

次の記事では、2Dの視差スクロール背景を1つのノードで実現する「Parallax2D」について解説します。

関連性の高いノード解説記事

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

コメント