無料・軽快な 2D / 3D 用のゲームエンジン Godot Engine 4 で、ボタンやラベルなどの UI 用のノードの位置・サイズを比率で管理するアンカーを、垂直伸長（左、中央、右）・水平伸長（上、中央、下）・ Rect 全面のアンカーのプリセットを用いて設定する手順と、そのシーンを実行してウィンドウをリサイズした際の各ラベルノードの変化について紹介します。
※ GodotEngine 4.3 を使用しています。.NET 版ではありません。
※スクリプトは自己責任でご使用ください。
前回の記事
前回は、各ラベルノードのアンカーに上下左右・四隅・中央のプリセットを設定する手順と、ウィンドウをリサイズした際の変化について紹介しました。
アンカーのプリセットを設定するとラベルのサイズも変化します
ラベルノードに、垂直伸長・水平伸長・ Rect 全面のアンカープリセットを設定するとサイズが変化します。
例では垂直伸長（左）のプリセットをラベルノードに設定します。
左側に配置したラベルノードに「左伸長」のアンカープリセットを設定すると、テキストが表示できる最小のサイズに横幅が小さくなり、縦幅は画面サイズと同じ縦幅になりました。
以下は、アンカーが全て初期状態の左上原点の設定のラベルを配置したシーンを実行して、ウィンドウをリサイズした際の動画です。
※ F6 キーで開いているシーンを実行できます。
ウィンドウをリサイズしても、ラベルの位置や大きさは変化しません。
垂直伸長のアンカープリセットの設定とリサイズ確認
ウィンドウの縦幅に合わせて伸びる、垂直伸長（左、中央、右）のアンカープリセットを３つのラベルノードに設定します。
2D ワークスペース上部の「コントロールノードのアンカーおよびオフセットの値のプリセット」ドロップダウンを開いて、「アンカーのプリセット」で垂直伸長（左、中央、右）プリセットを、各ラベルノードに設定します。
設定すると、ノードの縦幅はウィンドウの横幅と同じになり、横幅はテキストを表示できる最小のサイズになりました。
アンカーは右・中央、左の上下の端に設定されました。
アンカーのプリセットを設定した後に F6 キーで開いているシーンを実行します。
以下は、垂直伸長（左、中央、右）のアンカープリセットを設定した各ラベルノードを配置したウィンドウをリサイズした際の動画です。
ウィンドウサイズに合わせて、比率に応じてラベルノードの位置とサイズが変化しています。
水平伸長のアンカープリセットの設定とリサイズ確認
ウィンドウの縦幅に合わせて伸びる、水平伸長（上、中央、下）のアンカープリセットを３つのラベルノードに設定します。
2D ワークスペース上部の「コントロールノードのアンカーおよびオフセットの値のプリセット」ドロップダウンを開いて、「アンカーのプリセット」で水平伸長（上、中央、下）プリセットを、各ラベルノードに設定します。
設定すると、ノードの横幅はウィンドウの横幅と同じになり、縦幅はテキストを表示できる最小のサイズになりました。
アンカーは上・中央、下の左右の端に設定されました。
アンカーのプリセットを設定した後に F6 キーで開いているシーンを実行します。
以下は、水平伸長（上、中央、下）のアンカープリセットを設定した各ラベルノードを配置したウィンドウをリサイズした際の動画です。
ウィンドウサイズに合わせて、比率に応じてラベルノードの位置とサイズが変化しています。
Rect 全面のアンカープリセットの設定とリサイズ確認
ウィンドウ全体に合わせて伸びる、Rect 全面のアンカープリセットをラベルノードに設定します。
2D ワークスペース上部の「コントロールノードのアンカーおよびオフセットの値のプリセット」ドロップダウンを開いて、「アンカーのプリセット」で Rect 全面プリセットを、ラベルノードに設定します。
設定すると、ノードのサイズがウィンドウサイズと同じになりました。
アンカーはウィンドウの四隅に設定されました。
アンカーのプリセットを設定した後に F6 キーで開いているシーンを実行します。
以下は、Rect 全面のアンカープリセットを設定したラベルノードを配置したウィンドウをリサイズした際の動画です。
ウィンドウサイズに合わせて、比率に応じてラベルノードの位置とサイズが変化しています。
まとめ
- アンカーのプリセットである垂直伸長（左、中央、右）・水平伸長（上、中央、下）・ Rect 全面をラベルノードに設定した際のサイズ・位置・アンカー位置の変化と、実行してウィンドウをリサイズした際のラベルのサイズ・位置の変化を確認しました。
参照サイト Thank You!
- Godot Engine – Free and open source 2D and 3D game engine
- サイズとアンカー — Godot Engine (4.x)の日本語のドキュメント
- Godot Control Node (UI) Masterclass – YouTube
記事一覧 → Compota-Soft-Press
コメント