cocos2dx-lua 之 ProgressTimer 条形进度条 简单血条的实现

cocos2dx-lua 简单血条的实现

所用资源：

blood_bg.png :    blood_red.png 

直接贴代码：

local BloodProgressBar = class("BloodProgressBar", function (  )
	return cc.Node:create()
end)

function BloodProgressBar:create(  )
	local bloodProgressBar = BloodProgressBar:new()
	bloodProgressBar:getViews()
	return bloodProgressBar
end

function BloodProgressBar:ctor(  )
	
end

function BloodProgressBar:getViews(  )
	
	--血条背景
	local bloodEmptyBg = cc.Sprite:create("ui/blood_bg.png")
	bloodEmptyBg:setAnchorPoint(cc.p(0.5,0.5))
	local bloodEmptyBgSize = bloodEmptyBg:getContentSize()
	bloodEmptyBg:setPosition(cc.p(bloodEmptyBgSize.width/2,bloodEmptyBgSize.height/2))
	self:addChild(bloodEmptyBg)

	--血条
	local bloodBody = cc.Sprite:create("ui/blood_red.png")

	--创建进度条
	local bloodProgress = cc.ProgressTimer:create(bloodBody)
	bloodProgress:setType(cc.PROGRESS_TIMER_TYPE_BAR) --设置为条形 type:cc.PROGRESS_TIMER_TYPE_RADIAL
	bloodProgress:setMidpoint(cc.p(0,0)) --设置起点为条形坐下方
	bloodProgress:setBarChangeRate(cc.p(0,1))  --设置为竖直方向
	bloodProgress:setPercentage(0) -- 设置初始进度为30
	bloodProgress:setPosition(cc.p(bloodEmptyBgSize.width/2,bloodEmptyBgSize.height/2))
	self:addChild(bloodProgress)

	--让进度条一直从0--100重复的act
	local progressTo = cc.ProgressTo:create(5,100)
	local clear = cc.CallFunc:create(function (  )
		bloodProgress:setPercentage(0)
	end)
	local seq = cc.Sequence:create(progressTo,clear)
	bloodProgress:runAction(cc.RepeatForever:create(seq))
end

return BloodProgressBar

运行效果如下图所示：

解释：

主要有三点可以设置：

（1）设置进度条类型的方法：setType( 参数 )

参数：

cc.PROGRESS_TIMER_TYPE_BAR 条形

type:cc.PROGRESS_TIMER_TYPE_RADIAL 圆形
 
  
 
  
 
  

 
  
（2）进度条方向和起点：
 
  
设置进度条方向的方法：setBarChangeRate(参数)
 
  
设置进度条起点的方法：setMidpoint(参数)
 
  

 
  
设置进度条方向为水平方向：
 
  
setBarChangeRate(cc.p(1,0))   
 
  
水平方向时起点有两个方向：从左到右和从右到左
 
  
setMidpoint(cc.p(0,0))  OR  setMidpoint(cc.p(0,1))   这两个是从左到右   即x为0
 
  
setMidpoint(cc.p(1,0))  OR setMidpoint(cc.p(1,1))     这两个是从右到左 即x为1
 
  

 
  
设置进度条方向为竖直方向：
 
  
setBarChangeRate(cc.p(0,1))   
 
  
竖直方向时起点有两个方向：从上到下合从下到上
 
  
setMidpoint(cc.p(0,1))  OR  setMidpoint(cc.p(1,1))   这两个是从上到下   即y为1
 
  
setMidpoint(cc.p(0,0))  OR setMidpoint(cc.p(1,0))     这两个是从下到上 即y为0
 
  

 
  
设置进度条方向为两个方向同时运动：
 
  
setBarChangeRate(cc.p(1,1))   
 
  
两个方向的运行情况有4种：左下到右上、右下到左上、左上到右下、右上到左下
 
  
setMidpoint(cc.p(0,0)) 左下到右上
 
  
setMidpoint(cc.p(1,0)) 右下到左上
 
  
setMidpoint(cc.p(0,1)) 左上到右下
 
  
setMidpoint(cc.p(1,1)) 右上到左下
 
  

 
  
（3）设置进度条的进度：setPercentage（参数）
 
  
参数为0~~~~100的值。
 
  

 
  
执行进度条值变化的动作：
 
  
local progressTo = cc.ProgressTo:create(5,100)
 
  
[ProgressNode]:runAction(progressTo)