GUI 外观定制

哦,漂亮的GUI!

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

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

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

主题

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

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

注意

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

主题选项

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

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

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

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

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

  • 风格箱: 风格箱是一种资源, 用以定义如何绘制不同大小的面板 (之后见更多信息).

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

  • 名称 (选项的名称)

  • 控件 (控件的名称)

示例用法:

GDScript

C#

  1. var theme = Theme.new()
  2. theme.set_color("font_color", "Label", Color.red)
  4. var label = Label.new()
  5. label.theme = theme
  1. var theme = new Theme();
  2. theme.SetColor("fontColor", "Label", new Color(1.0f, 0.0f, 0.0f));
  4. var label = new Label();
  5. label.Theme = theme;

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

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

GDScript

C#

  1. var label = Label.new()
  2. label.add_color_override("font_color", Color.red)
  1. var label = new Label();
  2. 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 中,打开可能显示 “null” 旁边的 “Normal” 下拉菜单,创建一个 “New StyleBoxTexture” ,然后编辑它.一个纹理样式盒子包含一个纹理和边距的尺寸,当纹理被拉伸时,边距不会被拉伸.这就是所谓的九宫格或 “3x3” 拉伸:

../../_images/sb1.png

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

../../_images/sb2.png

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

../../_images/skinbuttons1.png

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

../../_images/skinbuttons2.png

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