【Unity3D_UGUI速成班】——01. Text

0.  前言

UGUI是脫胎於NGUI、和Unity3D兼容性更好、並且更好設置和操作的控件，在UI界面設計——尤其是手機端設計中有不可或缺的作用。【UGUI速成班】，旨在帶領大家對UGUI有一個快速的了解，並在課程結束之后，能夠使用Unity3D中的UGUI模塊進行一些基礎的UI交互設計，包括圖片、進度條、按鈕、滾動頁面等等，當然由於是俗稱，對於部分功能不會過分詳細。當中的一些課題，筆者更將在日后附上自己的實用案例，幫助大家提升。

 

好的，接下來讓我們進入正題。筆者使用的Unity版本是Unity5.4.2（64bits），但課程中介紹的UGUI功能只要是4.6以后的版本都有，所以大家不用太在意。腳本一律采用C#語言編寫。

------------------------------------------------------------------------------------

1.  Text

新建一個Unity工程，在Hierarchy下右鍵==>UI，拓展菜單有13個欄目，點選最上方的Text。那么在Hierarchy欄目下會多出攜帶了Text的Canvas控件和EventSystem控件。

EventSystem是事件響應器，我們暫時不用管他。

 

Text控件專門呈現UI層級上的文字顯示，通常可用於呈現界面主標題和圖片、按鈕的配字。

此時選中Text控件，在Inspector欄目下查看，可以發現兩個值得留意的部分，一是Rect Transform組件，與正常object的Transform組件不同，所以這是UGUI物體的固定組件，在以后的課程中將會詳述，當前只要知道設置其中的Width和Height來改變UGUI物體的寬和高就可以了；另一個是Text組件，將是我們的重頭戲：Text組件下有Text（紅）、Character（黃）和Paragraph（藍）幾個子塊，分別對應我們WORD編輯器中的內容、文字屬性和段落屬性等部分：

 

（1） New Text用於內容編寫，特殊之處在於UGUIText支持富文本編寫，本篇末的代碼里將會詳述。

（2）Character：

 

①  Font是字體，默認字體是Arial，表面上我們沒有別的選項，但是在電腦路徑中的“控制面板\外觀和個性化\字體”下，能找到本機能夠顯示的所有字體，大家可以選擇自己喜歡的字體文件，將之拷貝到工程的Assets文件夾下，這樣就能夠選用心儀的字體了。

 

②  Font Style是顯示格式，粗體、斜體、斜粗體。

③  Font Size是字號，UGUI默認是14號字，最大是300號。

④  Line Spacing是行間距，默認為1.

⑤  Rich Text是對於富文本的權限，如果將之反勾選，原先為Text輸好的富文本文字將會一五一十地呈現屏幕。

（3）Paragraph：

 

 

①  Alignment不解釋了

②  Horizontal/Vertical Overflow是選擇當輸入內容超出Text寬/高度時是否自動換行/列。

③  BestFit是個神奇的選項，當被勾選時，下方將會彈出這樣一個框來自主設定上下限。

Text內容將會以最合適的大小（上下限之間）來填充你所設定的Text尺寸。但是無論如何都不會超過字體最大值300。Best Fit會根據Horizontal/Vertical Overflow的結果來評估Text框的大小，大家可以試一下。

剩下的部分，除了Raycast Target是允許讓這個Text成為射線碰撞體（其實UGUI控件都有這個，以后不介紹了），其余的不解釋了，看代碼吧，上車！

 

using UnityEngine;
using System.Collections;
using UnityEngine.UI;//凡是對UGUI進行編輯的腳本都需要使用這個命名空間。
public class teachText : MonoBehaviour
{
    //Text是UI命名空間下的類，public后拖進一個已經建好的Text控件即可使用。
    public Text test1;
    // Use this for initialization
    void Start()
    {    }

    // Update is called once per frame
    void Update()
    {
        //直接在代碼里編輯富文本內容！
        test1.text = "我要成為UGUI的<color=\"red\">絕世高手！</color>";
        //設定字號
        test1.fontSize = 20;
        //設定顏色
        test1.color = Color.blue;

        //響應鼠標點擊
        if (Input.GetMouseButtonDown(0))
        {
            //關閉富文本支持
            test1.supportRichText = false;
            //激活 Best Fit
            test1.resizeTextForBestFit = true;
        }
    }
}

 

代碼運行前：

 

運行時：

鼠標左鍵點擊后：

 

要點：

①  被<color=”red”>…… </color>所框選的內容（紅色），不會受到對text內容顏色的整體控制（藍色）。

②  在代碼中<color=”red”>的兩個分號前都加了\號，這是因為C#代碼中的引號不是常規引號，而是有前置轉義字符的\”，只有這樣才能將引號納入C#字符串中。

③  Text變量下的內容、字號、顏色、bestFit、富文本都是可用代碼修改的，大家可以做更多的嘗試。