Unity小遊戲教學最後一章
這篇要講使用者介面(UI)，並完成遊戲
這次的程式會比較多，建議先看過前面三篇
本篇分成4個小節：
1. 製作計分板
2. 開始畫面和GAME OVER畫面
3. RESTART和QUIT的按鈕
4. 產生遊戲執行檔
1. 製作計分板
先製作計分板
首先，點一下Hierarchy裡的Main Camera
把Size調到4
然後選Game的畫面，左上角有一個下拉選單，可以選擇main camera比例
選單裡沒有我們要的比例，所以按"+"新增比例
Type選Aspect Ratio
Width & Height 分別是3和4
這樣我們就能選自訂的比例了
我們可以看到選擇正確的比例，畫面旁邊的藍色就會不見了
我們也可以看到Scene裡，Main Camera的外框跟背景一樣大
等一下我們在設定UI的時候，會自動依照這個大小來產生Canvas(畫布)
先來製作分數的文字
在Hierarchy裡點滑鼠右鍵，選UI → Text(文字)
然後會自動產生Canvas和EventSystem
可以看到新增的Text在Canvas底下，遊戲上所有的UI元件都會在Canvas底下
點一下Canvas，設定Canvas Scaler
UI Scale Mode選Scale With Screen Size
Reference Resolution設 X: 600、Y: 800，和背景一樣大
Match是不同螢幕解析度時，依照寬度或高度來改變UI比例
預設是選寬度，剛好是我們需要的，所以不需要改變
Canvas(畫布)是遠大於我們的遊戲畫面的
點兩下Canvas，畫面會自動調整到整個Canvas的大小
左下角的黑色小方塊就是我們原本的遊戲場景(圖中紅色箭頭)
先把Text的名稱改成ScoreText
然後按位置的方塊(圖中紅框)
然後按Alt畫面會變成這樣
選 靠下(圖中紅框)
1. 文字內容 Score: 0
2. 文字大小 Font Size 改 24
3. Alignment 都選置中
Horizontal overflow和Vertical Overflow都選Overflow
4. 顏色選白色
我們可以在Scene這邊看到 Score: 0在螢幕的下方
對應到Game的畫面
我們可以看到畫布上的文字和我們的遊戲場景結合在一起了
從這邊開始Scene和Game會分成兩個畫面來對照
這樣比較容易看UI和遊戲畫面合在一起的樣子
打開GameFunction.cs
最上面加入一行
using UnityEngine.UI; //使用UI
然後宣告
public Text ScoreText; //宣告一個ScoreText的text
public int Score = 0; // 宣告一整數 Score
public static GameFunction Instance; // 設定Instance，讓其他程式能讀取GameFunction裡的東西
在Start()底下加入
Instance = this; //指定Instance這個程式
在最後面加入一個記分的function
public void AddScore()
{
Score += 10; //分數+10
ScoreText.text = "Score: " + Score; // 更改ScoreText的內容
}
打開Invader的程式描述
在碰撞觸發底下加入
GameFunction.Instance.AddScore(); //呼叫GameFunction底下的AddScore()
也就是，當碰撞觸發就會去做加分的動作
在Background的Inspector裡
把ScoreText拉到GameFunction底下的Score Text空格裡
存檔後執行
看看計分有沒有正常運作
2. 開始畫面和GAME OVER畫面
接著製作遊戲開始的畫面
先加入兩個Text
注意，在加入的時候不要點選到其他Text，不然會變成新增在那個Text底下
改名為GameTitle和GameOverTitle
設定GameTitle
1. 位置 X = 0, Y = 100
2. 內容 Space Invader
3. 文字大小 40
4. 置中 置中 Overflow Overflow
5. 顏色白
設定完後，應該會如下圖顯示
GameOverTitle也做相同的設定
只是文字改成GAME OVER!
因為兩個Text的位置相同，所以重疊在一起
不過他們出場的時機不同
接著做開始遊戲的按鈕
Hierarchy點右鍵，加入UI → Button
我們會看到新增了一個Button，底下含有一個Text
名稱改成PlayButton
位置 X = 0, Y = 25
點底下的Text，把內文改成PLAY
在GameFunction底下加入
public GameObject GameTitle; //宣告GameTitle物件
public GameObject GameOverTitle; //宣告GameOverTitle物件
public GameObject PlayButton; //宣告PlayButton物件
public bool IsPlaying = false; // 宣告IsPlaying 的布林資料，並設定初始值false
在void Start ()以下增加
GGameTitle.SetActive(true); //設定GameTitle顯示
GameOverTitle.SetActive(false); //設定GameOverTitle不顯示
// 後的都是備註，備註內容不影響程式執行。備註可以幫助程式理解
把原來的if (time>0.5f) 改成 if(time>0.5f && IsPlaying == true)
也就是時間和IsPlaying兩個條件都滿足的時候才會產生敵人
&&代表兩個條件都要成立，才會執行
加入一個GameStart的Function
public void GameStart()
{
IsPlaying = true; //設定IsPlaying為true，代表遊戲正在進行中
GameTitle.SetActive (false); //不顯示GameTitle
PlayButton.SetActive (false); //不顯示PlayButton
}
設定PlayButton按下去的功能
1. 選PlayButton
2. 按 "+" 新增
3. 把Background物件拖到On Click()的空格裡，我們要的功能在Background底下
選GameFunction底下的GameStart()
點一下Background物件
把GameTitle、GameOverTitle和PlayButton拖曳到GameFunction底下對應的空格
讓GameFunction可以控制這些物件要不要顯示
存檔後執行
應該會看到下面的畫面
測試PlayButton是否正常工作
接著來寫GameOver的畫面，在GameFunction底下加入
public void GameOver() //GameOver的Function
{
IsPlaying = false; //IsPlaying設定成false，停止產生外星人
GameOverTitle.SetActive(true); //設定為ture，顯示GameOverTitle
}
在Invader的底下，碰撞到太空船時，呼叫GameOver()
在if (col.tag == "Ship")底下加入
GameFunction.Instance.GameOver();
存檔後執行
看會不會出現GAME OVER!
3. REASTART和QUIT的按鈕
接著我們要增加REASTART和QUIT的按鈕
加入兩個按鈕
改名成RestartButton和QuitButton
RestartButton位置 X = 0 , Y = 25
QuitButton位置 X = 0, Y = -25
RestartButton底下的Text，改成RESTART
QuitButton底下的Text，改成QUIT
在GameFunction裡加入
public GameObject RestartButton; //宣告RestartButto的物件
public GameObject QuitButton; //宣告QuitButton的物件
在Start()底下加入
RestartButton.SetActive(false); //RestartButton設定成不顯示
所以開始畫面就留下GameTitle、PlayButton和QuitButton
在遊戲進行時不顯示任何UI
GameStart()以下加入
QuitButton.SetActive (false); //QuitButton設定成不顯示
然後在GameOver時顯示GameOverTitle、RestartButton和QuitButton
GameOver()底下加入
RestartButton.SetActive(true); //RestartButton設定成顯示
QuitButton.SetActive(true); //QuitButton設定成顯示
最後是RestartButton和QuitButton的功能
public void ResetGame() //RestartButton的功能
{
Application.LoadLevel (Application.loadedLevel); //讀取關卡(已讀取的關卡)
}
public void QuitGame() //QuitButton的功能
{
Application.Quit(); //離開應用程式
}
設定RestartButton的功能
1. 點RestartButton
2. 按 "+" 新增
3. 把Background物件拖到On Click()的空格裡
4. 選GameFunction底下的ResetGame()
同樣地，設定QuitButton的功能
1. 點QuitButton
2. 按 "+" 新增
3. 把Background物件拖到On Click()的空格裡
4. 選GameFunction底下的QuitGame()
點Background
把RestartButton和QuitButton拖曳到GameFunction底下對應的空格
存檔後執行
看GameOver畫面有沒有多RESTART和QUIT的按鈕
並測試按鈕功能是否正常
QUIT可能會沒作用，要輸出成執行檔才會有作用
4. 產生遊戲執行檔
遊戲終於完成了！
輸出成可以執行的檔案吧！
左上角File → Build Settings...
1. Add Open Scenes
2. 選Space，注意你要Build的Scene，不要選錯
3. 選PC, Mac & Linux Standalone
4. 按Build
選擇存檔位置
設定遊戲畫面，享受你的遊戲！
把這個遊戲輸出到android手機上，請參考 Unity教學 2D小遊戲製作 part 5
想要了解程式的觀念，請參考 初學者如何建立程式的觀念(Scratch教學)
參考教學：
留言列表
