編輯器圖示

當建立了新的類別,並將新類別暴露給腳本使用時,編輯器的界面上會為該類別顯示一個預設的圖示,用來代表這個類別所繼承的基礎類別。在大多數情況下,為了提升使用者體驗,我們建議為新類別加上圖示。

建立圖示

要建立新圖示,必須要先安裝一個向量圖編輯器。舉例來說,可以使用開放原始碼的 Inkscape 編輯器。

Clone 包含了所有編輯器圖示的 godot 儲存庫:

git clone https://github.com/godotengine/godot.git

自定圖示必須要是 SVG 格式的向量圖。主要需符合兩個需求:

  • 圖示必須為 16×16。在 Inkspace 中,可以在 [File] > [Document Properties] 中設定文件大小。

  • 線條應儘可能吸附至像素點上,以在低 DPI 下保持清晰。可以通過在 Inkscape 中建立 16×16 的網格來讓這個過程更輕鬆。

處理好圖示的設計後,就可以將圖示保存在剛才 Clone 的儲存庫中的 editor/icons 資料夾。該資料夾的名稱與預期的名稱保持大小寫一致。如,為 CPUParticles2D 建立圖示時,檔名應為 CPUParticles2D.svg

為亮色編輯器主題調整色彩

若使用者使用亮色主題的編輯器,則 Godot 會依據 一組預定義的色彩映射 來轉換顏色。這樣可以確保圖示使用適當的對比度來顯示。請儘量將圖示的調色盤限制在上表中的顏色。否則,圖示在亮色背景下可能會難以閱讀。

圖示最佳化

由於編輯器會在載入時期對 SVG 進行一次算繪,因此需要保持 SVG 在一定的大小內,這樣才能被有效率地解析。編輯器圖示必須要在加進引擎前先進行最佳化。要最佳化圖示,請:

  1. svgcleanerReleases 分頁 中下載二進位執行檔,並將其放置於 PATH 環境變數的路徑中。

  2. 執行下列指令,並將 svg_source.svg 取代為 SVG 檔的路徑 (可以是相對或絕對路徑):

    svgcleaner --multipass svg_source.svg svg_optimized.svg
    

--multipass 開關可以用來改進壓縮,因此請務必加上這個旗標。經過最佳化的圖示會被保存為 svg_optimized.svg 。也可以將目標參數改為任何相對或絕對路徑。

備註

雖然最佳化這步驟不會太明顯地影響圖示的品質,但依然會移除一些如參考線等只有編輯器會用到的資訊。因此,如果未來還有需要修改 SVG 的話,建議保留原始檔案。

整合與分享圖示

若是要參與貢獻 Godot 引擎本身,則應該開啟 Pull Request 來將最佳化過的圖示加到主儲存庫的 editor/icons 中。重新編譯引擎即可讓 Godot 找到用於該類別的新圖示。

另外也可以在模組內建立自定圖示。若是要建立自定模組而不是要整合到 Godot 內,就不需要另外為圖示開 Pull Request 來讓圖示在編輯器裡可見,因為這些圖示都是自封閉的。

有關如何建立模組圖示,請參考 Creating custom module icons

疑難排解

若圖示沒出現在編輯器中,請確認:

  1. 各個圖示的名稱是否有符合前述要求。

  2. 有啟用 modules/svg (預設應該有啟用)。沒有 SVG 模組,圖示就完全不會出現在編輯器內。