Fire Balls 12——UI界面的制作

版權申明：

• 本文原創首發於以下網站：

1. 博客園『優夢創客』的空間：https://www.cnblogs.com/raymondking123
2. 優夢創客的官方博客：https://91make.top
3. 優夢創客的游戲講堂：https://91make.ke.qq.com
4. 『優夢創客』的微信公眾號：umaketop

• 您可以自由轉載，但必須加入完整的版權聲明

目標

• Logo UI界面的制作
• UI界面的淡入

Logo UI界面的制作

• 首先右鍵創建一個Canvas重命名為UI Root其次在其子節點創建一個Panel重命名為Logo UI並把我們的顏色更改為自己喜歡的顏色即可，例如下圖
  
  上面步驟完成后我們在Panel底下繼續創建一個空的對象（Gameobject）重命名為Alpha，並添加Canvas Group組件，這個組件到時候用來控制我們的Logo淡入的效果。
  最后我們只需在Alpha的子節點添加一個Image組件和一個Text組件即可，添加完成后，把Image組件選擇一張自己喜歡的圖片，Text組件寫上自己想說的話，然后調整至合適的大小
  
  最后回到我們的Alpha組件找到Canvas Group組件把組件底下的Alpha值設置為0即可。

• 這樣我們的UI界面就搭建完成了！

UI界面的淡入

• 在我們的Script腳本底下新建一個名為UI Root的腳本並打開，打開后編寫如下代碼

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class UIRoot : MonoBehaviour
{
    public RectTransform Logo;//引用LogoUI
    // Start is called before the first frame update
    void Start()
    {
        StartCoroutine(ShowLogo());
    }
    /// <summary>
    /// 一個動畫，讓透明度慢慢的變不透明
    /// 這是一個協成
    /// </summary>
    /// <returns></returns>
    IEnumerator ShowLogo()
    {   
        //找到Alpha動畫節點
        var cg = Logo.Find("Alpha").GetComponent<CanvasGroup>();
        //判斷Alpha是否小於0.95，是的話，就一直往不透明（1，0）的差值
        while (cg.alpha < 0.95)
        {
            //一直往不透明（1，0）差值
            cg.alpha = Mathf.Lerp(cg.alpha, 1, Time.deltaTime);
            yield return null;
        }
        cg.alpha = 1;
        yield return new WaitForSeconds(0.5f);
        //到這里，Logo的不透明動畫就播放完了

        //下一步，隱藏Logo畫面
        Logo.gameObject.SetActive(false);
    }
}

• 然后把我們的腳本拖給UI Root組件即可
  最后別忘了把LogoUI拖給我們的腳本