無料・軽快な 2D / 3D 用のゲームエンジン Godot Engine 4 で、UI シーンに配置した Control 派生クラスのラベルなどのノードの通常時（”normal”）、 GD スクリプトで、枠線（border）を表示する実装例です。
ノードがすでに StyleBoxFlat を設定されているかを確認する処理や、StyleBoxFlat の設定を最優先で反映する関数についても紹介します。
※ GodotEngine 4.3 を使用しています。.NET 版ではありません。
※スクリプトは自己責任でご使用ください。
StyleBox とは
StyleBox は UI 要素の様式化されたボックスを描画するためのクラスです。
今回は UI のノードに枠線を表示するために用います。
StyleBox は、 focus, normal, hover, pressed の各状態ごとに設定します。
UI が選択されている状態である focus が一番優先されます。
今回は、選択されていない、マウスオーバーもしていない、押されてもいない、通常の状態 normal に枠線を表示する StyleBox を設定します。
StyleBox is an abstract base class for drawing stylized boxes for UI elements. It is used for panels, buttons, LineEdit backgrounds, Tree backgrounds, etc. and also for testing a transparency mask for pointer signals. If mask test fails on a StyleBox assigned as mask to a control, clicks and motion signals will go through it to the one below.
StyleBox は、UI 要素の様式化されたボックスを描画するための抽象基本クラスです。これは、パネル、ボタン、LineEdit の背景、Tree の背景などに使用され、またポインタ信号の透明マスクをテストするためにも使用されます。コントロールにマスクとして割り当てられた StyleBox でマスク テストが失敗した場合、クリックとモーション信号はその下を通過します。
Note: For control nodes that have Theme Properties, the
focusStyleBox is displayed over thenormal,hoverorpressedStyleBox. This makes thefocusStyleBox more reusable across different nodes.注: テーマ プロパティを持つコントロール ノードの場合、focus StyleBox は
StyleBox — Godot Engine (4.3)の日本語のドキュメント と Google 翻訳normal、hover、またはpressedStyleBox の上に表示されます。これにより、フォーカス StyleBox がさまざまなノード間で再利用可能になります。
(StyleBox is displayed over thenormal,hoverorpressedStyleBox. の翻訳部分だけ太字部分を固有名詞として修正)
Control 派生ノードに枠線を表示するスクリプト例
以下は、引数で渡した Control 派生クラスのオブジェクト（シーンのボタンのノードなど）の normal 状態の StyleBox を取得して、枠線（border）を表示するように override のスタイルに設定する静的関数です。
## [StyleBox] (normal) の override スタイルを一部設定して、[param control] に
## 枠線を描画します。背景色は透明になります。
## [param control] 枠線を表示するスタイルに変更する対象の [Control] ノードです。
## [param width] 枠線のピクセル単位の太さです。
## [param color] 枠線の色です。
## 設定を除去する場合は [method Control.remove_theme_stylebox_override]
## を使用してください。
## [codeblock]
## control.remove_theme_stylebox_override("normal")
## [/codeblock]
static func set_stylebox_normal_override_frame(control: Control, width: int = 2, color: Color = Color(1, 1, 1)) -> void:
# コントロールが現在持っている StyleBox を取得します。
var original := control.get_theme_stylebox("normal")
var stylebox: StyleBoxFlat
if original is StyleBoxFlat:
# コントロールの持つ StyleBox の一部を変更して、その周囲に枠線を表示します。
stylebox = original.duplicate()
else:
# コントロールが StyleBox を持たない場合は、新規に作成したものを割り当てます。
stylebox = StyleBoxFlat.new()
# 枠線を StyleBox に設定します。
stylebox.set_border_width_all(width)
stylebox.border_color = color
stylebox.bg_color = Color(0, 0, 0, 0) # 背景色 = 透明
# コントロールの StyleBox (一番優先される override のスタイル) を上書きします。
control.add_theme_stylebox_override("normal", stylebox)
return
control オブジェクトに設定されている StyleBox は、get_theme_stylebox メンバ関数に、StyleBox が割り当てられている状態を表す “normal” を指定して取得します。
StyleBox get_theme_stylebox(name: StringName, theme_type: StringName = &””) const
Returns a StyleBox from the first matching Theme in the tree if that Theme has a stylebox item with the specified
nameandtheme_type.そのテーマに指定された名前とテーマタイプを持つスタイルボックス項目がある場合、ツリー内で最初に一致するテーマからスタイルボックスを返します。
Control — Godot Engine (4.3)の日本語のドキュメント #get-theme-stylebox と Google 翻訳
もしも、control オブジェクトが normal 状態の StyleBoxFlat を設定されていない場合は、新たに StyleBoxFlat を生成して割り当てます。
By configuring various properties of this style box, you can achieve many common looks without the need of a texture. This includes optionally rounded borders, antialiasing, shadows, and skew.
Setting corner radius to high values is allowed. As soon as corners overlap, the stylebox will switch to a relative system.
このスタイル ボックスのさまざまなプロパティを構成すると、テクスチャを必要とせずに多くの一般的な外観を実現できます。これには、オプションで丸い境界線、アンチエイリアス、シャドウ、およびスキューが含まれます。
コーナー半径を大きな値に設定することは可能です。角が重なるとすぐに、スタイルボックスは相対システムに切り替わります。
StyleBoxFlat — Godot Engine (4.3)の日本語のドキュメント と Google 翻訳
StyleBoxFlat オブジェクトのメンバ変数に、枠線（border）の幅や色を設定します。
その StyleBoxFlat オブジェクトを add_theme_stylebox_override メンバ関数で、状態 “normal” を指定して設定します。
void add_theme_stylebox_override(name: StringName, stylebox: StyleBox)
Creates a local override for a theme StyleBox with the specified
name. Local overrides always take precedence when fetching theme items for the control. An override can be removed with remove_theme_stylebox_override.指定された名前のテーマ StyleBox のローカル オーバーライドを作成します。コントロールのテーマ項目を取得するときは、ローカル オーバーライドが常に優先されます。オーバーライドは、remove_theme_stylebox_override で削除できます。
Control — Godot Engine (4.3)の日本語のドキュメント #add-theme-stylebox-override と Google 翻訳
結果の確認
シーンに配置した Control 派生クラスのノード（ラベルやボタンなど）を、前述の自作関数 set_stylebox_normal_override_frame の第一引数に渡して処理を行うと、枠線を表示するスタイルに変更しました。
※新規シーンに対象となる UI を追加して、ルートノードに割り当てた GD スクリプトの _ready イベント関数で、ノードを $Label のように指定して自作関数に渡しています。
※実行は、 F6 キーで、作成したシーンを実行するだけです。結果は出力ボトムパネルに表示されます。
normal 状態の override に設定した StyleBox の除去
前述の add_theme_stylebox_override メンバ関数の説明にあるように、設定したオーバーライドの削除は remove_theme_stylebox_override メンバ関数で行います。
引数 name には、先ほど指定した状態と同じ “normal” を指定します。
void remove_theme_stylebox_override(name: StringName)
Removes a local override for a theme StyleBox with the specified
Control — Godot Engine (4.x)の日本語のドキュメント #remove-theme-stylebox-override と Google 翻訳namepreviously added by add_theme_stylebox_override() or via the Inspector dock.
まとめ
- GodotEngine4 の UI シーンに配置した Control 派生クラスのラベルなどのノードを、GD スクリプトの自作関数に渡して枠線（border）を表示しました。
- 枠線を表示するために StyleBoxFlat を Control の add_theme_stylebox_override メンバ関数で設定しました。
参照サイト Thank You!
- Godot Engine – Free and open source 2D and 3D game engine
- StyleBox — Godot Engine (4.3)の日本語のドキュメント
- StyleBoxFlat — Godot Engine (4.3)の日本語のドキュメント
- Control — Godot Engine (4.x)の日本語のドキュメント
- Control — Godot Engine (4.3)の日本語のドキュメント #get-theme-stylebox
- Control — Godot Engine (4.3)の日本語のドキュメント #add-theme-stylebox-override
- Control — Godot Engine (4.x)の日本語のドキュメント #remove-theme-stylebox-override
記事一覧 → Compota-Soft-Press
コメント