Unity 血條製作教學

本教學使用 UGUI 製作遊戲中的血條效果,並使用 C# 腳本製作互動功能,可運用於玩家或敵人角色。

首先執行 [ GameObject > UI > Image ] 建立圖片,稍後將使用 Image 分別製作血條、外框、背景的部份。

首先製作 Unity 血條的外框,調整 Image 大小並重新命名 Bar Frame ,血條的比例稍後會再修改。

接著製作血條的背景,調整顏色與剛才的血條外框做為區分,調整 Image 大小並重新命名 Bar Background 。

開始製作血條本身的部份,若只使用顏色有些單調,另外製作圖片增加血條的質感。

使用 Photoshop 製作簡單的漸層圖片,然後匯入 Unity 專案。

匯入後將圖片的 Texture Type 改為 Sprite (2D and UI) 按下 Apply 套用設定。

選取 Unity 血條本身的部份,將 Source Image 指定剛才匯入的漸層圖片。下方選項在指定圖片後才會出現。

遊戲中的血條若需要變化不同的顏色,只需要修改 Color 顏色設定,無需再修改圖片,例如改為綠色。

將血條的 Color 改為紅色,比較視覺上的變化。

透過調整血條圖片的 Fill Amount 數值,即可設定血條的變化,使用 C# 腳本控制血條只需要簡單程式碼即可。

目前製作的 Unity 血條尺寸較大,請配合畫面設計調整到適當的大小與位置。

選擇適當的遊戲角色,附加以下 C# 範例腳本,製作 Unity 血條的基本互動功能。

此範例腳本在玩家角色碰觸特定物件時扣血,並減少血條的數值,不過只有簡單的互動,請自行增加需要的功能。

 

若使用 TextMesh Pro 可參考以下範例。

玩家減少 HP 腳本

玩家增加 HP 腳本

 

相關教學用資源

Slider_Loading (Slider)

├ Base (Image)

├ Fill Area (Image)

 └ Fill (Image)

Slider04_Blue3_Fill.png

Slider_Loading (Slider) 血條最上層的外框物件的 Source Image / Width=2050 / Height=100

Slider04_Blue2_Frame2.png

Base (Image) 血條背景 / middle 填滿 / Left, Right = 33 / Height=50

Slider04_White1_Frame1.png

Fill Area 血條填滿區 / middle 填滿 / Left, Right = 38 / Height=42 / Image Type = Sliced

Fill 血條填滿區 / stretch 垂直填滿 / Left, Right, Top, Bottom =0 / Image Type = Sliced

實際上血條的 Value 是透過這個物件下的 Slider 元件控制的。(從範例場景複製貼上新場景將無法使用)

 

Popup_Offline_Reward > Slider08_Blue

Slider08_Blue1_Frame.png

 

Slider08_Blue2_FillArea.png

 

Slider08_Blue3_Fill.png