样式设置

images/StyleHeader.png

本页面的内容:

当通过 UMG 创建您的 UI 屏幕时,排布各种元素的布局仅仅是第一步。对于每个按钮、状态条、文本框等,UMG 的 详情 面板中都提供了可以直接分配的数个“样式”选项,这些选项将影响这些对象的显示方式。

下列各个控件都使用了 样式 选项,但它们各自的样式选项可能有所不同:

状态

在很多情况下,尤其对于交互式控件而言,您可能希望根据各个控件交互方式或所处条件的不同,需要它们具备不同的外观。例如,假设您的屏幕上有一个正常显示的按钮,当将鼠标悬停在此按钮上方时,按钮的颜色会发生变化或者按钮按一定规律闪烁,而点击按钮时又会执行完全不同的操作。我们将这种现象称为 状态,这是一种最常见的设定样式的形式,用于根据控件当前所处的状态来指定控件的显示方式。

Style1.png

上图中,按钮控件会根据正常、按下、光标悬停或禁用这些不同的状态而发生变化。大部分控件都将使用正常、按下、光标悬停和禁用状态,但根据您使用的控件类型,也可能有更多选项可用。

设置图像状态

对于每种状态,您都可以为控件设置要使用的 图像纹理材质 资产)。图像大小 是指平板单元中资源的大小,而 绘制为 选项使用 9 个缩放框,用于指定以 方框边框图像 的形式绘制图像。

每种形式的示例如下图所示:

BoxExample.png BorderExample.png BoxAndImage.png
方框 边框 图像

基于纹理的图像

您可以指定纹理作为图像资产,但也可以设置一些旗标,以便在每种设备上清晰地显示纹理并避免出现压缩失真。在“细节层次”下的“纹理编辑器”中,将 Mip Gen 设置 设为 NoMipmaps,并将 LOD 组 设为 UI。在“压缩”下,将 压缩设置 设为 TC 编辑器图标

点击查看全图。

基于材质的图像

针对图像状态,也可以将材质指定为图像资产,但您需要更改一些设置。在“材质”中,需要在 详情 面板的 使用 下勾选 用于 UI 复选框。这将会为平板专门编译另一个着色器。您还需要仅输出 放射颜色

点击查看全图。

动态材质

要修改材质参数,您需要一个 动态材质实例。只要图像控件具有带材质的平板刷功能,您可以向其请求动态图像(只需要创建一次,然后对其进行缓存即可),从而轻松实现这一目的。

UMG_Auto_Dynamic_Material_Image.png

着色/边距

在每种状态下,还有为图像 着色 的选项,用于向与状态相关的图像应用着色颜色。还有一个 边距 选项,您可以使用该选项来输入 方框边框 绘制模式的边距尺寸(在图像模式中,会忽略边距)。

填充

填充 样式选项是指围绕控件创建的边框。

Padding.png

例如,在针对方框按钮的上图中,正常填充 负责绘制按钮背景图像中的边框。应用它时,按钮内容将与按钮的边框齐平显示。按下填充 与正常填充相同,但它表示的是按下按钮时所应用的填充方式。

根据您使用的控件类型,可能会提供不同的 填充 选项。

音效

可根据控件所处的状态为控件设置 音效

Sounds.png

允许应用音效的大部分控件都使用光标悬停或按下音效事件,即在光标悬停在控件上方时或点击控件时会播放指定的音效。在针对复选框控件的上图中,存在相关选项,可以为 选中取消选中 以及 光标悬停 状态设置音效事件。

根据您使用的控件类型,可能会提供不同的 音效 选项。

渲染转换

RenderTransformMenu.png

在控件 详情 面板的 渲染转换 部分下,提供有更多样式设置选项,它们可用于修改您控件的外观。利用渲染转换设置,您可以 平移缩放修剪旋转 您的控件,还可以调整它的 枢轴 点。

下图给出了 渲染转换 设置的示例。

RenderTransforms.png

每个渲染转换设置都可以被设为关键帧,这让您能够通过动画功能来修改它们,而同时由于可以通过蓝图来修改它们,因此您能够在用户执行游戏操作期间或根据用户的操作来进行修改。渲染转换与布局转换是相对的,并且并不会被它们的父操作所裁剪(例如,如果您有一个布满按钮的滚动框,那么调整“渲染转换”中的“平移”设置会将按钮推出它们所在的框)。

相关页面