1. 程式人生 > >在UNITY中創建出一個簡單的UI介面

在UNITY中創建出一個簡單的UI介面

在每一個軟體的應用中,使用者介面(UI)都是必不可缺少的一部分,是核心的特徵。遊戲也沒有拋棄這一規則。

大部分的遊戲都使用 UI 介面來方便快捷地顯示一些資訊,如在“音之國度”的遊戲中,需要藉助UI介面來顯示技能,召喚獸的資訊等。 Unity 3D 提供了許多 UI 元件,你都可以在你的遊戲中使用它們。

今天我將要製作的,是一個簡單的暫停選單。這個暫停選單將顯示一個內容為『Paused』的 text 元件和三個按鈕元件:分別是復位按鈕『Resume』,重新開始按鈕『Restart』,退出按鈕『Quit』,並且還是顯示遊戲從場景載入到現在的時間。

首先需要在UNITY中建立一個空專案。

在層級檢視上點選右鍵,並且選擇UI->Canvas。


正如我在之前文章中所提到的那樣,Canvas是所有UI元件的容器,是你存放這些UI元件的地方。任何您建立的UI元件都將會成為Canvas的一個子物件。當你建立Canvas的時候,你會主要到一個叫做"EventSystem"的東西也同時出現在你的層級檢視中。這個東西是用來確定滑鼠輸入的,對於UI元素來說至關重要。

如何恰當地設定Canvas

  • 在層級檢視中選擇 Canvas。

  • 在檢視檢視中,找到『Render Mode』然後選擇『Screen Space – Camera』。

  • 從層級檢視中拖拽主攝像機到檢視檢視中 Canvas 的『Render Mode』上。


這樣做可以確保我們的UI一直顯示在攝像機的檢視上

接下來我們需要建立一個自己的面板

同樣是右鍵層級檢視中的Canvas,然後選擇UI->Panel

你會發現你的遊戲畫面上好像有一層半透明的白色覆蓋。自己觀察Panel的面板可以發現,每個Panel元件裡,都連線著一個Image元件,這個元件的初始設定是白色和半透明的。

接下去新增一個內容為“暫停”的text元件。

在層級檢視的Canvas上右鍵然後選擇UI->Text。

在script介面中可以設定許多關於Text的引數,類似於顏色,字型,大小等。也可以使用類似HTML的方法來定義。比如:


使用後發現介面中顯示的字型變成了粗體。


設定完Text的屬性後,你可以在介面中自由地移動Text的位置,選擇放置在任何你想要放置的位置。


之後我們繼續進行按鈕的設定操作。

我們將在這個介面上設定三個按鈕,分別為“復位”“重新開始”“退出”。

首先需要在層級檢視中右鍵Panel

選擇UI->Button

重複兩次該操作之後,就可以獲得三個按鈕

調整位置以後獲得這樣的一個效果:


然後選擇Button裡的text選項,進行文字內容的編輯:


還可以在Image介面中對按鈕的顏色和材質進行修改,達到不同的效果。


還需要新增一個暫停計時的效果,一樣是在Panel中建立一個Text的UI元件。修改文字內容後,調整位置。


現在我們需要為我們的UI建立一些功能。所以首先要做的是,建立一個空的遊戲物件。在層級檢視中選擇這個物件,並且點選“Add Component”的按鈕。下滑選擇“New Script”,並且確定這是一個C# Script,用vs開啟這個Script,在裡面新增上你需要實現的功能的程式碼。

using UnityEngine;
using System.Collections;
using UnityEngine.UI; //Need this for calling UI scripts

public class Manager : MonoBehaviour {

[SerializeField]
Transform UIPanel; //Will assign our panel to this variable so we can enable/disable it

[SerializeField]
Text timeText; //Will assign our Time Text to this variable so we can modify the text it displays.

bool isPaused; //Used to determine paused state

void Start ()
{
UIPanel.gameObject.SetActive(false); //make sure our pause menu is disabled when scene starts
isPaused = false; //make sure isPaused is always false when our scene opens
}

void Update ()
{

timeText.text = "Time Since Startup: " + Time.timeSinceLevelLoad; //Tells us the time since the scene loaded

//If player presses escape and game is not paused. Pause game. If game is paused and player presses escape, unpause.
if(Input.GetKeyDown(KeyCode.Escape) && !isPaused)
Pause();
else if(Input.GetKeyDown(KeyCode.Escape) && isPaused)
UnPause();
}

public void Pause()
{
isPaused = true;
UIPanel.gameObject.SetActive(true); //turn on the pause menu
Time.timeScale = 0f; //pause the game
}

public void UnPause()
{
isPaused = false;
UIPanel.gameObject.SetActive(false); //turn off pause menu
Time.timeScale = 1f; //resume game
}

public void QuitGame()
{
Application.Quit();
}

public void Restart()
{
Application.LoadLevel(0);
}
}
編輯結束以後,儲存並關掉VS,返回到Unity的編輯器中。

在層級檢視上對於剛剛建立的遊戲專案左鍵點選,並把Panel拖拽到該遊戲專案指令碼的合適位置。

然後我們繼續為按鈕新增事件。

在層級檢視中選中『Resume』按鈕,然後在檢視檢視中找到『Button (Script)』元件,你會注意到有一個『On Click()』。這就是我們要給按鈕新增功能的地方。在右側選單底部點選『+』圖示,將會出現一個列表,拖拽『_GM』物件到這個位置。 
點選『No Function』下拉選單,然後選擇『Manager  UnPause()』

你剛剛所做的操作就是給按鈕添加了一些功能。現在,當點選按鈕的時候,UnPause()函式就會在執行的時候從『Manager』指令碼連線到『_GM』遊戲物件。為了讓你通過一個按鈕來呼叫一個函式,那麼這個函式需要宣告為 public,這就是為什麼我在『Manager』指令碼中把所有函式設定為public。

如果你現在運行遊戲,按下『esc』鍵,就會出現暫停選單,然後點選『Resume』按鈕。選單將會消失,遊戲將恢復。這就意味著按鈕的功能起作用了。

那麼,讓我們其他的按鈕也變得起作用吧:

在層級檢視中選中重試按鈕並且找到『OnClick()
點選『+』圖示,新增一個新的項
拖拽『_GM』物件到遊戲物體區域
點選顯示『No Function』的下拉選單
選擇 Manager > Restart()
最後,在層級檢視中點選退出按鈕也在檢視檢視中找到『OnClick()』
點選『+』圖示,新增一個新的項
拖拽『_GM』物件到遊戲物體區域
點選顯示『No Function』的下拉選單
選擇 Manager > QuitGame()
在我們完成最後一件事前。為了讓『Restart』功能能夠起作用,我們需要新增我們的場景到場景的索引列表中。

File > Build Settings… > 點選 “Add Open Scenes” 按鈕.

這就把當前場景分配到了場景列表裡了。因為這是名單中唯一的一個,它的索引就是 0,所以『Restart()』函式才會呼叫『Application.LoadLevel(0)』。現在,如果你運行遊戲並且按下『esc』鍵,你可以使用所有的按鈕。除非你建立程式並執行它,否則退出按鈕不會被注意到。Unity 編輯器無法退出應用程式,所以『Application.Quit()』函式不會做太多。但是如果點選 File > Build & Run 然後選擇你想做的設定,這個專案將會執行到一個獨立的視窗,然後點選退出就會看到程式退出了。