2013年9月8日 星期日

Unity3D 教學 ﹥18 Unity 遊戲選單製作

http://www.cg.com.tw/Unity/htm/Unity_018.asp

Unity 選單設計
無論是任何類型的遊戲,幾乎是少不了選單的設計。玩家可以從選單開始遊戲、讀取記錄、設定遊戲、選擇裝備、購買商品等。目前我們製作的遊戲都沒有主選單,開啟時就直接進入遊戲,我們在接下來的課程學習遊戲選單的製作方法。
請將前面製作的場景儲存為「Level_01」,並且放在「Scenes」資料夾,稍後將會使用這個當作第一關的場景。

使用 3D Text 製作選單
首先製作遊戲選單的場景,建立一個新場景,並且將場景名稱修改為「MainMenu」,同樣放在「Scenes」資料夾。
新增 Cube 方塊或平面物件,當作選單的背景。
選單的文字需要使用自訂的字型,請將 True Type (*.ttf) 字型檔案拖曳到 Project 專案面板的「Fonts」資料夾,若無此資夾請自行建立。
接著製作遊戲選單的項目,新增一個 3D Text 文字物件,並將名稱修改為「txt_NewGame」,移動至場景的適當位置。
Text 文字 開始遊戲
Font 字型 從 Project 專案面板拖曳字型到此欄位
Mesh Renderer
Materials
- Element 0 = font material 拖曳到此欄位
將 Main Camera 攝影機移到文字物件的前方,按下播放按鈕進行測試,確認遊戲執行時文字在畫面中間的位置。
您會發現文字的邊緣非常模糊,因為預設的情況下,文字消除鋸齒的功能是開啟的,然而這會讓選單的文字變得模糊,以下的步驟說明使文字邊緣銳利化的方法。
從 Project 專案面板雙擊字型並選擇 font material 字型材質,將 Inspector 屬性檢視器的 Font Size 字型尺寸加大到 100(預設值為 16 ),此時會出現 Unapplied import settings 訊息,請按下 Apply 按鈕套用設定。
接著再次再選取文字物件,將 Inspector 屬性檢視器的 Character Size 字元尺寸設定為 0.15,此時文字的邊緣應該已經不再模糊了。
現在的文字無法讓玩家點選,必須再加上碰撞器。請點選功能表 [ Component > Physics > Box Collider ] 為此文字物件加上方塊碰撞器。
我們的遊戲選單還需要一個退出遊戲的功能,複製 txt_NewGame 文字物件,並將物件名稱修改為「txt_Quit」,透過 Inspector 屬性檢視器將 Text 文字改為「退出遊戲」,並移到「開始遊戲」的下方位置。
點選功能表 [ File > Build Settings ] 開啟 Build Settings 對話框。
將 Project 專案面板的 MainMenu 主選單與 Level_01 第一關的場景,分別拖曳到 Build Settings 對話框的 Scenes in build 欄位,您可以使用滑鼠拖曳來調整場景的順序,因為遊戲執行時會先出現主選單,點選後才會進入第一關的場景,請確認 MainMenu 在第一項,Level_01 在第二項的位置。

製作選單項目的互動效果,請建立新的 JavaScript 腳本,並命名為「MenuItem」,開啟腳本編輯器輸入程式碼。
function OnMouseEnter () {
 renderer.material.color = Color.red;
 // 滑鼠游標移到文字時變成紅色
}
function OnMouseExit () {
 renderer.material.color = Color.white;
 // 滑鼠游標移開時文字變回白色
}

指定此腳本給選單的文字物件,按下播放按鈕進行測試,滑鼠游標移到選單時,已經可以看到文字的互動效果。
在腳本第一行的上面插入程式碼
var isQuitBtn = false;
在腳本最後一行的下方加上程式碼
function onMouseUp () {
if(isQuitBtn){
Application.Quit();
}
else{
Application.LoadLevel(1);
}

使用 3D Text 製作的選單,只能製作簡單的互動文字效果,稍後介紹另一種方法。


點選功能表 [ GameObject > Create Empty ] 建立一個空物件,並且命名為 Main Menu(主選單),稍後將 GUI 腳本指定給 Main Menu 物件,即可在遊戲的畫面上繪製出選單的元件。

繪製文字按鈕
建立一個新腳本,命名為「GUI_TextButton」,使用腳本編輯器輸入。
function OnGUI() {
if (GUI.Button(Rect(10,10,50,30),"Click"))
Debug.Log("按下文字按鈕");
}

Rect 代表矩形 ( Rectangle ) 相關說明請參閱

繪製影像按鈕
建立一個新腳本,命名為 GUI_ImgButton
首先定義一個 btnTexture 變數來設定使用的紋理檔案。
var btnTexture : Texture;
function OnGUI() {
if (GUI.Button(Rect(10,10,50,50),btnTexture))
Debug.Log("按下影像按鈕");
}


GUI.Label
Make a text or texture label on screen.

GUI.Box
Make a graphical box.

GUI.Button
Make a single press button. The user clicks them and something happens immediately. 
GUI.RepeatButton
Make a button that is active as long as the user holds it down.

GUI.TextField
Make a single-line text field where the user can edit a string. 
GUI.PasswordField
Make a text field where the user can enter a password.

GUI.TextArea
Make a Multi-line text area where the user can edit a string.

GUI.Toolbar
Make a toolbar

GUI.Toggle
Make an on/off toggle button.

GUI.BringWindowToBack
Bring a specific window to back of the floating windows.

GUI.BringWindowToFront
Bring a specific window to front of the floating windows.

使用 GUI Texture 製作選單
使用 GUI Texture 製作遊戲選單的流程與製作網頁導覽列很像。
首先,使用 Photoshop 製作遊戲選單,你可以自行編排標題與選項的位置。
使用圖層樣式製作選單文字的互動效果,例如光暈、漸層、筆畫…等。
對齊與均分選單的項目,檢查文字的大小是否需要調整,選單項目之間的距離是否太近或太遠。
在圖層面版選取所有選項的文字圖層,點選功能表 [ 圖層 > 對齊 > 水平居中 ] 讓選項對齊。而點選功能表 [ 圖層 > 均分 > 垂直居中 ] 讓選項的距離調為一致。
提示:若您使用的 Photoshop 屬於較早期的版本,可能未提供圖層的對齊與均分功能。