《Cocos2d-x-3.2 Lua-tests》文件详解 之 进度条ActionsProgress

--
local s = cc.Director:getInstance():getWinSize()

------------------------------------
--  SpriteProgressToRadial
------------------------------------
local function SpriteProgressToRadial()
--布局
local layer = cc.Layer:create()
Helper.initWithLayer(layer)

--创建进度条动作，2秒钟，飙到100%
local to1 = cc.ProgressTo:create(2, 100)
local to2 = cc.ProgressTo:create(2, 100)

--用一个精灵 创建进度条
local left = cc.ProgressTimer:create(cc.Sprite:create(s_pPathSister1))
--进度条类型：旋转型
left:setType(cc.PROGRESS_TIMER_TYPE_RADIAL)
left:setPosition(cc.p(100, s.height / 2))

--运行Action,这里用了一个cc.RepeatForever,其实下面那句效果相同。这是ProgressTimer与Sprite的区别
left:runAction(cc.RepeatForever:create(to1))
--left:runAction(to1)
layer:addChild(left)

local right = cc.ProgressTimer:create(cc.Sprite:create(s_pPathBlock))
right:setType(cc.PROGRESS_TIMER_TYPE_RADIAL)
-- Makes the ridial CCW 反向
right:setReverseDirection(true)
right:setPosition(cc.p(s.width - 100, s.height / 2))
right:runAction(cc.RepeatForever:create(to2))
layer:addChild(right)

Helper.subtitleLabel:setString("ProgressTo Radial")
return layer
end

------------------------------------
--  SpriteProgressToHorizontal
------------------------------------
--[[
线性进度条,两点：
1、setMidpoint()设置起点，参数类为cc.p()
2、setBarChangeRate()设置进度增长的方向，cc.p()
--]]
local function SpriteProgressToHorizontal()
local layer = cc.Layer:create()
Helper.initWithLayer(layer)

local to1 = cc.ProgressTo:create(2, 100)
local to2 = cc.ProgressTo:create(2, 100)

local left = cc.ProgressTimer:create(cc.Sprite:create(s_pPathSister1))
left:setType(cc.PROGRESS_TIMER_TYPE_BAR)

--以下两句密不可分
-- 从x = 0% 的地方为起点，
left:setMidpoint(cc.p(0, 0))
-- 沿x轴增长
left:setBarChangeRate(cc.p(1,0))

left:setPosition(cc.p(100, s.height / 2))
left:runAction(cc.RepeatForever:create(to1))
layer:addChild(left)

local right = cc.ProgressTimer:create(cc.Sprite:create(s_pPathSister2))
right:setType(cc.PROGRESS_TIMER_TYPE_BAR)

--以下两句密不可分
--从x = 100%的地方为起点
right:setMidpoint(cc.p(1, 0))
--逆着x轴增长
right:setBarChangeRate(cc.p(1, 0))

right:setPosition(cc.p(s.width - 100, s.height / 2))
right:runAction(cc.RepeatForever:create(to2))
layer:addChild(right)

Helper.subtitleLabel:setString("ProgressTo Horizontal")
return layer
end

------------------------------------
--  SpriteProgressToVertical
------------------------------------
--还是线性进度条，只不过setMidpoint()和setBarChangeRage()不同，多感受一下这两个方法吧
--顺便提一下，场景过度cc.Transition中有一种cc.TransitionFadeBL的过渡动画，就是用这两个方法配合格子动画做到的
local function SpriteProgressToVertical()
local layer = cc.Layer:create()
Helper.initWithLayer(layer)

local to1 = cc.ProgressTo:create(2, 100)
local to2 = cc.ProgressTo:create(2, 100)

local left = cc.ProgressTimer:create(cc.Sprite:create(s_pPathSister1))
left:setType(cc.PROGRESS_TIMER_TYPE_BAR)

left:setMidpoint(cc.p(0,0))
left:setBarChangeRate(cc.p(0, 1))

left:setPosition(cc.p(100, s.height / 2))
left:runAction(cc.RepeatForever:create(to1))
layer:addChild(left)

local right = cc.ProgressTimer:create(cc.Sprite:create(s_pPathSister2))
right:setType(cc.PROGRESS_TIMER_TYPE_BAR)

right:setMidpoint(cc.p(0, 1))
right:setBarChangeRate(cc.p(0, 1))

right:setPosition(cc.p(s.width - 100, s.height / 2))
right:runAction(cc.RepeatForever:create(to2))
layer:addChild(right)

