虚幻4（兼容4.18）官方文档整理翻译UMG按钮风格

当你通过UMG创建你的UI，安排并且设计好你的元素仅仅是个开始,你的元素是每一个按钮，条等东西，这里有许多的风格选项能直接能通过UMG的细节面板来进行直接的设置。

每一个控件都依赖于风格选项

• Button

• Check Box

• Editable Text Box

• Multi Line Editable Text Box

• Progress Bar

• Size Box

• Slider

• Spin Box

• Text Block

• Combo Box (String)

• Editable Text

• Multi Line Editable Text

按钮

复选框

可编辑的文本框

可编辑的多行文本框

进度条

调整大小框

滑块

数字调整框

文本块

组合框（字符串）

可编辑的文本

可编辑的多行文本

States

这里可能有很多例子，特别是交互控件，你想要让你的控件有一个不一样的外形，当然，这控件基于你想让他怎么交互或者它在什么样的条件下显示。 例如，你有一个按钮，当鼠标覆盖上去（这是条件），改变颜色，或者跳动，然后点击整个按钮会发生巨大变化。，我们把它称为状态States, 这是最常用的形式自定义风格操作，并且允许你指定当前控件的显示样式（它基于当前的状态state）。



如上所述，按钮控件有这么几种状态：（平时状态）Normal,（点击） Pressed,（鼠标覆盖） Hovered, or Disabled（失去功能后） States.大多数控件都是只有这么几种状态，还有些控件有自己的特殊选项与状态。

设置图像状态

每一个状态，你都能设置一个图像image（ Texture or Material纹理或者贴图）让控件来使用它，图像尺寸涉及到在slate units的资源的尺寸和draw as的选项，图中用的是box，允许你指定这个image的形式到底是一个box还是边框border，或者一张图。

刚才说的那几个例子如下图

Image



上面为box



上面为broder



上面为image

• box绘制为一个 3x3 的box盒子， 边缘和中心基于边缘蓝色虚线按照黄色箭头伸展。

• 绿色箭头代表根据边距乘图像大小所得出的常数值。

• border会绘制一个 3x3 的边框，其中根据边距（蓝色虚线）来确定侧面的图块（橙色箭头所指）。

• broder使用边框选项时不会绘制中间部分。

• 绿色箭头代表根据边距乘图像大小所得出的常数值。

• 图像 将绘制图像并进行拉伸（橙色箭头所指），并且会忽略边距。

基于图像的纹理

您可以指定纹理作为图像资产asset，但也可以设置一些旗标，以便在每种设备上清晰地显示纹理并避免出现压缩失真。在“细节层次”下的“纹理编辑器”中，将 Mip Gen (这个东西是每个资源特别的mip-map属性，例如锐化，内核的size)设置 设为 NoMipmaps，并将 LOD 组（group） 设为 UI。在“压缩”下，将 压缩设置 compression setting设为 TC 编辑器图标tc editor icon。



基于材质的图像

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



动态材质

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



着色/边距

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

填充

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



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

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

音效

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



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

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

渲染转换



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

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



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

有很大部分与官方相同，但是博主进行了少许修改，经测试完全适用于4.18，所以不用担心过时