UDN
Search public documentation:

StyleEditorUserGuideCH
日本語訳
한국어
Interested in the Unreal Engine?
Visit the Unreal Technology site.

Looking for jobs and company info?
Check out the Epic games site.

Questions about support via UDN?
Contact the UDN Staff

UI风格编辑器用户指南

文档概要：使用UnrealUI风格编辑器套件控制UI风格的指南。

由Maury Mountain创建。由Richard Nalezynski? 进行维护。

简介

本文档描述了如何使用虚幻UI风格编辑器的主要功能。

当您在自定义您的用户界面时，使用您UI页面中的风格可以为您节省很多时间和精力，它为您提供了一个查看您UI视觉外观的集中区域。风格的作用和网页开发中的Cascading Style Sheets (CSS)类似，允许您设置文字及图片的预定义外观和属性，并把它们应用到整个UI中。和CSS类似，如果您更改了特定风格的属性，将会在它当前分配了该风格的所有控件上进行更新。

使用风格编辑器

创建风格

当您创建风格时，可以创建者三种类型中的一种，为它们设置Friendly Names(友好的名称)、Unique Tag (唯一的标签)和组，以便可以在UI编辑器中进行更好地组织和管理，设置这个风格将要使用的UI状态，配置它的属性，然后您可以在风格编辑器中预览风格的最终效果。

风格编辑器概述

编辑器布局

在风格编辑器中有三个不同的部分：

您可以根据您正在使用的风格的类型来查看这些部分的作用。

使用风格

风格类型

Text Style(文本类型)

风格类型仅接受一种字体类型。风格将会找到当前包中存在的所有字体类型，并允许您把它们非配给风格。

StyleEditor_Text.jpg

1-3 Naming section(命名区域) 1&2应该是一样的，用于保持事物的一致性(一个在代码中进行引用、一个在UI编辑器中引用)。3是组名称，它也将出现在UI编辑器中的右击弹出的分配风格菜单中。
4 Widget state boxes (控件状态框) 选中那个复选框来把那个风格的那个状态设置为“打开”状态。如果没有选中复选框，控件将不会改变，或者它将默认地使用它父项的风格。每种状态可以分别地进行编辑，或者通过按下SHIFT键并选择它们来同时选中多个状态，然后编辑风格中的值。
5 Text Styles(文本风格) 您可以选择Existing (现有的)或者Custom(自定义)风格，Existing (现有风格)意味着combo style(组合风格)根据之前创建的文本风格进行设置，Custom(自定义)意味着您正在为这种风格特地设置文本。
6 Text Options(文本选项) 仅当选择“Custom(自定义)”时才会出现这个选项。设置字体、字体颜色、alpha 、剪辑模式、剪辑对齐、总体对齐(水平及垂直)、它的缩放设置、总体的X/Y缩放比例、字符间距、行间距以及空间左侧和顶部的留白。
7 Preview (预览) 基于文本选项的文本预览框。基于文本输入进行改变。

Image Style(图片风格)

接受图片及材质输入，用于分配给图片控件以及控件的图片元素。

StyleEditor_Image.jpg

1-3 Naming section (命名部分) 1&2应该是一样的，来保持食物的一致性(UniqueTag用于在代码中引用、FriendlyName用于在UI编辑器中引用)。注意"FriendlyName"名称可以包含空格，但是UniqueTag不能包含空格。3是组名称，它也将出现在UI编辑器中的右击弹出的分配风格菜单中。
4 Widget state boxes (控件状态框) 选中那个复选框来把那个风格的那个状态设置为“打开”状态。如果没有选中复选框，控件将不会改变，或者它将默认地使用它父项的风格。每种状态可以分别地进行编辑，或者通过按下SHIFT键并选择它们来同时选中多个状态，然后编辑风格中的值。
5 Image Color settings(图片颜色设置) 用于定义和图片相乘的颜色，或者调整它的总体透明度(不需要DXT5贴图)。黑色的贴图将不会接受颜色改变。
6 Texture definition (贴图定义)  
7 Texture Settings(贴图设置) 细分为Horizontal(水平方向) and Vertical(垂直方向)，您可以设置贴图如何进行缩放、如何分配贴图(???从来不使用这种方式，也许仅对Clipped(剪辑)或Clamped(区间限定)描画模式有用)、控件的边之间的留白或者通过在Sample Position和Sample Size (U, UL, V, VL)中输入值来使用自定义UVs创建风格。
8 Preview(预览) 您的图片的预览，显示了前面部分设置的值。注意，这不是贴图定义，将不会把贴图分配给风格。

