一鍵直達：《UGUI 控制元件詳解 》專欄

六大推薦理由

理由一：系統

專欄目錄：Unity 之 UGUI控制元件詳解學習目錄，點擊藍字直達試讀，

本專欄的提供了UGUI中所有組件，

• 從UGUI的基礎組件 ，矩形變換_{(RectTransform)}，畫布_(Canvas) 和 事件系統_{(EventSystem)}，這三個基礎的UI組件開啟UGUI的入門之旅，
  

• 學習了基礎組件后，正式開始學習UI組件，首先是可視組件：文本_(Text)，影像_(Image)，原始影像_(RawImage)，TextMesh Pro_{(官方稱之為：最終文本解決方案)}，這幾個可視組件可應用各種顯示效果，例如：漸變文字，頭像顯示，描述文本等等…
  

• 學習了可視組件其次就是互動組件：按鈕_(Button)，開關_(Toggle)，滑動條_(Slider)，滾動條_(Scrollbar)，下拉選框_(Dropdown)，輸入_(InputField)，這幾個交換組件基本上可用解決我們所有的互動需求了，如：登錄按鈕，輸入賬號，選擇性別，進度條等等…
  

• 至此，大部分UI組件都學完了，還有最后兩個自動布局組件：自動布局_(Layout)，滾動矩形_(ScrollRect)，矩形變換布局系統足夠靈活，可以處理許多不同型別的布局，還允許以完全自由形式的方式布置元素，
  

• 以上就是UGUI的全部組件了，最后博主還整理了實戰優化經驗總結，也許開發時注意一個小問題，就可以避免后續優化時的困擾，絕對是一篇小白都看到懂的實戰經驗總結
  

理由二：詳細

每篇文章都是經過博主精心打磨和實踐驗證過的，每個知識點都絞盡腦汁，耗時甚多，值君一看，

試讀鏈接：Unity 之 UGUI Button按鈕組件詳解

每篇文章都由最基礎的創建可見的屬性面板進行介紹，代碼操作，使用實體和有相關的功能拓展組成的，

每個部分都進行詳細的決議，每一句代碼都有詳細的注釋說明，

理由三：專業

對比官方檔案和內置原始碼，對每個組件進行深度決議，

每個組件的屬性面板，都在官方檔案的基礎上進行白話轉譯和提煉總結，這保證入門級的同學都能看的懂，
每個組件的代碼操作，都在原始碼中進行定位，可以教會入門的同學自己查找Unity內置的屬性函式，

理由四：圖解

案例取自：Unity 之 UGUI Text文本組件詳解

這是介紹陰影_(Shadow)和描邊_(Outline)組件的示例截圖，怎么樣是不是覺得只看圖就能知道這個組件的用法和屬性的意思了？

所以啊，有的時候根本不需要寫什么多余的文字，一張圖直接解釋一切，雖然話是這么說，但是我在原文中還是提供了對組件上每個屬性進行介紹的表格，就很貼心，很靠譜~

理由五：深度

通過示例帶你看UI原始碼，教你學會如何看原始碼，
比如：Unity 之 UGUI EventSystem事件系統詳解，一文 以按鈕點擊事件執行程序為例，帶你一步一步查看原始碼，

決議步驟節選：

學會了看原始碼，你距離漲薪之日就又進了一步了，心動不如行動，感覺學習起來吧~

理由六：實體

比如：Unity 之 UGUI Image影像組件詳解 ，一文中的模擬技能冷卻CD的實體，

• 看下效果：
  

• 具體實作：
  大家目錄如下圖：創建一個按鈕_(Button) --> 創建一個影像_(Image)做不可點擊遮罩，并將其層級調整到按鈕下第一個子物體 --> 最后將Button的Image修改為技能圖片，Image修改為灰色半透明的圖片
  

• 邏輯代碼
  最后一步將下面代碼掛載到上面創建的按鈕_(Button)上，運行點擊按鈕即可實作效果，

using UnityEngine;
using UnityEngine.UI;

/// <summary>
/// 模擬技能CD
/// </summary>
public class CoolDown : MonoBehaviour
{	
    private Image cd_Mark;		//陰影遮罩
    private Text cd_Text;		//冷卻時間

    private float coldTime = 2f;    //冷卻時間
    private float remaTime = 2f;    //剩于時間 --> 距離下次放技能
    private bool isColding = false; //是否正在冷卻	

    //初始化
    void Start()
    {
        this.GetComponent<Button>().onClick.AddListener(OnClick_JN);
        cd_Mark = this.transform.GetChild(0).GetComponent<Image>();
        cd_Text = this.transform.GetChild(1).GetComponent<Text>();
    }

    void Update()
    {
        if (isColding)
        {
            //fillAmount-=表示每幀減去的值，技能冷卻中	
            cd_Mark.fillAmount -= Time.deltaTime / coldTime;
            remaTime -= Time.deltaTime;
            cd_Text.text = remaTime.ToString("F1");

            if (cd_Mark.fillAmount < 0.02f) //fillAmount值為極小時,讓冷卻停止
            {
                isColding = false;
                //并讓fillAmount值為0，表示此次冷卻完成
                cd_Mark.fillAmount = 0;          
                cd_Mark.enabled = false;
                cd_Text.gameObject.SetActive(false);
                Debug.Log("又可以放技能啦！");
            }
        }

    }

    void OnClick_JN()
    {
        if (!isColding) //沒有冷卻,可以放技能
        {
            isColding = true;
            cd_Mark.enabled = true;
            cd_Mark.fillAmount = 1;
            cd_Text.gameObject.SetActive(true);
            remaTime = coldTime;
            cd_Text.text = remaTime.ToString();
        }
        else
        {
            Debug.Log("todo...技能冷卻中...");
        }
    }
}

怎么樣是不是意猶未盡？ 那還不趕快訂閱學習起來！！！

一鍵直達：《UGUI 控制元件詳解 》專欄