18977人阅读
&&原创,转载务必在明显处注明：转载自&原文链接:&& & & & &游戏开发中难免用到进度条，例如做一些游戏技能的CD时间等都会使用到；那么cocos2d当然也封装了进度条，但是不太理想，如果童鞋们用过就应该知道，那么今天介绍两个知识点，第一：介绍cocos2d中的进度条CCProgressTimer如何使用；第二点：修改cocos2d封装的CCProgressTimer源码，实现“理想”形式的进度条；& & & & OK，首先来学习下如何在cocos2d中使用CCProgressTimer进度条：& & & & 在cocos2d中使用进度条很简单，创建进度条并添加到当前layer的代码如下，童鞋们一看就懂： CCProgressTimer *ct=[CCProgressTimer progressWithFile:@&icon.png&];
ct.position=ccp( size.width /2 , size.height/2);
[self addChild:ct z:0 tag:90];& & & & &很简单的创建，那么如果急躁的童鞋们只是到这里就立刻run你的项目，那么肯定看不到进度条，不用担心，看不到就对了；& & & & &进度条它在cocos2d封装的时候，默认有一个最大进度值 100，最小 0，那么你创建的时候默认的当前进度是0，所以是看不到的；& & & & &下面来看两个进度条比较重要的两个属性：
ct.percentage = 0; //当前进度
ct.type=kCCProgressTimerTypeHorizontalBarLR;//进度条的显示样式& & & & & percentage 指的是当前进度条的进度值，那么想让一个进度条正常显示出来，那么需要percentage！=0才行，一般都会在一个不断刷新的函数中让其进度条不断++，进而实现其进度条功能；& & & & & 这里我就简单写下代码：& & & & & & & & &1.首先在init函数中，添加 &：[self scheduleUpdate];& & & & & & & & &2. 然后添加如下函数即可：（这个函数中就是让当前进度不断++，大等于100就还原当前进度值为0，让其循环） &-(void)update:(ccTime)himi{
CCProgressTimer*ct=(CCProgressTimer*)[self getChildByTag:90];
ct.percentage++;
if(ct.percentage&=100){
ct.percentage=0;
}& & & & & & & && & & & &&type属性也是很容易理解的，就是进度条的类型，在cocos2d中封装了以下6种显示方式：
kCCProgressTimerTypeRadialCCW,
扇形逆时针形式
kCCProgressTimerTypeRadialCW,
扇形顺时针形式
kCCProgressTimerTypeHorizontalBarLR,
从左往右增张的形式
kCCProgressTimerTypeHorizontalBarRL,
从右往左增张的形式
kCCProgressTimerTypeVerticalBarBT,
从下往上增张的形式
kCCProgressTimerTypeVerticalBarTB,
从上往下增张的形式
& &&& & & & & 为了让童鞋们更清楚今天要讲的第二点知识，所以这里我将这些形式截图出来，大家先看下：& & & & &&&kCCProgressTimerTypeRadialCCW 与 kCCProgressTimerTypeRadialCW的样式如下图：&& & & & & & & & & & & & & & &&& & & & & &kCCProgressTimerTypeHorizontalBarLR&与& kCCProgressTimerTypeHorizontalBarRL&的样式如下图：& & & & & & & & & & & &&& & & & & &kCCProgressTimerTypeVerticalBarBT 与&kCCProgressTimerTypeVerticalBarTB& &的样式如下图：& & & & & & & & & & & & & &&&&& OK，简单的介绍了进度条的使用和样式后，那么请各位童鞋用10秒时间仔细观察3类样式！！！& & & & 童鞋们可能已经看出了一些端倪，这里假设我们有一个技能需要做成有CD时间的，那么如果我们采用进度条，那么这个进度条需要一张图片，我们一般会使用阴影作为进度表示CD时间进而显示，如下图：（我将一张半透明的灰色图作为进度条，下面的cocos2d的icon当成技能！这里进度条的样式选择从下往上的形式）& & & & & & & & & & & & & &&& & & 大家仔细观察，进度条（灰色块）逆时针增加，等到了最大进度值100的时候正好黑色块会将技能（icon图）给遮挡住......悲剧啊，这哪是技能CD啊，反了吧！！！！一般技能CD时间过后应该正好将技能icon全部露出来，也就是说正确的应该是进度条在0进度的时候正好全部遮挡技能icon，当当前进度为最大100的时候正好这个遮挡的灰色块应该正好没有，这样才对啊，这正好反了。。。。。& 最简单的解决方式就是将进度条的当前进度值初始化设置100，然后不断减少就好了；& & & 当然啦，Himi 索性去cocos2d里对CCProgressTimer源码进行了修改：& & & 首先进入 cocos2d的CCProgressTimer.m&源码中，然后搜索以下代码:float alpha = percentage_ / 100.f;& & &然后再其下方添加如下代码：
if(alpha != 0.f && alpha !=1.f)
alpha = 1.f-
& & & 然后直接运行项目，截图如下：& & & & & & & &&&& & & & & 这才是对的啊，当进度条的当前进度是0的时候正好覆盖技能icon，当进度条的当前进度值最大100的时候正好将技能icon全部展漏了出来；这个才是正确的技能CD！& & & & & 备注：童鞋们在使用引擎做游戏的时候，肯定会遇到一些根本无法通过引擎提供的方法去解决，那么我们可以直接去修改源码来解决问题，而不是一味的顺从引擎，这才能体现出引擎开源的好处啦。嘿嘿；&& & & & &好啦，这一篇就介绍到这里，继续忙了.....。
版权声明：本文为博主原创文章，未经博主允许不得转载。
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：2147611次
积分：19450
积分：19450
排名：第190名
原创：149篇
评论：2855条
移动开发专家,专注于移动开发领域,多年 J2me、Android、iOS 平台游戏开发经验;
CSDN、ITeye、51CTO、eoe-Android、泰然、中国移动开发者社区、微度网等多家技术论坛担任专家与版主；
? 【iOS】(高级群/超级群)
Cocos2d-x @Himi:
? 【Lua】(高级群)
Cocos2d-x-Lua @Himi:
? 【Unity3D】(超级群)
Unity3D @Himi:
文章：62篇
阅读：1001606
文章：34篇
阅读：660012Cocos2d-x 3.2 之 进度条 progressTimer
好长时间没有更博了。。
有点懒啊。。
亲身经历提示广大猿们：换季了，防感冒！
言归正传，最近在做 三消的手游，
关卡设计是没指望了，只能做个限时的，所以，就研究了研究schedule,
这个以后再更新，
度娘搜索的时候，看到了进度条的progressTimer，
这个很好玩的样子，于是就做了下，感觉不错。
ProgressTimer是Node的子类。 该类根据百分比来渲染显示内部的Sprite对象。 变化方向包括径向，水平或者垂直方向。
就是这样的情况：
这个的实现就是通过progressTimer
与之前版本不同，
之前版本类型很多：
kCCProgressTimerTypeRadialCCW, 扇形逆时针形式
kCCProgressTimerTypeRadialCW, 扇形顺时针形式
kCCProgressTimerTypeHorizontalBarLR, 从左往右增张的形式
kCCProgressTimerTypeHorizontalBarRL, 从右往左增张的形式
kCCProgressTimerTypeVerticalBarBT, 从下往上增张的形式
kCCProgressTimerTypeVerticalBarTB, 从上往下增张的形式
而现在Type只有两种：
①条型的设置
就是第三个图：
// 添加图片
auto sprite = Sprite::create(h7.png);
// 新建progressTimer对象，将图片载入进去
ProgressTimer *ct= ProgressTimer::create(sprite);
ct-&setPosition(Point(visibleSize.width/2,visibleSize.height/2));
// 设置Tag，为后面更新准备
ct-&setTag(10);
ct-&setScale(0.2);
this -& addChild(ct);
// 设置初始的百分比，0~100 可以是0或者100
ct-&setPercentage(0);
// 选择类型，是条型还是时针型
ct-&setType(kCCProgressTimerTypeBar);
//ct-&setReverseProgress(true);
// 下面两个条形的进阶
ct-&setMidpoint(Point(0,0));
ct-&setBarChangeRate(Point(0,1));
scheduleUpdate();
然后，在.h 声明函数 void update( float t )
在.cpp定义函数
void HelloWorld::update( float t )
// 通过上面Tag设置，获取对象
CCProgressTimer *ct=(CCProgressTimer*)getChildByTag(10);
// 获取当前进度
int num = ct-&getPercentage();
// 设置进度速度（此处为每帧+1）
ct-&setPercentage( ++num );
// 设置了循环播放
if( num &= 100 )
ct -& setPercentage(0);
此处，我是通过帧数来控制的速度，
当然也可以通过 自己调用的update来设置速度。
条形的可以从上到下，从下向上，或者从中间向两边
这个的控制，就是通过上面代码中，进阶的部分：
ct-&setMidpoint(Point(0,0));
ct-&setBarChangeRate(Point(0,1));
setMidpoint 是定义从哪开始
这个和锚点的设置一样，0,0左下角，1,1是右上角
setBarChangeRate 是 定义 方向
1,0是自下而上
0,1是自左向右
②时针型的设置
// 添加图片
auto sprite = Sprite::create(h7.png);
// 新建progressTimer对象，将图片载入进去
ProgressTimer *ct= ProgressTimer::create(sprite);
ct-&setPosition(Point(visibleSize.width/2,visibleSize.height/2));
// 设置Tag，为后面更新准备
ct-&setTag(10);
ct-&setScale(0.2);
this -& addChild(ct);
// 设置初始的百分比，0~100 可以是0或者100
ct-&setPercentage(0);
// 选择类型，是条型还是时针型
ct-&setType(kCCProgressTimerTypeRadial);
ct-&setReverseProgress(false);
// 下面两个条形的进阶
// ct-&setMidpoint(Point(0,0));
// ct-&setBarChangeRate(Point(0,1));
scheduleUpdate();
update函数还是那样，
默认是顺时针，
setReverseProgress
&&false 顺时针
&&true 逆时针
这样第二个的图片就实现了。
③ 第一个图片那种如何实现呢？
其实，So easy
只需要弄一张暗一点的图片，在底下衬着：
auto sprite2 = Sprite::create(h7_02.png);
sprite2-&setScale(0.2);
sprite2-&setPosition(Point(visibleSize.width/2,visibleSize.height/2));
this -& addChild(sprite2);
进度条你学会了吗？
同为新手，如有错误，敬请指出，共同进步 O(&_&)O~1987人阅读
欢迎各位童鞋转载，转载请注明出处：
作者新浪微博：
作者腾讯微博：
--绕圆心转动的进度动画
local function SpriteProgressToRadial()
local leftProgress = CCProgressTimer:create(CCSprite:create(&circle.png&))
leftProgress:setType(kCCProgressTimerTypeRadial) --扇形顺时针形式
leftProgress:setPosition(ccp(size.width*0.3,size.height*0.5))
layer:addChild(leftProgress)
local progress1 = CCProgressTo:create(10,100)
leftProgress:runAction(CCRepeatForever:create(progress1))
local rightProgress = CCProgressTimer:create(CCSprite:create(&circle.png&))
rightProgress:setType(kCCProgressTimerTypeRadial)
rightProgress:setReverseProgress(true) --扇形逆时针形式
rightProgress:setPosition(ccp(size.width*0.7,size.height*0.5))
layer:addChild(rightProgress)
local progress2 = CCProgressTo:create(10,100)
rightProgress:runAction(CCRepeatForever:create(progress2))
local function SpriteProgressToHorizontal()
local to1 = CCProgressTo:create(2,100)
local to2 = CCProgressTo:create(2,100)
local left = CCProgressTimer:create(CCSprite:create(&man.png&))
left:setType(kCCProgressTimerTypeBar) --条形
用来设定进度条的显示类型
left:setMidpoint(ccp(0,0)) --x为0代表进度条从左边开始
setMidpoint:用来设定进度条横向前进的方向从左向右或是从右向左
left:setBarChangeRate(ccp(1,0)) --y为0代表进度条垂直方向无增长
setBarChangeRate:用来设置进度条增长按横向或是按纵向增长
left:setPosition(ccp(size.width*0.3,size.height*0.5))
layer:addChild(left)
left:runAction(CCRepeatForever:create(to1))
local right = CCProgressTimer:create(CCSprite:create(&blackgirl.png&))
right:setType(kCCProgressTimerTypeBar)
right:setMidpoint(ccp(1,0))
right:setBarChangeRate(ccp(1,0))
right:setPosition(ccp(size.width*0.7,size.height*0.5))
layer:addChild(right)
right:runAction(CCRepeatForever:create(to2))
--创建一个见血动画 两图片资源：一个为雪条 一个为雪条底 ,雪条底在雪条的上面，通过逐渐显示出雪条底以达到血减少的效果
local blood = CCSprite:create(&hello_hp_1.png&)
blood:setPosition(ccp(size.width*0.5,size.height*0.3))
layer:addChild(blood)
local bloodBack = CCProgressTimer:create(CCSprite:create(&hello_hp_0.png&))
bloodBack:setType(kCCProgressTimerTypeBar)
bloodBack:setMidpoint(ccp(1,0))
bloodBack:setBarChangeRate(ccp(1,0))
bloodBack:setPosition(ccp(size.width*0.5,size.height*0.3))
layer:addChild(bloodBack)
local to3 = CCProgressTo:create(2,100)
bloodBack:runAction(CCRepeatForever:create(to3))
local function SpriteProgressToVertical()
local to1 = CCProgressTo:create(2,100)
local to2 = CCProgressTo:create(2,100)
local left = CCProgressTimer:create(CCSprite:create(&man.png&))
left:setType(kCCProgressTimerTypeBar)
left:setMidpoint(ccp(0,0)) --x为0从左边开始 为1右边开始，y为0从下面开始 为1从上面开始
left:setBarChangeRate(ccp(0,1)) --x为1水平变化
y为1垂直变化
left:setPosition(ccp(size.width*0.3,size.height*0.5))
layer:addChild(left)
left:runAction(CCRepeatForever:create(to1))
local right = CCProgressTimer:create(CCSprite:create(&blackgirl.png&))
right:setType(kCCProgressTimerTypeBar)
right:setMidpoint(ccp(0,1)) --(0,0)左下角
(0,1)左上角
(1,0)右下角
(1,1)右上角
right:setBarChangeRate(ccp(0,1))
right:setPosition(ccp(size.width*0.7,size.height*0.5))
layer:addChild(right)
right:runAction(CCRepeatForever:create(to2))
local function SpriteProgressToRadialMidpointChanged()
local left = CCProgressTimer:create(CCSprite:create(&blocks.png&))
left:setType(kCCProgressTimerTypeRadial)
left:setMidpoint(ccp(0.25,0.75))
left:setPosition(ccp(size.width*0.3,size.height*0.5))
layer:addChild(left)
left:runAction(CCRepeatForever:create(CCProgressTo:create(2,100)))
local right = CCProgressTimer:create(CCSprite:create(&blocks.png&))
right:setType(kCCProgressTimerTypeRadial)
right:setMidpoint(ccp(0.75,0.25))
right:setPosition(ccp(size.width*0.7,size.height*0.5))
layer:addChild(right)
right:runAction(CCRepeatForever:create(CCProgressTo:create(2,100)))
local function SpriteProgressVarious()
local left = CCProgressTimer:create(CCSprite:create(&blackgirl.png&))
left:setType(kCCProgressTimerTypeBar)
left:setMidpoint(ccp(0.5,0.5))
left:setBarChangeRate(ccp(1,0))
left:setPosition(ccp(size.width*0.3,size.height*0.5))
layer:addChild(left)
left:runAction(CCRepeatForever:create(CCProgressTo:create(2,100)))
local middle = CCProgressTimer:create(CCSprite:create(&whitegirl.png&))
middle:setType(kCCProgressTimerTypeBar)
middle:setMidpoint(ccp(0.5,0.5))
middle:setBarChangeRate(ccp(1,1))
middle:setPosition(ccp(size.width*0.5,size.height*0.5))
layer:addChild(middle)
middle:runAction(CCRepeatForever:create(CCProgressTo:create(2,100)))
local right = CCProgressTimer:create(CCSprite:create(&man.png&))
right:setType(kCCProgressTimerTypeBar)
right:setMidpoint(ccp(0.5,0.5))
right:setBarChangeRate(ccp(0,1))
right:setPosition(ccp(size.width*0.7,size.height*0.5))
layer:addChild(right)
right:runAction(CCRepeatForever:create(CCProgressTo:create(2,100)))
版权声明：本文为博主原创文章，未经博主允许不得转载。
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：275944次
积分：4164
积分：4164
排名：第3593名
原创：137篇
转载：48篇
评论：69条
(4)(7)(4)(1)(1)(3)(1)(1)(6)(8)(6)(3)(1)(2)(4)(5)(8)(8)(22)(5)(2)(28)(28)(4)(23)(2)}