【Unity】进度条和血条的三种做法

前言

在使用Unity开发的时候,进度条和血条是必不可少的,本篇文章将简单介绍一下几种血条的制作方法。

1.使用Slider

Slider组件由两部分组成:滑动区域和滑块。滑动区域用于显示滑动条的背景,而滑块则表示当前的数值位置。用户可以通过拖动滑块来改变数值。

新建Slider,右键选择UI / Slider

Slider组件的常用属性

  • Fill Rect: 滑动的填充图片,上图中的绿色部分
  • Handle Rect: 滑块块指数当前位置,上图中的圆点。【如果不需要这个,可以直接删掉】
  • Min Value: 滑动的条值小最
  • Max Value: 滑动条的最值大
  • Value : 滑动条的当前值。
  • Whole Numbers : 只允许整值数。
  • Direction : 滑动条的方向,可以是水平或垂直。

程序调用

csharp 复制代码
	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)表示图片的中心点在:左边中间位置

为什么要修改中心点?

那是因为我们的血条是需要从左向右增加的,当然其他方向同理。
代码示例:

csharp 复制代码
	//需要修改的血条
	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:血条的起点位置,根据自己的需求选择

代码示例:

csharp 复制代码
    //需要修改的图片
    public Image mImage;
    
    void Start()
    {
        //设置血量为80%,最大为1
        SetHp(0.8f);
    }
    //设置当前血量
    void SetHp(float val)
    {
        mImage.fillAmount = val;
    }
相关推荐
SmalBox17 小时前
【光照】[自发光Emission]以UnityURP为例
unity·渲染
SmalBox2 天前
【光照】Unity中的[经验模型]
unity·渲染
萘柰奈2 天前
Unity学习----【进阶】TextMeshPro学习(三)--进阶知识点(TMP基础设置,材质球相关,两个辅助工具类)
学习·unity
Yasin Chen2 天前
Unity UI坐标说明
ui·unity
应用市场2 天前
无人机姿态控制系统详解与实现
游戏引擎·cocos2d
陈言必行2 天前
Unity 性能优化 之 编辑器创建资源优化( 工作流 | 场景 | 预制体)
unity·编辑器·游戏引擎
1uther2 天前
Unity核心概念⑨:Screen
开发语言·游戏·unity·c#·游戏引擎
死也不注释3 天前
【Unity UGUI 交互组件——Slider(7)】
unity·游戏引擎·交互
程序猿多布3 天前
XLua教程之热补丁技术
unity·c#·lua·xlua
SmalBox3 天前
【光照】Unity中的[光照模型]概念辨析
unity·渲染