【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、富文本都是可用代码修改的，大家可以做更多的尝试。