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

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

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

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

接下來我們簡單講解一下UMG的基本使用。

一、UMG的創(chuàng)建

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

1)點擊Content Browser左上角的”Add New”;

2)直接在Content Browser中右鍵點擊;

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

雙擊即可打開，打開之后界面如下圖所示。接下來簡單介紹一下界面中的各個部分。

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

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

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

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

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

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

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

接下來為為按鈕添加點擊事件。

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

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

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

二、UMG的顯示

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

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

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

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