Unity

Unity

官方網站:點擊進入
官方粉絲團:點擊進入

《Unity》 2D小遊戲製作教學(四-End)

【Unity】 【2d】 【教學】
作者:讀樂島主 時間:2015-10-05

原文連結

 《Unity》 2D小遊戲製作教學(四-End) 

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

《Unity》 2D小遊戲製作教學(四-End)    

 

然後選Game的畫面,左上角有一個下拉選單,可以選擇main camera比例

 選單裡沒有我們要的比例,所以按"+"新增比例

《Unity》 2D小遊戲製作教學(四-End)  

 

Type選Aspect Ratio

Width & Height 分別是3和4

《Unity》 2D小遊戲製作教學(四-End)  

 

這樣我們就能選自訂的比例了

 《Unity》 2D小遊戲製作教學(四-End)  

 

我們可以看到選擇正確的比例,畫面旁邊的藍色就會不見了

《Unity》 2D小遊戲製作教學(四-End)  

 

我們也可以看到Scene裡,Main Camera的外框跟背景一樣大

等一下我們在設定UI的時候,會自動依照這個大小來產生Canvas(畫布)

《Unity》 2D小遊戲製作教學(四-End)  

 

先來製作分數的文字

在Hierarchy裡點滑鼠右鍵,選UI → Text(文字)

《Unity》 2D小遊戲製作教學(四-End)  

 

然後會自動產生Canvas和EventSystem

可以看到新增的Text在Canvas底下,遊戲上所有的UI元件都會在Canvas底下

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

《Unity》 2D小遊戲製作教學(四-End)  

 

Canvas(畫布)是遠大於我們的遊戲畫面的

點兩下Canvas,畫面會自動調整到整個Canvas的大小

左下角的黑色小方塊就是我們原本的遊戲場景(圖中紅色箭頭)

《Unity》 2D小遊戲製作教學(四-End)  

 

先把Text的名稱改成ScoreText

然後按位置的方塊(圖中紅框)

《Unity》 2D小遊戲製作教學(四-End)

 

然後按Alt畫面會變成這樣

選 靠下(圖中紅框)

《Unity》 2D小遊戲製作教學(四-End)

 

1. 文字內容 Score: 0

2. 文字大小 Font Size 改 24

3. Alignment 都選置中

Horizontal overflow和Vertical Overflow都選Overflow

4. 顏色選白色

《Unity》 2D小遊戲製作教學(四-End)  

 

 我們可以在Scene這邊看到 Score: 0在螢幕的下方

《Unity》 2D小遊戲製作教學(四-End)  

 

對應到Game的畫面

我們可以看到畫布上的文字和我們的遊戲場景結合在一起了

《Unity》 2D小遊戲製作教學(四-End)  

 

從這邊開始Scene和Game會分成兩個畫面來對照

這樣比較容易看UI和遊戲畫面合在一起的樣子

《Unity》 2D小遊戲製作教學(四-End)  

 

打開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的內容

}

    《Unity》 2D小遊戲製作教學(四-End)  

 

打開Invader的程式描述

在碰撞觸發底下加入

GameFunction.Instance.AddScore(); //呼叫GameFunction底下的AddScore()

也就是,當碰撞觸發就會去做加分的動作

《Unity》 2D小遊戲製作教學(四-End)

 

把Text改成ScoreText

然後拉到GameFunction底下的Score Text空格裡

《Unity》 2D小遊戲製作教學(四-End)

 

存檔後執行

看看計分有沒有正常運作

《Unity》 2D小遊戲製作教學(四-End)

 

2. 開始畫面和GAME OVER畫面

接著製作遊戲開始的畫面

先加入兩個Text

《Unity》 2D小遊戲製作教學(四-End)

 

改名為GameTitle和GameOverTitle

《Unity》 2D小遊戲製作教學(四-End)

 

設定GameTitle

1. 位置 X = 0, Y = 100

2. 內容 Space Invader

3. 文字大小 40

4. 置中 置中 Overflow Overflow

5. 顏色白

《Unity》 2D小遊戲製作教學(四-End)

 

設定完後,應該會如下圖顯示

《Unity》 2D小遊戲製作教學(四-End)

 

GameOverTitle也做相同的設定

《Unity》 2D小遊戲製作教學(四-End)

 

因為兩個Text的位置相同,所以重疊在一起

不過他們出場的時機不同

《Unity》 2D小遊戲製作教學(四-End)

 

把GameTitle的打勾取消

我們就可以清楚的看到GAME OVER

之後程式的部分也使用同樣的原理在控制

要顯示的就打勾,不顯示的就取消打勾

《Unity》 2D小遊戲製作教學(四-End)

 

接著做開始遊戲的按鈕

Hierarchy點右鍵,加入UI → Button

《Unity》 2D小遊戲製作教學(四-End)

 

我們會看到新增了一個Button,底下含有一個Text

《Unity》 2D小遊戲製作教學(四-End)

 

名稱改成PlayButton

位置 X = 0, Y = 25

《Unity》 2D小遊戲製作教學(四-End)

 

