無料・軽快な 2D / 3D 用のゲームエンジン Godot Engine 4 で、複数の UI でそのデザインを共有できる Theme (テーマ) リソースの、ボタンの状態ごとの外観を設定するリソースの１つ StyleBoxTexture を用いて、ボタンの背景に指定した画像を表示させる設定の手順を紹介します。
※ GodotEngine 4.3 を使用しています。.NET 版ではありません。
前回の記事
前回は、テーマリソースを編集して、ボタンのフォント、フォントサイズ、フォントのアウトラインの色と幅、ボタンの状態に応じた背景色、フォントカラーを設定する手順を紹介しました。
ボタンに画像を表示させるテーマリソースを編集
ファイルシステムドックで、作成済みのテーマリソースファイルをダブルクリックして、テーマ下パネルを開きます。
パネルの左上のコントロールピッカーボタンを押してから、「デフォルトのプレビュー」タブ内で編集したい UI （例ではボタン）をクリックすると、パネル内の右側にその UI （例ではボタン）の編集項目のタブ群が表示されます。
テーマリソースファイルの作成については以下の記事を参照してください。
ボタンの背景画像を StyleBoxTexture リソースで設定
さまざまな UI の外観を設定できる Theme（テーマ）リソース内で、ボタンの背景画像を設定するには、ボタンの各状態（通常時やマウスオーバー時など）の項目で StyleBoxTexture リソースを割り当て、その StyleBoxTexture リソース内の Texture プロパティに画像ファイルを設定します。
ボタンに背景画像を設定したいテーマリソースファイルを開いたテーマ下パネルで、コントロールピッカーでボタンを選択して、右側のパネルの右から２番目のカラフルなタブを開きます。
さまざまな状態でボタンが同じ画像を表示するために以下の複数の項目に、同じ StyleBoxTexture リソースを設定します。
- focus: フォーカスがある状態
- hover: ボタンの上にマウスカーソルがある状態
- normal: 通常時
- pressed: ボタンが押されている状態
はじめに normal（通常の状態）のボタンの背景画像を設定します。
normal 項目の＋ボタンを押して「アイテムを上書き」状態にして編集可能にします。
※初期状態に戻す場合は、そのあとに表示されるゴミ箱アイコンのボタンをクリックします。
表示された▽ボタンを押します。
StyleBox 派生のリソースを選択して割り当て、外観をそのリソースで設定できます。
今回は、画像を設定できる「新規 StyleBoxTexture」を選択します。
以上で、normal 状態のボタンの背景画像を設定できるようになりました。
割り当てた StyleBoxTexture の枠をクリックして、インスペクタードックにそのリソースのプロパティを表示させます。
ファイルシステムドックの画像ファイルを、インスペクタードックの StyleBoxTexture リソースの Texture プロパティにドラッグ＆ドロップして設定します。
Texture プロパティに設定すると、テーマ下パネルの「デフォルトのプレビュー」タブで、ボタンの背景にその画像が表示されていることを確認できます。
テスト
このテーマリソースをボタンノードに割り当てて、 F6 キーでそのシーンを実行すると、設定した画像がボタンの背景に表示されました。
しかし、マウスカーソルをボタンの上においた hover 時などの設定はデフォルトから変えていないため、状態によってボタンに画像が表示されません。
今回はここまで
無料・軽快な 2D / 3D 用のゲームエンジン Godot Engine 4 で、複数の UI でそのデザインを共有できる Theme (テーマ) リソースと、ボタンの状態ごとの外観を設定するリソースの１つ StyleBoxTexture を用いて、ボタンの背景に指定した画像を表示させる設定の手順を紹介しました。
後半では、今回ボタンの画像を設定した StyleBoxTexture リソースをファイルに保存して、それの他の状態でも読み込ませ、マウスオーバー時やボタンを押したときなども、同じ画像を常にボタンに表示させます。
参照サイト Thank You!
- Godot Engine – Free and open source 2D and 3D game engine
- Xユーザーのビッグカツといか姿フライのすぐる【公式】さん: 「使いどころは思いつきませんが、フリー素材としてどうぞご自由にお使いくださいませ！ https://t.co/8F9q3hS02b」 / X
- しょかきうたげ【フリーフォント版あり】 – ぼんのう堂 – BOOTH
- Label — Godot Engine (4.x)の日本語のドキュメント
- Button — Godot Engine (stable) documentation in English
- Theme — Godot Engine (4.x)の日本語のドキュメント
- StyleBox — Godot Engine (4.x)の日本語のドキュメント
- StyleBoxEmpty — Godot Engine (4.x)の日本語のドキュメント
- StyleBoxFlat — Godot Engine (4.x)の日本語のドキュメント
- StyleBoxLine — Godot Engine (4.x)の日本語のドキュメント
- StyleBoxTexture — Godot Engine (4.x)の日本語のドキュメント
記事一覧 → Compota-Soft-Press
コメント