創建 UI 控件#
1. 在內容菜單(Content Browser)面板,點擊添加(Add)或者右鍵空白處,依次選擇用戶界面(User Interface)/ 控件藍圖(Widget Blueprint)。
2. 在彈出來的窗口中,點擊 User Widget 即可創建一個 UI 控件,可以自定義命名(規範一點可以命名為 WBP_XXX)。
初識 UMG UI 編輯器#
雙擊 UI 控件藍圖打開 UMG 設計器:
UMG 主要由七個部分組成:
選項卡 | 用途 |
---|---|
1. 設計器(Designer) | 設計 UI 佈局的畫布,用於搭建並顯示 UI,可以擺放 UI 在螢幕中的位置 |
2. 調色板(Palette) | 可供使用的控件列表,引擎自帶的或用戶自定義的控件模板 |
3. 細節面板(Details) | 控件的屬性,包括旋轉變換屬性等 |
4. 層級面板(Hierarchy) | 當前創建的所有控件列表都顯示在這裡,UI 之間的層級關係 |
5. 動畫面板(Animations) | 為 UI 創建的動畫都在這裡顯示 |
6. 時間軸(Timeline) | 控件動畫的屬性和關鍵幀,可以製作幀動畫 |
7. 編輯器模式(Editor Mode) | 有設計器和圖表兩種編輯模式切換,圖表模式與藍圖編輯器具有幾乎相同的功能。 |
tip: 畫布上的操作,通過按住右鍵並移動滑鼠即可上下左右平移畫布,通過滑鼠滾輪滑動可進行縮放畫布。
搭建 UI 界面#
在進行 UI 設計之前,你應該先往畫布中放置一個 Canvas Panel 作為根物體。
可以在調色板裡面搜索 Canvas Panel 或者在展開面板下找到:滑鼠左鍵按住並拖拽到畫布區域或層級面板中鬆開即可。
之後你就可以在畫布中放置你所需的其他控件了,比如文本、按鈕等等。
你還可以重命名控件、拖動控件、調整大小,也可以通過細節面板修改相關信息。
在設計好 UI 界面之後,記得點擊編輯器左上角的編譯並保存。
顯示 UI 界面#
當你很高興的運行遊戲時卻發現看不見你剛才設計的 UI,這是因為要將 UI 顯示到 Game 視口中,還要做一點額外的藍圖操作。
1. 在關卡編輯器主工具欄處依次點擊藍圖 / 打開關卡藍圖。
2. 右鍵空白處搜索並添加Event BeginPlay節點
3. 將滑鼠放置到 Event BeginPlay 節點的執行引腳上,按住左鍵並拖拽到其餘空白處鬆開並搜索Create Widget節點,點擊 Class 參數下拉列表,搜索我們要創建的 UI 實例 “WBP_HUD”。
4. 同樣的操作將 Create Widget 節點的執行引腳連接到Add to Viewport節點,並將其返回值 Return Value 連接到 Target。
5. 點擊左上角編譯並保存,關閉該窗口,點擊主編輯界面的運行按鈕,這時就能在遊戲視口上看到製作的 UI 界面了。