Godot 游戏引擎/UI 皮肤指南

Godot 游戏引擎指南

<-- 多人游戏 UI 皮肤 导出-->

跳到底部

UI 皮肤允许您将游戏的 UI（用户界面）变成比默认更漂亮的东西。按钮和面板的默认样式是一个难看的灰色阴影。但是您可以将其更改为复杂纹理作为背景。您是否会走得这么远取决于游戏、您的时间和您的艺术技能。

使用主题进行基本皮肤

为此，我们首先创建一个主题。您需要使用文件系统创建一个新的资源。搜索 主题。

保存后，将打开一个坞站，允许您预览主题。看起来很单调，对吧？

让我们先让按钮看起来不错。点击编辑主题，然后选择添加类项。不要与添加类项混淆。

在弹出窗口的“类型”下，键入按钮。然后按添加全部。

在检查器中，您将看到一个名为“按钮”的属性类别。展开它。展开子类别“颜色”和“样式”。将“正常”的样式设置为一个新的 StyleBoxFlat。您可以更改的一些更常见的事情是

背景颜色
圆角（值越高，曲线越大）
边框宽度和边框颜色
阴影
内容边距（边框和内容之间的边距）
扩展边距（在按钮的边界框之外扩展样式的边距，而不会增加其大小 - 您只能通过单击边界框本身内部的区域与按钮交互）

随意更改样式！请记住选择一个适合您游戏的单一造型主题，例如复古或科幻。

您可以更改的不仅仅是按钮。但只对需要的 UI 元素进行皮肤，而不是每个 Control 派生节点。

完成后，转到项目 -> 项目设置 -> GUI -> 主题，并将自定义值设置为新创建主题的路径。保存，然后播放您的主菜单场景。

使用主题进行高级皮肤

不要使用 StyleBoxeFlat，而要使用 StyleBoxeTexture。这允许使用图像而不是样式框。您还可以设置某些 Control 节点元素的图标，例如数字编辑中的“增加”和“减少”按钮以及文本编辑中的“清除”按钮。

自定义 UI 事件

一些游戏在单击按钮时会显示炫酷的效果，例如淡出菜单。这里有一些建议

单击更改场景的按钮时，请考虑在更改场景之前将屏幕淡出几分之一秒，然后将新场景淡入。整个过程应该在十分之一秒或更短的时间内完成。它应该微妙而快速，否则您可能会让玩家感到厌烦，因为 UI “加载”，理论上这可能在一瞬间完成。这是一个代码示例

extends Control
# main_menu.gd

func _on_play_button_up():
  # screen_blocker should be a hidden Control node placed on top all the other UI elements
  $screen_blocker.show() # This stops you clicking any more buttons and causing weird stuff afterwards
  for _i in range(20):
    modulate.a -= .2
    yield(get_tree().create_timer(.002), "timeout")
  get_tree().change_scene("Target scene here")