Cave: 游戏用户界面 (Game UI) 系统
自定义 UI 样式
Lesson 5 of 6 • 10 XP
Keep your place in this quest
Log in or sign up for free to subscribe, follow lesson progress, and access more learning content.
在本课中,您将学习如何自定义 Cave Engine 中 UI 元素的视觉外观。
我们将看到如何修改样式属性,如颜色、透明度、图像、模糊,以及如何为您的项目创建新的 UI 样式。
UI 样式很有用,因为它们允许您在多个 UI 元素之间重用相同的视觉配置。这使得保持界面一致和有序变得更容易。
1. UI 样式
默认情况下,当您在 Cave Engine 中创建一个 UI 元素默认 时,它已经分配了一个 UI 样式。
这个样式称为 默认样式。

此样式负责定义 UI 元素的初始外观。
您可以在 内容浏览器 中的 接口 文件夹内找到它。

这意味着对 默认样式 进行的任何更改都会自动影响所有使用该样式的 UI 元素,前提是通过 样式覆盖 属性实现。
因此,最好将 默认样式 保持为 Cave Engine 的默认界面样式,并为您自己的项目自定义创建一个新的 UI 样式。
这样,您可以在不意外更改仍使用默认样式的每个元素的情况下,修改 UI 元素的外观。

选择 UI 元素,然后在 样式覆盖 属性中,将 默认样式 替换为刚创建的新 UI 样式。
现在,这个 UI 元素将使用您的自定义样式而不是默认样式。

要编辑样式,请单击 UI 样式字段旁边的铅笔图标。
您还可以直接在 内容浏览器 中选择样式文件以打开样式编辑器。

2. 自定义
在 UI 样式编辑器中,您可以自定义元素的视觉属性。
9-切片缩放 选项允许您在不扭曲边框和角落的情况下调整 UI 元素的大小。
启用后,元素被划分为九个区域。四个角总是保持相同大小,边框仅在一个方向上拉伸,而仅中心区域可以自由调整大小。
这对于创建面板、窗口、对话框、按钮和其他需要支持不同大小的接口元素,同时保持其视觉质量是非常有用的。
没有 9-切片缩放,调整按钮或面板的大小可能会拉伸整个图像并扭曲角落。使用 9-切片缩放,元素可以在保持边框清晰的同时变得更大或更小。
-
在 图像 选项中,您可以从计算机加载纹理,以用作 UI 元素的视觉外观。
-
颜色 允许您更改应用于 UI 元素的颜色。它就像覆盖在元素使用的图像上的颜色叠加,使您无需编辑原始纹理即可修改其外观。
-
透明度 控制 UI 元素的透明度级别。更高的值使元素更加不透明,而较低的值则使其更加透明。
-
模糊 为 UI 元素后面的背景应用模糊效果。这对于菜单、弹出窗口、暂停屏幕、对话窗口和需要从游戏场景中突出的面板很有用。

相同的设置也可以应用于 UI 元素的 悬停 和 点击 状态。
这意味着您可以为每个交互状态定义特定的图像、颜色、透明度和模糊值。
例如,按钮在闲置时可能具有一种颜色,当鼠标悬停在其上时变得更明亮,点击时又会改变。
这为玩家提供了清晰的视觉反馈,使界面感觉更加响应和完善。

此时,您现在了解了 UI 样式如何控制 Cave Engine 中 UI 元素的外观。
通过创建您自己的样式,而不是直接编辑默认样式,您可以保持项目的有序性,重用视觉配置,并构建具有一致外观的界面,涵盖菜单、按钮、面板和 HUD 元素。