【2.0版本cocos2d-iphone 开发之CCProgressTimer制作游戏中的血条】

作者：zhangxinlin

转载请注明，原文链接：http://blog.csdn.net/zhang429350061/article/details/8275225

 

第一次写博客，最近在学习和同僚们的交流过程中整理了一些cocos2d的知识，放在博客里和大家学习交流。希望大牛们多给指导意见，共同进步。

1.首先说一下cocos2d中1.0版本和2.0版本中关于CCProgressTimer的不同之处。在1.0版本里面有许多进度条的样式，

比如：

kCCProgressTimerTypeRadialCCW, 扇形逆时针形式

kCCProgressTimerTypeRadialCW, 扇形顺时针形式

kCCProgressTimerTypeHorizontalBarLR, 从左往右增张的形式

kCCProgressTimerTypeHorizontalBarRL, 从右往左增张的形式

kCCProgressTimerTypeVerticalBarBT, 从下往上增张的形式

kCCProgressTimerTypeVerticalBarTB, 从上往下增张的形式

但是在2.0版本里面没有了这么多的样式，取而代之的是：

typedef enum {

/// Radial Counter-Clockwise

kCCProgressTimerTypeRadial,

/// Bar

kCCProgressTimerTypeBar,

} CCProgressTimerType;

 

半径类型kCCProgressTimerTypeRadial和条形kCCProgressTimerTypeBar两种类型。

 

2.讲下怎么使用kCCProgressTimerTypeBar这种类型，另一种kCCProgressTimerTypeRadial使用情况也差不多。

在这里我把我做的一个demo放出来

 

//血条背景
CCSprite *backGroundSprite = [CCSprite spriteWithFile:@"backGround.png"];
CCProgressTimer *planeHPBKTimer = [CCProgressTimer progressWithSprite:backGroundSprite];
planeHPBKTimer.percentage = 100;
planeHPBKTimer.position = ccp(190,465);
[self addChild:planeHPBKTimer z:0];
//血条血量
CCSprite *planeHPSprite = [CCSprite spriteWithFile:@"planeHP.png"];
planeHPTimer = [CCProgressTimer progressWithSprite:planeHPSprite];
planeHPTimer.type = kCCProgressTimerTypeBar;
planeHPTimer.midpoint = ccp(0,0.5);
planeHPTimer.barChangeRate = ccp(1,0);
planeHPTimer.percentage = 100;
planeHPTimer.position = ccp(190,465);
[self addChild:planeHPTimer z:0];
[self schedule:@selector(secondUpdate) interval:1.0f];

 - (void)secondUpdate
{
 float HP = planeHPTimer.percentage;
 HP -= 10;
 planeHPTimer.percentage = HP;
}

 

在2.0中不再是直接[CCProgressTimerprogressWithFile:****];来进行初始化，而是改用[CCProgressTimerprogressWithSprite:backGroundSprite];

在你初始化完CCProgressTimer之后记得此时的percentage属性默认值是0，如果你想让它一开始显示出来效果，要把percentage属性复制为>=0我在这里直接赋值为100，

设定位置加载到当前层上。

在这里我为了看的较为明显，我用了两个CCProgressTimer，一个作为背景，一个作为血条。

前面讲到1.0中的诸多样式，再2.0里面没有了，但是我们可以通过别的途径来获得相应的效果。在血条CCProgressTimer中，大家可以看到midpoint属性我设置为ccp(0.0.5),当然它默认是在（0.5，0.5）的，我把他的中心点调到了左侧，因为我需要从右往左依次减少血量的效果。大家可以根据需要自行设置它的中心位置。

然后还有最重要的一个属性：barChangeRate。这个属性决定了血条怎么进行缩放，就是说以什么方式来表现血量减少的效果。它的默认值是ccp（1，1）这种效果是当我们给血条重新设定percentage的值时它是以上下，左右各减少相应的比例来呈现效果的。而我需要的只是从右到左减少，上下不变，所以我设定barChangeRate的值为ccp（1，0）。这样就能满足我的需求了，大家需要的也可以通过调整midpoint和barChangeRate来实现。

在后在一个更新方法中每一秒钟调用一次设定血条percentage的方法，大家就可以看到血条从右到左减少的效果了~~

                             

好了，自此我需要的血条效果就出来了，大家自己试试吧，如果觉得有用，麻烦大家顶一下~