Cocos2d 利用CCProgressTimer 实现自定义游戏血量条

这几天在做自己游戏项目中的血量条，分享下我自己的血量条插件

通过翻查网站，发现COCOS2D已经提供了一个接近效果的封装，CCProgressTimer

首先介绍下CCProgressTimer

它是一个基础进度条，能够支持若干种进度条样式，包括圆形进度条，条形进度条，根据一个百分比属性，实现显示/隐藏进度条的部分，达到图形化显示进度的作用。

优点：

- 继承自CCNode，能共随意的变换大小，旋转角度，并且能够使用CCAction

缺点：

- 无法使用在CCBatchNode，大量使用时会占用不少系统资源。

- 单独使用无法自定义譬如背景，前景等效果。

 

接下来开始动手自给自足，通过结合CCProgressTimer，封装自定义的血量条

我需要的效果：

1- 圈形血条，上端开口，血量在金属槽内流动，能够改变背景/前景

2- 能够控制隐藏/显示

3- 能够随意放大，缩小

 

准备素材

无血量的金属条-healthCircleBackground.png：

血量条-healthCircle.png：

叠加效果预览：

 

实现代码

创建自定义显示插件类ZODisplayPlug

.h实现：

#import "cocos2d.h"

@interface ZODisplayPlug : CCSprite
{
    CCSprite *s_background;
    CCProgressTimer *s_progressTimer;
    CCSprite *s_mask;
}

@property (nonatomic, retain) CCSprite *Background;
@property (nonatomic, retain) CCProgressTimer *ProgressTimer;
@property (nonatomic, retain) CCSprite *Mask;

-(id) initForBatchNodeWithProgressTimer:(NSString*)progressTimer background:(NSString*)background mask:(NSString*)mask;

+(id) displayPlugForBatchNodeWithProgressTimer:(NSString*)progressTimer background:(NSString*)background mask:(NSString*)mask;

@end

.m实现：

#import "ZODisplayPlug.h"
    
@implementation ZODisplayPlug

@synthesize Background = s_background;
@synthesize ProgressTimer = s_progressTimer;
@synthesize Mask = s_mask;

- (id)init
{
    self = [super init];
    if (self) {
        // Initialization code here.
        s_background = nil;
        s_progressTimer = nil;
        s_mask = nil;
    }
    
    return self;
}

- (void)dealloc {
    [s_background release];
    [s_progressTimer release];
    [s_mask release];
    [super dealloc];
}

初始化方法实现：

-(id) initForBatchNodeWithProgressTimer:(NSString*)progressTimer background:(NSString*)background mask:(NSString*)mask;
{
    self = [self init];
    if (self) {
        if (progressTimer) {
            self.ProgressTimer = [CCProgressTimer progressWithSprite:[CCSprite spriteWithSpriteFrameName:[NSString stringWithFormat:@"%@.png",progressTimer]]];//由于我的精灵都是使用CCBatchNodes创建的，也可以换成[CCSprite spriteWithFileName:[NSString stringWithFormat:@"%@.png",progressTimer]]
            self.contentSize = self.ProgressTimer.contentSize;//将进度条的外框设置为血量条的框
            self.ProgressTimer.position = ccp((self.contentSize.width) / 2, (self.contentSize.height) / 2);//将加入的精灵位置设置在血量条外框的中心
            [self addChild:self.ProgressTimer z:0];
        }
        if (background) {
            self.Background = [CCSprite spriteWithSpriteFrameName:[NSString stringWithFormat:@"%@.png",background]];
            self.Background.position = ccp((self.contentSize.width) / 2, (self.contentSize.height) / 2);
            [self addChild:self.Background z:-1];//背景Z坐标在最后
        }
        if (mask) {
            self.Mask = [CCSprite spriteWithSpriteFrameName:[NSString stringWithFormat:@"%@.png",mask]];
            self.Mask.position = ccp((self.contentSize.width) / 2, (self.contentSize.height) / 2);
            [self addChild:self.Mask z:1];//前景Z坐标在最前
        }
    }
    return self;
}

+(id) displayPlugForBatchNodeWithProgressTimer:(NSString*)progressTimer background:(NSString*)background mask:(NSString*)mask;
{
    return [[[self alloc]initForBatchNodeWithProgressTimer:progressTimer background:background mask:mask]autorelease];
}

 

使用血量条

创建一个背景为healthCircleBackground.png，以healthCircle.png为血量的血量条

//在其他类的方法中
[[ZODisplayPlug displayPlugForBatchNodeWithProgressTimer:@"healthCircle" background:@"healthCircleBackground" mask:nil]

 注意，虽然我们整个血量条封装在一个CCSprite中，但是依然有一个CCPregressTimer在Child序列中，而CCBatchNode的使用必须要求Child的所有Chil序列都必须是CCSprite，所以依然无法使用CCBatchNode。

 改变血量条显示的百分比

//在update或者其他方法中
[ZODisplayPlug.ProgressTimer setPercentage:50];

显示效果：

 至此，一个环形血量条完成了。

 

完成之后

我将会陆续更新我对自定义血量条的修改