點底下的Text,把內文改成PLAY

《Unity》 2D小遊戲製作教學(四-End)

 

在GameFunction底下加入

public GameObject GameTitle; //宣告GameTitle物件

public GameObject GameOverTitle; //宣告GameOverTitle物件

public GameObject PlayButton; //宣告PlayButton物件

public bool IsPlaying = false; // 宣告IsPlaying 的布林資料,並設定初始值false

 

在void Start ()以下增加

GameOverTitle.SetActive(false); //設定GameOverTitle不顯示(打勾取消)

《Unity》 2D小遊戲製作教學(四-End)

 

把原來產生敵人的條件多加一條,IsPlaying是true的時候才會產生敵人

if(time>0.5f && IsPlaying == true)

 

加入一個GameStart的Function

public void GameStart() 

{

IsPlaying = true; //設定IsPlaying為true,代表遊戲正在進行中

GameTitle.SetActive (false); //不顯示GameTitle

PlayButton.SetActive (false); //不顯示PlayButton

}

《Unity》 2D小遊戲製作教學(四-End)

 

設定PlayButton按下去的功能

1. 選PlayButton

2. 按 "+" 新增

3. 點小圈圈,選Background,我們要的功能在Background底下

《Unity》 2D小遊戲製作教學(四-End)

 

選GameFunction底下的GameStart()

《Unity》 2D小遊戲製作教學(四-End)

 

把GameTitle、GameOverTitle和PlayButton拖曳到GameFunction底下對應的空格

讓GameFunction可以控制這些物件要不要顯示

《Unity》 2D小遊戲製作教學(四-End)

 

存檔後執行

《Unity》 2D小遊戲製作教學(四-End)

 

應該會看到下面的畫面

測試PlayButton是否正常工作

《Unity》 2D小遊戲製作教學(四-End)

 

接著來寫GameOver的畫面,在GameFunction底下加入

public void GameOver() //GameOver的Function

{

IsPlaying = false; //IsPlaying設定成false,停止產生外星人

GameOverTitle.SetActive(true); //GameOverTitle設定為ture

}

《Unity》 2D小遊戲製作教學(四-End)

 

在Invader底下,碰撞到ship的時候

呼叫GameOver()

在if (col.tag == "Ship")底下加入

GameFunction.Instance.GameOver(); 

《Unity》 2D小遊戲製作教學(四-End)

 

存檔後執行

《Unity》 2D小遊戲製作教學(四-End)

 

看會不會出現GAME OVER!

《Unity》 2D小遊戲製作教學(四-End)

 

3. REASTART和QUIT的按鈕

接著我們要增加REASTART和QUIT的按鈕

加入兩個按鈕

《Unity》 2D小遊戲製作教學(四-End)

 

改名成RestartButton和QuitButton

《Unity》 2D小遊戲製作教學(四-End)

 

RestartButton位置 X = 0 , Y = 25

《Unity》 2D小遊戲製作教學(四-End)

 

QuitButton位置 X = 0, Y = -25

《Unity》 2D小遊戲製作教學(四-End)

 

RestartButton底下的Text,改成RESTART

《Unity》 2D小遊戲製作教學(四-End)

 

QuitButton底下的Text,改成QUIT

《Unity》 2D小遊戲製作教學(四-End)

 

在GameFunction裡加入

public GameObject RestartButton; //宣告RestartButto的物件

public GameObject QuitButton; //宣告QuitButton的物件

 

在Start()底下加入

RestartButton.SetActive(false); //RestartButton設定成不顯示

所以開始畫面就留下GameTitle、PlayButton和QuitButton

《Unity》 2D小遊戲製作教學(四-End)

 

在遊戲進行時不顯示任何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(); //離開應用程式

}

《Unity》 2D小遊戲製作教學(四-End)

 

設定RestartButton的功能

GameFunction底下的ResetGame()

《Unity》 2D小遊戲製作教學(四-End)

 

設定QuitButton的功能

選GameFunction底下的QuitGame()

《Unity》 2D小遊戲製作教學(四-End)

 

把RestartButton和QuitButton拖曳到GameFunction底下對應的空格

《Unity》 2D小遊戲製作教學(四-End)

 

存檔後執行

《Unity》 2D小遊戲製作教學(四-End)

 

看GameOver畫面有沒有多RESTART和QUIT的按鈕

並測試按鈕功能是否正常

QUIT可能會沒作用,要輸出成執行檔才會有作用

《Unity》 2D小遊戲製作教學(四-End)

 

4. 產生遊戲執行檔

遊戲終於完成了!

輸出成可以執行的檔案吧!

左上角File → Build Settings...

《Unity》 2D小遊戲製作教學(四-End)

 

選PC, Mac & Linux Standalone

確認平台設定,然後按Build

《Unity》 2D小遊戲製作教學(四-End)

 

 選擇存檔位置

《Unity》 2D小遊戲製作教學(四-End)

 

設定遊戲畫面,享受你的遊戲!

《Unity》 2D小遊戲製作教學(四-End)

x