# 学会 UGUI 之 Visual Components

With the introduction of the UI system, new Components have been added that will help you create GUI specific functionality. This section will cover the basics of the new Components that can be created.

有新的组件和游戏对象已添加到 uGUI,允许和容易的创建 GUI 特定功能。这一节将介绍新的游戏物体被创建的基础。


The Text component, which is also known as a Label, has a Text area for entering the text that will be displayed. It is possible to set the font, font style, font size and whether or not the text has rich text capability.

Text 组件也被称为是一个标签,有一个 Text 区域用于输入将显示的文本。它是可以设置的字体、字体样式、字体大小和是否使用 RichText 的能力。

There are options to set the alignment of the text, settings for horizontal and vertical overflow which control what happens if the text is larger than the width or height of the rectangle, and a Best Fit option that makes the text resize to fit the available space.

文本的对齐方式 alignment 和自动换行 Wrap 模式等选项设置。自动换行模式指定如果太大,无法容纳标签的文本时将会发生什么。自动换行选项意味着文本将换行到下一行上,但是必须是有空间显示,否则任何超出矩形的文本将被清除不予显示了,还有 Overflow 溢出不换行的,一行放不下在举行外面显示。垂直上有 truncate 截断。ResizeBounds 选项,使适合文本的大小,自动、动态的标签。最后的 Best 选项缩放文本大小以适合的标签高宽,然后它像被包装一样。


An Image has a Rect Transform component and an Image component. A sprite can be applied to the Image component under the Target Graphic field, and its colour can be set in the Color field. A material can also be applied to the Image component. The Image Type field defines how the applied sprite will appear, the options are:

切换到一个有 Rect Transform 组件和 Image 组件的对象上。一个精灵 sprite 可以应用于 Image 组件下 SourceImage 字段,Color 字段中设置主颜色。一种材料还可以用于 Image 组件。图像类型字段定义了如何显示应用的精灵,选项有:

Simple - Scales the whole sprite equally.
Simple 简单 - 同样大小显示整个精灵。

Sliced - Utilises the 3x3 sprite division so that resizing does not distort corners and only the center part is stretched.
Sliced 切割 - 利用 3 x 3 精灵分割,以便调整不变形的角落的大小。

Tiled - Similar to Sliced, but tiles (repeats) the center part rather than stretching it. For sprites with no borders at all, the entire sprite is tiled.
Tiled 平铺 - 类似于 Slices,重复的精灵游戏物体的边界内。

Filled - Shows the sprite in the same way as Simple does except that it fills in the sprite from an origin in a defined direction, method and amount.
Filled 填充 - 除了定义从原点开始填补的方向、方法和数量之外显示精灵的方式和 Simple 的方式相同。

The option to Set Native Size, which is shown when Simple or Filled is selected, resets the image to the original sprite size.

Images can be imported as UI sprites by selecting Sprite( 2D / UI) from the ‘Texture Type’ settings. Sprites have extra import settings compared to the old GUI sprites, the biggest difference is the addition of the sprite editor. The sprite editor provides the option of 9-slicing the image, this splits the image into 9 areas so that if the sprite is resized the corners are not stretched or distorted.

Images 可以作为 uGUI 精灵导入,通过从 TextureType 选择设置 Sprite (2D / uGUI)。与旧的 GUI 精灵相比 Sprites 有了扩展,最大的区别是增加了 sprite editor。sprite editor 为图像提供的 9 切片选项,这将图像分成 9 个地区所以,为了是调整精灵大小时角落不拉伸或扭曲。

Raw Image

The Image component takes a sprite but Raw Image takes a texture (no borders etc). Raw Image should only be used if necessary otherwise Image will be suitable in the majority of cases.

Image 组件需要一个精灵,但 Raw Image 需要的是纹理 (无边界等)。使用 Raw Image 是有必要,除非为图像会在大多数情况下适用。

Raw Image 控件向用户显示一个非交互式的图像。这可以用于装饰、图标等,图像也可以从一个脚本来反映在其他控件中的更改。Raw Image 控件是类似于 image 控件,但并没有关于图片动画的选项和准确地归档控制矩形。但是,Raw Image 可以显示任何纹理,image 只能显示一个精灵纹理。


A Mask is not a visible UI control but rather a way to modify the appearance of a control’s child elements. The mask restricts (ie, “masks”) the child elements to the shape of the parent. So, if the child is larger than the parent then only the part of the child that fits within the parent will be visible.

Mask 是不可见的 UI 控件,但它是一个可以修改控件子元素的显示的方式。Mask 限制在父对象内子元素的形状。所以,如果孩子是大于父,然后只有在父内的部分将可见。

Mask 的一个常见用途是显示大 Image 的一小部分,使用说 Panel 对象(menu: GameObject> Create UI > Panel)作为一个“frame”。您可以通过首先使 Image 对象成为 Panel 子对象。你应该定位图像的区域,应是可见的是直接在面板区域后面。


Visual components can also have various simple effects applied, such as a simple drop shadow or outline. See the Effects reference page for more information.

Effects 组件允许将简单的效果添加到文本和图像的图形,如影子和轮廓线。Shadow、Outline、Position as UV1