Helper.subtitleLabel:setString("ProgressTo Vertical")
return layer
end

------------------------------------
--  SpriteProgressToRadialMidpointChanged
------------------------------------
local function SpriteProgressToRadialMidpointChanged()
local layer = cc.Layer:create()
Helper.initWithLayer(layer)

local action = cc.ProgressTo:create(2, 100)

-- Our image on the left should be a radial progress indicator, clockwise
local left = cc.ProgressTimer:create(cc.Sprite:create(s_pPathBlock))

--旋转型进度，可设置中心点的位置
--将ProgressTimer看成是左下角坐标为(0,0),右上角为(1,1)的图形，你可以随便在这里面挑一个坐标为中心点
--需要注意的是：不要取到边框上的点
left:setType(cc.PROGRESS_TIMER_TYPE_RADIAL)
left:setMidpoint(cc.p(0.5, 0.75))

left:setPosition(cc.p(100, s.height / 2))
left:runAction(cc.RepeatForever:create(cc.ProgressTo:create(2, 100)))
layer:addChild(left)

-- Our image on the left should be a radial progress indicator, counter clockwise
local right = cc.ProgressTimer:create(cc.Sprite:create(s_pPathBlock))
right:setType(cc.PROGRESS_TIMER_TYPE_RADIAL)
right:setMidpoint(cc.p(0.1, 0.9))

--[[
Note the reverse property (default=NO) is only added to the right image. That's how
we get a counter clockwise progress.
]]
right:setPosition(cc.p(s.width - 100, s.height / 2))
right:runAction(cc.RepeatForever:create(cc.ProgressTo:create(2, 100)))
layer:addChild(right)

Helper.subtitleLabel:setString("Radial w/ Different Midpoints")
return layer
end

------------------------------------
--  SpriteProgressBarVarious
------------------------------------
--还是线性进度不过是setMidpoint()和setBarChangeRate()设置的位置不同而已，不多说
local function SpriteProgressBarVarious()
local layer = cc.Layer:create()
Helper.initWithLayer(layer)

local to = cc.ProgressTo:create(2, 100)

local left = cc.ProgressTimer:create(cc.Sprite:create(s_pPathSister1))
left:setType(cc.PROGRESS_TIMER_TYPE_BAR)

-- Setup for a bar starting from the bottom since the midpoint is 0 for the y
left:setMidpoint(cc.p(0.5, 0.5))
-- Setup for a vertical bar since the bar change rate is 0 for x meaning no horizontal change
left:setBarChangeRate(cc.p(1, 0))
left:setPosition(cc.p(100, s.height / 2))
left:runAction(cc.RepeatForever:create(cc.ProgressTo:create(2, 100)))
layer:addChild(left)

local middle = cc.ProgressTimer:create(cc.Sprite:create(s_pPathSister2))
middle:setType(cc.PROGRESS_TIMER_TYPE_BAR)
-- Setup for a bar starting from the bottom since the midpoint is 0 for the y
middle:setMidpoint(cc.p(0.5, 0.5))
-- Setup for a vertical bar since the bar change rate is 0 for x meaning no horizontal change
middle:setBarChangeRate(cc.p(1, 1))
middle:setPosition(cc.p(s.width/2, s.height/2))
middle:runAction(cc.RepeatForever:create(cc.ProgressTo:create(2, 100)))
layer:addChild(middle)

local right = cc.ProgressTimer:create(cc.Sprite:create(s_pPathSister2))
right:setType(cc.PROGRESS_TIMER_TYPE_BAR)
-- Setup for a bar starting from the bottom since the midpoint is 0 for the y
right:setMidpoint(cc.p(0.5, 0.5))
-- Setup for a vertical bar since the bar change rate is 0 for x meaning no horizontal change
right:setBarChangeRate(cc.p(0, 1))
right:setPosition(cc.p(s.width-100, s.height/2))
right:runAction(cc.RepeatForever:create(cc.ProgressTo:create(2, 100)))
layer:addChild(right)

Helper.subtitleLabel:setString("ProgressTo Bar Mid")
return layer
end

------------------------------------
--  SpriteProgressBarTintAndFade
------------------------------------
--线性进度条。进度条中加入其他Action，注意，这个例子有亮点
--进度Action 和普通Action在同一进度条上面可以同时播放/////////，不讲究顺序，即便不用前面提到的Spawn
local function SpriteProgressBarTintAndFade()
local layer = cc.Layer:create()
Helper.initWithLayer(layer)

