[客座投稿] "暗黑破壞神" 血條製作實例

各位好，相信大家對於暗黑破壞神的那種圓形的血條並不陌生，此篇就是要分享如何用Unity的GUI功能製作出這種類似的效果。

之前在做專題的時候，為了這個血條效果找了許多相關文章都沒有看到有人寫過，不過最後終於在老外文章裡頭找到一篇類似的效果，這裡在我做些改良後，分享給大家。

方法：
原理是用「GUI Group」群組功能來做出類似Photoshop遮色片的效果。讓我們的血條可以依照底圖的形狀來顯示，並且可以在前圖做一些顏色或者是動態的變化。

程式的關鍵語法為GUI.BeginGroup跟GUI.EndGroup這兩個語法。

效果：

圖：遊戲 "次元之鑰" 實例

程式碼：
「GUI Function」裡頭主要是函式的宣告，裡頭主要的涵式「DrawBar」即是我們要的遮色片效果，我額外把它加上了我自己的螢幕位置對齊樣式進去，不過最主要的還是在GUI.BeginGroup開始之後的語法，之前的程式若看不懂可以不必理它(喂)。

public class GUIFunction {
 //GUI遮色片
 //使用格式：GUIFunction.DrawBar(縮放比例, X位置(百分比), Y位置(百分比), 貼圖寬度, 貼圖高度, 底貼圖, 前貼圖, 目前填滿的比例, 填滿的最大值, 填滿的最小值)
 static function DrawBar(MaxRatio : float, WidthPositionPercent : float, HeightPostionPercent : float, GUIWidth : float, GUIHeight : float, BG : Texture2D, FG : Texture2D, CurrentValue : float, ValueMin : float, ValueMax : float) {

  var CurrentWidth : float;
  var CurrentHeight : float;
  
  var Ratio : float = parseFloat(Screen.width) / 2000;   //先計算螢幕目前的寬度比例
  
  if (Ratio > MaxRatio)   //大於最大比例就讓比例強制等於
   Ratio = MaxRatio;
  if (Ratio < 0.3)    //最小比例不會小於原始的30%
   Ratio = 0.3;
  CurrentWidth = GUIWidth * Ratio;  //縮放比例
  CurrentHeight = GUIHeight * Ratio;  //縮放比例
  
  //控制百分比，不讓它超過100%與低於0%
  if (WidthPositionPercent > 100)
   WidthPositionPercent = 100;
  if (HeightPostionPercent > 100)
   HeightPostionPercent = 100;
  if (WidthPositionPercent < 0 )
   WidthPositionPercent = 0;
  if (HeightPostionPercent < 0) 
   HeightPostionPercent = 0;
  
  //計算數值間距
  //EX：最大值(ValueMax)為100，最小值(ValueMin)為0，間隔(Interval) = 100 - 0 = 100
  var Interval : float = ValueMax - ValueMin;
  
  //目前的血量比例；以數學公式導出得結果，得出來的結果是百分比
  //Ex：最小值(ValueMin)為0，目前填滿的比例(CurrentValue)為50，間隔(Interval)為100
  //目前血量比例(Value) = 0 + (100 - 50) * 100 * 0.01 = 50
  var Value : float = ValueMin + (100 - CurrentValue) * Interval * 0.01;  
  
  //計算螢幕座標位置 (使物件對齊置中)
  CurrentXPosition = Screen.width * WidthPositionPercent * 0.01 - CurrentWidth * 0.5;
  CurrentYPosition = Screen.height * HeightPostionPercent * 0.01 - CurrentHeight * 0.5;
  
  //開啟GUI群組功能
  GUI .BeginGroup(new Rect(CurrentXPosition, CurrentYPosition, CurrentWidth, CurrentHeight));
   if (BG) GUI .DrawTexture ( new Rect (0, 0, CurrentWidth, CurrentHeight), BG);  //確認有無底貼圖，有貼圖則在群組的正中央繪製貼圖
  
   GUI.BeginGroup(new Rect(0, 0, CurrentWidth, CurrentHeight * Value * 0.01));
    if (FG) GUI.DrawTexture(new Rect (0, 0, CurrentWidth, CurrentHeight), FG);  //確認有無前貼圖，有貼圖則在群組的正中央繪製貼圖
   GUI.EndGroup();
  
  GUI.EndGroup();
    }
}

「Show GUI」是顯示GUI的程式，裡頭可以自由改變XP與YP這兩個參數來改變位置，而CurrentValue這個參數也可以請各位調整看看，效果會立即顯現。而至於ValueMin跟ValueMax這兩個參數，是主要拿來調整誤差用的。

var XP : float = 50;   //貼圖出現的X位置(%)
var YP : float = 50;   //貼圖出現的Y位置(%)

var Texture_SPCircle_Current : Texture2D;  //要顯示的血條 (在前)
var Texture_SPCircle_Dark : Texture2D;   //當遮色片的血條 (在後)
var CurrentValue : float = 50;   //目前的血量百分比 (這邊之後可以調調看，效果會馬上出現)
var ValueMin : float = 8;     //血量最小值  (照著你的圖調整誤差用)
var ValueMax : float = 89;    //血量最大值  (照著你的圖調整誤差用)
function OnGUI() {
 //顯示血條
 GUIFunction.DrawBar(1, XP, YP, 128, 128, Texture_SPCircle_Current, Texture_SPCircle_Dark, CurrentValue, ValueMin, ValueMax);
}

以上就是製作暗黑破壞神的血條效果的分享，希望各位會喜歡。
Source Code Link

作者：江董, Email: k309286@hotmail.com
2012年畢業於大同大學媒體設計學系，為遊戲「次元之鑰」的設計者之一，遊戲中主要負責於主企劃、3D、2D美術以及程式部分。