UI・コンテナ

ColorRectは、指定した色で塗りつぶした矩形を表示するノードです。暗幕やフェード演出、HPゲージの土台としての活用法を解説します。

ゲームのUI上に画像を表示したいとき、まず手を伸ばすのが TextureRect です。背景画像・アイコン・カードのイラストなど、UIに貼り付ける「画像ノード」として幅広く使われます。

SubViewportContainerは、子のSubViewportの映像をUIコントロールとして表示するコンテナです。画面内ミニゲームなどの実装方法を解説します。

AspectRatioContainerは、指定した縦横比を保ちながら子ノードのサイズを自動調整するUIコンテナです。ミニマップなどの実装方法を解説します。

CenterContainerは、子ノードをコンテナの中央に自動配置するUIコンテナです。アンカー調整なしでセンタリングする方法を解説します。

VSplitContainerは、2つの子ノードを上下に並べ、ドラッグ可能な仕切りで比率を変えられるUIコンテナです。上下2分割レイアウトの実装方法を解説します。

MarginContainerは、子ノードの四辺に余白を加えるUIコンテナです。CSSのpaddingに相当する、UIの見栃えを整える方法を解説します。

アイテム欄にアイコンをずらっと並べたとき、画面端でうまく折り返してほしいのに、はみ出てしまった——そんな経験はありませんか？ FlowContainer はその折り返しを自動でやってくれるコンテナです。

HSplitContainerは、2つの子ノードを左右に並べ、ドラッグ可能な仕切りで比率を変えられるUIコンテナです。左右2分割レイアウトの実装方法を解説します。

ファイルブラウザやコードエディタのような「左にリスト、右に詳細」という2ペイン構成のUIを作りたいとき、SplitContainer が活躍します。ドラッグで仕切りを動かせるリサイザブルなレイアウトを、数ステップで実現できるノードです。