一、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的强大之处是可以在运行的时候修改属性,运行结束后会恢复。