Combo Styles(组合风格)

这是一种全面的风格；允许您在一个风格中设置字体及图片风格。当设置Combo Styles(组合风格)的字体和图片属性时，您可以或者定义一个先前创建的Text (文本)或 Image Style(图片风格)来进行应用。或者您可以自定义它，基于您的需要来设置风格。

StyleEditor_Combo.jpg

1-3 Naming section(命名区域) 1&2应该是一样的，用于保持事物的一致性(一个在代码中进行引用、一个在UI编辑器中引用)。3是组名称，它也将出现在UI编辑器中的右击弹出的分配风格菜单中。
4 Widget state boxes (控件状态框) 选中那个复选框来把那个风格的那个状态设置为“打开”状态。如果没有选中复选框，控件将不会改变，或者它将默认地使用它父项的风格。每种状态可以分别地进行编辑，或者通过按下SHIFT键并选择它们来同时选中多个状态，然后编辑风格中的值。
5 Text Styles(文本风格) 您可以选择Existing (现有的)或者Custom(自定义)风格，Existing (现有风格)意味着combo style(组合风格)根据之前创建的文本风格进行设置，Custom(自定义)意味着您正在为这种风格特地设置文本。
6 Text Options(文本选项) 仅当选择“Custom(自定义)”时才会出现这个选项。设置字体、字体颜色、alpha 、剪辑模式、剪辑对齐、总体对齐(水平及垂直)、它的缩放设置、总体的X/Y缩放比例、字符间距、行间距以及空间左侧和顶部的留白。
7 Image Styles(图片风格) 使combo style (组合风格)基于先前制作的图片风格进行设置，或者创建针对Combo Style(组合风格)的自定义设置。
8 Texture Settings(贴图设置) 细分为Horizontal(水平方向) and Vertical(垂直方向)，您可以设置贴图如何进行缩放、如何分配贴图(???从来不使用这种方式，也许仅对Clipped或Clamped描画模式有用)、控件的边之间的留白或者通过在Sample Position和Sample Size (U, UL, V, VL)中输入值来使用自定义UVs创建风格

风格命名及分组

Friendly Name(友好的名称)

友好的名称文本域中的文字是出现在皮肤编辑器?中的名称，并且是当您为组件分配风格时要选择的名称。名称中不能有空格和特殊字符，并且它是一种简单的用于辨别及区分风格的方法。

Unique Tag(唯一标签)

这个名称必须是唯一的。它可以和友好名称相同，但是它不能包含空格或者特殊字符。如果需要，这个标签将会在代码中被引用。

Group Name(组名称)

您可以把您的所有风格分组为自定义组进行管理。在皮肤编辑器中，导航到Group Tab(组标签)，右击并使用唯一的名称创建一个新组。然后那个组的名称将会出现在风格编辑器的下拉菜单中。当您为控件分配一个风格时，您会注意到关联菜单中将出现在那个组的名称，它被包含在括弧内([组名称])，并且那个组中的所有风格将会出现在子菜单中。

Style Properties风格属性

三种类型的风格共享着类似的属性。图片和文本具有特有的属性，并且在combo style(组合风格)中将会出现相同的属性。对于风格属性来说很重要的一点是每个状态有它们独立的属性。如果您启用了Active(激活)、Disabled(禁用)、Enabled(启用)、Focused(聚焦)以及Pressed(押下)状态，如果您想影响所有状态，您可以按住SHIFT键选中所有状态并改变它们的属性。否则，您可以为设立每个独立的状态，使它具有自己的外观。

文本选项

Font(字体): 从您游戏中当前加载的字体中进行选择。当在编辑器中找到Package.Group.Name时，字体将会出现。

Style Color(风格颜色): 打开颜色轮来为那个状态分配一个颜色。

Alpha Value(Alpha值):设置状态的alpha值，范围为0-300。如果您想在启动UI时有后期特效，那么使得值在100以上将会是字体“发光”。

Clipping Mode(剪切模式): 为那个字体选择剪切模式。

