CCParallaxNode CCProgressTimer CCRibbon CCMotionStreak

CCParallaxNode(视差节点)

从名字上看得出来，此类继承自CCNode。cocos2D官方是这样说的：

A node that simulates a parallax scroller

The children will be moved faster / slower than the parent according the the parallax ratio.

此类能容纳一些孩子们，这些孩子们一般情况而言都是CCSprite。这些孩子们会按照事先设定好的比例来进行不同速度的移动。最终造成一种视觉上的景深感。

看代码吧：

 1 -(id)init 2 { 3     if (self = [super init]) { 4          5         CCParallaxNode  *para = [CCParallaxNode node]; 6         CGSize sizeOfWin = [[CCDirector sharedDirector] winSize]; 7          8         //用4个精灵来显示4个层次 9         CCSprite *parallax1 = [CCSprite spriteWithFile:@"parallax1.png"];10         CCSprite *parallax2 = [CCSprite spriteWithFile:@"parallax2.png"];11         CCSprite *parallax3 = [CCSprite spriteWithFile:@"parallax3.png"];12         CCSprite *parallax4 = [CCSprite spriteWithFile:@"parallax4.png"];13         14         //设置孩子们的定位点15         parallax1.anchorPoint = CGPointMake(0, 1);16         parallax2.anchorPoint = CGPointMake(0, 0.5);17         parallax3.anchorPoint = CGPointMake(0, 0.5);18         parallax4.anchorPoint = CGPointMake(0, 0);19         CGPoint topOffset = CGPointMake(0, sizeOfWin.height);20         CGPoint midOffset = CGPointMake(0, sizeOfWin.height * 0.5);21         CGPoint zeroOffset = CGPointZero;22         23         //注意，这里并不是真正的坐标点，而是用来控制速度的。24         CGPoint piont1 = CGPointMake(0.5f, 0);25         CGPoint piont2 = CGPointMake(1, 0);26         CGPoint piont3 = CGPointMake(1.5, 0);27         CGPoint piont4 = CGPointMake(2, 0);28         29         //添加4个孩子，注意z轴、速度差别和基于定位点的Offset30         [para addChild:parallax1 z:1 parallaxRatio:piont1 positionOffset:topOffset];31         [para addChild:parallax2 z:2 parallaxRatio:piont2 positionOffset:midOffset];32         [para addChild:parallax3 z:3 parallaxRatio:piont3 positionOffset:midOffset];33         [para addChild:parallax4 z:4 parallaxRatio:piont4 positionOffset:zeroOffset];34         35         [self addChild:para];36         37         //动起来38         CCMoveTo *moveTo = [CCMoveTo actionWithDuration:5 position:CGPointMake(-330, 0)];39         CCMoveTo *moveBack = [CCMoveTo actionWithDuration:5 position:CGPointMake(0, 0)];40         CCSequence *se = [CCSequence actions:moveTo,moveBack, nil];41         CCRepeatForever *repeat = [CCRepeatForever actionWithAction:se];42         [para runAction:repeat];43     }44     return  self;45 }

关键地方都写上注释了。不难，但是很有用的一个类。

注意，因为移动速度不一、各个层的的定位点和Offset不一样，在moveTo的时候边界的计算要综合考虑，避免移出边界。

 

 

 

CCProgressTimer(进度条)

　　时间进度类可用于很多地方,比如加载进度条,或者用于展示处于失效状态的按钮恢复到激活状态所需要的时间。比如WOW中技能的CD冷却效果，想象一下如何实现这个效果，一个显示技能图标的精灵，一个半透明的起蒙版作用的遮罩精灵。

恩，我尝试着模仿了一下游戏中的技能冷却效果，还不错。这里特别提一下像素的【刀剑2】一个很值得一玩的游戏。

先看cocos2D官方的一句话定义：

CCProgresstimer is a subclass of CCNode. It renders the inner sprite according to the percentage. The progress can be Radial, Horizontal or vertical.

其实有了这句话，不用多解释了，足够清晰！想象一下你接触过的游戏，很多效果用CCprogressTimer都可以实现。

我的例子中因为考虑到代码的可扩展性，定义了一个继承自CCNode的类。此类中其中一个CCSprite成员显示技能，一个CCProgressTimer用来起蒙版作用，另外也将技能CD冷却时间作为属性加入了类中。下面是SkillSprite的代码：

  1 //  2 //  SkillSprite.m  3 //  CH07  4 //  5 //  Created by phc on 11-12-17.  6 //  Copyright (c) 2011年 hxsoft. All rights reserved.  7 //  8   9 #import "SkillSprite.h" 10  11 @implementation SkillSprite 12 -(void)dealloc 13 { 14     //这个Scheduler必须手动释放 15     [[CCScheduler sharedScheduler] unscheduleAllSelectorsForTarget:self]; 16     [super dealloc]; 17 } 18 //向外部提供的静态初始化方法 19 +(id)skillWithParent:(CCNode *)parentNode spriteFile:(NSString *)fileName 20 { 21     return [[[self alloc] initWithParent:parentNode spriteFile:fileName] autorelease]; 22 } 23  24 -(int)cdTime 25 { 26     return cdTime_; 27 } 28 -(void)setCdTime:(int)cdTime 29 { 30     cdTime_ = cdTime; 31 } 32 -(id)initWithParent:(CCNode *)parentNode spriteFile:(NSString *)fileName 33 { 34     if (self = [super init]) { 35         CCSpriteFrameCache *frameCache = [CCSpriteFrameCache sharedSpriteFrameCache]; 36         [frameCache addSpriteFramesWithFile:@"skill.plist"]; 37          38         //根据传递进来的fileName参数显示相应的图片给skillSprite 39         skillSprite = [CCSprite spriteWithSpriteFrame:[frameCache spriteFrameByName:fileName]]; 40          41         //构造蒙版层，mask.png本身带有透明效果。 42         maskSprite = [CCProgressTimer progressWithFile:@"mask.png"]; 43         44         //技能图标在下，蒙版在上 45         [self addChild:skillSprite z:0]; 46         [self addChild:maskSprite z:1]; 47          48          49          50     } 51     return  self; 52 } 53  54 //在onEnter中注册目标触摸事件委托，注意不要漏掉[super onEnter] 55 -(void)onEnter 56 { 57     [[CCTouchDispatcher sharedDispatcher] addTargetedDelegate:self priority:0 swallowsTouches:YES]; 58     [super onEnter]; 59 } 60 //在onExit中注销目标触摸事件委托 61 -(void)onExit 62 { 63     [[CCTouchDispatcher sharedDispatcher] removeDelegate:self]; 64     [super onExit]; 65 } 66  67 //为了检测是否命中，需要获取自身的rect，这里需要好好琢磨。 68 -(CGRect)getRect 69 { 70     CGRect tmp = [maskSprite boundingBox]; 71     return CGRectMake(-tmp.size.width * 0.5, -tmp.size.height * 0.5, tmp.size.width, tmp.size.height); 72 } 73  74 -(BOOL)ccTouchBegan:(UITouch *)touch withEvent:(UIEvent *)event 75 { 76     //获得触摸点坐标 77     CGPoint touchPos = [self convertTouchToNodeSpaceAR:touch]; 78  79     if (CGRectContainsPoint([self getRect], touchPos)) { 80         if (CDLock) { 81             return YES; 82         } 83         //如果命中了技能 84         maskSprite.percentage = 100; 85         //让蒙版转起来 86         [[CCScheduler sharedScheduler] scheduleUpdateForTarget:self priority:0 paused:NO]; 87         timePicker = 0; 88         CDLock = YES; 89         return  YES; 90     } 91     return NO; 92      93 } 94  95 -(void)update:(ccTime)dt 96 { 97     //把时间片累加起来，来对应显示进度。 98     timePicker += dt*10; 99     float percent =100 - timePicker / cdTime_*100;100     101     102     if (percent <= 0) {103         percent = 0;104         maskSprite.percentage = 0;105         [[CCScheduler sharedScheduler] unscheduleAllSelectorsForTarget:self];106         CDLock = NO;107     }else108     {109         maskSprite.percentage = percent;110     }111 }112 @end

1. 注册了目标触摸，实现了触摸的began方法。

2. 在初始化方法中将fileName作为参数传了进来，当然，也可以把CDTime作为参数加进去。

3. 根据CDTime，在update方法中percentage的增加速度。

 

CCRibbon(链条)和CCMotionStreak(拖尾链条)

　　官方的，总是最权威的：

　　A CCRibbon is a dynamically generated list of polygons drawn as a single or series of triangle strips. The primary use of CCRibbon is as the drawing class of Motion Streak, but it is quite useful on it's own. When manually drawing a ribbon, you can call addPointAt and pass in the parameters for the next location in the ribbon. The system will automatically generate new polygons, texture them accourding to your texture width, etc, etc.

　　从其中可以看出来CCRibbon和CCMotionStreak似乎密切相关(其实在CCMotionStreak中CCRibbon是作为一个属性出现的)。addPoiontAt是最重要的一个方法，它的作用是在该坐标点上添加一个新的链条。

 1 //创建链条对象 2 -(void)createRibbon 3 { 4     CCRibbon *rib = [CCRibbon ribbonWithWidth:32 image:@"sl.png" length:32 color:ccc4(255, 255, 255, 255) fade:125]; 5     [self addChild:rib z:3 tag:TAGRIBBON]; 6 } 7  8 //移除链条对象，本例中在touchEnd的时候使用 9 -(void)removeRibbon10 {11     [self removeChildByTag:TAGRIBBON cleanup:YES];12 }13 14 15 //创建拖尾链条，我写错了单词了，:-)16 -(void)createMotionSpeak17 {18     CCMotionStreak *mot = [CCMotionStreak streakWithFade:0.4f minSeg:100 image:@"sl.png" width:16 length:16 color:ccc4(255, 0, 255, 255)];19     [self addChild:mot z:3 tag:TAGMOTIONSTREAK];20 }21 //移除拖尾链条22 -(void)removeMotionStreak23 {24     [self removeChildByTag:TAGMOTIONSTREAK cleanup:YES];25 }26 27 //本例同时展示了链条和拖尾链条，没有办法，奇数次使用CCRibbon，偶数次使用CCMotionStreak28 -(void)ccTouchesBegan:(NSSet *)touches withEvent:(UIEvent *)event29 {30     UITouch *touch = [touches anyObject];31     CGPoint touchPosition = [[CCDirector sharedDirector] convertToGL:[touch locationInView:touch.view]];32     if (isMotionStreak) {33         [self createMotionSpeak];34         CCMotionStreak *mot = [self getChildByTag:TAGMOTIONSTREAK];35         [mot.ribbon addPointAt:touchPosition width:16];36     } else {37         [self createRibbon];38         CCRibbon *rib = [self getChildByTag:TAGRIBBON];39         [rib addPointAt:touchPosition width:8];40     }41     42 }43 44 //在触摸点移动的时候，addPointAt。45 -(void)ccTouchesMoved:(NSSet *)touches withEvent:(UIEvent *)event46 {47     UITouch *touch = [touches anyObject];48     CGPoint touchPosition = [[CCDirector sharedDirector] convertToGL:[touch locationInView:touch.view]];49     if (isMotionStreak) {50         CCMotionStreak *mot = [self getChildByTag:TAGMOTIONSTREAK];51         [mot.ribbon addPointAt:touchPosition width:16];52     } else {53         CCRibbon *rib = [self getChildByTag:TAGRIBBON];54         [rib addPointAt:touchPosition width:8];55     }56     57 58     59 }60 61 //触摸结束的时候，清除链条62 -(void)ccTouchesEnded:(NSSet *)touches withEvent:(UIEvent *)event63 {64     if (isMotionStreak) {65         [self removeMotionStreak];66     } else {67          [self removeRibbon];68     }69    70     isMotionStreak = !isMotionStreak;71 }