【Unity基礎知識】UMG的基本使用

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

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

UMG的核心是Widget，這些Widget是一些提前寫好的函數庫，主要用來創建UI元素，如按鈕，勾選框，滑動條以及進度條等。可以使用Widget藍圖進行編輯，不僅可以編輯UI，還可以編寫UI的交互邏輯，對應的Widget藍圖包含兩個部分，Designer窗口主要用于編輯UI層級并設置UI元素的自適應;Graphics窗口主要處理UMG的數據綁定和對應的邏輯，如點擊按鈕加載場景等等。

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

一、UMG的創建

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

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

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

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

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

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

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

3：層級：主要存放和展示當前Canvas中使用的UI元素及其層級關系。

4：視圖：用于創建和調節各個UI，以及UI之間的邏輯操作。

5：細節：顯示當前所選UI的屬性。

6：動畫：用于創建和編輯動畫。

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

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

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

點擊完之后會自動跳轉到藍圖界面。編寫按鈕對應的關卡跳轉邏輯，如下圖所示，創建OpenLevel節點并將要跳轉的關卡名稱填寫在Leve Name參數中。

UMG已經創建完成，別忘了點擊Compile和Save。

二、UMG的顯示

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

打開關卡藍圖，在EventBeginPlay節點(沒有的畫可以手動創建)之后連接CreateWidget和AddToViewport節點，并在CreateWidget節點的Class參數中指定為WBP_Main。

運行游戲發現無法顯示鼠標，所以我們需要再添加兩個節點，如下圖所示。

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