Unity UGUI Canvas 使用Slider製作角色血條

標籤：abd   isa   sdl   toc   gsl   原因   osd   tail   lcs   

最近課程實訓選修Unity，講解的是Unity官方案例——SpaceShoot，培訓無聊，便想著給遊戲角色製作一下血條，以此增加遊戲的可玩性。

Unity版本：5.4.1

案例模版：太空射擊

原文茄閣云云

原文串連：http://www.cnblogs.com/vmoor2016/p/6044941.html

 

把一個大象裝進冰箱裡需要三步：①把冰箱門開啟；②把大象塞冰箱裡；③關上冰箱門。

那麼製作一個角色的血條需要幾部呢？在這裡也劃分為三步：①製作血條；②擺放血條；③操作血條。

下面就來給大家分享下血條的製作步驟。

 第一步：製作血條

• 選中遊戲對象，在遊戲對象下建立子物體Canvas，步驟：選擇遊戲物體-右鍵-UI 選擇建立

　　Canvas；

• 建立血條，步驟：選擇建立好的Canvas，然後，右鍵-UI 選擇建立Slider；

　　此時在遊戲Scene視圖中便可以看到一個白框即Canvas畫布，還有血條原型Slider。

　　展開Slider（如第二張）就可以發現組成滑動條的三個組件：

　　Background，背景顏色；Fill Area，填充顏色；Handle SliderArea：滑動柄。

　　

　　為了方便看到製作效果，現在修改Slider屬性，選中Slider，在Inspector面板的組件

　　Slider(Script)裡修改Min Value=0,Max Value=10,Value=10。現在開始製作血條：

• 去掉Handle（滑動柄）：選擇Handle SliderArea，按Delete鍵刪除（當然也

　　可以在Inspector面板中取消選中該物體），然後就可以發現圓圓的滑動柄消失了。

• 修改背景色與填充色：選擇FillArea下的Fill，在Inspector面板下找到Image(Script)組件,

　　在其中可以修改Slider的填充色，同樣選擇Background修改背景色。

• 調整Fill Area（填充地區）：上一步執行後發現，雖然Slider的當前值Value等於Max Value

　　，但血條並未被填滿。現在選擇Fill Area在Inspector面板中修改Rect Transform中個屬性，

　　將Left、Right的值都設為0（見），至此一個簡單的血條就製作完成了。

　　　　 

　　　　

第二步：擺放血條

　　到目前為止血條還沒有出現在相機視的野裡，這是由於Canvas（畫板）的屬性設定原因，在

　　Inspector面板下查看Canvas渲染屬性（Render Mode）。

　　　　

　　渲染方式有三種，預設的是Screen Space-Overlay。在本步驟後補充會簡單介紹前兩種渲染

　　方式，現在先將Render Mode改為World Space（全域）。

　　修改後便會發現，Inspector面板中的Rect Transform組件可以修改了。

　　　　

　　這就意味著我們可以通過旋轉拖放將血條擺放到合適的位置。具體擺放步驟如下：

• 修改Canvas的位置，將Pos x，Pos Y設為0；
• 旋轉Canvas：由於Canvas相當於一個面，所以如果相機從垂直角度拍攝將看不到畫板

　　上的任何東西，旋轉Canvas使其正對Main Camera（我這裡相機在Y軸垂直向下拍攝，

　　故將Canvas繞X軸旋轉了90度），這時大大的血條便在Game情境下出現了。

　　　　

• 修改Slider尺寸：不用說，這麼大的血條肯定要修改下尺寸，在這裡推薦使用Scale

　　（縮放工具）進行大小修改。當然你也可以通過修改寬高來實現，不過控制不好寬高

　　比例將帶來意想不到的效果（不服可以親自嘗試一下）。

　　

• 修改Canvas尺寸：這麼小的血條用不了那麼大的Canvas畫板，因此將Canvas的大小

　　修改為與血條相當即可，這裡推薦直接修改寬高，。至此擺放血條的工作都已經完成

　　了，可以選中移動工具進行示範，可以發現血條照預期的那樣跟隨角色移動。

　　

　　下面為補充內容，不感興趣可以跳過。

　　補充：

　　上面提到Canvas的三種渲染模式，在這裡再對前兩種進行簡單說明：

　　1.Screen Space - Overlay:預設的渲染模式，此模式Canvas位置大小不可改變，但可以通過

　　移動父物體來間接改變，Canvas的起始位置就是父物體的位置，大小和設定的顯示螢幕大小

　　有關（如1，我這裡是600*900），更改不同的顯示大小，Canvas的形狀大小也將會發生

　　　　  改變。此模式不需要UI相機，Canvas上的內容將顯示在所有遊戲物體之前。

　　　　　

　　2.Screen Space - Camera：此模式Canvas位置大小不可改變，需要指定UI相機（可以發

　　現多出來一個Render Camera，預設是不指定相機的），Canvas畫布大小根據相機視野來

　　定，可以將Main Camera掛載到上面觀察效果，畫布上的內容將一直顯示在相機視野裡，且

　　顯示在所有遊戲物體之前。

　　　　

第三步：操縱血條

　　關於血條的操作就要用到指令碼來控制了。操作很簡單，因此指令碼很簡單，感興趣可以查看一下。

 1 using UnityEngine; 2 using System.Collections; 3 using UnityEngine.UI;    //添加UI命名空間 4  5 public class PlayerCollide : Collide { 6      7     public Slider HPStrip;    //添加血條Slider的引用 8     public int HP; 9     void Start () {10         HPStrip.value = HPStrip.maxValue = HP;    //初始化血條11     }12     public void OnHit(int damage){13         HP -= damage;14         HPStrip.value=HP;    //適當的時候對血條執行操作15     }16 }    

View Code

 

　　血條製作過程就到此結束了，喜歡的話就頂一下吧。

 

　　本文的血條製作過程系作者原創，不足之處歡迎評論指證，尊重原創，轉載請註明出處。

 

Unity UGUI Canvas 使用Slider製作角色血條