【Unity基礎(chǔ)知識(shí)】UMG的基本使用

在任何游戲和應(yīng)用中，User Interface(以下簡(jiǎn)稱UI)是必不可少的一部分。同樣在UE4中UI也是必不可少的內(nèi)容，接下來(lái)我們看一下UE4中是如何創(chuàng)建和使用UI的。

Unreal Motion Graphics UI Designer(以下簡(jiǎn)稱UMG)是UE4提供的一種可視化的解決方案，主要用來(lái)創(chuàng)建UI元素，如游戲中的HUD(Heads-Up Display)，菜單和其他想要呈現(xiàn)給用戶的UI元素。

UMG的核心是Widget，這些Widget是一些提前寫好的函數(shù)庫(kù)，主要用來(lái)創(chuàng)建UI元素，如按鈕，勾選框，滑動(dòng)條以及進(jìn)度條等。可以使用Widget藍(lán)圖進(jìn)行編輯，不僅可以編輯UI，還可以編寫UI的交互邏輯，對(duì)應(yīng)的Widget藍(lán)圖包含兩個(gè)部分，Designer窗口主要用于編輯UI層級(jí)并設(shè)置UI元素的自適應(yīng);Graphics窗口主要處理UMG的數(shù)據(jù)綁定和對(duì)應(yīng)的邏輯，如點(diǎn)擊按鈕加載場(chǎng)景等等。

接下來(lái)我們簡(jiǎn)單講解一下UMG的基本使用。

一、UMG的創(chuàng)建

UMG屬于UE4的一種自帶資源，所以我們需要在Content Browser中創(chuàng)建。這里有兩種方式：

1)點(diǎn)擊Content Browser左上角的”Add New”;

2)直接在Content Browser中右鍵點(diǎn)擊;

在彈出來(lái)的菜單中選擇User Interface->Widget Blueprint，創(chuàng)建完成之后進(jìn)行重命名，此處筆者命名為WBP_Main，讀者可以根據(jù)自己的需要進(jìn)行命名。

雙擊即可打開，打開之后界面如下圖所示。接下來(lái)簡(jiǎn)單介紹一下界面中的各個(gè)部分。

1：工具欄，主要存放常用的工具，如Compile(編譯)、Save(保存)、Browse(在Content Browser中顯示)等。

2：控制板：主要存放系統(tǒng)和自定義的UI元素，如按鈕、圖片等。

3：層級(jí)：主要存放和展示當(dāng)前Canvas中使用的UI元素及其層級(jí)關(guān)系。

4：視圖：用于創(chuàng)建和調(diào)節(jié)各個(gè)UI，以及UI之間的邏輯操作。

5：細(xì)節(jié)：顯示當(dāng)前所選UI的屬性。

6：動(dòng)畫：用于創(chuàng)建和編輯動(dòng)畫。

基本界面已經(jīng)熟悉了，我們接下來(lái)創(chuàng)建一個(gè)按鈕。從控制板中拖拽Button到視圖中，適當(dāng)調(diào)整大小和位置，拖動(dòng)Text作為Button的子物體，并將Text對(duì)應(yīng)的文字改為“Start Game”，具體效果如下圖所示。

接下來(lái)為為按鈕添加點(diǎn)擊事件。

選擇按鈕，在細(xì)節(jié)面板中點(diǎn)擊OnClicked后面的加號(hào)，如下圖所示。

點(diǎn)擊完之后會(huì)自動(dòng)跳轉(zhuǎn)到藍(lán)圖界面。編寫按鈕對(duì)應(yīng)的關(guān)卡跳轉(zhuǎn)邏輯，如下圖所示，創(chuàng)建OpenLevel節(jié)點(diǎn)并將要跳轉(zhuǎn)的關(guān)卡名稱填寫在Leve Name參數(shù)中。

UMG已經(jīng)創(chuàng)建完成，別忘了點(diǎn)擊Compile和Save。

二、UMG的顯示

我們到目前為止只是創(chuàng)建了UI，想要在游戲運(yùn)行過(guò)程中顯示UI，需要執(zhí)行額外的步驟，接下來(lái)一起看一下。

打開關(guān)卡藍(lán)圖，在EventBeginPlay節(jié)點(diǎn)(沒(méi)有的畫可以手動(dòng)創(chuàng)建)之后連接CreateWidget和AddToViewport節(jié)點(diǎn)，并在CreateWidget節(jié)點(diǎn)的Class參數(shù)中指定為WBP_Main。

運(yùn)行游戲發(fā)現(xiàn)無(wú)法顯示鼠標(biāo)，所以我們需要再添加兩個(gè)節(jié)點(diǎn)，如下圖所示。

最終運(yùn)行效果如下圖所示，點(diǎn)擊左上方按鈕可以實(shí)現(xiàn)場(chǎng)景的跳轉(zhuǎn)。