Overdraw(超出描画): 超出控件尾部的字符串将会继续描画到控件的边界之外，直到字符串结束。

Clipped(剪切): 将会基于控件的大小剪切掉字符串尾部的字符串。

Ellipse(省略号): 如果字符串到达了控件边界，在字符串的尾端添加“…”。

Wrapped(自动换行): 如果字符串到达了控件的边界，在文本每行的尾部会转到下一行。

Clipping Alignment(剪切对齐): 靠 左侧/顶部、中央或者 右侧/底部 进行剪切。

Alignment H/V(对齐H/V): 设置风格的文本对齐方式沿水平坐标轴及垂直坐标轴对齐。

Scale to fit(缩放来适应控件): 根据需要，设置它可以自动地缩放字符串。最小缩放比率用于高速风格不要对地域指定值的字体进行缩放。

Scale X/Y(缩放X/Y): 输入0-1之间的值，可以进行非统一缩放。

Spacing Chars/Lines(字间距/行间距): 指出风格的字间距及行间距的像素值。接受子像素值。

Padding H/V(H/V留白): 在字符串的所有侧增加输入值的像素数。H将会添加到字符串的开头和结尾，V将会被增加到字符行的顶部和底部。

图片选项

Color/Alpha(颜色/透明度): 设置分配给风格的图片的颜色。注意： 当在图片风格中使用材质时，颜色/透明度必须应用于材质本身，而不是应用于风格。

Default Texture(默认贴图): 通过使用绿色的箭头来为这个文本域分配一个贴图或材质。

Image Alignment(图片对齐): 图片的在空间中的对齐方式，包括左对齐、中间对齐、右对齐。

Adjustment Type(调整类型): 当在UI scene上描画控件时设置图片如何在控件中进行缩放。

Clipped(剪切): 将会剪切掉控件边界以外的图片。

Scaled(缩放): 将会基于控件的大小进行缩放，控件定义了图片的形状及外观。

Uniformly Scaled(均匀缩放):

Bound(边界):

Stretched(拉伸): 将会拉伸贴图的中间像素，并基于照片的初始分辨率来保持图片的左上角、右上角和左下角、右下角。

Sample Position/Size(样本位置/大小): 允许您应用自定义UV坐标到贴图上，和/或挑选出贴图的特定区域。

列表风格

UI列表使用风格，但是列表本身需要4种不同的风格使的列表状态正常工作。

UI列表控件本身有5个状态，Active(激活)、Disabled(禁用)、Enabled(启用)、Focused(聚焦)和Pressed(押下)。在UI List (UI列表)中，单元本身有它们自己的风格。每个单元需要有Normal(正常)、Mouse Over(鼠标在其上)、Selected(选中)及Active(激活)风格。在这四种风格中，这些状态代表UI列表的当前状态。换句话说，一个聚焦列表(您当前正在滚动的列表)将会使用Normal(正常)、Mouse Over(鼠标在其上)、Selected(选中)及Active(激活)单元风格的聚焦状态。

当创建列表风格时，创建一个基本风格然后单元风格使用这个主要风格作为模板是个好主意，以便您可以在不必考虑特定状态的颜色的情况下来改变所有的风格。

帮助及技巧

当创建风格时，您可以使用另一个风格作为模板来进行创建。这允许您根据需要对风格的特定集合进行大范围的改变。比如，如果您需要全局地增加您的字体的大小，并且那个特定字体的所有风格都是用了一个基本风格，那么您仅需改变基本风格一次，属性将会在所有使用它作为模板的其它风格中进行传递。

材质和材质实例可以在图片风格中进行应用，并且您可以为每种风格状态设置一个材质。材质中包含的任何及所有动画将会在UI中进行描画。应用到风格上的材质的Color(颜色)和Alpha值将不会起作用，这些值必须在材质/材质实例本身进行设置才会起作用。

您可以在UI编辑器中覆盖特定控件的风格。这些覆盖将会完全地替换风格中的所有状态属性，它是一种对齐文本的简单方法。然而对于全局地改变覆盖并没有简单的方法，所以如果您通过覆盖设置了所有的缩放类型，您将需要调整所有控件的覆盖的设置。

请认真地命名您的风格，当这个风格在使用中时，重命名及删除风格将会产生一些问题。进行特定唯一的命名也可以保证您不会再皮肤中创建太多的重复的风格。