1. 在內(nèi)容瀏覽器中創(chuàng)建用戶界面->空間藍(lán)圖
2. 畫布Canvas：調(diào)整控件的位置，面板->畫布面板，一般1920*1080，放置控件拖入畫布
3. 圖像控件Image：用于渲染圖片、引用材質(zhì)，默認(rèn)為純色（純色不需要引用資源 ）
4. 設(shè)置圖片相對于錨點的位置
5. 圖片的尺寸
6. 圖像顯示層級Zorder
7. 讓圖像保持原始大小
8. 設(shè)置要引用的圖像（筆刷->）
9. 設(shè)置圖像顏色
10. 錨點Anchors：九點適配、單軸適配、父節(jié)點尺寸適配，長按shift更新對齊進(jìn)行匹配，長按Ctrl更新位置進(jìn)行匹配（unity是alt）
11. 文本Text：用于渲染文本
12. 設(shè)置文本內(nèi)容
13. 設(shè)置文本顏色
14. 設(shè)置文本字體：（C盤->Window->Fonts復(fù)制一份拖入內(nèi)容瀏覽器，彈出窗口選“是”，自動生成虛幻可以識別的字體）我超看看人家！unity?。?/span>
15. 輪廓
16. 將UI控件顯示到關(guān)卡：
17. 關(guān)卡->藍(lán)圖->打開關(guān)卡藍(lán)圖
18. 通過“創(chuàng)建控件”節(jié)點創(chuàng)建指定控件藍(lán)圖
19. 通過“添加到視口”節(jié)點將控件藍(lán)圖顯示到關(guān)卡

顯示鼠標(biāo)指針：默認(rèn)情況下，點擊游戲區(qū)域后鼠標(biāo)隱藏，不能操作UI，需要默認(rèn)顯示鼠標(biāo)指針來控制。

1. 在關(guān)卡藍(lán)圖中獲取玩家控制器
2. 通過玩家控制器顯示鼠標(biāo)指針
3. 可以通過FlipFlop控制鼠標(biāo)顯示與隱藏：FlipFlop在A和B狀態(tài)中輪流切換
4. 順序上反了一下，可以通過加not反過來

按鈕控件：

常用屬性：

• 按鈕默認(rèn)狀態(tài)
• 鼠標(biāo)經(jīng)過樣式
• 按下鼠標(biāo)樣式
• 已禁用
• 綁定指定事件

事件->“+”-> 在藍(lán)圖中創(chuàng)建一個點擊事件

滑條Slider：

滑條控件時可以拖動的UI控件，設(shè)置滑條的取值范圍，可以在拖動控件時，動態(tài)設(shè)置值，并且可以通過對應(yīng)事件實現(xiàn)滑條值的獲取

• 樣式->條厚度：調(diào)整滑條的寬度
• 鼠標(biāo)懸停時的樣式與非懸停時的樣式需要在細(xì)節(jié)中分別設(shè)置
• 事件->值變更時->藍(lán)圖

進(jìn)度條ProgressBar：

進(jìn)度條控件是用于顯示進(jìn)度的控件，可以通過設(shè)置進(jìn)度條的值來控制進(jìn)度條的顯示

動態(tài)設(shè)置控件的值：

設(shè)置進(jìn)度條的值：

1. 勾選細(xì)節(jié)中右上方“是變量”
2. 在圖表中，左邊“藍(lán)圖”拖入變量

設(shè)置文本的值：

方法一：（不推薦）

1. 勾選“是變量”
2. 藍(lán)圖中拖入變量

方法二：

1. 內(nèi)容->文本->創(chuàng)建綁定
2. 藍(lán)圖中，自動創(chuàng)建函數(shù)；也可以自己創(chuàng)建文本變量
3. 文本變量默認(rèn)值：藍(lán)圖->細(xì)節(jié)->默認(rèn)值

實現(xiàn)動態(tài)文本值變換：在事件圖表中->拖入變量->修改值

進(jìn)度條通過綁定實現(xiàn)控制：速度->百分比->創(chuàng)建綁定，藍(lán)圖->變量->創(chuàng)建一個浮點數(shù)變量->設(shè)置變量默認(rèn)值

通過移動滑塊來改變進(jìn)度條的值：在滑塊的“值改變時”中設(shè)置變量值，將變量值賦給進(jìn)度條的百分比綁定

退出游戲：“退出游戲”函數(shù)

Loading界面：

1. 進(jìn)度條的外框和填充圖都需要設(shè)置（特別是外框變形的情況下），顏色需要改變（不然會變色）
2. 控制進(jìn)度：在事件圖表中添加一個新事件，命名為“l(fā)oading”->設(shè)置浮點變量，作為進(jìn)度條的進(jìn)度，并將它綁定到進(jìn)度條的百分比上->判斷它小于1->加一個“分支”->當(dāng)變量小于1時，調(diào)用loading->在loading事件中，讓變量每次增加0.05，判斷它是否大于1，當(dāng)大于1時將它設(shè)置為1。在loading事件最右邊可以添加跳轉(zhuǎn)到新場景

選擇框CheckBox：

• 用于表明一個特定的狀態(tài)是選中還是未選中，為用戶提示True/False或是/否的選擇；
• 有兩種狀態(tài)：

1. 勾選框（可添加說明文本，選擇框的尺寸需要在圖像中設(shè)置）
2. 切換按鈕（一般不添加說明）

• 綁定值：可以給選擇框添加一個布爾值，用于控制選中與取消
• 添加選中事件
• 勾選框：加入子文本；勾選“大小到內(nèi)容”；在樣式->未勾選圖像/未勾選懸停圖像…改變勾選框大小，需要全部改變
• 切換按鍵：一般不加入子文本；不勾選“大小到內(nèi)容”；直接改變尺寸可以控制按鍵尺寸

多格式文本塊RichTextBlock

• 又稱富文本，在單一文本段中出現(xiàn)多種文本樣式（字體，大小，顏色，格式）并且可以摻雜圖像內(nèi)容
• 使用多格式文本塊控件的步驟
• 內(nèi)容瀏覽器->創(chuàng)建其他->數(shù)據(jù)表格，選擇RichTextStyleRow
• 在數(shù)據(jù)表格中點擊添加，必須要有一行名為Default的數(shù)據(jù)
• 添加相應(yīng)格式的行，設(shè)置字體大小與顏色
• 在多格式文本塊中，選中對應(yīng)的數(shù)據(jù)表格（外觀->文本樣式集）
• 在文本中使用數(shù)據(jù)名字標(biāo)簽顯示富文本<Red></>（需要注意的是結(jié)束時只有一個斜杠）

自定義控件：

• 其他UI控件的子控件
• 步驟：
• 內(nèi)容瀏覽器->用戶界面->創(chuàng)建自定義控制藍(lán)圖
• 設(shè)置控件與樣式
• 可以從控制板中將這個控件拖入大的用戶界面中

命名插槽Named Slot：

• 當(dāng)用戶創(chuàng)建UI成為其他UI的子控件時，默認(rèn)情況下是不能擁有子控件的，要想擁有子控件，就必須給UI添加一個命名插槽
• 步驟：
• 創(chuàng)建帶有命名插槽的UI控件
• 在命名插槽中拖入UI控件作子控件
• 用途：用于不確定樣式的控件占空

邊界Border：

• 邊界控件是一個只能包含一個子元素的容器，可以用來做元素的背景
• 當(dāng)給邊界控件添加子控件后，子控件將不具備自由設(shè)置錨點、位置、尺寸等特性了
• 當(dāng)拖入子元素時，默認(rèn)留白，“填充”屬性中可以設(shè)置邊界寬度
• 可以設(shè)置子元素的對齊方式
• 作用：給元素多一個樣式、設(shè)置背景，比如按鈕按下時，顏色改變但邊框不變

文本框TextBox：

• 用于給用戶提供輸入文本的控件
• 可以添加提示文本
• “為密碼”設(shè)置密碼（有點像html里各種…）
• 事件->文本修改時（實時，一般不用）/文本提交時（回車時/失去焦點時調(diào)用）

（案例）登錄界面：

• 內(nèi)容瀏覽器->藍(lán)圖->結(jié)構(gòu)，默認(rèn)會提供一個布爾變量；添加兩個變量，用戶名和密碼；界面中的文本框添加提交事件->在藍(lán)圖中添加文本變量，存儲數(shù)據(jù)->在藍(lán)圖中添加結(jié)構(gòu)變量，變量類型就是創(chuàng)建的結(jié)構(gòu)名稱->將結(jié)構(gòu)變量拖入，設(shè)置結(jié)構(gòu)變量->SET左下角拖出來，創(chuàng)建結(jié)構(gòu)變量->將兩個文本變量分別連接結(jié)構(gòu)變量中的兩個值->SET右下角拖出來，中斷結(jié)構(gòu)變量

文本框（多行）MultiLine：

• 用于給用戶提供輸入多行文本的控件
• 內(nèi)容文本-提示文本，shift+enter換行，樣式->前景/只讀/聚焦顏色->修改顏色
• 事件-文本變更時/文本提交時

