Unity3D学习笔记uGUI(10):Visual Components详述

发表于2017-03-18
评论0 3.6k浏览

Visual Components可视化组件中有很多会在项目开发中使用到,考虑到有些开发者对这个Visual Components可视化组件还不够熟悉,下面就给大家介绍对Visual Components可视化组件进行详细的讲述。

13Visual Components - Text

         Text组件用于显示一个无交互文本,比如标签、标题、内容等等。

        

        

 

13.1 Text属性一览

Text

显示的文本

Character

 

- Font

字体

- Font Style

字体样式:普通/加粗/斜体/斜体加粗

- Font Size

字号

- Line Spacing

行距

- Rich Text

是否富文本:若为富文本则支持Markup

元素的符号转义

Paragraph

 

- Alignment

水平与垂直的对齐方式

- Align by Geometry

几何对齐

Horizontal Overflow

水平裁剪:换行(Wrap)或溢出(Overflow,解决当文本宽度太大时如何裁剪来适应矩形大小。

Vertical Overflow

垂直裁剪:截断(Truncate)和溢出(Overflow,解决当文本高度太大时如何裁剪来适应矩形大小。

Best FIt

是否忽略Size属性来适应控件的矩形大小。

Color

颜色

Material

渲染的材质

 

13.2 Text细节说明

         某些控件(比如按钮和开关)搭配内置一个用于描述的文本(比如按钮文字)。而另一些控件(比如滑动条)没有隐式文本,可单独使用Text组件创建标签来加以说明。Text组件还可用于显示一系列的说明文本、故事文本以及版权说明等等。

         Text组件提供了对常规的字体、字号、样式以及对齐方式等参数设置。当勾选RichText后,Markup元素就会被看作风格化信息的标签,用于设置单个词语或一句话加粗或显示不同颜色。

 

14Visual Components - Image

         Image组件用于显示一个无交互图片。Image组件可用于装饰图案、图标等等,而且还可以通过脚本来改变图片内容。Image组件与Raw Image组件类似,但前者提供了更多选项来设置图形动画与填充区域。此外,Image组件的纹理必须是Sprite,而Raw Image组件可以是任意的纹理。

        

        

 

14.1 Image属性一览   

Source Image

要显示的图片

Color

颜色

Material

材质

Raycast Target

是否处理点击事件

Image Type

裁切类型:拉伸/九宫/平铺/填充

Preserve Aspect

是否保持宽高比例不变

Set Native Size

提供了一个按钮,点击即可恢复图片原始像素大小

 

14.2 Image细节说明

         要显示的图片必须以Sprite方式导入。

 

15Visual Components - Raw Image

         RawImage组件用于显示一个无交互图片。RawImage组件可用于装饰图案、图标等等,而且还可以通过脚本来改变图片内容。Raw Image组件与Image组件类似,但前者并未提供更多选项来设置图形动画与填充区域。此外, Raw Image组件可以是任意的纹理,而Image组件的纹理必须是Sprite

        

        

 

15.1 Raw Image属性一览

Texture

要显示的图片的纹理

Color

颜色

Material

材质

Raycast Target

是否处理点击事件

UV Rectangle

图片在控件矩形的偏移与大小,以标准化坐标(Normalized Coordinates)形式指定(取值范围0.0~1.0)。图片的边缘会拉神来填充UV矩形的周围区域。

 

15.2 Raw Image细节说明

         RawImage并不必须Sprite作为纹理,而是可以显示任意纹理。比如显示通过WWW下载指定URL的某个图片资源,或游戏中任意一个纹理。

         UVRectangle允许显示大图片的一个小片段。其中XY坐标值表明图片的哪一部分与控件的左下角对齐。例如,X=0.25,则图片左侧1/4将被裁剪。而WH值则指定了图片用于填充矩形控件的区域宽高。例如,W=0.5H=0.5,则1/4面积的图片将用来缩放并填充控件矩形。调整这些属性值,则可缩放或拉伸图片来满足不同需求。

 

16Visual Components - Mask

         Mask是可见UI控件,却改变一个控件子节点的表现。Mask会依据父节点来影响子节点。比如子节点比父节点大,那么只有父节点区域内的子节点可见。

        

        

16.1 Mask属性一览

Show Graphic

父节点的图像是否作为带透明通道的遮罩,显示在子节点之上。

 

16.2 Mask细节说明

         Mask的一种常见用法是显示一个大图片的局部区域。先创建一个Panel(菜单:GameObject=>CreateUI=>Panel)作为“框”,然后创建一个Image添加为Panel的子节点,接着把Image要显示的局部区域挪到Panel区域内。

        

         最后,给Panel挂载Mask组件。此时Image处于Panel区域以外的内容即变为不可见,因为它被Mask影响了。

        

 

16.3 Mask实现细节

         Mask遮罩是利用GPUStencil Buffer来实现的。

         最上层Mask元素将写入1Stencil Buffer,那么Mask底下所有元素在渲染时都会检查,然后仅渲染StencilBuffer1的区域。         对于嵌套Mask,则会递增Bit位后继续写入1Stencil Buffer,这意味着子节点每次渲染都需要使用&运算来检查自身哪些区域可被渲染。

 

17Visual Components - RectMask2D

         RectMask2D是类似Mask的遮罩组件。Mask根据父节点矩形区域来影响子节点。不像标准Mask组件,RectMask2D虽然有一些限制,但是也有表现上的优势。

 

17.1 RectMask2D细节说明

         RectMask2D常用于显示一个大区域的局部区域。RectMask2D就是用来框住这个区域。

 

RectMask2D的限制有:

1)它只在2D空间生效;

2)它不会遮罩不在同一个平面的元素。

 

RectMask2D的优势有:

1)它不使用Stencil Buffer

2)没有额外Draw Call

3)没有材质变化;

4)性能更优。

 

18Visual Components - UI Effect Components

         Effects类的脚本(如阴影和描边)提供了简单的效果,可用于TextImage

 

18.1 Shadow

         Shadow组件提供了阴影效果,可作用于TextImage。它需要挂载到TextImage上面去。

 

18.1.1 Shadow属性一览

Effect Color

阴影的颜色

Effect Distance

阴影的XY偏移

Use Graphic Alpha

是否将图片颜色与阴影颜色相乘

 

 

18.2 Outline

         Outline组件提供了描边效果,可作用于TextImage。它需要挂载到TextImage上面去。

 

18.2.1 Outline属性一览

Effect Color

描边的颜色

Effect Distance

描边的XY偏移

Use Graphic Alpha

是否将图片颜色与描边颜色相乘

 

 

18.3 Position as UV1

Position as UV1效果?嗯...

点击访问官方英文文档  

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引