Quick-cocos2d-x3.3 Study （十八）--------- 进度条

进度条

在ctor()函数中添加如下代码

    -- 添加进度条
    -- 添加血量属性 self.blood，这里初始值我设为了 100，
    -- 这样我们后面就可以根据血量来设置进度条的百分比了（懒人做法）。
    self.blood = 100
    -- 给进度条创建一个底，也就是在进度条的下面放一个背景，
    -- 这样当进度条逐渐变短时，用户可以更直观的看到它减少了多少。
    local progressbg = display.newSprite( "image/progress/load.png" )
        -- :addTo(self)
    -- 创建进度条 self.fill
    self.fill = display.newProgressTimer( "image/progress/loadBar.png", display.PROGRESS_TIMER_BAR )  -- 3
    -- 设置进度条的起始点，
    -- （0，y）表示最左边，
    -- （1，y）表示最右边，
    -- （x，1）表示最上面，
    -- （x，0）表示最下面。
    self.fill:setMidpoint( cc.p( 0, 0.5 ) )
    -- 设置进度条变化方向，如果不用变化的方向，则设置该方向为0，否则设置为1。
    -- 所以（1,0）表示横方向，（0,1）表示纵方向。
    self.fill:setBarChangeRate( cc.p( 1.0, 0 ) )
    -- 把进度条的位置设置在 progressbg 上，并将进度条添加到 progressbg 上
    self.fill:setPosition( progressbg:getContentSize().width / 2, progressbg:getContentSize().height / 2 ) 
    progressbg:addChild( self.fill )
    -- 调用 ProgressTimer 的 setPercentage 方法设置进度条的百分比为 100%（因为 self.blood 的值为100）。
    -- ProgressTimer 类有一个很最要的percentage属性。
    -- 它代表当前进度条的进度值。
    -- 其中 setPercentage 方法能设置 ProgressTimer 的 percentage 值。
    self.fill:setPercentage( self.blood )

    -- 设置进度条的锚点
    -- progressbg:setAnchorPoint( cc.p( 0, 1 ) )
    -- 将进度条添加到场景中
    self:addChild( progressbg )
    -- 设置进度条的位置
    progressbg:setPosition( cc.p( display.cx, display.cy + 50 ) )

        -- 调用帧事件
    self:addNodeEventListener( cc.NODE_ENTER_FRAME_EVENT, handler( self, self.update ) )
    self:scheduleUpdate()


42 
-- 设置进度条百分比的
function GameScene:setProPercentage( Percentage )
    -- 设置进度条的百分比
    self.fill:setPercentage( Percentage )
end

-- 进度条的帧调用回调函数
function GameScene:update( dt )
    -- body
    -- 每帧都让血量减少0.2
    self.blood =  self.blood - 0.2
    -- 输出血量值，(方便观看update的执行和血量值)
    print( "---- self.blood = ----", self.blood )
    -- 如果血量值小于0 的话就停止减少,否则就执行动画
    if self.blood <= 0 then
        --todo
        self:unscheduleUpdate()
    else
        self:setProPercentage( self.blood )
    end

end

 

效果图：

 

 

其实这里的背景也是动的

但是我在ctor中调用了两次scheduleUpdate()

所以背景的那个就不动了(本人猜测只调用了最后一个)

 

为了达到大家一起动起来 

就把update的调用添加到scrollBackground函数中吧

 

首先注释掉这些代码：

-- -- 调用帧事件

-- self:addNodeEventListener( cc.NODE_ENTER_FRAME_EVENT, handler( self, self.update ) )

-- self:scheduleUpdate() 

 

然后在scrollBackground函数的最末尾添加

self:update( dt )

 

然后就可以看到我们想要的效果啦：

当进度条没有的时候我们看到背景也跟着停止运动了

因为我们掉用了 unscheduleUpdate()函数

 

效果图：