[ UGUI ] 如何用UGUI製作簡易HP條

Unity的UGUI是很方便的UI工具,這篇文章會教大家如何製作簡單的HP條,以及如何讓HP條顯示在物件的頭上。

這邊先提供兩個簡單的圖片供教學用

生命條

生命條的框

 

一般來說生命條不該有框的,只是筆者換了新電腦手邊沒有好的工具把框去掉,就將就一下吧!

 

首先建立UI物件,並把上面的兩張圖給放上,這邊我命名為「HpBar」與「HpBarBorder」

這邊小補充一下,Set Native Size可以快速讓物件的寬高與原始圖片相同

點選「HpBar」的Image組件,將Image Type 改為 Filled (填充)

再將Fill Method (填充方式) 改為 Horizontal (水平),並嘗試調整FillAmount的值

到目前為止可以看到,調整FillAmount的效果就是常見的血量0%~100%的呈現效果,對應的值是0~1

使用Image的Fill就可以很快速地達到血條的效果,如果血條是放置在畫面左上、左下等等,那道這邊就大致完成了,但若是要將血條放在怪物頭上,就需要再做一些調整。

 

Canvas(畫布)的Render Mode(渲染模式)改為World Space(世界空間)

這一步驟是將UI元件從「顯示於畫面」改為「顯示於遊戲空間」,就可以讓UI物件是顯示在實際的遊戲畫面內,這個功能也能用來製作看板文字之類的。

Canvas重新命名為「HP」,並將他拖曳至要顯示HP的對象物件上。

將「HP」的PosX、PosY、Width、Height改為接近0的數值,這是由於原本UI的X、Y、Width、Height都是直接對畫面大小的,如最常見的1920*1280,但遊戲內座標每1單位都是滿大的數值,因此以遊戲內座標去思考就會很清楚了。

再將「HpBar」、「HpBarBorder」的width、height等比例縮小,最後的畫面就會像下面這樣

實際運行遊戲把角色動一動,就會看到血條黏在角色的頭上了

 

最後,在這邊附上簡單的血條程式碼,並做一個自動扣血的功能示範一下

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

using UnityEngine.UI;
public class HpBar : MonoBehaviour {
  //HP條的Image組件
  public Image hpBar;
  //最大生命值
  public float MaxHp = 100;
  //當前生命值
  private float nowHP;

  void Start () {
    nowHP = MaxHp;
  }
  

  void Update () {
    //每秒扣5 HP 歸0後自動回滿
    nowHP -= Time.deltaTime *5;
    if (nowHP <0)
    { 
      nowHP = MaxHp;
    }
    
    //更新畫面顯示
    updateHPBar();
  }
  void updateHPBar(){
    hpBar.fillAmount = nowHP / MaxHp;
  }
}

 

本篇教學到這邊結束,感謝您的閱讀!

Leave a Comment