UE4筆記-UMG


1, 錨的概念

錨(Anchor)用來定義 UI 控件在 畫布面板 上的預期位置,並在不同的屏幕尺寸下維持這一位置 。錨也可以理解為就是用來設置布局方式的,隨着屏幕尺寸的改變,定義這個UI相對於父節點怎么停靠以及是否拉伸。

Detail面板也有預設的錨,大多數情況下預設錨就可以滿足設計需求:

 

 

 

 

 

 

Position X 、Position Y 就是對其點(Alignment)相對於錨點的位置偏移

Size X、Size Y 就是這個空間的寬高

Size To Content 定義控件尺寸是否有由控件的內容指定,比如在一個勾選了Size To Content的Canvas Panel里邊放一個Button, 這個Canvas Panel的Size會隨着里邊Button Size的變大而變大,減小而減小。

ZOrder 指定層級關系,值越大越后渲染,越在上層

2, 常用控件

 

 

  •  Border 是一個只能包含一個子控件的容器,提供使用邊框圖像和可調節的填補將其包圍起來的機會。
  • Button 按鈕~

  • Check Box 復選框 可以顯示“未選中”、“選中”和“不確定”三種切換狀態,可以使用復選框(Check Box)控件來制作經典復選框、切換按鈕或單選按鈕

  • Image  圖片,可以在畫刷選項里給他選一個圖片,也可以在畫刷選項里給他着色(Tint)就相當於在上面蒙一層顏色

  • Name Slot 是一個可用任何其他控件來填充的外部槽,填充的控件的大小由這個槽來控制

  • Progress Bar 進度條 ,Bar Fill Type 可以選擇Left to Right、Right to Left、Fill from Center、Top to Bottom、Bottom to Top

  • Rich Text Block 富文本官方文檔https://docs.unrealengine.com/zh-CN/Engine/UMG/UserGuide/UMGRichTextBlock/index.html

  • Slider 滑動條~

  • Text 文本 可以設置錨點、大小、字體、顏色、描邊、陰影、是否自動行

 

 

  • ComboBox 包含列表的下拉菜單
  • Spin Box 數字輸入框,就像ue4里很多屬性輸入框一樣,允許直接輸入數字或點擊並滾動數字,數字的大小字體什么的在Display-Font 里設置

  • TextBox 單行文本輸入框

  • TextBox(Multi-Line) 多行文本輸入框

  • Editable Text 相當於簡易版的Text Box但沒有框背景

  • Editable Text(Mutil-Line) 相當於簡易版的Text Box(Multi-Line) 但沒框背景

 

 

  • Canvas Panel畫布面板 可以在上面擺放任意控件
  • Grid Panel 網格面板,在所有子控件之間平均分割可用空間的面板。Fill Rules可以設置每個單元格內控件的拉伸比重,這個是Grid Panel自身的屬性,選中單元格內控件,該控件Grid Slot中:

     

     

    Padding:表示距離單元格內邊距,也可以理解為留白 距離單元格留多大空隙,

    Horizontal Alignment:橫向對齊、Vertical Alignment:垂直對齊

    Row:表示在Grid Panel中的行索引

    Row Span:跨行

    Column:在Grid Panel中的列索引

    Column Span:跨列

    Layer:相當於ZOrder,當兩個控件在一個單元格中的時候通過設置Layer調整顯示順序

    Nudget.X、Nudget.Y,偏移,跟Render Transform中Transform作用相同。

    Grid Panel的單元格默認情況下是盡可能的小,如果手動把一個控件的列索引設置成原來的列索引+1,做出空出一列的效果,但是實際顯示效果並沒有空出一列,其實內部已經空出了一個空的單元格,只不過這個單元格中沒有控件,又遵循盡可能小的原則所以看不出來,這時候可以通過Fill Rules設置一下單元格的拉伸比重,就可以顯示出這個空的單元格了。

  • Horizontal Box 水平框,是內部控件水平布局

  • Overlay 允許控件上下堆疊的一個容器,其內部的控件疊加在一起,不能設置位置,也不能設置ZOrder(層級只能在編輯器里邊手動調節),壓根就沒有ZOrder屬性,內部控件可以調整自己的布局方式(上、下、左、右停靠,水平方向、垂直方向拉伸)

  • Safe Zone 拉取平台安全區信息並添加填充。例如劉海屏,如果UI按等比拉伸可能會被上邊的劉海擋住,如果把Saft Zone作為根節點,Saft Zone內的子控件就不會被劉海擋住了
  • Scale Box 縮放框,允許用戶按所需大小放置內容並將其縮放為符合框內所分配區域的約束尺寸的控件。Stretching屬性項來設置拉伸方式(Scale to Fill充滿整個框、Scale to Fit X充滿X軸向、Scale to Fit Y充滿Y軸向還是Scale to Fit 保持原比例填充)

  • Scroll Box 可以設置橫向、縱向滾動的框

  • Size Box  用於指定所需尺寸。用了再說吧

  • Uniform Grid Panel 在所有子控件之間平均分割可用空間的面板。可以設置子控件內邊間距和所在的行列索引值

  • Vertical Box 和橫向布局的框差不多,只是方向變成了縱向而已

  • Widget Switcher 控件切換器類似於選項卡控件,但沒有選項卡,你可以自行創建並與此控件組合以獲得類似於選項卡的效果。一次最多只顯示一個控件。通過設置Active Widget Index的值來控制顯示那個子控件。

  • Wrap Box 該控件會將子控件從左到右排列,超出其寬度時會將其余子控件放到下一行。

 

 

  • Circular Throbber 循環展示圖像的動態瀏覽圖示控件。
  • Menu Achor 菜單錨 本身不顯示任何東西,只是用來指定一個位置,彈出菜單將從此處調出並被錨定在此處。
  • Native Widget Host 容器控件,可包含一個子Slate控件。只需要在某個UMG控件中嵌套一個原生控件時,應使用該控件。用的很少…
  • Spacer  隔離控件(Spacer)提供與其他控件之間的自定義填充。隔離控件並不進行視覺呈現,在游戲中不可見。
  • Throbber  動畫式的動態瀏覽圖示(Throbber)控件,在一行中顯示幾個縮放的圓圈(例如,可以用來表示正在進行加載)。

 

 

 

  •  Expandable Area 可擴展區域,它包含Header和Body兩個部分。借助它,你可以折疊或展開容器中的子控件。

 

3, Sprite切圖

可以在Brush.Image 中選則Sprite,選擇保存的位置並命名(一般情況下把那個合圖命名為Spritex_0)。然后雙擊打開編輯界面

 

 

a,選擇源文件 b,點擊編輯源文件按鈕進入編輯狀態

 

 

編輯源文件 可以選動全部導出,也可以按住Ctrl+雙擊某個圖來導出單個圖

 

 

4, 動畫

1,點擊+Animation按鈕添加動畫軌並為這個動畫軌命名, 添加動畫軌之后,時間軸(TimeLine)就可以編輯了。

2, 點擊+Track按鈕選要添加動畫的UI控件

 

 

3, 拖動時間滑塊,給特定時間點添加關鍵幀,控件Detail面板只要有這種小加號的都是可以添加關鍵幀的。

 

 

 

 

4, 切到圖表窗口 把剛剛創建的動畫軌變量拖出來,調用Play Animation來播放動畫。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM