Unity小遊戲教學最後一章

這篇要講使用者介面(UI)，並完成遊戲

這次的程式會比較多，建議先看過前面三篇

Unity教學 2D小遊戲製作 part 1

Unity教學 2D小遊戲製作 part 2

Unity教學 2D小遊戲製作 part 3

 

 

 

本篇分成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底下

如果你是按GameObject → UI → Text
就不會自動產生EventSystem喔，要自行增加

 

 

點一下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教學)

 

參考教學：

【阿空】介面實戰！Unity快速入門！2D平台動作遊戲 #05 (User Interface)

文章標籤
全站熱搜
創作者介紹
創作者 讀樂島主 的頭像
讀樂島主

讀樂島

讀樂島主 發表在 痞客邦 留言(68) 人氣(71,267)