GUI 蒙皮¶

哦，漂亮的GUI！¶

本教程是关于用户界面的高级蒙皮。大多数游戏通常不需要这个，因为它们最终只依赖于 Label ， TextureRect ， TextureButton 和 TextureProgress .

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

Godot的用户界面使用这些类型的控件和默认主题，但是它们可以被剥皮，类似于任何类型的用户界面。

主题¶

图形用户界面通过 Theme 资源。主题包含更改所有控件的整个视觉样式所需的所有信息。主题选项是命名的，所以不清楚哪个名称会改变什么（尤其是代码），但提供了几个工具。查看每个控件的每个主题选项的最终位置是文件，它总是比任何文档都要更新。 scene/resources/default_theme/default_theme.cpp . 本文档的其余部分将解释用于自定义主题的不同工具。

主题可以应用于场景中的任何控件。因此，所有子控件和孙子控件也将使用相同的主题（除非在树下进一步指定另一个主题）。如果在主题中找不到值，则将在层次结构中更高层的主题中搜索该值，并将其指向根。如果未找到任何内容，则使用默认主题。这个系统允许在复杂的用户界面中灵活地覆盖主题。

主题选项¶

主题中的每种选项可以是：

整数常量 ：单个数值常量。通常用于定义组件之间的间距或对齐方式。
一种颜色 ：单一颜色，有或没有透明度。颜色通常应用于字体和图标。
质地：单个图像。纹理通常不被使用，但当它们被使用时，它们表示在复杂控件（如文件对话框）中拾取的句柄或图标。
字体：每个使用文本的控件都可以分配用于绘制字符串的字体。
样式框 ：StyleBox是一种资源，用于定义如何绘制不同大小的面板（稍后将详细介绍）。

每个选项都与：

名称（选项的名称）
控件（控件名称）

示例用法：

var t = Theme.new()
t.set_color("font_color", "Label", Color(1.0, 1.0, 1.0))

var l = Label.new()
l.set_theme(t)

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

var l = new Label();
l.SetTheme(t);

在上面的示例中，将创建一个新主题。“字体颜色”选项被更改，然后应用于标签。因此，标签（以及所有子标签和孙子标签）将使用该颜色。

通过在 Control.add_color_override() ：

var l = Label.new()
l.add_color_override("font_color", Color(1.0, 1.0, 1.0))

var l = new Label();
l.AddColorOverride("fontColor", new Color(1.0f, 1.0f, 1.0f));

在godot的内联帮助（在脚本选项卡中）中，可以检查哪些主题选项是可重写的，或者检查 Control 类引用。

自定义控件¶

如果只需要剥皮几个控件，则通常不需要创建新主题。控件将其主题选项作为特殊类型的属性提供。如果选中，将进行覆盖：

如上图所示，主题选项几乎没有复选框。如果选中，则可以仅为该控件重写主题的值。

创建主题¶

创建主题的最简单方法是编辑主题资源。从资源菜单创建主题；编辑器将立即出现。之后，保存它（例如，使用名称mytheme.theme）：

这将创建一个空主题，稍后可以加载并分配给控件。

示例：设置按钮主题¶

拿走一些资产 (skin_assets.zip ）转到“主题”菜单并选择“添加类项目”：

将出现一个菜单，提示要创建的控件类型。选择“按钮”：

立即，所有按钮主题选项将显示在属性编辑器中，可以在其中进行编辑：

从 Styles ，打开“Normal”下拉菜单，它可能会说“null”，并创建一个“New StyleBoxTexture”，然后编辑它。纹理样式框基本上包含纹理和纹理拉伸时不会拉伸的边距大小。这称为“3x3”拉伸：

重复这些步骤并添加其他资产。示例文件中没有悬停或禁用的图像，因此使用与正常情况相同的样式框。将提供的字体设置为按钮字体，并将字体颜色更改为黑色。很快，您的按钮将看起来不同和复古：

将此主题保存到.theme文件。转到二维编辑器并创建几个按钮：

现在，转到场景的根节点并找到“theme”属性，将其替换为刚刚创建的主题。应该是这样的：

祝贺你！您已经创建了一个可重用的GUI主题！