您的位置:首页 > 移动开发 > Cocos引擎

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

2012-12-09 17:59 627 查看
作者:Senlern
转载请注明,原文链接:/article/10317929.html

第一次写博客,最近在学习和同僚们的交流过程中整理了一些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的方法,大家就可以看到血条从右到左减少的效果了~~



好了,自此我需要的血条效果就出来了,大家自己试试吧,如果觉得有用,麻烦大家顶一下~
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