UI介面製作與切換

STEP 1

建立一個 UI Button

於 Hierarchy 介面中 點擊右鍵 ➔ 選擇 UI ➔ 點選 Button-TextMeshPro

➔ 跳出 TMP Importer 視窗，點擊 Import TMP Essentials 後關閉視窗

若是只想要使用純文字 UI 的話，可以改選 Text-TextMeshPro 的選項喔！

TextMeshPro 是一種將文字變成向量圖片的方式，使文字方塊在進行縮放時也不會影響畫質。

📝古古的課程補充：
UI 介面與一般物件及攝影機視角處於不同的圖層當中，是專屬於 UI 的分類，因此 Button 在 Scene 的視窗中看起來比物件大許多是正常的喔！

另外，若是想看到 Button 的實際呈現大小與位置，也可以 雙擊 Canvas 對焦在 UI 介面上，再進行調整會比較準確。

STEP 2

更改 Button 按鈕上的文字

將 Button 調整至適當大小與位置 ➔ 點擊 Button 左側小箭頭 ➔ 點選 Text (TMP)

➔ 在 Text Input 欄位將 Button 改為 start

如果想要使用中文字體，要再做另外的處理，因此本課程先不使用中文字型輸入。

STEP 3

完成基礎的 UI 介面設計

重複步驟一與步驟二將 開始畫面、遊戲中、結束畫面 的 UI 介面製作完成

示意圖為 遊戲開始 之UI畫面。

示意圖為 遊戲進行中 之UI畫面。

示意圖為 遊戲結束 之UI畫面。

💡古古的小提醒：

記得點擊 Create Empty Parent 為不同階段的按鈕進行分類喔！

STEP 4

製作三階段的 UI 介面切換流程

開啟 GameManager 腳本，將原本的程式碼修改為以下版本並存檔

public GameObject player;
public int score = 0;
public int hp = 3;
public int cookiePower = 0;
public int highScore = 0;

// 遊戲流程
public List<GameObject> steps = new List<GameObject>();

void Start()
{
		score = 0;
		hp = 3;
		cookiePower = 0;
		ChangeStepUI(0);
}

void Update()
{
		// 先以手動控制切換為遊戲結束
		if(Input.GetKeyDown(KeyCode.Z))
		{
				GameOver();
		}
}

public void updateHP(int amount)
{
		hp = hp + amount;

		if(hp >= 3)
		{
				hp = 3;
		}

		if(hp <= 0)
		{
				Debug.Log("遊戲結束");
		}
}

public void ChangeStepUI(int step)
{
		// 把全部UI步驟都關閉
		for (int i = 0; i < 3; i++)
		{
				steps[i].SetActive(false);
		}

		// 開啟指定的StepUI
		steps[step].SetActive(true);
}

public void GameStart()
{
		// 遊戲開始，切換至遊戲中UI畫面
		ChangeStepUI(1);
}

public void Exit()
{
		// 離開遊戲，切換至開始UI畫面
		ChangeStepUI(0);
}

public void GameOver()
{
		// 遊戲結束，切換至結束UI畫面
		ChangeStepUI(2);
}

public void Restart()
{
		// 重新開始，切換至開始UI畫面
		ChangeStepUI(0);
}

示意圖為 GameManager 腳本上半部修改後之程式碼

示意圖為 GameManager 腳本下半部修改後之程式碼

STEP 5

回到 Unity 介面進行資料綁定

回到 Unity 介面，點擊 GameManager 物件 將 Steps 欄位 的數字改為 3

➔ 分別將 step1、step2、step3 這三個群組物件拖曳至 Element 欄位 中

STEP 6

使各個 UI Button 被點擊時能呼叫相對應的函式

點選 Start 按鈕，在 On Click () 欄位點擊 加號 新增一個 List

➔ 將 GameManager 物件 拖曳至 On Click () 欄位中，並開啟 No Function 下拉式選單

➔ 選擇 GameManager 腳本 ➔ 點選 GameStart()

➔ 重複上述步驟使 Exit、Restart 按鈕對應至 GameManager 腳本 中相應的 Function

Start 按鈕對應 GameStart () 函式，Exit 與 Restart 按鈕則分別對應 Exit () 與 Restart () 函式。