关于Unity中UI中的Mask组件、Text组件和布局

一、Mask组件

遮罩,Rect Mask矩形Mask(Rect Mask2D组件),图片Mask(Mask组件)(图片Mask的透明度不为0的部分显示子图片,为0的部分不显示子图片)

Rect Mask矩形Mask:

1.创建一个Canvas

2.配置Canvas,上一章讲过

3.在Canvas下面创建一个空子节点,取名Mask,专门用来做遮罩处理

4.在Mask节点下面再创建一个UI的Image子节点,拖Sprite类型的贴纸到Image子节点中,记得点击Set Native Size

5.给Mask节点加一个Rect Mask2D的组件,这时候Mask下面的孩子只能在Mask节点大小的矩形内可见,这就是Rect Mask

图片Mask:

1.创建一个Canvas

2.配置Canvas,上一章讲过

3.在Canvas下面创建一个Image类型的UI子节点,取名Image_Mask,专门用来做图片Mask处理

4.把图片Mask图片拖进Image_Mask中,这种图片是中间一个灰色圆形,其他部分都是透明的。

5.在Image_Mask节点下挂载一个Mask组件

6.在Image_Mask节点再创建一个Image的UI子节点,把要显示的图片拖进去,这时候图像显示一个圆形的样子。

7.虽然是个圆圆的头像,但是边缘有一点毛边,看起来不是很好看,可以在边缘再加一个框

8.创建一个avator的空节点在Image_Mask节点上面,在avator节点下面创建一个Image子节点,把相框贴图拖进去。就显示一个完整的头像和框。

二、布局

1.创建一个Canvas

2.配置Canvas,上一章讲过

3..在Canvas下面创建一个空子节点叫做Layout

4.在Layout节点下面创建许多的子Image的UI节点,依次把贴图拖进去。

5.给Layout节点挂载Vertical Layout Group组件,这个组件可以使得Layout节点下面的子图片都垂直排放

垂直:

Vertical Layout Group组件属性:

Spacing 10:每个图片之间的间距为10

Padding :图片和各条边界的距离

Child Alignment:子节点的排布位置,上下左右

Child Force Expand:图片不会随着整体缩放而产生拉伸

水平:

Horizontal Layout Group组件

垂直水平排列:

Grid  Layout Group组件

1.Cell Size:每个子节点的大小

2.Spacing:每个子节点的间距

3.Start Center:开始的位置,第一个元素的位置

4.Start Axis:元素的主轴线

5.Child Alignment:对齐方式

6.Constraint:指定布局的行或列

三、Text组件

1.创建一个Canvas

2.配置Canvas,上一章讲过

3..在Canvas下面创建一个Text的UI节点

4.Text节点的font可以拖进TTF字体文件

Text组件属性:

1.Text 显示的文本
2.Font 使用的文字的字体;
3.FontStyle: 文字字体样式;
4.LineSpacing: 行间距;
5.Alignment: 对齐方式;pi'pe6: Color: 字体的颜色;
7.Horizontal Overflow水平溢出:有两个属性值,Wrap裁剪(按单词来裁剪的),Overflow显示全部
8.Vertical 垂直溢出:Truncate裁剪,Overflow显示全部
9.RichText 多格式文本: 把这段写在Text属性框中<color=blue></color>,<color=blue>hello world</color>里面的文字是蓝色的。
10.Best Fit 最佳匹配方式

使用脚本代码来修改Text,挂载在Canvas上面:

Text txt;

void Start(){

  this.txt=this.transform.Find("Text").GetComponent<Text>();

  this.txt.Text="Hello World";

  this.txt.fontStyle=FontStyle.Bold;

}

Unity的强大之处是可以在运行的时候修改属性,运行结束后会恢复。

原文地址:https://www.cnblogs.com/HangZhe/p/6875317.html