Zenn
🎨

Godotエディタの見た目を変更する

2024/02/25に公開
Godot
tech

Godotエディタの見た目をデフォルトから変更する手順です。

変更後の見た目


変更後の見た目

インタフェーステーマの変更

インタフェース全体の見た目を変更するには、インタフェーステーマの変更をします。

まず、メニューの「エディター」→「エディター設定」から、エディター設定画面を開きます。

「インタフェース」の「テーマ」からインタフェースの見た目の変更ができます。
「プリセット」から好みのテーマに変更することもできますし、"Custom" を選択して自分色に変更することができます。

インタフェーステーマの編集

テキストエディターテーマの変更

テキストエディターの見た目を変更するには、テキストエディターテーマの変更をします。

同じく、メニューの「エディター」→「エディター設定」から、エディター設定画面を開きます。

「テキストエディター」の「テーマ」からテキストエディターの見た目の変更ができます。
「カラーテーマ」から好みのテーマに変更することができますが、プリセットがほとんどありません。

テキストエディターテーマの編集

テキストエディターテーマのDL

ちまちま「シンボルの色」などを自分好みに編集してもいいですし、めんどくさい場合はgithubで公開されているテーマをDLして適用することもできます。
https://github.com/godotengine/godot-syntax-themes/tree/master

上記URLから好みのテーマの 〇〇〇.tet ファイルをDLします。
その後、Macユーザなら Library/Application\ Support/Godot/text_editor_themes に
Windowsユーザなら %APPDATA%\Godot\text_editor_themes\ に
〇〇〇.tet を置くと、エディター設定のカラーテーマにそのテーマが現れるようになるのでそれを選択すると適用されます。


〇〇〇.tet を置いた例

テキストエディターテーマの自作

自分は最初↑URLの存在を知らなくて、ちまちま「シンボルの色」などを変更してどうにか保存できないか探っていてそのときテーマを自作しました。
https://github.com/tkmfujise/Godot-text_editor_theme

ちまちま「シンボルの色」などを変更すると、その変更が Macユーザなら Library/Application\ Support/Godot/editor_settings-4.tres、Windowsユーザなら%APPDATA%\Godot\editor_settings-4.tres に保存されます。(たぶん)

その中に text_editor/ で始まる設定があります。
ここを抜き出して xxx.tet ファイルとして保存し、上記 text_editor_themes フォルダに入れてあげれば「カラーテーマ」のプルダウンから選択できるようになります。

editor_settigns-4.tres
(略)
text_editor/theme/highlighting/symbol_color = Color(0.992157, 1, 0.603922, 1)
text_editor/theme/highlighting/keyword_color = Color(0.6, 0.521569, 1, 1)
text_editor/theme/highlighting/control_flow_keyword_color = Color(0.956863, 0.686275, 0.258824, 1)
(略)

ただし、そのまま抜き出すのではなく、text_editor/theme/highlighting などの頭の文字は除去する必要があります。
また、Color() で設定されている部分は #FFFFFFFF のように16進数の表記に変更する必要があります。

editor_settigns-4.tres
text_editor/theme/highlighting/symbol_color = Color(0.992157, 1, 0.603922, 1)

↓

xxx.tet
symbol_color = "#FDFF9AFF"

Rubyでスクリプトを書いてColor()を置換しました。

# Godotの画面上でテーマを「Custom」にして色をいじると、
# ~/Library/Application\ Support/Godot/editor_settings-4.tres
# に、
# text_editor/theme/highlighting/control_flow_keyword_color = Color(0.168627, 0, 0.992157, 1)
# のような形で格納されていた。
# "text_editor/theme/" 以下だけ抜き出すのはテキストエディタで簡単にできたが、
# "Color(1, 1, 1, 1)" のところは "#FFFFFFFF" のように16進数表記にしないといけないらしかったので以下スクリプトで変換した。

require 'active_support/all'

path = "~/path/to/Custom.tet.backup"

str = File.read(path)
new_str = str.gsub(/([\d.]+)/){|_|
  match = Regexp.last_match
  (match[1].to_f * 255).to_i.to_s(16).upcase.rjust(2, "0")
}.gsub(/Color\((.+)\)/){|_|
  match = Regexp.last_match
  '"' + "\##{match[1].remove(/[,\s]/)}" + '"'
}

File.write(path.remove(/\.backup$/), new_str)

以上
Godotのデフォルトの見た目が好みじゃない人の参考になればうれしいです。

Discussion