必备资源：
必备资源.png
调用步骤：
1、定义类
private var _mutipleBossHpBar:BattlerMultipleHpBar = new BattlerMultipleHpBar();
2、初始化
if(_mutipleBossHpBar){
_mutipleBossHpBar.x = posx; //设置位置
_mutipleBossHpBar.y = posy;
_mutipleBossHpBar.initSkin("ui/battle/mutiple_waikuang.png","0,15,0,15",270,38,264,31,3,3,"0,12,0,12");
parent.addChild(_mutipleBossHpBar); //添加到舞台/父节点
}
3、初始化数据
if(_mutipleBossHpBar){
_mutipleBossHpBar.initData(curhp,maxhp,);
}
4、刷新血量
if(_mutipleBossHpBar)
_mutipleBossHpBar.setHp(curhp,maxhp);
组件代码：
package Application.Logic.Battle.ui
{
import Application.Logic.Battle.BattleManager;
import Application.Logic.Battle.BattleSceneManager;
import laya.events.Event;
import laya.maths.Rectangle;
import laya.ui.FontClip;
import laya.ui.Image;
import laya.ui.Label;
import laya.utils.Ease;
import laya.utils.Handler;
import laya.utils.TimeLine;
import laya.utils.Tween;
public class BattlerMultipleHpBar extends Image
{
private var _barbg:Image = new Image();//最下层的底
private var _barBottom:Image = new Image();//用来显示下一管血的颜色
private var _barMiddle:Image = new Image();//做扣血效果的条
private var _barTop:Image = new Image();//当前管的颜色
//追加
private var _barTopClipRect:Rectangle = new Rectangle();
private var _barMiddleClipRect:Rectangle = new Rectangle();
private var _barnumclip:FontClip = new FontClip();
private var _barnumLabel:Label = new Label();
private static var _maxbarnum:int=40;//最多20管血
private static var _oncetime:int = 500;//一次扣血 不管多长 500ms播完
private static var _colorSkins:Array=[
"ui/battle/1mutiple_zise.png",
"ui/battle/1mutiple_blue.png",
"ui/battle/1mutiple_green.png",
"ui/battle/1mutiple_chengse.png",
"ui/battle/1mutiple_red.png"
];
private var _barwidth:int=390;
private var _curbarnum:int = 40;//当前多少管血
private var _hpmax:int=100;//总血量
private var _curhp:int=100;//当前还剩多少血量
private var _curhpshow:int=100;//最上层血条显示的血量
private var _oneBarHp:int = 5;//一管多少血
private var _greyTween:Tween;
private var _topTween:Tween;
public function BattlerMultipleHpBar()
{
super();
}
//{width:100,time:10,barnum:20,issamebar:1}
private var _tweenDatas:Array=[];
private var _isplay:Boolean=false;
public override function destroy(destroyChild:Boolean=true):void
{
if(_greyTween)
{
_greyTween.recover();
_greyTween=null;
}
if(_topTween)
{
_topTween.recover();
_topTween=null;
}
super.destroy(destroyChild);
}
public function initSkin(bgskin:String,bgSizeGrid:String,bgwidth:int,bgheight:int,barwidth:int,barheight:int,barxoffset:int,baryoffset:int,barSizeGrid:String):void
{
_barbg.skin = bgskin;
_barbg.sizeGrid = bgSizeGrid;
_barbg.width = bgwidth;
_barbg.height = bgheight;
if(!_barbg.parent)
this.addChild(_barbg);
_barBottom.width = barwidth;
_barBottom.height = barheight;
_barBottom.sizeGrid = barSizeGrid;
_barBottom.x = barxoffset;
_barBottom.y = baryoffset;
if(!_barBottom.parent)
this.addChild(_barBottom);
_barMiddle.skin = "ui/battle/1mutiple_grey.png";
_barMiddle.width = barwidth;
_barMiddle.height = barheight;
_barMiddle.sizeGrid = barSizeGrid;
_barMiddle.x = barxoffset;
_barMiddle.y = baryoffset;
if(!_barMiddle.parent)
this.addChild(_barMiddle);
_barMiddleClipRect.x = _barMiddle.x-3;
_barMiddleClipRect.y = _barMiddle.y-3;
_barMiddleClipRect.height = barheight;
_barMiddle.scrollRect = _barMiddleClipRect;
_barTop.width = barwidth;
_barTop.height = barheight;
_barTop.sizeGrid = barSizeGrid;
_barTop.x = barxoffset;
_barTop.y = baryoffset;
if(!_barTop.parent)
this.addChild(_barTop);
_barTopClipRect.x = _barTop.x-3;
_barTopClipRect.y = _barTop.y-3;
_barTopClipRect.height = barheight;
_barTop.scrollRect = _barTopClipRect;
_barnumclip.width = 100;
_barnumclip.height = 60;
_barnumclip.skin = "ui/mainInterface/number_vip.png";
_barnumclip.sheet = "0123456789";
_barnumclip.value = "20";
_barnumclip.spaceX = 0;
_barnumclip.align = "right";
_barnumclip.scale(0.6,0.6);
_barnumclip.x = bgwidth - 120;
_barnumclip.y = bgheight/2-12;
if(!_barnumclip.parent)
this.addChild(_barnumclip);
_barnumclip.visible=false;
_barnumLabel.width = 100;
_barnumLabel.height = 60;
_barnumLabel.align= "right";
_barnumLabel.color = "#ffffff";
_barnumLabel.fontSize = 20;
_barnumLabel.text = "x20"
_barnumLabel.x = bgwidth - 115;
_barnumLabel.y = bgheight/2-10;
if(!_barnumLabel.parent)
this.addChild(_barnumLabel);
_barwidth = barwidth;
}
public function initData(curhp:int,maxhp:int,bossmaxhpmun:int=40):void
{
_maxbarnum = bossmaxhpmun;
_hpmax = maxhp;
_curhp = curhp;
_oneBarHp = (_hpmax/_maxbarnum);
_curbarnum = Math.ceil(_curhp/(_oneBarHp));
if(_curbarnum>_maxbarnum)
_curbarnum = _maxbarnum;
_curhpshow = _computeCurHpShow(_curhp);
_initBarSkinAndWidth();
}
//第一次初始化
private function _initBarSkinAndWidth():void
{
//底
if(_curbarnum==1)
{
_barBottom.skin="";
_barBottom.width=0;
}
else
{
_barBottom.skin=_colorSkins[Math.ceil((_curbarnum-1-1)%5)];
_barBottom.width = _barwidth;
}
//灰色bar
//_barMiddle.width = _barwidth*(_curhpshow/Math.ceil(_oneBarHp));
_barMiddleClipRect.width = _barwidth*(_curhpshow/Math.ceil(_oneBarHp));
_barMiddle.visible=false;//默认灰色条是看不见的
//topbar
_barTop.skin = _colorSkins[Math.ceil((_curbarnum-1)%5)];
//_barTop.width = Math.ceil(_barwidth*(_curhpshow/_oneBarHp));
_barTopClipRect.width = Math.ceil(_barwidth*(_curhpshow/_oneBarHp));
if(_barnumLabel)
{
if(_curhp == _hpmax)
_barnumLabel.text = "x"+_maxbarnum;
else
_barnumLabel.text = "x"+(_curbarnum-1);
if(_curbarnum == 1)
{
_barnumLabel.visible=false;
}else
{
_barnumLabel.visible=true;
}
}
}
//计算出topbar显示的血量数量
private function _computeCurHpShow(curhp:int):int
{
if(curhp==0)
return 0;
else
{
var tmp:int = Math.floor(curhp%(_oneBarHp));
if(tmp==0)
return Math.floor(_oneBarHp);
else
return tmp;
}
}
public function setHp(curhp:int,maxhp:int):void
{
if(curhp<=0)
{
curhp = 0;
}
_hpmax = maxhp;
var targetbarnum:int = Math.ceil(curhp/_oneBarHp);//目标管数
if(targetbarnum>_maxbarnum)
targetbarnum = _maxbarnum;
if(targetbarnum<=0) targetbarnum=1;
var targethpshow:int = _computeCurHpShow(curhp);//目标topbar血量
//插入timeline数据
var timecount:int=0;
for(var i:int=_curbarnum;i>=targetbarnum;i--)
{
if(i==_curbarnum)//第一管
{
if(i!=targetbarnum)//扣光
{
timecount = _curhpshow*(_oncetime/(_curhp-curhp));
//_topTimeLine.addLabel("costto0",0).to(_barTop,{width:0},timecount,Ease.linearNone,0);
_tweenDatas.push({"width":0,"time":timecount,"issamebar":0,"barnum":i,"greywidth":Math.floor(_curhpshow/_oneBarHp*_barwidth)});
}
else//还在同一管
{
//_topTimeLine.addLabel("insamebar",0).to(_barTop,{width:Math.floor((_curhpshow-targethpshow)/_oneBarHp*_barwidth)},_oncetime,Ease.linearNone,0);
_tweenDatas.push({"width":Math.floor(targethpshow/_oneBarHp*_barwidth),"time":_oncetime,"issamebar":1,"barnum":i,"greywidth":Math.floor(_curhpshow/_oneBarHp*_barwidth)});
}
}
else if(i!=_curbarnum&&i!=targetbarnum)//中间的管 有可能一次性扣几管血
{
//从头扣到尾
timecount = _oneBarHp*(_oncetime/(_curhp-curhp));
//_topTimeLine.addLabel("costto0",0).to(_barTop,{width:0},timecount,Ease.linearNone,0);
_tweenDatas.push({"width":0,"time":timecount,"issamebar":0,"barnum":i,"greywidth":_barwidth});
}
else if(i!=_curbarnum&&i==targetbarnum)//最后一管血
{
timecount = (_oneBarHp-targethpshow)*(_oncetime/(_curhp-curhp));
//_topTimeLine.addLabel("inotherbar",0).to(_barTop,{width:Math.floor(_barwidth*(targethpshow/_oneBarHp))},timecount,Ease.linearNone,0);
_tweenDatas.push({"width":Math.floor(_barwidth*(targethpshow/_oneBarHp)),"time":timecount,"issamebar":1,"barnum":i,"greywidth":_barwidth});
}
}
_curhp = curhp;
_curhpshow = targethpshow;
_curbarnum = targetbarnum;
_PlayHPBarEffect();
}
private function _PlayHPBarEffect():void
{
//判断grey是否已经播完
if(_greyTween)
{
_greyTween.complete();
_barMiddle.visible=false;
}
if(_isplay)
return;
//开始播了
_isplay=true;
if(_tweenDatas.length>0)
{
//判断grey是否已经播完
// if(_greyTween)
// {
// _greyTween.complete();
// _barMiddle.visible=false;
// }
var data:Object = _tweenDatas[0];
if(_topTween)
{
//_topTween.to(_barTop,{width:data["width"]},data["time"]/2,Ease.linearNone,Handler.create(this,_onOneBarEffectFinished),0,false);
_topTween.to(_barTopClipRect,{width:data["width"]},data["time"]/2,Ease.linearNone,Handler.create(this,_onOneBarEffectFinished),0,false);
}
else
{
//_topTween = Tween.to(_barTop,{width:data["width"]},data["time"]/2,Ease.linearNone,Handler.create(this,_onOneBarEffectFinished),0,false,false);
_topTween = Tween.to(_barTopClipRect,{width:data["width"]},data["time"]/2,Ease.linearNone,Handler.create(this,_onOneBarEffectFinished),0,false,false);
}
//如果就一个数据 要把灰条显示出来
if(_tweenDatas.length==1)
{
_barMiddle.visible=true;
//_barMiddle.width = data["greywidth"];
_barMiddleClipRect.width = data["greywidth"];
if(_greyTween)
{
//_greyTween.to(_barMiddle,{width:data["width"]},data["time"],Ease.linearNone,Handler.create(this,_onGreyBarEffectFinished),data["time"]/2);
_greyTween.to(_barMiddleClipRect,{width:data["width"]},data["time"],Ease.linearNone,Handler.create(this,_onGreyBarEffectFinished),data["time"]/2);
}
else
{
//_greyTween = Tween.to(_barMiddle,{width:data["width"]},data["time"],Ease.linearNone,Handler.create(this,_onGreyBarEffectFinished),data["time"]/2,false,false);
_greyTween = Tween.to(_barMiddleClipRect,{width:data["width"]},data["time"],Ease.linearNone,Handler.create(this,_onGreyBarEffectFinished),data["time"]/2,false,false);
}
}
}
else
{
_isplay=false;
return;
}
}
private function _onOneBarEffectFinished():void
{
if(_tweenDatas&&_tweenDatas[0])
{
var data:Object;
if(_tweenDatas.length==1)//结束了
{
_isplay=false;
data = _tweenDatas.shift();
// if(_greyTween)
// {
// _greyTween.to(_barMiddle,{width:data["width"]},data["time"],Ease.linearNone,Handler.create(this,_onGreyBarEffectFinished));
// }
// else
// {
// _greyTween = Tween.to(_barMiddle,{width:data["width"]},data["time"],Ease.linearNone,Handler.create(this,_onGreyBarEffectFinished),0,false,false);
// }
//判断血量是否为0
if(BattleManager.instance.battleDatas.bossHp<=0)
{
BattleSceneManager.instance.doBossDeath();
}
}
else//后面还有
{
data = _tweenDatas[0];
if(data["issamebar"]==0)//设置颜色
{
_refreshBarSkin(parseInt(data["barnum"])-1);
}
_tweenDatas.shift();//去掉头
data = _tweenDatas[0];
if(_topTween)
{
//_topTween.to(_barTop,{width:data["width"]},data["time"]/2,Ease.linearNone,Handler.create(this,_onOneBarEffectFinished),0,false);
_topTween.to(_barTopClipRect,{width:data["width"]},data["time"]/2,Ease.linearNone,Handler.create(this,_onOneBarEffectFinished),0,false);
}
else
{
//_topTween = Tween.to(_barTop,{width:data["width"]},data["time"]/2,Ease.linearNone,Handler.create(this,_onOneBarEffectFinished),0,false,false);
_topTween = Tween.to(_barTopClipRect,{width:data["width"]},data["time"]/2,Ease.linearNone,Handler.create(this,_onOneBarEffectFinished),0,false,false);
}
if(_tweenDatas.length==1)//显示grey
{
_barMiddle.visible = true;
//_barMiddle.width = data["greywidth"];
_barMiddleClipRect.width = data["greywidth"];
if(_greyTween)
{
//_greyTween.to(_barMiddle,{width:data["width"]},data["time"],Ease.linearNone,Handler.create(this,_onGreyBarEffectFinished),data["time"]/2);
_greyTween.to(_barMiddleClipRect,{width:data["width"]},data["time"],Ease.linearNone,Handler.create(this,_onGreyBarEffectFinished),data["time"]/2);
}
else
{
//_greyTween = Tween.to(_barMiddle,{width:data["width"]},data["time"],Ease.linearNone,Handler.create(this,_onGreyBarEffectFinished),data["time"]/2,false,false);
_greyTween = Tween.to(_barMiddleClipRect,{width:data["width"]},data["time"],Ease.linearNone,Handler.create(this,_onGreyBarEffectFinished),data["time"]/2,false,false);
}
}
}
//设置管数
// if(_barnumclip)
// {
// if(_curhp == _hpmax)
// {
// _barnumclip.value = "x"+_maxbarnum;
// }else
// {
// _barnumclip.value = "x"+(parseInt(data["barnum"])-1);
// }
//
// //_barnumclip.value = ""+(parseInt(data["barnum"]));
//
// if(parseInt(data["barnum"]) == 1)
// {
// _barnumclip.visible=false;
// }else
// {
// _barnumclip.visible=true;
// }
// }
if(_barnumLabel)
{
if(_curhp == _hpmax)
{
_barnumLabel.text = "x"+_maxbarnum;
}else
{
_barnumLabel.text = "x"+(parseInt(data["barnum"])-1);
}
//_barnumclip.value = ""+(parseInt(data["barnum"]));
if(parseInt(data["barnum"]) == 1)
{
_barnumLabel.visible=false;
}else
{
_barnumLabel.visible=true;
}
}
}
else
{
//发生错误
}
}
private function _onGreyBarEffectFinished():void
{
_barMiddle.visible=false;
}
private function _refreshBarSkin(barnum:int):void
{
if(barnum==1)
{
_barBottom.skin="";
}
else
{
_barBottom.skin=_colorSkins[Math.floor((barnum-1-1)%5)];
}
_barTop.skin = _colorSkins[Math.floor((barnum-1)%5)];
//_barTop.width = _barwidth;
_barTopClipRect.width = _barwidth;
}
}
}