local to = cc.ProgressTo:create(6, 100)
local tint = cc.Sequence:create(cc.TintTo:create(1, 255, 0, 0), cc.TintTo:create(1, 0, 255, 0), cc.TintTo:create(1, 0, 0, 255))
local fade = cc.Sequence:create(cc.FadeTo:create(1.0, 0),cc.FadeTo:create(1.0, 255))
local left = cc.ProgressTimer:create(cc.Sprite:create(s_pPathSister1))
left:setType(cc.PROGRESS_TIMER_TYPE_BAR)

-- Setup for a bar starting from the bottom since the midpoint is 0 for the y
left:setMidpoint(cc.p(0.5, 0.5))
-- Setup for a vertical bar since the bar change rate is 0 for x meaning no horizontal change
left:setBarChangeRate(cc.p(1, 0))

left:setPosition(cc.p(100, s.height / 2))

--进度Action 和普通Action在同一进度条上面可以同时播放/////////，即便讲究顺序，即便不用前面提到的Spawn
left:runAction(cc.RepeatForever:create(cc.ProgressTo:create(6, 100)))
left:runAction(cc.RepeatForever:create(cc.Sequence:create(cc.TintTo:create(1, 255, 0, 0), cc.TintTo:create(1, 0, 255, 0), cc.TintTo:create(1, 0, 0, 255))))

layer:addChild(left)
left:addChild(cc.Label:createWithTTF("Tint", "fonts/Marker Felt.ttf", 20.0))

local middle = cc.ProgressTimer:create(cc.Sprite:create(s_pPathSister2))
middle:setType(cc.PROGRESS_TIMER_TYPE_BAR)
-- Setup for a bar starting from the bottom since the midpoint is 0 for the y
middle:setMidpoint(cc.p(0.5, 0.5))
-- Setup for a vertical bar since the bar change rate is 0 for x meaning no horizontal change
middle:setBarChangeRate(cc.p(1, 1))
middle:setPosition(cc.p(s.width / 2, s.height / 2))
middle:runAction(cc.RepeatForever:create(cc.ProgressTo:create(6, 100)))

local fade2 = cc.Sequence:create(cc.FadeTo:create(1.0, 0), cc.FadeTo:create(1.0, 255))
middle:runAction(cc.RepeatForever:create(fade2))
layer:addChild(middle)
middle:addChild(cc.Label:createWithTTF("Fade", "fonts/Marker Felt.ttf", 20.0))

local right = cc.ProgressTimer:create(cc.Sprite:create(s_pPathSister2))
right:setType(cc.PROGRESS_TIMER_TYPE_BAR)
-- Setup for a bar starting from the bottom since the midpoint is 0 for the y
right:setMidpoint(cc.p(0.5, 0.5))
-- Setup for a vertical bar since the bar change rate is 0 for x meaning no horizontal change
right:setBarChangeRate(cc.p(0, 1))
right:setPosition(cc.p(s.width - 100, s.height / 2))
right:runAction(cc.RepeatForever:create(cc.ProgressTo:create(6, 100)))
right:runAction(cc.RepeatForever:create(cc.Sequence:create(cc.TintTo:create(1, 255, 0, 0), cc.TintTo:create(1, 0, 255, 0), cc.TintTo:create(1, 0, 0, 255))))
right:runAction(cc.RepeatForever:create(cc.Sequence:create(cc.FadeTo:create(1.0, 0), cc.FadeTo:create(1.0, 255))))
layer:addChild(right)

right:addChild(cc.Label:createWithTTF("Tint and Fade", "fonts/Marker Felt.ttf", 20.0))

Helper.subtitleLabel:setString("ProgressTo Bar Mid")
return layer
end

------------------------------------
--  SpriteProgressWithSpriteFrame
------------------------------------
--[[
给精灵的帧加上进度动作，其实跟前面给单独的精灵加进度动作一样的
这里顺便提一下精灵资源的加载方法：首先加载plist文件，plist其实是一个xml类型的文件，
它对应有一个大的png图片，图片上包含了每个精灵的小图片，plist文件里面保存的就是如何切这个大png图片
的信息，当然还有每个精灵的各种属性
后面要创建精灵的话，用cc.Sprite:createWithSpriteFrameName()传入小图片的名称，直接从缓存中读取图片
创建精灵

你也许会有疑问？大图片是怎么来的，是用相关工具将多张小图片合成的，
为什么要合成大图片呢？因为一张图片（俗称纹理）的加载过程，耗去的内存是图片本身大小的将近4倍！所以主要
耗内存的不是纹理大小，而是纹理的加载，因此，较少纹理的加载次数，是至关重要的。实际工作中，通常将会在一起
使用的多张小图合成一张大图，然后用plist来管理，一次性加载，达到节省内存的目的。
--]]

