使用主题编辑器

本文介绍如何通过 Godot 编辑器及其主题编辑器工具来创建并管理 UI 主题。我们推荐您在开始前先阅读 GUI 皮肤的介绍,熟悉一下 GUI 换皮/主题背后的基本知识。

主题编辑器是底部面板工具,当一个 Theme 资源被选中进行编辑时,面板会自动激活。面板包含了添加、删除和调整主题类型和主题项目的必要用户界面。面板有一个预览区,用于测试你做出的变化,以及一个窗口对话框,用于对主题项目进行批量操作。

创建主题

和其他任何资源一样,主题可以直接在文件系统面板中创建:右键,选择新建资源...,然后选择 Theme 并点击创建。用来创建项目范围的主题很方便。

也可以在任何控件节点中创建主题。在场景树中选择控件节点后,找到检查器中的 theme 熟悉。然后就可以选择新建 Theme

../../_images/new_theme.png

这样就会创建一个空主题,并且打开主题编辑器。请记住,这样创建的资源默认是和场景绑定的。可以使用上下文菜单将新建的主题保存为单独的文件。

虽然主题编辑器提供了管理主题类型和项目的工具,主题也包括默认的备用字体,你只能使用检查器面板来编辑。这同样适用于复杂的资源类型的内容,如样式盒和图标——它们会在检查器中打开编辑。

../../_images/default_font.png

主题编辑器概览

../../_images/theme_editor.png

主题编辑器有两个主要部分。主要的主题编辑器位于Godot编辑器的底部,为用户提供了快速创建、编辑和删除主题项目和类型的工具。它提供了挑选和改变控件的可视化工具,抽象了底层的主题概念。另一方面,管理主题项目对话框,提供解决手动改变主题的需求。其对于创建新的编辑器主题时很有用。

主题预览

主编辑器左侧的是一组预览选项卡。默认预览选项卡默认可见,里面有处于各种状态的大多数常用控件。预览是可交互的,所以也可以预览中间状态(比如鼠标悬停)。

../../_images/default_preview.png

可以使用你自己项目中的任意场景创建更多的选项卡。场景的根节点必须是控件节点才能进行预览。点击添加预览按钮然后从文件系统中选择已保存的场景,就可以添加一个新的选项卡。

../../_images/scene_preview.png

对场景的修改不会自动反映到预览中。更新预览需要点击工具栏上的重新加载按钮。

还可以使用预览快速选择要编辑的主题类型。点击工具栏上的吸管按钮,将鼠标悬停到预览区域就可以将控件节点高亮。高亮的控件节点会显示类名。点击高亮的控件就可以将它在右侧打开并编辑。

../../_images/theme_preview_picker.png

主题类型与项目

The right-hand side of the theme editor provides a list of theme types available in the edited theme resource, and the contents of the selected type. The list of type's items is divided into several tabs, corresponding to each data type available in the theme (colors, constants, styles, etc.). If the Show Default option is enabled, then for each built-in type its default theme values are displayed, greyed out. If the option is disabled, only the items available in the edited theme itself are displayed.

../../_images/theme_type_editor.png

通过点击项目旁边的Override按钮,可以将默认主题中的个别项目添加到当前主题中。你也可以通过点击Override All按钮来覆盖所选主题类型的所有默认项目。然后可以用Remove Item按钮移除被覆盖的属性。属性也可以用Rename Item按钮重命名,完全自定义的属性可以用它下面的文本字段添加到列表中。

覆盖的主题项目可以直接在右侧面板中编辑,除非它们是资源。资源具有可用的基本控件,但必须在检查器栏中进行编辑。

../../_images/theme_item_inspector.png

样式盒子有一个独特的功能,您可以在其中固定列表中的单个样式盒子。固定样式盒子就像包头一样,当您更改其属性时,所有相同类型的样式盒子都会随之更新。这允许您同时编辑多个样式盒子的属性。

../../_images/theme_pin_the_stylebox.png

虽然可以从预览中选择主题类型,但也可以手动添加。单击类型列表旁边的加号按钮可以打开添加项目类型菜单。在菜单中,可以从列表中选择一种类型,也可以输入任意名称来创建自定义类型。文本字段过滤控件节点列表。

../../_images/add_item_type.png

管理与导入项目

单击Manage Items按钮会打开Manage Theme Items对话框。在Edit Items选项卡中,您可以查看和添加主题类型,以及查看和编辑所选类型的主题项目。

../../_images/manage_items.png

你可以通过点击相应的 Add X Item 并指定其名称,创建、重命名和删除单个主题项目。你也可以按数据类型(使用列表中的画笔图标)或按质量批量删除主题项。Remove Class Items将删除你为一个控制节点类型定制的所有内置主题项目。Remove Custom Items将删除所选类型的所有自定义主题项目。**Remove All Items**将删除该类型的所有项目。

Import Items选项卡,你可以从其他主题导入主题项目.你可以从Godot默认主题导入项目,如Godot编辑器主题或者其他自定义主题.你可以导入单个或多个项目并选择导入或忽略他们的数据.有几种选择项目的放大,包括手动、按结构层次、按数据类型等等.选择包括数据将复制所有项目到你的主题.忽略数据将创建具有相应数据类型和名称的项目,但是他们会保存为空,以所指定的方式创建了模板.

../../_images/import_items.png