一、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的強大之處是可以在運行的時候修改屬性,運行結束后會恢復。