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就暫時完成了。
推薦閱讀：
