Godot4 UIノードにアンカープリセットを設定する手順とリサイズ結果1/2

無料・軽快な 2D / 3D 用のゲームエンジン Godot Engine 4 で、ボタンやラベルなどの UI 用のノードの位置・サイズを比率で管理するアンカーを、上下左右・四隅・中央の９つのアンカーのプリセットを用いて設定する手順と、そのシーンを実行してウィンドウをリサイズした際の各ラベルノードの変化について紹介します。

※ GodotEngine 4.3 を使用しています。.NET 版ではありません。
※スクリプトは自己責任でご使用ください。

アンカーを「現在の比率に設定」
ウィンドウをリサイズして各ラベルの変化を確認
アンカープリセットを設定した際のリサイズの挙動
関連記事
まとめ
参照サイト Thank You!

アンカーを「現在の比率に設定」

例として以下の構成のシーンを用います。
※メニュー「シーン」→「新規シーン」で、シーンドックに表示される「ユーザーインターフェース」を選択すると Control がルートノードのシーンが作成されます。

Control
- Label × 9 (上下左右、四隅、中央）

ラベルに背景色を設定するため Control クラスの Theme に新規テーマファイルを共通で割り当てて、 Label の normal の色を変更し、フォントサイズを 16 から 32 に変更しました。

テーマファイルによる背景色などの設定については以下の記事を参照してください。

Godot4 UIノードにアンカープリセットを設定する手順とリサイズの結果1_1

2D ワークスペース上部の「コントロールノードのアンカーおよびオフセットの値のプリセット」ドロップダウンを開いて、「アンカーのプリセット」で、上下左右・四隅・中央の各ラベルノードに対応するプリセットを設定します。

Instead of manually adjusting the offset and anchor values, you can use the toolbar’s Anchor menu, above the viewport. Besides centering, it gives you many options to align and resize control nodes.

オフセットとアンカーの値を手動で調整する代わりに、ビューポートの上にあるツールバーのアンカーメニューを使用できます。中央揃え以外にも、コントロールノードの位置合わせやサイズ変更を行うための多くのオプションが提供されます。
サイズとアンカー — Godot Engine (4.x)の日本語のドキュメントと Google 翻訳

シーンドックで中央上に配置する LabelTopCenter ラベルノードを選択して、アンカーのプリセットの「中央上」を選択すると、左上にあった４つの緑色のアンカーが中央上の一点に移動しました。

Godot4 UIノードにアンカープリセットを設定する手順とリサイズの結果1_2

ノードの位置は、アンカーのプリセットを選択すると、その位置に寄せられました。

例えば、右下に配置するラベルノードを右下から少し離れた位置に配置します。

Godot4 UIノードにアンカープリセットを設定する手順とリサイズの結果1_3

その状態で、アンカーのプリセットで右下を選択すると、ラベルノードがアンカーのプリセットと同じ右下に寄せられました。

Godot4 UIノードにアンカープリセットを設定する手順とリサイズの結果1_4

ウィンドウをリサイズして各ラベルの変化を確認

F6 キーを押して現在のシーンを実行して、ウィンドウをリサイズした際に９か所に配置したラベルノードがどのように変化するかを確認します。

はじめに、アンカーのプリセットを設定していない状態で試します。
初期状態では各ラベルノードのアンカーはすべて左上を指しています。

Godot4 UIノードにアンカープリセットを設定する手順とリサイズの結果1_5

ウィンドウをリサイズしても、各ラベルノードの位置・サイズは変化しません。

Godot4 UIノードにアンカープリセットを設定する手順とリサイズの結果1_6

ウィンドウサイズを大きくしても、各ラベルノードは変化せず、右側と下側に余白ができました。

Godot4 UIノードにアンカープリセットを設定する手順とリサイズの結果1_7

以下は、上記の一連のウィンドウのリサイズを撮影した動画です。

アンカープリセットを設定した際のリサイズの挙動

次に、アンカーのプリセットを各ラベルノードに設定したシーンを F6 キーで実行してウィンドウをリサイズします。
※アンカーのプリセットは、各ラベルノードの配置に対応したものを設定しています。例えば、右下に配置されている BottomRight のラベルノードには、右下のプリセットを設定しています。

ウィンドウを小さくすると、それに応じて、各ラベルノードが比率を維持して表示されます。