GUI 外观定制

哦, 漂亮的GUI!

本教程是关于用户界面的高级外观定制. 大多数游戏一般不需要这个, 因为他们最终只依赖 Label, TextureRect, TextureButtonTextureProgress.

然而, 许多类型的游戏往往需要复杂的用户界面, 如MMO, 传统RPG, 模拟, 战略等. 这类界面在一些游戏中也很常见, 包括创建内容的编辑器, 或网络连接的界面.

Godot的用户界面使用了这些带有默认主题的控件, 但它们可以被换上皮肤, 以类似于几乎任何类型的用户界面.

主题

GUI通过 Theme 资源进行外观定制. 主题包含改变所有控件的整体样式所需的所有信息. 主题选项是命名的, 所以哪个名称更改什么并不明显(尤其是从代码中), 但提供了几个工具. 查看每个控件的每个主题选项的最终地方是 scene/resources/default_theme/default_theme.cpp 文件, 它总是比任何文档都更新及时. 本文档的其余部分将说明用于定制主题的不同工具.

一个主题可以应用于场景中的任何控件. 因此, 所有的子级和孙级控件也将使用相同的主题, 除非在树的下面指定了另一个主题. 如果在一个主题中没有找到一个值, 那么它将在层次结构中朝着根的方向高层主题中搜索. 如果没有找到, 则使用默认主题. 当前系统允许在复杂的用户界面中灵活地重写主题.

注意

不要使用 Project Settings 中的自定义主题选项, 因为主题传播存在已知的错误. 取而代之的是, 将你的主题应用到根控制节点的主题属性中. 它将自动传播到实例场景中. 要想在编辑器中获得正确的实例场景主题, 你还可以将主题资源也应用到实例场景的根节点.

主题选项

一个主题中的每种选项可以是:

  • 整数常量 :一个数值常量,一般用于定义组件的间距和对齐相关设置。

  • 颜色 :单一颜色,具不具备透明度皆可。颜色通常应用于字体和图标。

  • 纹理 :一个单独的图像。纹理并不经常使用,但当它们被使用时,表示复杂控件中的选取手柄或图标(如文件对话框)。

  • 字体 :每个使用文本的控件都可以设置字体用于绘制字符串。

  • 样式盒 :样式盒(Stylebox)是一种资源,用以定义如何绘制不同大小的面板(更多信息见下文)。

每个选项都与以下内容关联:

  • 名称 (选项的名称)

  • 控件 (控件的名称)

示例用法:

var theme = Theme.new()
theme.set_color("font_color", "Label", Color.red)

var label = Label.new()
label.theme = theme
var theme = new Theme();
theme.SetColor("fontColor", "Label", new Color(1.0f, 0.0f, 0.0f));

var label = new Label();
label.Theme = theme;

在上面的例子中, 一个新主题被创建."font_color" 选项被改变, 然后应用于一个标签. 进而, 该标签的文本以及所有子级和孙级标签, 将是红色.

通过使用 Control.add_color_override() 中的重写API, 可以在不直接使用主题的情况下覆盖这些选项, 这只针对特定的控件:

var label = Label.new()
label.add_color_override("font_color", Color.red)
var label = new Label();
label.AddColorOverride("fontColor", new Color(1.0f, 0.0f, 0.0f));

在Godot的内置帮助中(在脚本选项卡中), 你可以查看哪些主题选项是可重写的, 或者查看 Control 类的参考.

自定义控件

如果只需要外观定制少数几个控件, 通常没有必要创建一个新主题. 控件提供其主题选项作为特殊类型的属性(在检查面板上). 一旦勾选, 覆写就会生效:

../../_images/themecheck.png

从上面的图片中可以看出, 主题选项有一些小复选框. 如果选中, 它们可以用来覆盖该控件的主题属性值.

创建主题

创建一个主题的最简单方法是编辑一个主题资源. 从资源菜单中创建一个主题;编辑器随之出现. 之后, 保存它 (例如, 名称为mytheme.theme):

../../_images/sb2.png

这将创建一个空主题, 之后可以将其加载并分配给控件.

示例: 指定一个按钮的主题

下载这些资产(skin_assets.zip )并将它们添加到你的项目中. 打开主题编辑器, 点击 "编辑主题", 选择 "Add Class Items" :

../../_images/themeci.png

然后将出现一个菜单, 提示要创建的控件类型. 选择 "Button":

../../_images/themeci2.png

所有按钮主题选项都将立刻显示在属性面板中, 可以在其中进行编辑:

../../_images/themeci3.png

Styles 中,打开可能显示“空”旁边的“Normal”下拉菜单,选择“新建 StyleBoxTexture”,然后编辑。纹理样式盒包含一个纹理和边距的尺寸,当纹理被拉伸时,边距不会被拉伸。这就是所谓的九宫格或“3x3”拉伸:

../../_images/sb1.png

重复上述步骤并添加其他资源。示例文件中没有提供“Hover”和“Disabled”的图片,因此使用与“Normal”状态相同的样式盒。将提供的字体设置为按钮字体,并将字体颜色更改为黑色。很快地,你的按钮就看起来不同了,并且变得复古:

../../_images/sb2.png

把这个主题保存到 .theme文件中. 转到2D编辑器, 创建几个按钮:

../../_images/skinbuttons1.png

现在, 转到场景的根节点, 找到 "theme" 属性, 用刚刚创建的主题替换它. 它应该看起来像这样:

../../_images/skinbuttons2.png

恭喜咯!您已经创建了一个可反复使用的 GUI 主题!