組合框（字符串）ComboBoxString

• 用于實現(xiàn)下拉選項
• 配置選項：內(nèi)容->默認(rèn)選項->添加->出現(xiàn)索引[n]-選項名稱；默認(rèn)選項：內(nèi)容->選中的選項->寫選項名稱
• 藍(lán)圖-動態(tài)添加：圖表->創(chuàng)建變量，類型為文本-數(shù)組（數(shù)組要在細(xì)節(jié)中設(shè)置）->默認(rèn)值-Options中添加數(shù)組->將變量拖入藍(lán)圖（獲取值）->遍歷數(shù)組中所有項ForEachLoopwithBreak->事件構(gòu)造連到遍歷左邊Exec，數(shù)組連到遍歷左邊Array->拖入組合框，連到“添加選項”節(jié)點"->遍歷右邊ArrayElement連到添加選項的Option（需要強制轉(zhuǎn)換）
• 顯示第一個元素：組合框連到“設(shè)置選定索引”的目標(biāo)

覆層Overlay：

• 用于讓UI控件一層一層的疊在一起，可以有多個子空間之間的堆疊
• 內(nèi)容瀏覽器->用戶界面->控件藍(lán)圖->建一個畫布面板；再建一個空間藍(lán)圖->建一個覆層->右上角“填充屏幕”改成“自定義”->建一個邊界->可以用對齊的方式對子控件進(jìn)行設(shè)置，放進(jìn)主界面的時候需要重新修改大小

包裹框WrapBox：

• 為多個子控件打包的盒子，當(dāng)子控件在包裹框中放不下時自動換行
• 可以有多個子控件
• 可以通過設(shè)置插槽填充設(shè)置子控件之間的間距
• 可以通過設(shè)置包裹尺寸設(shè)置包裹控件的換行寬度
• 在控件藍(lán)圖-畫布面板中，面板->包裹框->將子控件拖入包裹框，ctrl+d復(fù)制粘貼，一行放不下時會換行->插槽-尺寸/內(nèi)部布局-顯式包裹尺寸
• 包裹框作為覆層的子元素

控件切換器Widget Switcher：

• 用于顯示指定索引的子元素
• 有多個子元素
• 通過索引顯示子元素
• 索引從0開始
• 切換器->激活控件索引

統(tǒng)一網(wǎng)格面板Uniform Grid Panel：

• 管理多個子元素，子元素的尺寸一樣大，默認(rèn)所有子元素都堆疊在一起，可以通過調(diào)節(jié)上下左右控制元素位置
• 插槽->水平拉伸、垂直拉伸，獲得平分區(qū)域的效果

網(wǎng)格面板Grid Panel：

• 管理多個子元素，子元素的尺寸可以單獨設(shè)置尺寸，默認(rèn)所有子元素都堆疊在一起，可以通過調(diào)節(jié)上下左右控制元素位置
• 填充規(guī)則->設(shè)置列填充/行填充

UI動畫基礎(chǔ)：

• 左下角->動畫->動畫面板右上角->固定
• 選中元素->動畫面板中添加動畫->選中動畫->添加軌道->…->添加結(jié)束幀

UI動畫：

• 播放：切換到圖表->獲取變量->（動畫->）播放動畫->
• Start at Time：開始播放的時間
• Play Mode：快進(jìn)/翻轉(zhuǎn)（1-0）/乒乓（0-1-0）

水平面板Horizontal Box：

• 用于在水平方向管理多個子元素，子元素的尺寸可以單獨設(shè)置尺寸，子元素類型可以不同，子元素的位置只能左右切換
• 用于：用戶名+水平框…

垂直面板Vertical Box：

• 用于在垂直方向上管理多個子元素，子元素的尺寸可以單獨設(shè)置尺寸，子元素類型可以不同，子元素的位置只能上下切換
• 用于：頭像+名稱

尺寸框Size Box：

• 用于設(shè)置子控件尺寸，只能有一個子控件
• 在沒有勾選大小到內(nèi)容時，子布局無效，子控件的尺寸與尺寸框的尺寸保持一致
• 當(dāng)大小到內(nèi)容后，可通過子布局來設(shè)置或控制子控件的尺寸
• 子布局->寬度重載、高度重載-勾選后有效
• 所需最小寬度、所需最小高度、所需最大寬度、所需最大高度->勾選并設(shè)置后子控件的大小受控制，比如當(dāng)設(shè)置寬度小于所需最小寬度后會改變其寬度=所需最小寬度

滾動框Scroll Box：

• 當(dāng)子控件得到總寬度或總高度超出滾動框時，超出部分隱藏，顯示滾動條