無料・軽快な 2D / 3D 用のゲームエンジン Godot Engine 4 で、ラベルやボタンなどの Control 派生ノードを整列させる Container 派生ノードのシーンで最上位のコンテナの配置をアンカーを用いて設定して、ウィンドウのリサイズに対応させる実装例を紹介します。
コントロールのサイズが小さくならない原因のひとつであるテキストのサイズについても検証しました。
※ GodotEngine 4.3 を使用しています。.NET 版ではありません
前回の記事
前回は、Container 派生ノードの直下に Control 派生ノード（例：ラベル・ボタン）を置くことで、配置方法を指示するフラグを持つ size_flags_horizontal / vertical / stretch_ratio メンバ変数をインスペクタードックに表示しました。
最上位のコンテナにアンカーを設定
画面の右下４分の１のエリアに最上位のコンテナをアンカーを用いて配置します。
コンテナ派生ノード（例：HBoxContainer）の子ノードのコントロール（例：Label, Button) の位置とサイズはコンテナによって管理されるため、2D ワークスペースで子ノードのコントロールのレイアウトを変えることはできません。
しかし、コンテナの最上位（例：HBoxContainer）は、管理するコンテナが上位にないので、2D ワークスペースで位置やサイズを変更でき、アンカーも設定できます。
シーンドックで最上位のコンテナ（例：HBoxContainer）を選択してから、2D ワークスペース上部の矢印アイコンを選択して、そのコンテナをドラッグ＆ドロップなどで移動して、アンカーのドロップダウンリストを開いて「現在の比率に設定」を選択して、移動した場所の矩形にアンカーを設定してみましょう。
上の図では、最上位のコンテナを右下に移動して、その配置の矩形にそってアンカーを設定しました。
ウィンドウのリサイズで位置は変わるけど、サイズは変わらない？
この設定により、最上位のコンテナの位置は右下の矩形に比率で維持されるはずです。
F6 キーで開いているシーンを実行して、ウィンドウをリサイズして、コンテナとその内部のコントロール群の位置やサイズが比率によって変化するかを確認してみます。
結果としては、位置は比率に応じて変わりますが、サイズはほとんど変わりませんでした。
サイズが変わらなかったため、ウィンドウを小さくするとコンテナのコントロール群の右下側がはみだしています。
このサイズがほとんど変わらなかった原因は、ラベルやボタンは指定されたフォントとフォントサイズで、指定されてテキストを表示する際に必要なサイズよりは小さくならないことが考えられます。
そして、ラベルのフォントサイズは自動的には変化しません。
＃ Unity では指定した範囲内で最適なフォントサイズになるようにする設定があったと思います。
ラベルのサイズに合わせてテキストサイズを自動で大きくする : r/godot
Labelsは、利用可能なスペースに合わせてフォントサイズを調整しません。コードで調整する必要があります。
テキストを表示するためにサイズが変わらなかったことの検証
アンカーで設定した比率を無視してサイズが変わらなかった原因が、テキストを表示するためだったことを確認するために、ラベルとボタンに存在するプロパティ clip_text を有効 (true) にして、サイズにおさまる範囲のテキストだけを表示する設定に変更します。
bool clip_text =
falseIf
true, the Label only shows the text that fits inside its bounding rectangle and will clip text horizontally.true の場合、ラベルにはその境界四角形内に収まるテキストのみが表示され、テキストは水平方向にクリップされます。
Label — Godot Engine (4.x)の日本語のドキュメント #clip_textと Google 翻訳
シーンドックで Label, Button ノードを選択して、インスペクタードックのそれぞれの clip_text プロパティをチェックします。
clip_text プロパティをチェックすると、そのコントロールの横幅がほとんど 0 になりました。
これは、テキスト全体を表示する必要がなくなったことで、横幅の最小サイズがほとんど 0 になったためだと思います。
次に、Label, Button ノードのそれぞれの Control クラスの Container Sizing セクションを開いて、 Horizontal プロパティの「拡大 (Expand)」をチェックします。
SizeFlags SIZE_EXPAND =
2Tells the parent Container to let this node take all the available space on the axis you flag. If multiple neighboring nodes are set to expand, they’ll share the space based on their stretch ratio. See size_flags_stretch_ratio. Use with size_flags_horizontal and size_flags_vertical.
フラグを立てた軸上の利用可能なスペースをすべてこのノードに占有するように親コンテナに指示します。複数の隣接ノードが拡張するように設定されている場合、それらのノードは拡張率に基づいてスペースを共有します。 size_flags_stretch_ratio を参照してください。 size_flags_horizontal および size_flags_vertical と一緒に使用します。
Control — Godot Engine (4.3) documentation in English #class-control-constant-size-expand と Google 翻訳
最初から設定されていた SIZE_FILL （塗りつぶし）だけでは、 clip_text を有効にした結果、コントロールの横幅がほぼ 0 になったのは、コントロールが必要なサイズの分だけスペースを占有するだけで、スペースいっぱいに拡張するわけではないためだと推測します。
SizeFlags SIZE_FILL =
1Tells the parent Container to expand the bounds of this node to fill all the available space without pushing any other node. It is mutually exclusive with shrink size flags. Use with size_flags_horizontal and size_flags_vertical.
他のノードをプッシュせずに、このノードの境界を拡張して利用可能なスペースをすべて埋めるように親コンテナに指示します。サイズ縮小フラグとは相互に排他的です。 size_flags_horizontal および size_flags_vertical と一緒に使用します。
Control — Godot Engine (4.3) documentation in English #class-control-constant-size-expand と Google 翻訳
チェックすると、先ほどアンカーで囲った長方形の範囲内で、Label, Button の各ノードが 1:1 の割合で横に広がりました。
これは、 Container Sizing セクションの Streach Ratio がそれぞれ 1 なので、それぞれ同じ割合でそのスペースを占有した結果です。
float size_flags_stretch_ratio =
1.0If the node and at least one of its neighbors uses the SIZE_EXPAND size flag, the parent Container will let it take more or less space depending on this property. If this node has a stretch ratio of 2 and its neighbor a ratio of 1, this node will take two thirds of the available space.
ノードとその隣接ノードの少なくとも 1 つが SIZE_EXPAND サイズ フラグを使用する場合、親コンテナは、このプロパティに応じて、そのノードに必要なスペースを増減させます。このノードの伸縮率が 2 で、隣接するノードの伸縮率が 1 の場合、このノードは利用可能なスペースの 3 分の 2 を占有します。
Control — Godot Engine (4.3) documentation in English#size_flags_stretch_ratio と Google 翻訳
この状態で F6 キーを押してシーンを実行して、ウィンドウをリサイズすると、コンテナに設定したアンカーの割合でサイズも変化するようになりました。
以上で、コンテナの最上位はアンカーで範囲を比率で指定でき、その子ノードのコントロールもできる範囲でそのアンカーで指定したスペースに収まるように変化することが確認できました。
resized シグナルと連動してフォントサイズを自動調整するアイデア
Label, Button などの Control クラスの持つ resized シグナルで、任意の関数を呼び出して、その中で、そのコントロールのサイズに適したフォントサイズに変更する実装について考えました。
フォントサイズの調整自体は、エディタ上で実行する関数を以前に作成しています。
そのフォント自動調整の関数を、アプリ実行時も呼び出すための手順を考えました。
- フォントサイズを変更する関数を持つ gd スクリプトを、プラグインにして、グローバルオブジェクトからアクセスできるようにする。
- フォントサイズを自動調整したいコントロールの resized シグナルと、そのグローバルオブジェクトの関数を接続する。
しかし、resized シグナルは、シグナルを発したオブジェクト自身を引数にしておらず、それを取得する自動変数なども見つけられませんでした。
そうすると、独自のシグナルを作るか、コントロールごとに個別にシグナル受信用の関数を作るか、あらかじめグローバルオブジェクトにノードパスなどを追加しておいてサイズの変化を監視するなど、強引でコストのかかるアーキテクチャに沿っていない実装になると思いました。
そのため、今回は、そのアイデアをここに記述するだけにして機能の実装はしません。
アンカーのプリセットの設定とリサイズ結果について
アンカーのプリセットの設定とリサイズ結果については以下の記事を参照してください。
まとめ
- Container 派生ノードのシーンで最上位の Container ノードを配置する矩形スペースは、アンカーを用いて設定して、ウィンドウのリサイズ時に比率を維持できます。
- Container ノードの子ノードのラベルやボタンなどの Control 派生ノードは、できる限りコンテナのスペース内におさまろうとしますが、テキストを表示するサイズより小さくなりません。
参照サイト Thank You!
- Godot Engine – Free and open source 2D and 3D game engine
- サイズとアンカー — Godot Engine (4.x)の日本語のドキュメント
- Container — Godot Engine (4.3) documentation in English
- HBoxContainer — Godot Engine (4.3) documentation in English
- Control — Godot Engine (4.3) documentation in English
- Control — Godot Engine (4.3) documentation in English #size_flags_horizontal
- Control — Godot Engine (4.3) documentation in English #size_flags_vertical
- Control — Godot Engine (4.3) documentation in English#size_flags_stretch_ratio
- Control — Godot Engine (4.3) documentation in English #class-control-constant-size-expand
- コンテナの使用 — Godot Engine (安定版) の英語ドキュメント
- ラベルのサイズに合わせてテキストサイズを自動で大きくする : r/godot
記事一覧 → Compota-Soft-Press
コメント