Unity菜鳥學做UI（抄筆記）
最近在Paws3d學習中心學習unity，感覺漸入佳境。最近接觸了UI部分，做了一些課堂筆記備忘，順便分享。
以下正文內容：
一、總體結構為兩個canvas，兩個canvas始終放置在攝像機上。第一個canvas左上角有時間條（因為專案是跑酷遊戲，所以設計成和血條類似的時間條），左上角還有遊戲時間和剩餘時間。canvas右上角還有個暫停按鈕，當點選暫停按鈕時，遊戲暫停同時第一個canvas消失、第二個canvas出現。第二個canvas由中央兩幅image和右上角三個按鈕組成。三個按鈕分別為繼續、重新開始和結束遊戲。當點選繼續時回到遊戲。
二、第一個canvas的製作：在層級試圖中新建canvas，將canvas檢視檢視中的render mode設定為screen space-camera在這個渲染模式下，canvas會固定在螢幕上跟隨螢幕移動。在層級檢視中新建canvas的子部件slider和button和兩個text。將slider的background和handle slider area禁用或者刪除。在slider層級檢視的fill area中的fill中設定時間條的顏色，在slider的檢視檢視中將slider的值設定為25。text和button的屬性自由設定。
三、第二個canvas將button位置調整，button上的文字調整。也要注意將第二個canvas的render mode調整為screen space-camera。
四、設定第一個canvas的指令碼。
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class UiControler : MonoBehaviour {
[SerializeField]
Canvas firstcanvas;
[SerializeField]
Text timetext;
[SerializeField]
Canvas secondcanvas;
[SerializeField]
Slider slider;
[SerializeField]
Text leftime;
// Use this for initialization
void Start () {
firstcanvas.gameObject.SetActive(true);
secondcanvas.gameObject.SetActive(false);
}
// Update is called once per frame
void Update () {
timetext.text = "遊戲時間：" + Time.timeSinceLevelLoad;
if(slider.value>0)
{
slider.value -= Time.deltaTime * 1f;
}
if(slider.value<=10f)
{
leftime.fontSize = 25;
leftime.color = Color.red;
}
leftime.text = slider.value.ToString();
if (Input.GetKeyDown(KeyCode.Escape))
{
Paused();
}
}
public void Paused()
{
firstcanvas.gameObject.SetActive(false);
secondcanvas.gameObject.SetActive(true);
Time.timeScale = 0f;
}
}
五、在層級檢視中新建一個空gameobject，將剛才的指令碼掛在空gameobject上。選擇第一個canvas、第二個canvas、slider、text等掛在新gameobject的屬性上。現在還需設定暫停button的點選事件。找到暫停button的檢視檢視，在最下邊on click()事件中點選+新建點選事件，將gameobject掛上去，選擇pause()函式。這樣這個button的點選事件就完成了，第一個canvas也算完成。可以進入遊戲測試一下。
六、接下來完成第二個canvas的部分，由於第二個canvas主要是button，並不美觀，所以我在canvas中間附加兩張圖片。
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class UiDemender : MonoBehaviour {
[SerializeField]
Canvas firstcanvas;
[SerializeField]
Canvas secondcanvas;
// Use this for initialization
void Start () {
}
// Update is called once per frame
void Update () {
}
public void UnPause()
{
secondcanvas.gameObject.SetActive(false);
firstcanvas.gameObject.SetActive(true);
Time.timeScale = 1f;
}
public void QuitGame()
{
Application.Quit();
}
public void Restart()
{
Application.LoadLevel(0);
}
}
然後重複上一步給button新增點選事件的步驟。在canvas中新建兩個空image，將圖片匯入素材庫中，需要注意的是，要將匯入的圖片在檢視檢視中修改texture type屬性，選擇sprite(2D and UI)，這樣就可以將圖片掛到image上了。
到這裡一個“醜到爆炸”的UI就暫時完成了。
最後附上Paws3d學習中心連結https://www.paws3d.com/learn/，另尋對遊戲開發感興趣的小夥伴加群935714213