【教程】找色找图之找血条_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
【教程】找色找图之找血条
上传于|0|0|文档简介
&&找色找图之找血条
阅读已结束，如果下载本文需要使用0下载券
想免费下载更多文档？
定制HR最喜欢的简历
下载文档到电脑，查找使用更方便
还剩9页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢1181人阅读
写在前面(废话)：
想用NGUI实现个多层血条，在网上没找到相关信息，思来想去还是自己实现一个吧。最后捣鼓捣鼓还是出来了。写了两个版本的，第一个版本是纯体力制作，就是有几层血就预先放好几个血条，比如说 boss有5层血，就预先摆好5层血，但是要加个透明血条(用来表现减血效果，如下图示例)，就需要摆10个血条了，这样就太挫了，于是就有了多层血条2.0 beta,之所以用beta，因为觉得还是不够好。开个贴，大家交流一下，希望多提意见。。。
1.简单实现原理。预先放置几个血条，当最上面一层血减完为0(缩小为0)后，把它移动到底层，然后再放到的正常大小，并且改变图片显示或者颜色为指定显示。
2. 本版多层血条，用了3个血条对象，每个血条对象包括一个全色显示的血条和一个半透明的血条，实际上用到了6个sprite，如下图示。先前想用2个血条对象(2个要简单)，后来考虑到会有一种情况，就是当本次伤害减血的值大于当前血条所剩余值时，下面的血条也会瞬间减血，因为只有两条血，在最上面这层血减完，还未移动到底层的时候，这样的话显示就会露馅。不过实际上我没有用2层对象来做过测试，具体会不会出现这种情况，也只是处于理论阶段......
3.这个演示版本的血条从底向上摆放的血条颜色依次为红，绿，蓝。sprite深度depth,依次增加。计数也是从底向上计数，依次为0, 1, 2。如下面层面图演示。
1.血条对象。
上面讲到，是用了三个血条对象实现的，每个血条对象包括两个血条sprite,一个是全色的，一个是半透明的，为此就单独写个脚本挂到血条对象上，来做管理。代码如下。
简单说明：
1).血条是用sprite制作的
2).不同层的血条会使用不同颜色的图片.示例使用了三种颜色的图片依次为红，绿，蓝。
3).显示的顺序是从底向上的，即索引值从底向上依次为0,1,2
主要功能：
1),使用TweenScale进行缩小
2).改变depth并切换sprite图片
3).显示或者隐藏
P.S.请不要直接拷贝代码使用，出错了不管哦
using UnityE
using System.C
public class MuHp : MonoBehaviour
GameObject _normalHp;
GameObject _transHp;
UISprite _normalSp;
UISprite _transSp;
TweenScale _normalS
TweenScale _transS
/// &summary&
/// Tween Speed
/// &/summary&
float tweenSpeed = 1 / 0.7f;
private int _depth = 0;
private int _picIndex = 0;
/// &summary&
/// 血条对应的图片 依次为蓝色，绿色，红色
/// &/summary&
string[] _hpPic = { &Hp03&, &Hp02&, &Hp01& };
void OnEnable()
//1 - 查找对象
_normalHp = transform.Find(&normal&).gameO
_transHp = transform.Find(&trans&).gameO
//2 - 获取normal血条脚本 sprite和TweenScale
_normalSp = _normalHp.GetComponent&UISprite&();
_normalScale = _normalHp.GetComponent&TweenScale&();
//2.1 - 给TweenScale绑定动画结束回调
_normalScale.AddOnFinished(PlayScaleFinished);
//3 - 获取transparent血条脚本 sprite 和 TweenScale
_transSp = _transHp.GetComponent&UISprite&();
_transScale = _transHp.GetComponent&TweenScale&();
/// &summary&
/// 血条显示控制
/// &/summary&
/// &param name=&bIs&&&/param&
public void SetVisible(bool bIs)
_normalHp.SetActive(bIs);
_transHp.SetActive(bIs);
/// &summary&
/// 设置血条图片并放大到正常大小
/// &/summary&
public void SetShowPic()
_normalSp.spriteName = _hpPic[_picIndex];
_transSp.spriteName = _hpPic[_picIndex];
SetScale(Vector3.one);
/// &summary&
/// 设置血条depth
/// &/summary&
/// &param name=&dep&&&/param&
public void SetHpDepth(int dep)
_normalSp.depth =
_transSp.depth = dep - 1;
/// &summary&
/// 改变血条depth
/// &/summary&
public int HpDepth
_normalSp.depth = _
_transSp.depth = _depth - 1;
get { return _ }
/// &summary&
/// 血条图片索引
/// &/summary&
public int HpPicIndex
set { _picIndex = }
get { return _picI }
/// &summary&
/// 设置血条缩放
/// &/summary&
public void SetScale(Vector3 vScale)
_normalScale.value = vS
_transScale.value = vS
/// &summary&
/// 获取正常血条对象
/// &/summary&
public GameObject NormalHp
_normalHp =
get { return _normalHp; }
/// &summary&
/// 获取透明血条对象
/// &/summary&
public GameObject TransHp
_transHp =
get { return _transHp; }
/// &summary&
/// 播放动画
/// &/summary&
public void PlayTween(float to)
_normalScale.from = _normalScale.
_normalScale.to.x =
_normalScale.duration = (_normalScale.from.x - _normalScale.to.x) / tweenS
_normalScale.PlayForward();
/// &summary&
/// normal缩放结束,trans开始动画
/// &/summary&
void PlayScaleFinished()
_transAlpha.from = _initA
_transAlpha.to = 0;
_transAlpha.delay = 0.4f;
_transAlpha.PlayForward();
/// &summary&
/// 淡出结束 缩放到前景一样的长度 并恢复Alpha值
/// &/summary&
void PlayAlphaFinished()
_transScale.value = _normalScale.
_transAlpha.value = _initA
2.血条操作对象Controller
说明: 如上所说，本例使用3个血条对象实现多层血条效果。首先根据初始血条层数和最大血量，来初始化血条的显示，然后根据每次剩余血量和总血量来计算相关数据来做显示处理。为了方便说明，会把血条对象的depth说为12,14,16,其实是指代对象里实体血条sprite的depth。
2.1UI制作。预先在界面中放置好3个血条对象，每个对象里的sprite要有不同的depth。应该从底到高显示。对象里有两个sprite，一个为正常显示的，一个为半透明的，半透明的depth比正常的低一个值。本例为第一个对象中半透明血条depth为11,正常血条depth为12，第二个对象半透明血条depth为13,正常血条depth为14，第二个对象半透明血条depth为15,正常血条depth为16。
2.2.几个参数变量
1).血条对象脚本MuHp中的血条图片名字数组 &- &_hpPic.这个数组放的是血条所用图片的名字，图片颜色依次为蓝，绿，红，对应初始的血条摆放显示顺序，即从底向上依次为红，绿，蓝。在HpController脚本里，当一个血条消耗完毕，移动到底部时，会根据计算的index来从_hpPic里取图片来做显示改变。
2).HpController中名为_muHp的List。这个list中存放的是事先摆放好的三个血条对象，从index 0开始计数，依次为 0, 1, 2,分别对应的血条深度依次为12, 14, 16。即从0开始计数，深度依次增加。
3).HpController中名为_listQueue的Queue。这个Queue存放的是int
值，初始值为 0, 1, 2分别对应于_muHp中的index,当最高index = 2的血条消耗完下降到底部时，这个队列会Dequeue最上面的值，然后Enqueue到自身，依此来一一对应记录_muHp中血条目前真实的index，可以得到当前Top血层在_muHp中的index。
4).其他参数如记录最大血层数_ulayerNum，记录当前血层数的值_layerCount,在血条初始化显示和血条变化过程中会用到。
2.3.主要方法
1).是初始化显示方法。CalculateInitValue用来做初始化数值和图片显示，关键是大于3层血的显示，本例显示规则是从底向上依次为红绿蓝红绿蓝........这样循环显示。
2).根据数值计数显示。CalculateHp。这个方法根据传来的剩余血量和总血量，来计算当前血层是第几层血(从0开始计数),以及当前血层的血量百分比。用两个计算就可以搞定了。还有一个就是当前血层消耗完的判断。具体看代码。
3).循环遍历显示调整深度和图片显示。AdjustDepth。这个方法会在有一层血消耗完并且剩余血层数量大于等3的时候运行。用来改变每个血条对象的深度，并且改变下降到底层血条的显示。
P.S.请不要直接拷贝代码使用，出错了不管哦
using UnityE
using System.C
using System.Collections.G
public class HpController : MonoBehaviour
/// &summary&
/// 使用三个血条来实现多层血条效果
/// List中的血条对象index依此为0, 1, 2.深度依此为 12, 14, 16
!!!! - 重要
/// &/summary&
List&MuHp& _muHp = new List&MuHp&();
float fTest = 1.0f;
/// &summary&
/// 血条List中index,调整其depth后对应的index
/// 初始添加为 2, 1, 0,对应_muHp里血条对象的 index
!!!! - 重要
/// &/summary&
Queue&int& _listQueue = new Queue&int&();
/// &summary&
/// 总层数
/// &/summary&
int _ulayerNum = 3;
/// &summary&
/// 当前还有几层血
/// &/summary&
int _layerCount = 0;
/// &summary&
/// 每层的血量
/// &/summary&
float _layerHpValue = 0;
/// &summary&
/// 上一层血是属于那一层 - 总血层减去1
/// &/summary&
int _lastLayer = 0;
//血条颜色排列 从底向上
!!!! - 重要
//蓝色 - 2
//绿色 - 1
//红色 - 0
void Awake()
//void Start()
CalculateInitValue(5, 1200);
//float maxHp = 1200;
//float curHp = 1200;
//void Update()
if (Input.GetKeyDown(KeyCode.W))
int test = Random.Range(20, 60);
CalculateHp(curHp, maxHp);
/// &summary&
/// 查找血条对象并绑定MuHp脚本
/// &/summary&
void FindUI()
for (int i = 0; i & 3; i++)
string strHp = string.Format(&Hp{0}&, i);
//找到3个血条对象
GameObject hp = transform.Find(strHp).gameO
//添加MuHp.cs脚本
MuHp hpSc = hp.AddComponent&MuHp&();
//从depth低到高，依此添加到List中
!!!! - 重要
_muHp.Add(hpSc);
#region 血条
/// &summary&
/// 根据配置计算相关初始化数据
/// 说明：每层血的血量相同
!!!! - 重要
/// &/summary&
/// &param name=&layer&&血条的总层数&/param&
/// &param name=&maxHp&&最大血量&/param&
public void CalculateInitValue(int layer, float maxHp)
_listQueue.Clear();
//血条总数
_ulayerNum =
//总数计数
_layerCount =
//每层血的血量
_layerHpValue = maxHp /
//用来判断某一层的血条是否减完了,初始值为最大层数
//层数计数和数组计数一样，最小从0开始记
_lastLayer = layer - 1;
//处理血条初始图片显示
HandleInitShow(_ulayerNum);
//初始index 队列
_listQueue.Enqueue(2);
_listQueue.Enqueue(1);
_listQueue.Enqueue(0);
/// &summary&
/// 处理血条初始化显示
/// 主要做初始化图片显示，或者隐藏多余的
/// 1.MuHp.cs 中的 _hpPic 图片名字数组
/// 2.总数大于三条的显示。举例说明，比如现在总血层为4条
/// 则当前3个血条从底向上的显示应该依次为 绿 蓝 红，二不是红 绿 蓝了，本例依此规则显示。
!!!!! - 重要
/// &/summary&
/// &param name=&totalLayer&&&/param&
void HandleInitShow(int totalLayer)
_muHp[0].HpDepth = 12;
_muHp[1].HpDepth = 14;
_muHp[2].HpDepth = 16;
if (totalLayer & 3)//总数不足3条的，隐藏多余的
for (int i = 2; i & totalLayer - 1; i--)
_muHp[i].SetVisible(false);
else if (totalLayer & 3)//总数大于3条的
//从低到高 0 1 2 0 1 2
for (int i = 0; i & 3; i++)
int picIn = (totalLayer - 3 + i) % 3;
_muHp[i].HpPicIndex = picIn;
_muHp[i].SetVisible(true);
_muHp[i].SetShowPic();
else//总数正好3条
for (int i = 0; i & 3; i++)
_muHp[i].HpPicIndex =
_muHp[i].SetVisible(true);
_muHp[i].SetShowPic();
Debug.Log(&The Three Hp is Good&);
/// &summary&
/// 血条更新
/// &/summary&
/// &param name=&hp&&当前血量&/param&
/// &param name=&maxhp&&最大血量&/param&
void UpdateBossHp(float hp, float maxhp)
float hpRate = Mathf.Clamp(hp / maxhp, 0, 1);
Debug.Log(&hp = & + hp);
Debug.Log(&maxHP = & + maxhp);
CalculateHp(hp, maxhp);
/// &summary&
/// 计算数值改变显示
/// &/summary&
/// &param name=&hp&&当前剩余血量&/param&
/// &param name=&maxhp&&满血血量&/param&
void CalculateHp(float hp, float maxhp)
//hp 为 0,Boss挂掉了
if (hp &= 0)
_layerCount = 0;
if (_layerCount &= 0)
_layerNum.text = &X0&;
foreach (var hpSc in _muHp)
hpSc.SetVisible(false);
_layerNum.text = &X& + _layerCount.ToString();
//1 - 计算当前血条时第几层血 计数从0开始
//真实层数 计数减一 比如有三层血，则最高层计数为 2
//- 剩余除以每层的平均血量取得当前所处的层数
int curLayer = Mathf.FloorToInt(hp / _layerHpValue);
//2 - 计算当前血条剩余比值
//求余数算法
//1).求余之后就是当前层所剩余的血
//2).然后再和平均血量做比就是比值了
float layerRatio = hp % _layerHpValue / _layerHpV
//取得当前血条在三个真实血条中的索引值
int curIndex = _listQueue.Peek();
//缩放动画
_muHp[curIndex].PlayTween(layerRatio);
//通过与last的值比较，来判断这层血是不是减完了
if (curLayer != _lastLayer)
if (_layerCount == 0)
//计数减一
_layerCount -= 1;
//取出这个index
int downIndex = _listQueue.Dequeue();
//本层血结束了，如果剩余血层的数量在3之上，则重新排下深度
if (_ulayerNum & 3 && _layerCount &= 3)
AdjustDepth(downIndex);
//并把耗完的这层血的index放到队列里
_listQueue.Enqueue(downIndex);
else//不足3层血了，直接缩小为0即可
_muHp[curIndex].PlayTween(0);
//记录下当前层
_lastLayer = curL
/// &summary&
/// 调整深度
/// 重点说明：每消耗完一层血，则运行此方法。方法的主要功能就是遍历三个血条对象
/// 1.每个血条对象深度加2，如果有血条深度大于最高depth 16,则把它下降到最低depth 12
/// 并放大的正常大小
/// 2.降到底部血条的sprite图片在图片数组中的index减3，如果index小于0,则再加3.即图片显示循环了一道.
/// 然后再改变血条sprite的图片
/// &/summary&
void AdjustDepth(int downIndex)
for (int i = 0; i & _muHp.C i++)
_muHp[i].HpDepth += 2;
if (_muHp[i].HpDepth & 16)
_muHp[i].HpDepth = 12;
//放大到正常长度
_muHp[i].SetScale(Vector3.one);
_muHp[i].HpPicIndex -= 3;
if (_muHp[i].HpPicIndex & 0)
_muHp[i].HpPicIndex += 3;
_muHp[i].SetShowPic();
#endregion
以上为多层血条的具体实现，细看一下还是有很多要点要注意，而且自我感觉写的还是有点小复杂。在此贴个帖子，希望大家多提提意见，我做做改进。
希望不要直接复制上面的两个脚本使用，因为绝对会报错。贴两个脚本主要是方便讲解，让大家看看实现过程，原理大致就是这样。有意见，有改进的地方，多提提哈。谢谢了。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：56948次
排名：千里之外
原创：26篇
评论：40条
(1)(1)(2)(1)(1)(3)(1)(1)(1)(7)(2)(2)(2)(2)(1)(4)}