前言
在使用Unity开发的时候,进度条和血条是必不可少的,本篇文章将简单介绍一下几种血条的制作方法。
1.使用Slider
Slider组件由两部分组成:滑动区域和滑块。滑动区域用于显示滑动条的背景,而滑块则表示当前的数值位置。用户可以通过拖动滑块来改变数值。
新建Slider,右键选择UI / Slider
Slider组件的常用属性
- Fill Rect: 滑动的填充图片,上图中的绿色部分
- Handle Rect: 滑块块指数当前位置,上图中的圆点。【如果不需要这个,可以直接删掉】
- Min Value: 滑动的条值小最
- Max Value: 滑动条的最值大
- Value : 滑动条的当前值。
- Whole Numbers : 只允许整值数。
- Direction : 滑动条的方向,可以是水平或垂直。
程序调用
public Slider slider;
void Start()
{
//设置血量为一半
slider.value = 0.5f;
//监听slider变化
slider.onValueChanged.AddListener(OnSliderValueChanged);
}
void OnSliderValueChanged(float val)
{
}
2.修改RectTransform的Width
①新建2个Image,一个充当底图,一个从当进度条
②修改image的Pivot
Pivot(0,0.5)表示图片的中心点在:左边中间位置
为什么要修改中心点?
那是因为我们的血条是需要从左向右增加的,当然其他方向同理。
代码示例:
//需要修改的血条
public RectTransform mRt;
//血条最大值
public float max = 200;
void Start()
{
//设置血量为80%
SetHp(0.8f);
}
//设置当前血量
void SetHp(float val)
{
//先取出当前的宽和高
Vector2 cur = mRt.sizeDelta;
//得到需要修改的宽度
cur.x = val * max;
//重新赋值
mRt.sizeDelta = cur;
}
3.修改Image的fillAmount
①首先要修改Image Type为Filled
②Fill Method:血条的方式
Horizontal:水平方向
Vertical:垂直方向
Redial 90:以90度为最大值
Redial 180:以180度为最大值
Redial 360:以360度为最大值
③Fill Origin:血条的起点位置,根据自己的需求选择
代码示例:
//需要修改的图片
public Image mImage;
void Start()
{
//设置血量为80%,最大为1
SetHp(0.8f);
}
//设置当前血量
void SetHp(float val)
{
mImage.fillAmount = val;
}