关于DNF多层血条的实现

本篇博客主要简述类似于DNF的多层血条的实现方法，
图一是伤害过高，造成的流血效果。
图二是伤害比较低，造成的掉血效果。

之前自己写了一种通过三个Slider的多层血条，实现方式就是控制血条的背景和前景颜色，显然目标
也是达到了，但总归还是有点麻烦，后来闲暇之余又在网上浏览了些帖子，总结了下经验，通过控制
Image的Fill Amount也是实现了多层血条的效果，下面贴出实现方式。

血条由四层图片构成：
BackGrandImage 最底层黑色空血背景，
NextImage 下一个血条的图片，
MiddleImage 掉血时的过度血条，
CurrentImage 现在的血条。

记住要把ImageType的Filled 横向，类似于下面这样

UI的设置就这么多了，下面附上源码：


///------------------
/// 壹叶成名
///------------------
using UnityEngine;
using System.Collections;
using UnityEngine.UI;public class  BossBloodstrip : MonoBehaviour
{//如果只有一条血，那么一条血就是所有的血量，如果有多条血，那么一条血就设定为一个固定值public Image currentBar;                         //当前血条public Image middleBar;                         //过渡血条public Image nextBar;                           //下一血条public Text countText;                          //剩下的血条数textprivate int count;                              //剩下的血条数(不包括当前血量)private float nowBlood;                         //在一条血中的当前血量，如：100/1000则为100  private float oneBarBlood = 10000f;             //一条血的容量，如：100/1000则为1000     private int colorIndex = 0;public Color[] colors;                          //血条的颜色，注意Alpha值，默认为0private float slowSpeed = 0.1f;                 //受到重伤时( >oneBarBlood)或者处于加血状态，当前血条的流动速度  private float quickSpeed = 1f;                  //受到轻伤时( <oneBarBlood)，当前血条的流动速度  private float speed;                            //当前血条采用的速度  private float middleBarSpeed = 0.1f;            //过渡血条的流动速度  private float nowTargetValue;                   //当前血条移动的目标点 private float middleTargetValue;                //过渡血条移动的目标点 private bool isBloodMove = false;               //控制血条的移动  void Update(){MoveNowBar();                               //当前血条的流动 MoveMiddleBar();                            //过渡血条的流动  if (Input.GetMouseButtonDown(0)){ChangeBlood(-3000);}else if (Input.GetMouseButtonDown(1)){ChangeBlood(-15000);}}private void Awake(){}private void Start(){//初始每一管血条的颜色colors = new Color[] { new Color(0, 1, 1, 1), new Color(0, 1, 0, 1), new Color(0, 0, 1, 1),new Color(1, 1, 0, 1) };InitBlood(2000000);}/// <summary>  /// 传入总血量，初始化血条  /// </summary>  /// <param name="number"></param>  public void InitBlood(float number){count = (int)(number / oneBarBlood);//剩下的血条数nowBlood = number % oneBarBlood;//最后一条血的当前血量if (nowBlood == 0)  //如果最后一条血的血量刚好充满剩余血条数减一{nowBlood = oneBarBlood;count--;}colorIndex = count % colors.Length;currentBar.color = colors[colorIndex];currentBar.fillAmount = nowBlood / oneBarBlood;if (count != 0){int nextColorIndex = (colorIndex - 1 + colors.Length) % colors.Length;nextBar.color = colors[nextColorIndex];nextBar.gameObject.SetActive(true);}else{nextBar.gameObject.SetActive(false);}middleBar.gameObject.SetActive(false);countText.text = count + "";}/// <summary>  /// 血量变化，并根据伤害判断是否使用过渡血条  /// </summary>  /// <param name="number"></param>  public void ChangeBlood(float number){nowBlood += number;nowTargetValue = nowBlood / oneBarBlood;isBloodMove = true;if ((number < 0) && (Mathf.Abs(number) <= oneBarBlood))//处于受伤状态并且伤害量较低时  {speed = quickSpeed;middleBar.gameObject.SetActive(true);middleBar.transform.SetSiblingIndex(nextBar.transform.GetSiblingIndex() + 1);middleBar.fillAmount = currentBar.fillAmount;middleTargetValue = nowTargetValue;}else//处于受伤状态并且伤害量较大时，或者处于加血状态  {speed = slowSpeed;middleBar.gameObject.SetActive(false);}}/// <summary>/// 普通血条的流动 /// </summary>void MoveNowBar(){if (!isBloodMove) return;currentBar.fillAmount = Mathf.Lerp(currentBar.fillAmount, nowTargetValue, speed);if (Mathf.Abs(currentBar.fillAmount - nowTargetValue) <= 0.01f)//到达目标点  isBloodMove = false;if (count == 0)nextBar.gameObject.SetActive(false);elsenextBar.gameObject.SetActive(true);if (currentBar.fillAmount >= nowTargetValue)SubBlood();elseAddBlood();}/// <summary>/// 过渡血条的流动  /// </summary>void MoveMiddleBar(){//受到轻伤时( <oneBarBlood)，才会出现过渡血条if (speed == quickSpeed){middleBar.fillAmount = Mathf.Lerp(middleBar.fillAmount, middleTargetValue, middleBarSpeed);if (Mathf.Abs(middleBar.fillAmount - 0) < 0.01f){middleBar.transform.SetSiblingIndex(nextBar.transform.GetSiblingIndex() + 1);middleBar.fillAmount = 1;middleTargetValue++;}}}void AddBlood(){float subValue = Mathf.Abs(currentBar.fillAmount - 1);if (subValue <= 0.0f)//到达1  {count++;countText.text = count.ToString();currentBar.fillAmount = 0;nowTargetValue -= 1;nowBlood -= oneBarBlood;nextBar.color = colors[colorIndex];colorIndex++;colorIndex %= colors.Length;currentBar.color = colors[colorIndex];}}void SubBlood(){float subValue = Mathf.Abs(currentBar.fillAmount - 0);if (subValue <= 0.0f)//到达0  {//当前血条已经流动完，将过渡血条放置最前middleBar.transform.SetSiblingIndex(nextBar.transform.GetSiblingIndex() + 2);if (count <= 0){middleBar.gameObject.SetActive(false);Destroy(this);return;};count--;countText.text = count.ToString();currentBar.fillAmount = 1;nowTargetValue += 1;nowBlood += oneBarBlood;colorIndex--;colorIndex += colors.Length;colorIndex %= colors.Length;if (count ==0){currentBar.color = Color.red;//当血量为最后一条时 设置血条为红色}else {currentBar.color = colors[colorIndex];//根据自设颜色进替换}int nextColorIndex = colorIndex - 1 + colors.Length;nextColorIndex %= colors.Length;if (count == 1){nextBar.color = Color.red; //设置最后一个血条的显示为红色}else {nextBar.color = colors[nextColorIndex];//根据自设颜色进替换}}}
}

