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 bloodProgressBarendfunction BloodProgressBar:ctor(  )endfunction 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_RADIALbloodProgress:setMidpoint(cc.p(0,0)) --設定起點為條形坐下方bloodProgress:setBarChangeRate(cc.p(0,1))  --設定為豎直方向bloodProgress:setPercentage(0) -- 設定初始進度為30bloodProgress:setPosition(cc.p(bloodEmptyBgSize.width/2,bloodEmptyBgSize.height/2))self:addChild(bloodProgress)--讓進度條一直從0--100重複的actlocal 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))endreturn BloodProgressBar

運行效果如下圖所示：

解釋：

主要有三點可以設定：

（1）設定進度條類型的方法：setType( 參數 )

參數：

cc.PROGRESS_TIMER_TYPE_BAR 條形

<pre name="code" class="plain">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)