Attention: Here be dragons

This is the latest (unstable) version of this documentation, which may document features not available in or compatible with released stable versions of Godot.

使用主題編輯器

本文說明如何使用 Godot 編輯器及其主題編輯器工具來建立和管理 UI 主題。我們建議你在開始前,先閱讀 GUI 換膚入門,熟悉 GUI 換膚/主題化的基本概念。

主題編輯器是一個位於底部的面板工具,當選取 Theme 資源進行編輯時會自動啟動。它提供新增、移除和調整主題型別與主題項目的必要介面,並內建即時預覽區,讓你可以即時測試變更。此外還有視窗對話框,可批次處理主題項目。

建立主題

和其他資源一樣,你可以在檔案系統面板中直接建立主題:右鍵選擇「新增資源...」,然後選擇「Theme」並點擊「建立」。這對於建立整個專案共用的主題特別有用。

主題也可以從任何控制節點建立。於場景樹中選取控制節點後,在屬性面板尋找 theme 屬性,然後選擇「新建 Theme」。

../../_images/new_theme.webp

這樣會建立一個空主題並開啟主題編輯器。請注意,這種方式建立的資源預設會與場景綁定。你可以利用右鍵選單,將新主題另存為檔案。

雖然主題編輯器提供管理主題型別與項目的功能,但主題也包含預設的備用字型,你只能透過屬性面板編輯。同樣,像 StyleBoxes 和圖示等複雜資源內容,也會在屬性面板中開啟編輯。

../../_images/default_font.webp

主題編輯器總覽

../../_images/theme_editor.webp

主題編輯器分為兩個主要部分。主要編輯器位於 Godot 編輯器底部,讓使用者可以快速建立、編輯、刪除主題型別和項目,並透過視覺化工具選擇與變更控制元件,抽象底層主題概念。另一個「管理主題項目」對話框,則方便進行主題的手動管理,也常用於建立自訂的編輯器主題。

主題預覽

主編輯器左側是一組預覽分頁。預設會顯示「預設預覽」分頁,內含多數常用控制元件的各種狀態。預覽是可互動的,所以也能預覽中間狀態(如滑鼠懸停)。

../../_images/default_preview.webp

你可以從專案內任意場景新增更多分頁。該場景的根節點必須是控制節點,才能作為預覽。點擊「新增預覽」按鈕,再從檔案系統選擇已儲存的場景,即可新增分頁。

../../_images/scene_preview.webp

如果你變更了場景內容,預覽不會自動更新。需要點擊工具列上的重新載入按鈕,才會同步更新預覽。

你也可以利用預覽快速選取要編輯的主題型別。從工具列選取吸管(選取器)工具,將滑鼠移至預覽區域時,會高亮顯示控制節點。被高亮的控制節點會顯示其類別名稱或型別變體(如有)。點擊高亮的控制項即可在右側開啟並編輯。

../../_images/theme_preview_picker.webp

主題型別與項目

主題編輯器右側會列出當前主題資源中的主題型別,以及所選型別的詳細內容。型別下的項目清單會分成多個分頁,分別對應主題中的不同資料型別(如顏色、常數、樣式等)。啟用「顯示預設」選項時,每個內建型別的預設主題值會以灰色顯示;若未啟用,則只顯示目前主題內的項目。

../../_images/theme_type_editor.webp

你可以點擊項目旁的「覆蓋」按鈕,將預設主題的個別項目加入到當前主題。也可以點擊「全部覆蓋」按鈕,一次覆蓋目前主題型別下的所有預設項目。被覆蓋的屬性可用「移除項目」按鈕刪除。你也能用「重新命名項目」更名屬性,或於下方文字輸入框新增自訂屬性。

已覆蓋的主題項目可直接在右側面板中編輯,除非它們是資源類型。資源項目會有簡易的操作介面,但必須在屬性面板中編輯。

../../_images/theme_item_inspector.webp

樣式盒有個獨特功能,你可以將清單中的某個樣式盒釘選。被釘選的樣式盒會成為同類型的代表,當你修改它的屬性時,其餘同類型的樣式盒也會同步更新。這讓你能同時編輯多個樣式盒的屬性。

../../_images/theme_pin_the_stylebox.webp

除了可從預覽中選取主題型別,也能手動新增。點擊型別列表旁的加號會開啟「新增型別」選單。你可以從清單中選擇型別,或自行輸入名稱建立自訂型別。文字輸入框同時也可過濾控制節點清單。

../../_images/add_item_type.webp

管理與匯入項目

點擊「管理項目」按鈕會開啟「管理主題項目」對話框。

../../_images/manage_items_button.webp

在「編輯項目」分頁中,你可以檢視及新增主題型別,並檢視與編輯所選型別的主題項目。

../../_images/manage_items.webp

你可以點擊相應的「新增 X 項目」並指定名稱,來建立、重命名或刪除個別主題項目。你也可以依資料型別(以清單中的畫筆圖示)或屬性類型批次刪除項目。「移除類別項目」會移除你針對控制節點型別自訂的所有內建主題項目。「移除自訂項目」會移除所選型別下的全部自訂主題項目。最後,「全部移除項目」會將該型別下所有項目清空。

在「匯入項目」分頁中,你可以從其他主題匯入主題項目。可從 Godot 預設主題、Godot 編輯器主題或其他自訂主題匯入。你可以選擇匯入單一或多個項目,並決定是否一併複製其資料。有多種選取與取消選取項目的方式,包括手動、依階層、依資料型別或全部選擇。若選擇包含資料,會直接複製所有主題項目到你的主題。若忽略資料,則僅建立對應型別與名稱的項目,但保持內容為空,相當於建立一個主題範本。

../../_images/import_items.webp