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

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放出来

 

  1. //血条背景  
  2. CCSprite *backGroundSprite = [CCSprite spriteWithFile:@"backGround.png"];  
  3. CCProgressTimer *planeHPBKTimer = [CCProgressTimer progressWithSprite:backGroundSprite];  
  4. planeHPBKTimer.percentage = 100;  
  5. planeHPBKTimer.position = ccp(190,465);  
  6. [self addChild:planeHPBKTimer z:0];  
  7. //血条血量  
  8. CCSprite *planeHPSprite = [CCSprite spriteWithFile:@"planeHP.png"];  
  9. planeHPTimer = [CCProgressTimer progressWithSprite:planeHPSprite];  
  10. planeHPTimer.type = kCCProgressTimerTypeBar;  
  11. planeHPTimer.midpoint = ccp(0,0.5);  
  12. planeHPTimer.barChangeRate = ccp(1,0);  
  13. planeHPTimer.percentage = 100;  
  14. planeHPTimer.position = ccp(190,465);  
  15. [self addChild:planeHPTimer z:0];  
  16. [self schedule:@selector(secondUpdate) interval:1.0f];  
  17.   
  18.  - (void)secondUpdate  
  19. {  
  20.  float HP = planeHPTimer.percentage;  
  21.  HP -= 10;  
  22.  planeHPTimer.percentage = HP;  
  23. }  
        //血条背景

        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.50.5)的,我把他的中心点调到了左侧,因为我需要从右往左依次减少血量的效果。大家可以根据需要自行设置它的中心位置。

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

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

你可能感兴趣的:(progress)