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];

顯示效果：

 至此，一個環形血量條完成了。

 

完成之后

我將會陸續更新我對自定義血量條的修改