參考資料：https://item.taobao.com/item.htm?spm=a21n57.1.0.0.2b4f523cAV5i43&id=716635137219&ns=1&abbucket=15#detail
基礎工程：https://download.csdn.net/download/qq_17523181/88559312
1. 介紹
- 工程素材
2. 創建Widget
- UE5 UI系統的發展：開始使用Slate系統，比較難用，UMG提供了藍圖制作UI的方式，Widgets是UMG的一個方案
- Widgets的幾個開始節點
- 創建Widget，鼠標右鍵，選擇Widget blueprint，文件命名個人喜好UI_做前綴
- 添加UI，在場景藍圖中，選擇Create Widget節點，生成一個變量，添加到Viewport中
- 刪除UI，把場景藍圖的Input設置下，便于加入鍵盤操作
- 刪除
3. 設計窗口介紹
- 組件窗口，屬性窗口，設計與藍圖切換，層級窗口 以及生成點擊事件等操作
- 跳轉到資源管理器的按鈕
- 設置固定分辨率
- 組件窗口
- 層級窗口
- 動畫窗口
- 屬性窗口
- 設計工作一般在些窗口完成
4. Designer組件
-
Border：為下面的子組件制作一個邊框
-
Button：按鈕組件
-
Check Box：點擊框
-
Image：圖片框
-
Progress Bar：進度條
-
RadialSlider：圓圈滾動條
-
Text 與 RichTextBlock：文本與富文本，可通過建立樣式文件，為富文本提供樣式標簽支持
-
Slider：滾動條
-
Input：輸入類組件
-
Mics：縮略內容
-
Primitive - Circular Throbber：加載
-
Primitive - Spacer：兩個對象間的空格
-
Primitive - Throbber：橫形加載等待條
-
Special Effects：Background Blur：背景模糊
-
Panels：組件里Slot屬性是可以設置對象的位置、對齊、錨點等功能
-
Panels - Canvas Panel：用于UI的分組
-
Panels - Grid Panel：表格布局
-
Panels - Horizontal Box：橫向布局
-
Panels - Scale Box：用于大小各異的內容，縮放布局，特別適合圖片
-
Panels - Scroll Box：滾動條
-
組件的基礎屬性：
– Visibility 可以設置占位隱藏等
– Render Opacity 用于透明
– Render Transform 渲染的變形 -
widget藍圖作為組件，可以自定義各組件的樣式
頁面制作上，先用Canvas進行分組，接著用Panel工具進行格式布局，最后使用內容組件
5. 動畫
- 快捷鍵Shift+Ctrl+Space，調出動畫窗口
- 左邊，需要建立一個動畫Animation
- 中間，建立軌道，或分層文件夾等
- 右邊，時間軸動畫
- 最后，需要在藍圖里啟動
6. widgets藍圖
- 事件預構造 、事件構造、事件初始化
- Pre Construct可以在編輯器里產生作用
- Construct在運行時產生作用，每次被添加時都會運行
- Initialized是只運行一次
- 藍圖的function，建議不要對外，是內部使用為主；對外可以統一提供事件；利用function增加可讀性，或者類的繼承
- 宏可以使用delay、move component to這樣的延遲函數，而function不行
- 變量與Bind功能
- 由組件提供的event各類事件
7. widgets藍圖調試
- Widget Reflector用于調試，相對比較復雜，布局出問題了，可以考慮用下
- Compiler Results，查看錯誤拋出
- 查找用到變量的地方
- 把print的時間設置0，看到值的變化
8. widgets的操作技巧
- 利用Wrap With，為一個層增加一個父層
- Replace With可以替換
- 層上右鍵鼠標，有選項可以全部折疊或展開
- 一些命名上的建議
- 規劃UI子模塊
教程最后制作一個Demo，這里不展開
整體教程結構比較清晰，也比較基礎
對照教程把Demo做完會更有收獲
也可以下載其他案例再對照看看，https://blog.csdn.net/qq_17523181/article/details/128679332?spm=1001.2014.3001.5501
祝福大家一切順利
