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

はじめに
CenterContainerとは？
このノードを使うべき場面
主なプロパティと機能
もっと使いこなす：カスタマイズできるパラメータ
まとめ
シリーズ：Godot 4 ノード解説

はじめに

「このボタン、画面の真ん中に置きたいだけなのに、なぜかずれてしまう……」——UIを作っていると、センタリングにじわじわ時間を取られることがあります。CenterContainer を使えば、子ノードを自動で中央に配置できます。アンカーや position を手で調整する必要はありません。

この記事では、CenterContainer の仕組みと使いどころ、よく触るポイントを紹介します。

CenterContainerとは？

CenterContainer は ひとつの子ノードをコンテナの中央（水平・垂直ともに）に自動で配置するUIコンテナです。子ノードのサイズやコンテナのサイズが変わっても、常に中央をキープしてくれます。

写真を台紙の中央に貼るとき、四辺の余白が均等になるように慎重に位置を合わせますよね。CenterContainer はその作業を自動でやってくれる「センタリング台紙」です。

継承ツリーは CenterContainer → Container → Control → CanvasItem → Node です。子ノードは1つが基本で、複数を中央に並べたいときは内側に VBoxContainer や HBoxContainer を挟みます。

CenterContainer を使った中央配置の比較図 — CenterContainer に入れるだけで、子ノードが自動的に中央へ

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

タイトル画面のロゴ・ボタン：画面中央にゲームタイトルや「スタート」ボタンを配置したいとき
ローディング画面のスピナー：読み込み中アニメーションを画面のど真ん中に置きたいとき
ダイアログのアイコン：警告・確認ダイアログの上部中央にアイコンを配置するとき
空状態（Empty State）の表示：リストが空のときに「アイテムがありません」のメッセージを中央に表示するとき
HUDのクロスヘア：照準などを画面の完全な中央に固定したいとき

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

水平方向だけ中央に揃えて縦位置は変えたくない → HBoxContainer の alignment を CENTER にする方法も検討する
複数の要素を縦に中央揃えしたい → VBoxContainer の alignment 設定や size_flags との組み合わせが向いている

主なプロパティと機能

CenterContainer 固有のプロパティはひとつだけです。シンプルさがこのノードの強みです。

プロパティ	型	役割
`use_top_left`	bool	`true` にすると中央ではなく左上（原点）に配置する。アニメーション起点として使うときに便利

通常は use_top_left を触らず、そのまま使うだけで中央配置が完成します。

コード例：画面全体の中央にスピナーを表示する

# シーン構成例
# CanvasLayer
#   └─ CenterContainer (anchors: Full Rect)
#        └─ AnimatedSprite2D (ローディングアニメーション)

@onready var loading_center: CenterContainer = $CanvasLayer/CenterContainer

func show_loading() -> void:
    loading_center.visible = true

func hide_loading() -> void:
    loading_center.visible = false

コード例：タイトル画面のボタン群を中央に配置する

# シーン構成例
# CenterContainer (anchors: Full Rect)
#   └─ VBoxContainer
#        ├─ Label  ("MY GAME")
#        ├─ Button ("スタート")
#        └─ Button ("設定")

# CenterContainer が VBoxContainer ごと画面中央に固定してくれる
# VBoxContainer 内の並びは VBoxContainer 側で管理するだけでよい

シーンドックのツリー構成例（CenterContainer > VBoxContainer）” style=”max-width:100%;height:auto;”><figcaption>CenterContainer の中に VBoxContainer を挟むことで、複数要素をまとめて中央に配置できる</figcaption></figure>
<h2><span id= — CanvasLayer + CenterContainer でカメラに依存しないローディング表示が作れる

パラメータ・テクニック	変えると何が起きるか
アンカーを「Full Rect」に設定する	親ノードのサイズが変わっても CenterContainer が全面を覆い、常に画面中央を保持する。これが最もよく使う設定
`use_top_left` を `true` に	中央ではなく左上原点に配置される。コードで位置アニメーションを制御する際の基点として使える
MarginContainer と組み合わせる	CenterContainer の外側に MarginContainer を重ねると「中央寄せ＋余白」が同時に実現できる
CanvasLayer の上に置く	カメラの動きに関係なく常に画面中央に固定できる。ローディング画面や全画面ダイアログに最適
`visible` で出し入れする	ローディング・ダイアログなどのオーバーレイを簡単に表示／非表示できる

はじめに

CenterContainerとは？

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

主なプロパティと機能

まとめ

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

コメント