local function SpriteProgressWithSpriteFrame()
local layer = cc.Layer:create()
Helper.initWithLayer(layer)

local to = cc.ProgressTo:create(6, 100)
--将精灵帧文件加载到缓存中，（（什么是缓存？有是必要和技巧？后面慢慢讲
cc.SpriteFrameCache:getInstance():addSpriteFrames("zwoptex/grossini.plist")

local left = cc.ProgressTimer:create(cc.Sprite:createWithSpriteFrameName("grossini_dance_01.png"))
left:setType(cc.PROGRESS_TIMER_TYPE_BAR)
-- Setup for a bar starting from the bottom since the midpoint is 0 for the y
left:setMidpoint(cc.p(0.5, 0.5))
-- Setup for a vertical bar since the bar change rate is 0 for x meaning no horizontal change
left:setBarChangeRate(cc.p(1, 0))
left:setPosition(cc.p(100, s.height / 2))
left:runAction(cc.RepeatForever:create(cc.ProgressTo:create(6, 100)))
layer:addChild(left)

local middle = cc.ProgressTimer:create(cc.Sprite:createWithSpriteFrameName("grossini_dance_02.png"))
middle:setType(cc.PROGRESS_TIMER_TYPE_BAR)
-- Setup for a bar starting from the bottom since the midpoint is 0 for the y
middle:setMidpoint(cc.p(0.5, 0.5))
-- Setup for a vertical bar since the bar change rate is 0 for x meaning no horizontal change
middle:setBarChangeRate(cc.p(1, 1))
middle:setPosition(cc.p(s.width / 2, s.height / 2))
middle:runAction(cc.RepeatForever:create(cc.ProgressTo:create(6, 100)))
layer:addChild(middle)

local right = cc.ProgressTimer:create(cc.Sprite:createWithSpriteFrameName("grossini_dance_03.png"))
right:setType(cc.PROGRESS_TIMER_TYPE_BAR)
-- Setup for a bar starting from the bottom since the midpoint is 0 for the y
right:setMidpoint(cc.p(0.5, 0.5))
-- Setup for a vertical bar since the bar change rate is 0 for x meaning no horizontal change
right:setBarChangeRate(cc.p(0, 1))
right:setPosition(cc.p(s.width - 100, s.height / 2))
right:runAction(cc.RepeatForever:create(cc.ProgressTo:create(6, 100)))
layer:addChild(right)

Helper.subtitleLabel:setString("Progress With Sprite Frame")
return layer
end

--[[
总结：进度条可以理解为对Sprite的进一步封装，并且有自己特有的Action，属性和方法

以下是创建一个完整进度条的完整步骤：
1、cc.ProgressTimer:create(Sprite)   --对精灵进一步封装，创建一个进度条
2、cc.setType()                      --设置进度条类型，1、旋转型，cc.PROGRESS_TIMEER_TYPE_RADIAL；2、条状，cc.PROGRESS_TIMER_TYPE_BAR
3、cc.ProgressTo:create(time,Percent)--创建进度条特有的Action：在时间time内飙到Percent
4、setReverseDirection(bool)         --（可选）设置进度条的进度方向是否反向
5、runAction()                       --简单ProgressTo直接绑定给进度条，或者进一步封装成Sequence或Repeatforever等

另外：
1、setMidPoint(cc.p(x,x))        --设置起点，旋转型的则是设置中心，
2、setBarChangeRate(cc.p(x,x))   --对条状可用，设置进度方法
--]]

function ProgressActionsTest()
local scene = cc.Scene:create()

Helper.createFunctionTable = {
SpriteProgressToRadial,
SpriteProgressToHorizontal,
SpriteProgressToVertical,
SpriteProgressToRadialMidpointChanged,
SpriteProgressBarVarious,
SpriteProgressBarTintAndFade,
SpriteProgressWithSpriteFrame
}
scene:addChild(SpriteProgressToRadial())
scene:addChild(CreateBackMenuItem())

cc.Director:getInstance():replaceScene(scene)
end