IT培訓(xùn)網(wǎng)
IT在線學(xué)習(xí)
在任何游戲和應(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是一些提前寫(xiě)好的函數(shù)庫(kù),主要用來(lái)創(chuàng)建UI元素,如按鈕,勾選框,滑動(dòng)條以及進(jìn)度條等?梢允褂肳idget藍(lán)圖進(jìn)行編輯,不僅可以編輯UI,還可以編寫(xiě)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)行命名。
雙擊即可打開(kāi),打開(kāi)之后界面如下圖所示。接下來(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)畫(huà):用于創(chuàng)建和編輯動(dòng)畫(huà)。
基本界面已經(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)圖界面。編寫(xiě)按鈕對(duì)應(yīng)的關(guān)卡跳轉(zhuǎn)邏輯,如下圖所示,創(chuàng)建OpenLevel節(jié)點(diǎn)并將要跳轉(zhuǎn)的關(guān)卡名稱填寫(xiě)在Leve Name參數(shù)中。
UMG已經(jīng)創(chuàng)建完成,別忘了點(diǎn)擊Compile和Save。
二、UMG的顯示
我們到目前為止只是創(chuàng)建了UI,想要在游戲運(yùn)行過(guò)程中顯示UI,需要執(zhí)行額外的步驟,接下來(lái)一起看一下。
打開(kāi)關(guān)卡藍(lán)圖,在EventBeginPlay節(jié)點(diǎn)(沒(méi)有的畫(huà)可以手動(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)。
更多內(nèi)容
>>本文地址:http://www.yiyunku.cn/zhuanye/2023/72219.html
聲明:本站稿件版權(quán)均屬中公教育優(yōu)就業(yè)所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
1 您的年齡
2 您的學(xué)歷
3 您更想做哪個(gè)方向的工作?
07月15日Java
咨詢/試聽(tīng)07月15日Python+人工智能
咨詢/試聽(tīng)07月15日Web前端
咨詢/試聽(tīng)07月15日UI設(shè)計(jì)
咨詢/試聽(tīng)07月15日大數(shù)據(jù)
咨詢/試聽(tīng)07月15日Java
咨詢/試聽(tīng)07月15日Python+人工智能
咨詢/試聽(tīng)07月15日Web前端
咨詢/試聽(tīng)07月15日UI設(shè)計(jì)
咨詢/試聽(tīng)07月15日大數(shù)據(jù)
咨詢/試聽(tīng)