Godot4 ボタンの背景画像の色味を変更＆ Paint．NET画像を白黒化

無料・軽快な 2D / 3D 用のゲームエンジン Godot Engine 4 で、複数の UI でそのデザインを共有できる Theme (テーマ) リソースの中の項目で、ボタンに背景画像を設定できる StyleBoxTexture リソースを設定して、その背景画像の色味を変更する手順と、Paint.NET で画像をモノクロにする手順を紹介します。

※ GodotEngine 4.3 を使用しています。.NET 版ではありません。

前回の記事
色味を変える画像をモノクロにする
Modulate Color を設定
まとめ
参照サイト Thank You!

前回の記事

前回は、テーマリソースの、ボタンの状態ごとの外観を設定する StyleBoxTexture リソースを使って、ボタンの背景画像を設定する手順を紹介しました。

今回は、この画像の色味を変更させる手順を紹介します。

色味を変える画像をモノクロにする

色味を変えやすくするため、元の画像をモノクロに変換します。
今回は無料で利用できるレタッチソフト Paint.NET を使用します。

画像は、ビッグカツのフリー素材を使用しました。
背景を透明にする手順は以下の記事を参照してください。

Paint.NET を起動して、画像ファイルをドラッグ＆ドロップして編集画面に画像を開きます。

メニュー「調整」→「白黒」を選択します。

画像がモノクロに変わりました。

メニュー「ファイル」→「名前を付けて保存」を選択して別のファイルに保存します。
形式は、不透明度を扱える png 形式にしました。

ファイルタイプ用設定ダイアログで OK ボタンを押します。

モノクロになった画像がファイルに保存されました。

Modulate Color を設定

白黒にした画像ファイルを、GodotEngine4 のエディタのファイルシステムドックの任意のフォルダ（例では res://）にドラッグ＆ドロップして、プロジェクトに追加します。

前回までに設定した StyleBoxTexture の画像ファイルを、白黒の画像ファイルに置き換えるためテーマリソースのボタンの normal 項目の StyleBoxTexture リソースファイルを選択して、インスペクタードックでそのリソースを開きます。

インスペクタードックの Texture プロパティに、ファイルシステムドックの白黒の画像ファイルをドラッグ＆ドロップします。

Godot4 StyleBoxTexture リソースのTextureにモノクロ画像を設定します.

白黒の画像を Texture プロパティに設定したら、その色味を変えるために、 Modulate セクションの Color プロパティを変更します。
このプロパティは、 StyleBoxTexture リソースの modulate_color プロパティを指します。

Modulates the color of the texture when this style box is drawn.
このスタイル ボックスが描画されるときにテクスチャの色を調整します。
StyleBoxTexture — Godot Engine (4.x)の日本語のドキュメント #modulate-color

Modulate セクションの Color プロパティの色の枠をクリックして、色を選択するポップアップを表示して、Texture に設定した画像の色味を変えましょう。

Godot4 StyleBoxTexture リソースのmodulate_colorプロパティで画像の色味を変更します１.

テーマリソースファイルをあらかじめ割り当てておいたボタンを 2D ワークスペースで表示すると、 modulate_color プロパティの色を選択するたびにリアルタイムで画面にその色味のボタンが表示されます。
※テーマ下パネルの「デフォルトのプレビュー」画面の UI でも確認できます。