血条的层数是根据最大血量进行自动生成的，颜色可以在Start里设定，也可以在数组里选自己喜欢的颜色。

附件：
多层血条Demo工具

下篇写出多段血条的实现方式，希望大家多多支持。

喜欢我，关注我，我是壹叶成名！

部分资源来源于网络，如有侵权，请联系我删除。

关于DNF多层血条的实现相关推荐

（一）关于UGUI怪物多行血条实现————DNF怪物血条
看了一篇使用UGUI实现多层血条效果的文章后,想来试着做一下多层血条. 自己实现的思路类似于上面链接中作者的思路. 首先,整理一下我们需要用到的一些属性: using System.Collectio ...
unity制作类似DNF动态血条(仅一层血条）
unity制作类似DNF动态血条(仅一层血条) 这是某个游戏公司的招聘题目,我的思路给大家参考一下上图为效果图如下代码: using System.Collections; using Syste ...
Unity中实现多层血条
一:效果演示二:使用 --面板参数设置 HpSlider:Slider组件 TopBar:顶部血条 DownBar:底部血条 LastBarColor:最后一条血条的颜色 T:血量改变时缓动的插值( ...
一个进度条，类似DNF的血条
最近要写下个血瓶效果,于是用PS做了两张图,用DIV做出了这样的效果: 这个底色可以用CSS随便改,但这个粉红背景就得改图片了. 代码也很简单,就是JS,CSS了,代码如下: <%@ page ...
Unity UGUI实现王者荣耀版多格血条
上篇讲述了Boss多层血条的实现方法,这篇就主要讲述一下类似于王者荣耀,LoL的分段式血条, 这样的血条在游戏的视觉层会带给玩家非常好的体验.就好比玩家买了一个狂徒铠甲.如过你用的是分段血条的话,就 ...
Unity 2D血条制作方式
博主在前两篇博客中写了关于分段式血条和多层血条的实现方式,但是基于一下初学者的考虑,还是决定把2D的血条制作方式也是贴出来,方便大家进行学习和使用. 第一步:我们创建一个Slider,把图片和背景修改 ...
UGUI学习笔记（十二）自制血条控件
一.效果展示二.实现过程 2.1 准备工作首先在场景中使用「Image」创建如下结构并命名为「LifeBar」.需要注意的是内部的「Image」都需要将锚点设置到最左侧,高度设置为自适应.在父元素 ...
Unity实现DNF血条效果
unity实现类似dnf血条效果,话不多说,先上效果,再上代码: using UnityEngine; using UnityEngine.UI;public class HPBar : MonoBe ...
[Unity]角色头顶血条的实现的几种方法以及优化拓展
1.UGUI 的 Image 1.1biliboard广告板中使用update函数 1.1.1在角色头顶的血条参考资料2,biliboard广告板中使用update函数.如果场景中含有update函 ...

关于DNF多层血条的实现

关于DNF多层血条的实现相关推荐

最新文章

热门文章