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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM