虛幻引擎(UE4)技術(shù)基礎(chǔ)項目六UI課件

1、 項目六 UI界面 任務1：認識虛幻引擎動態(tài)圖形設計器任務2：制作游戲主菜單任務1：認識虛幻引擎動態(tài)圖形設計器虛幻動態(tài)圖形UI設計器控件輸入模式錨點1.1虛幻動態(tài)圖形UI設計器創(chuàng)建控件藍圖在內(nèi)容瀏覽器中，點擊“添加新內(nèi)容”按鈕，在“用戶界面”下選擇“控件藍圖”選項。打開控件藍圖編輯器。1.1虛幻動態(tài)圖形UI設計器創(chuàng)建控件藍圖控件藍圖編輯器布局及各窗口功能描述窗口描述菜單欄常用功能菜單。工具欄包含藍圖編輯器常用功能，如編譯、保存和播放。編輯器模式切換“設計師”和“圖表”模式?！霸O計師”模式適于制作圖形界面布局，“圖表”模式用于編寫事件的相應程序。控制板控件列表，用戶可以將其中的控件拖放到視覺設計

2、器中。層次結(jié)構(gòu)顯示用戶控件的父級結(jié)構(gòu)。視覺設計器操縱已拖動到視覺設計器中的控件，是布局的視覺呈現(xiàn)。詳細信息顯示當前所選控件的屬性。動畫UMG 的動畫軌，可以用于設置控件的關(guān)鍵幀動畫。1.2控件控件控件是指對數(shù)據(jù)和方法的封裝?？丶梢杂凶约旱膶傩院头椒ǎ渲袑傩允强丶?shù)據(jù)的簡單訪問者，方法則是控件的一些簡單而可見的功能。設計控件是一項繁重的工作，要求用戶精通面向?qū)ο蟪绦蛟O計。虛幻引擎4為用戶提供了大量的已封裝好的控件，便于用戶調(diào)用，簡化工作。1.2控件控件常見控件類控件描述Border Border是一種容器控件，可以容納一個子控件，可以為子控件提供環(huán)繞的邊框圖像以及可調(diào)整的填充樣式。Butto

3、n 按鈕是一種可點擊的基元控件，可實現(xiàn)基本的交互。Check Box復選框控件用于顯示幾種切換狀態(tài)其中之一，即“未選中”、“已選中”以及“不確定”。Image 圖像控件用于在UI中顯示平板刷、紋理或材質(zhì)。Named Slot用于為用戶控件顯示可使用任何其他控件來填充的外部槽，對創(chuàng)建自定義控件功能而言，此控件非常有用。Progress Bar 進度條控件是一種簡單的可填充條圖形，可以用于表示經(jīng)驗值、體力值、獲得的點數(shù)等。Slider此控件可顯示滑動條和圖柄，用于控制值在0-1之間變動。Text 在屏幕上顯示文本的基本方式，可用于對選項或其他 UI 元素進行文本說明。Text Box允許用戶鍵入自

4、定義的文本。僅允許輸入單行文本。1.2控件控件面板控件類控件描述Canvas Panel 畫布面板用于將控件放置在任意位置，錨定控件，或與畫布上的其他子對象進行疊置排序。畫布面板是進行手動布局的理想控件。 Grid Panel 這是一種在所有子控件之間平均分割可用空間的面板。Horizontal Box用于將子控件水平排布成一行。Overlay 允許控件互相堆疊，并針對每一層的內(nèi)容使用簡單布局。Safe Zone 拉取平臺安全區(qū)信息并添加填充。Scale Box用于以所需的大小放置內(nèi)容，并對其進行縮放以滿足該框所分配到的區(qū)域大小的限制。Scroll Box 一組可任意滾動的控件。Size Bo

5、x 一種可定義空間大小的面板。Vertical Box 垂直框控件是一種布局面板，用于自動垂直排布子控件。Widget Switcher可以創(chuàng)建并組合以獲得類似于選項卡的效果。一次最多只顯示一個控件。Wrap Box該控件會將子控件從左到右排列，超出其寬度時會將其余子控件放到下一行。1.2控件控件輸入控件類選項描述組合框（字符串）用于通過下拉菜單向用戶提供選項列表，用戶可以從中選擇一項。數(shù)字調(diào)整框一種數(shù)值輸入框，允許直接輸入數(shù)字，或通過點擊并滑動選擇數(shù)字。文本框（多行）允許用戶輸入多行文本。1.2控件控件圖元控件類選項描述Circular Throbber 循環(huán)展示圖像的動態(tài)瀏覽圖示控件。Ed

6、itable Text這是一種沒有框背景的文本字段，允許用戶進行輸入。該控件僅支持單行可編輯文本。Editable Text（Multi-Line）可編輯文本，支持多行文本。Menu Anchor此控件用于指定一個位置，彈出菜單將從此處調(diào)出并被錨定在此處。Native Widget Host這是一種容器控件，可以在UMG控件中嵌套一個原生控件。Spacer 隔離控件提供其他控件之間的自定義填充。隔離控件本身并不進行視覺呈現(xiàn)，在游戲中不可見。Throbber 動畫式的動態(tài)瀏覽圖示控件，在一行中顯示幾個縮放的圓圈，可以用來表示正在進行加載等。1.2控件創(chuàng)建控件操作方法：打開另一個藍圖（如關(guān)卡藍圖或

7、角色藍圖），鼠標右鍵單擊調(diào)出上下文關(guān)聯(lián)菜單，輸入“createwidget”關(guān)鍵詞，選擇“創(chuàng)建控件”1.2控件創(chuàng)建控件鼠標左鍵點擊節(jié)點的“Class”引腳的“選擇類”按鈕，在打開的菜單中選擇之前新建的控件藍圖的名字，目的是將此控件與控件藍圖之間建立聯(lián)系。1.2控件創(chuàng)建控件“Return Value”引腳返回“Class”類中引用的實例，鼠標左鍵拖曳“Return Value”引腳，在關(guān)聯(lián)菜單中選擇“提升為變量”1.2控件創(chuàng)建控件藍圖中會出現(xiàn)名為“設置”的節(jié)點，并在“我的藍圖”面板“變量”下新增一個變量（重命名為“UMGTest”），之后可以以此訪問該控件藍圖。1.2控件創(chuàng)建控件在藍圖中添加“A

8、dd to Viewport”，并建立連接，將控件藍圖的內(nèi)容推送到屏幕上顯示。1.3輸入模式輸入模式在有些情況下，玩家想要與用戶界面進行交互，而有些情況下則希望能夠完全忽視掉用戶界面。通過設置輸入模式節(jié)點可以用設定玩家與UI交互的方式“Set Input Mode Game and UI”節(jié)點，使玩家可以同時操縱游戲和UI，例如，控制屏幕上的角色的同時可以點擊任意的按鈕或UI元素?！癝et Input Mode Game Only”節(jié)點僅對游戲啟用輸入，忽視UI元素，適用于非交互性UI元素，如體力、點數(shù)或時間顯示?！癝et Input Mode UI Only”節(jié)點只允許UI導航不允許游戲輸入

9、的情況下使用。這將完全禁用掉所有的游戲控制，UI將成為所有輸入的對象，請謹慎使用該節(jié)點。1.4錨點錨點功能錨點用來定義UI控件在畫布面板上的預期位置，并在不同的屏幕尺寸下維持這一位置。錨點在正常情況下以Min(0,0)和Max(0,0)表示左上角，Min(1,1)和Max(1,1)表示右下角。創(chuàng)建畫布面板并向其中添加其他UI控件后，既可以從一系列預設的錨位置中進行選擇，也可以手動設置錨位置。1.4錨點錨點工作原理黃框內(nèi)圖案是錨圖案，它表示畫布面板上錨點的位置。1.4錨點錨點工作原理場景中，水平和垂直黃線表示按鈕基于畫布尺寸相對于窗口左上角錨的位置。1.4錨點錨點工作原理如果把錨點移動到右下角，

10、按鈕的位置相對于錨點之間的距離即發(fā)生了改變。錨點的位置會根據(jù)屏幕尺寸來影響控件的位置。 任務2：制作游戲主菜單創(chuàng)建主菜單控件制作主菜單外觀設置主菜單按鈕跳轉(zhuǎn)功能2.1創(chuàng)建主菜單控件創(chuàng)建主菜單控件步驟（1）利用關(guān)卡編輯器的“文件”菜單創(chuàng)建一個新的空關(guān)卡，用于制作顯示主菜單的場景，將新關(guān)卡命名為“MainMenuMap”。打開關(guān)卡藍圖。（2）創(chuàng)建控件藍圖，用于制作主菜單。在內(nèi)容瀏覽器中，點擊“添加新內(nèi)容”按鈕，在“用戶界面”下選擇“控件藍圖”選項，并對其進行重命名為“WBP_MainMenu”。2.1創(chuàng)建主菜單控件創(chuàng)建主菜單控件步驟（3）創(chuàng)建控件并利用控件對主菜單的顯示做相應的設置。打開關(guān)卡藍圖，

11、鼠標右鍵單擊調(diào)出上下文關(guān)聯(lián)菜單，輸入“createwidget”關(guān)鍵詞，選擇“創(chuàng)建控件”，并在“Class”引腳的“選擇類”按鈕中選擇引用的控件藍圖“WBP_MainMenu”。2.1創(chuàng)建主菜單控件創(chuàng)建主菜單控件步驟將控件節(jié)點的“Return Value”引腳返回值提升為變量，鼠標左鍵拖曳“Return Value”引腳，在關(guān)聯(lián)菜單中選擇“提升為變量”，并在“我的藍圖”面板“變量”將新增的變量重命名為“MainMenu Widget”，在藍圖中添加“Add to Viewport”，并建立連接，將控件藍圖的內(nèi)容推送到屏幕上顯示。2.1創(chuàng)建主菜單控件創(chuàng)建主菜單控件步驟設置輸入模式和光標顯示：添加

12、“Set Input Mode Game and UI”節(jié)點，使玩家可以同時操縱游戲和UI。添加“Set Show Mouse Cursor”節(jié)點來設置啟用或禁用鼠標光標。注意增加3個“Get Player Conftroller”節(jié)點以獲得相應設置的玩家控制權(quán)。2.2制作主菜單外觀添加控件雙擊打開用于制作主菜單的控件藍圖“WBP_MainMenu”編輯器，打開控制板的“面板”選項，鼠標左鍵將“Canvas Panel”控件添加到設計視口中。并調(diào)整其大小，以適合主菜單的要求。2.2制作主菜單外觀添加控件在“Canvas Panel”下繼續(xù)添加面板控件“Vertical Box”2.2制作主菜單

13、外觀設置錨點在細詳細信息面板點開“錨點”的下拉菜單，選擇平鋪模式。2.2制作主菜單外觀添加文本控件在“Vertical Box”下添加“Text”文本控件，文本控件在“常見”控件類下。添加完畢后，在詳細信息面板對文本進行設置。依次修改內(nèi)容、顏色、字號、和對齊方式等屬性。2.2制作主菜單外觀添加控件（1）雙擊打開用于制作主菜單的控件藍圖“WBP_MainMenu”編輯器，打開控制板的“面板”選項，鼠標左鍵將“Canvas Panel”控件添加到設計視口中。并調(diào)整其大小，以適合主菜單的要求。2.2制作主菜單外觀制作菜單按鈕在層次結(jié)構(gòu)“Vertical Box”下添加“Button”控件，“Butt

14、on”控件位于控制板“常見”控件下。在“Button”控件層級下添加“Text”文本控件，將文本控件拖放到按鈕上，其文本內(nèi)容改為“開始游戲”，其他參數(shù)設置與“主菜單”文本效果類似。按照此方法依次制作出“設置”和“退出”按鈕。2.3設置按鈕跳轉(zhuǎn)功能切換圖標頁簽設置按鈕的跳轉(zhuǎn)功能需要在控件藍圖的圖表頁簽下完成。切換方法：鼠標點擊控件藍圖右上角的“圖表”按鈕。2.3設置按鈕跳轉(zhuǎn)功能設置主菜單按鈕功能在圖表頁簽中為“開始游戲”按鈕添加點擊事件。在“我的藍圖”面板點擊變量下的“Button_0”，在“事件”面板，鼠標單擊“On Clicked”選項右側(cè)的“+”2.3設置按鈕跳轉(zhuǎn)功能設置主菜單按鈕功能“開

15、始游戲”按鈕的點擊事件為打開一個游戲關(guān)卡，在“On Clicked”節(jié)點后連接“Open Level”節(jié)點，并在“Open Level”節(jié)點的“Level Name”輸入框中輸入一個想要打開的游戲關(guān)卡名稱。2.3設置按鈕跳轉(zhuǎn)功能設置主菜單按鈕功能“退出”按鈕的點擊事件為結(jié)束游戲。2.3設置按鈕跳轉(zhuǎn)功能設置分辨率菜單回到“WBP_MainMenu”控件藍圖的“設計師”頁簽，層次結(jié)構(gòu)中復制“Canvas Panel”，在“Canvas Panel”點擊鼠標右鍵，利用復制粘貼即可完成。利用詳細信息面板的參數(shù)設置2.3設置按鈕跳轉(zhuǎn)功能設置分辨率菜單在運行主菜單時不應顯示分辨率菜單，設置方法：在層次結(jié)構(gòu)中選中“Setting”控件，在詳細信息中的“Behavior”選項下找到“Visibility”，將其設置為“Hidden”。2.3設置按鈕跳轉(zhuǎn)功能設置分辨率菜單對分辨率菜單的三個按鈕添加點擊事件。注意：在設計師頁簽下，將原“Canvas Panel”和“Setting”控件詳細信息面板的控件名稱后面的“Is Variable”前的復選框勾選，設置為可見，如圖6-38所示。以便在圖表頁簽的變量中找到這兩個控件變量，從而對其進一步編輯。2.3設置按鈕跳轉(zhuǎn)功能設置分辨率菜單對主菜單的“設置”按鈕的點擊事件進行設置。進入圖表頁簽，選擇我的藍圖中的“變量”下的