第4章　可視化編程工具Bolt-4.5 操作實例2：技能冷卻UI動畫制作

第4章可視化編程工具Bolt

4.5操作實例2：技能冷卻UI動畫制作

.目錄.1UI構(gòu)建解析.2使用Bolt實現(xiàn)冷卻動畫

技能冷卻UI動畫是游戲中常見的一種效果，如圖所示，當(dāng)某種條件達成后，就以一定的速度在UI圖標上展現(xiàn)一個順時針或者逆時針的圖片陰影旋轉(zhuǎn)消失動畫。本節(jié)通過實現(xiàn)該功能來演示Bolt關(guān)于UI的操作方法。（1）

UI的具體功能決定了它的層次結(jié)構(gòu)。本例中技能冷卻UI的表現(xiàn)形式是：鼠標指針劃入圖標時，圖標四周出現(xiàn)一個提示框；鼠標指針劃出圖標時，提示框消失；鼠標單擊圖標，出現(xiàn)技能冷卻UI動畫。技能冷卻圖標的各種狀態(tài)，如圖所示。1.

UI構(gòu)建解析

鼠標指針劃出狀態(tài)

鼠標指針劃入狀態(tài)

技能冷卻狀態(tài)（2）因為有這樣的狀態(tài)變化，所以這個UI需要3張圖，一張是正常的圖標，一張是邊框圖，還有一張是覆蓋在圖標上的黑色圖。其中邊框圖和黑色圖都是具有Alpha通道的帶透明度的圖片。技能冷卻圖標的層級結(jié)構(gòu)如圖所示。在默認的正常狀態(tài)下，將“BorderImage”和“BufferImage”2張圖片都先隱藏起來。1.

UI構(gòu)建解析

（1）在正常狀態(tài)的物體上，也就是在上頁圖中的“IconImage”物體上，添加FlowMachine組件，單擊“New”按鈕，新建一個Macro。單擊“EditGraph”按鈕打開FlowMachine的編輯窗口。2.

使用Bolt實現(xiàn)冷卻動畫（2）添加Events類里的OnPointerEnter和OnPointerExit功能模塊，以獲取鼠標指針劃入事件和鼠標指針劃出事件。與它們對接的都是SetActive模塊，利用“Value”屬性的不同賦值，實現(xiàn)對“BorderImage”物體，也就是邊框圖片的隱藏或顯示。提示框的功能實現(xiàn)如圖所示。2.

使用Bolt實現(xiàn)冷卻動畫（3）要實現(xiàn)UI圖片陰影旋轉(zhuǎn)消失的技能冷卻效果，需要先修改UI的Image組件屬性。單擊層級結(jié)構(gòu)中的“BufferImage”物體，按圖所示，對Image組件進行修改。其中，“ImageType”屬性改為“Filled”，“FillMethod”屬性選擇“Radial360”，這樣圖片就是以圖片中心為原點，采用360°旋轉(zhuǎn)的形式進行填充。配合設(shè)置“FillAmount”屬性的數(shù)值，就能決定填充的范圍。1代表360°，全部填充；0代表0°，全部無填充。下面主要介紹通過Bolt來修改“FillAmount”屬性。2.

使用Bolt實現(xiàn)冷卻動畫（4）根據(jù)前面說明的操作過程，先總結(jié)出技能冷卻操作的流程。實現(xiàn)技能冷卻效果的流程圖如圖所示。2.

使用Bolt實現(xiàn)冷卻動畫（5）仔細觀察上頁的流程圖，會發(fā)現(xiàn)鼠標單擊事件的發(fā)生是瞬間的，而圖片填充屬性“FillAmount”的減少是一個會持續(xù)一段時間的過程，每一幀都將“FillAmount”減去上一幀的時間間隔“Time.DeltaTime”，而一幀的時間間隔是一個很小的數(shù)字。2.

使用Bolt實現(xiàn)冷卻動畫（6）在邏輯上，一個瞬間發(fā)生的事件只能觸發(fā)一個過程的開始，但不能維持一個過程的持續(xù)。要維持一個持續(xù)過程，需要另外定義一個布爾類型的變量來作為中間溝通的橋梁。假設(shè)這個變量名稱為“isStart”，則修改后的流程變?yōu)閮蓚€部分，修改后的實現(xiàn)技能冷卻效果的流程圖，如下頁圖所示。鼠標單擊事件只影響布爾類型變量isStart的值，而isStart變量決定了圖片填充屬性“FillAmount”是否開始變化，并維持變化的過程，直到“FillAmount”屬性小于等于0，這個過程才結(jié)束。2.

使用Bolt實現(xiàn)冷卻動畫2.

使用Bolt實現(xiàn)冷卻動畫（7）依照修改后的流程圖，首先需要添加一個自定義變量isStart，如圖所示，“Value”復(fù)選框沒有勾選，說明其初始值設(shè)定為False。這個變量可以是全局的，也可以是局部的。本例將其放在層級結(jié)構(gòu)中的“IconImage”物體上，作為局部變量使用。2.

使用Bolt實現(xiàn)冷卻動畫（8）鼠標單擊改變isStart變量，并將“BufferImage”物體顯示出，鼠標單擊事件驅(qū)動改變變量和物體顯示狀態(tài)如圖所示。OnPointerDown模塊獲取鼠標單擊事件，調(diào)用SetVariable模塊將isStart變量賦值為由Boolean模塊提供的True值，并將isStart賦值給SetActive模塊的“Value”屬性，從而將“BufferImage”物體設(shè)置為顯示狀態(tài)。2.

使用Bolt實現(xiàn)冷卻動畫（9）最后實現(xiàn)“BufferImage”的冷卻動畫。為了方便處理且減少邏輯模塊的使用，這一步驟中不使用前面創(chuàng)建的FlowGraph，而是在“BufferImage”物體上新建一個FlowGraph。完成后的冷卻動畫邏輯結(jié)構(gòu)如下頁圖所示。1號框里采用Update和GetVariable模塊，每一幀都判斷isStart變量是否為True，如果為True，就執(zhí)行3號框里的SetFillAmount模塊來設(shè)定“BufferImage”的“FillAmount”屬性，設(shè)定的值由2號框里的GetFillA