【iOS-Cocos2d游戏开发之二十一 】自定义精灵类并为你的精灵设置攻击帧(指定开始帧)以及扩展Cocos2d源码的CCAnimation简化动画创建！

原文链接:  http://www.himigame.com/iphone-cocos2d/525.html

       上周貌似没有写新的博文，那么今天Himi写个精品的博文奉献给童鞋们；

（不少童鞋说Himi的教程最近都没有源码放出=。 =，这里我解释下，一般我没有放出源码的博文那肯定已经将代码贴出来了，这点是肯定的，否则Himi一定给出源码的）

       本篇的知识点如下：

       1. 两种方式实现自定义精灵；

       2.两种方式让精灵利用多帧播放动画

       3. 为你的精灵设置带有攻击帧的动画，当执行攻击动作的中间会执行扣血等逻辑，然后接着播放动作喔～

       首先第一种如何自定义精灵：

       两种自定义一个精灵当然无疑我们仍然继承CCSprite，首先看第一种自定义方式，Himi新建一个类，名字是MySprite，代码如下，大家一看就很清晰了；

          MySprite.h

[cpp]  view plain copy

1. //  
2. //  MySprite.h  
3. //  HimiAnimationsTestPro  
4. //  
5. //  Created by 华明 李 on 11-11-20.  
6. //  Copyright (c) 2011年 __MyCompanyName__. All rights reserved.  
7. //  
8.   
9. #import "CCSprite.h"  
10.   
11. @interface MySprite : CCSprite{  
12.       
13. }  
14. +(id) mySpriteInitWithImage:(NSString*)fileName;  
15. -(id) initWithMySpriteImage:(NSString*)fileName;  
16. @end  

         MySprite.m

[cpp]  view plain copy

1. //  
2. //  MySprite.m  
3. //  HimiAnimationsTestPro  
4. //  
5. //  Created by 华明 李 on 11-11-20.  
6. //  Copyright (c) 2011年 __MyCompanyName__. All rights reserved.  
7. //  
8.   
9. #import "MySprite.h"  
10.   
11. @implementation MySprite  
12. +(id) mySpriteInitWithImage:(NSString*)fileName  
13. {  
14.     return [[[self alloc] initWithMySpriteImage:fileName] autorelease];//这里仿照cocos2d原理，自动清理精灵  
15. }  
16.   
17. -(id) initWithMySpriteImage:(NSString*)fileName  
18. {  
19.     if ((self = [super initWithFile:fileName]))  
20.     {  
21.         //初始化的东东都写在这里喔～  
22.     }  
23.     return self;  
24. }    
25.   
26. -(void) dealloc  
27. {  
28.    //内存清理  
29.     [super dealloc];  
30. }  
31. @end  

大家以后自定义精灵的时候可以将我这个当模版即可！如果你不想自定义的精灵传参，那就直接自己修改下构造函数即可，初始化的时候写死名字即可（比如一般游戏主角不需要传入图片名字作为参数，直接在我们主角类的构造中将图片资源名写死即可） 

    然后我们用第二种方式，所谓第二种方式其实就是修改我们的初始化函数，让其精灵初始化的方式改成帧缓存创建：（适合利用TP打包工具出的图进行来创建精灵）

代码如下：（这里Himi为了让童鞋们看得清楚，Himi新建一个类，名字是MySpriteByFrame）

         MySpriteByFrame.h

[cpp]  view plain copy

1. //  
2. //  MySprite.h  
3. //  HimiAnimationsTestPro  
4. //  
5. //  Created by 华明 李 on 11-11-20.  
6. //  Copyright (c) 2011年 __MyCompanyName__. All rights reserved.  
7. //  
8.   
9. #import "CCSprite.h"  
10.   
11. @interface MySpriteByFrame : CCSprite{  
12.       
13. }  
14. +(id) mySpriteInitWithFrameName:(NSString*)frameName;  
15. -(id) initWithMySpriteFrameName:(NSString*)frameName;  
16. @end  

            MySpriteByFrame.m

[cpp]  view plain copy

1. //  
2. //  MySprite.m  
3. //  HimiAnimationsTestPro  
4. //  
5. //  Created by 华明 李 on 11-11-20.  
6. //  Copyright (c) 2011年 __MyCompanyName__. All rights reserved.  
7. //  
8.   
9. #import "MySpriteByFrame.h"  
10.   
11. @implementation MySpriteByFrame  
12. +(id) mySpriteInitWithFrameName:(NSString*)fileName  
13. {  
14.     return [[[self alloc] initWithMySpriteFrameName:fileName] autorelease];//这里仿照cocos2d原理，自动清理精灵  
15. }  
16.   
17. -(id) initWithMySpriteFrameName:(NSString*)fileName  
18. {  
19.     if ((self = [super initWithSpriteFrameName:fileName]))  
20.     {  
21.         //初始化的东东都写在这里喔～  
22.     }  
23.     return self;  
24. }    
25.   
26. -(void) dealloc  
27. {  
28.     //内存清理  
29.     [super dealloc];  
30. }  
31. @end  

     大家注意两种自定义精灵.m类中的 if((self = XXX)这里是重要的区别，一个是直接索引资源名称，一个是通过名称找到帧缓存中的帧；

OK,两种创建的方式的自定义精灵都完成了，下面我们来尝试创建吧：

[cpp]  view plain copy

1. //---------创建一个我们自定义的MySprite精灵吧（利用文件名直接创建）  
2. //1.import 自定义类.h (#import "MySprite.h")  
3. MySprite*mySprite=[MySprite mySpriteInitWithImage:@"Icon.png"];  
4. mySprite.position=ccp(70,size.height*0.5);  
5. [self addChild:mySprite];  
6.   
7.   
8. //---------创建一个我们自定义的MySpriteByFrame精灵吧（利用帧缓存中的文件名创建）  
9. //@@@@注意因为是从帧缓存里找到对应名字的帧，那么肯定需要将用到的帧放在缓存里。  
10. [[CCSpriteFrameCache sharedSpriteFrameCache]addSpriteFramesWithFile:@"mySpriteFrames-hd.plist"];  
11. MySpriteByFrame *mySpriteByF =[MySpriteByFrame mySpriteInitWithFrameName:@"himi.png"];  
12. mySpriteByF.position=ccp(300,size.height*0.5);  
13. [self addChild:mySpriteByF];  

      注意：利用帧来创建的时候必须要将使用的帧首先加载到帧缓存中，这里Himi利用TP打包工具将一张名字为himi.png的图打包到mySpriteFrames-hd.plist中了，也就是下面这句代码将himi.png图加载到帧缓存中了，否则报错找不到喔；

[html]  view plain copy

1. [[CCSpriteFrameCache sharedSpriteFrameCache]addSpriteFramesWithFile:@"mySpriteFrames-hd.plist"];  

加载的图片资源图如下：

   

    注意这里的-hd 文件和非-hd的文件的区别，不太懂的童鞋请移步到这篇博文：
         【iOS-Cocos2d游戏开发之九】讲解CCSpriteBatchNode与TP工具的".pvr.ccz",".plist"共用的终极精灵优化及注意事项！

运行截图如下：

         

   下面Himi来介绍第二个知识点：两种方式让精灵利用多帧播放动画

      Himi这里就不细说了，直接提供给大家Himi封装好的两个方法：（Himi使用的cocos2d-iphone版本是1.0.0）

    先唠叨一句，刚才上面说过了，创建精灵一种是利用直接索引文件名字来创建，另外一种就是直接利用帧缓存来创建，那么让一个精灵实现动画的播放当然也一样对应分为两种方式；直接上代码:

                   CCAnimationHelper.h

[cpp]  view plain copy

1. //  
2. //  CCAnimationHelper.h  
3. //  SpriteProject  
4. //  
5. //  Created by Himi on 11-8-6.  
6. //  Copyright 2011 __MyCompanyName__. All rights reserved.  
7. //  
8.    
9. #import "cocos2d.h"  
10.   
11. @interface CCAnimation (Helper)  
12. //直接索引图片名称  
13. +(CCAnimation*) animationWithFile:(NSString*)name frameCount:(int)frameCount delay:(float)delay;  
14. //利用帧缓存中的帧名称  
15. +(CCAnimation*) animationWithFrame:(NSString*)frame frameCount:(int)frameCount delay:(float)delay;  
16. @end  

                     CCAnimationHelper.m

[html]  view plain copy

1. //  CCAnimationHelper.m  
2. //  SpriteProject  
3. //  
4. //  Created by Himi   
5.   
6. #import "CCAnimationHelper.h"  
7.   
8. @implementation CCAnimation (Helper)  
9. //直接索引图片名称  
10. +(CCAnimation*) animationWithFile:(NSString*)name frameCount:(int)frameCount delay:(float)delay  
11. {  
12.     NSMutableArray* frames = [NSMutableArray arrayWithCapacity:frameCount];  
13.     NSString* file;  
14.     for (int i = 0; i < frameCount; i++)  
15.     {   
16.         file =nil;  
17.         file = [NSString stringWithFormat:@"%@%i.png", name, i];  
18.         CCTexture2D* texture = [[CCTextureCache sharedTextureCache] addImage:file];  
19.         CGSize texSize = texture.contentSize;  
20.         CGRect texRect = CGRectMake(0, 0, texSize.width, texSize.height);  
21.         CCSpriteFrame* frame = [CCSpriteFrame frameWithTexture:texture rect:texRect];  
22.           
23.         [frames addObject:frame];  
24.     }   
25.     return  [CCAnimation animationWithFrames:frames delay:delay];  
26. }  
27. //利用帧缓存中的帧名称  
28. +(CCAnimation*) animationWithFrame:(NSString*)frame frameCount:(int)frameCount delay:(float)delay  
29. {  
30.     NSMutableArray* frames = [NSMutableArray arrayWithCapacity:frameCount];  
31.     NSString* file;  
32.       
33.     for (int i = 1; i <= frameCount; i++)  
34.     {  
35.         file =nil;  
36.         file = [NSString stringWithFormat:@"%@%i.png", frame, i];  
37.         CCSpriteFrameCache* frameCache = [CCSpriteFrameCache sharedSpriteFrameCache];  
38.         CCSpriteFrame* frame = [frameCache spriteFrameByName:file];  
39.         [frames addObject:frame];  
40.     }  
41.     return  [CCAnimation animationWithFrames:frames delay:delay];  
42. }  
43. @end  

[html]  view plain copy

1. +(CCAnimation*) animationWithFile:(NSString*)name frameCount:(int)frameCount delay:(float)delay{};  
2. //参数讲解：name：资源文件名  ；frameCount 总帧数   ；   delay ：每一帧的刷新时间  
3. +(CCAnimation*) animationWithFrame:(NSString*)frame frameCount:(int)frameCount delay:(float)delay{};  
4. //参数讲解：frame：帧文件名  ；frameCount 总帧数   ；   delay ：每一帧的刷新时间  

注意：1、 类有(help)的表示对原有的类进行扩展；2、动作帧都要按照himi0.png,himi1.png,himi2.png,这样子命名，当然拉你不想这样可以修改这两个方法即可；

            3. 注意Himi这里的两个方法，一个是从0开始喔，另外一个是从1开始的，如果你用帧缓存进行创建动作就要从himi1.png,开始命名，嘿嘿～

下面是使用方法：

[cpp]  view plain copy

1. //--@@@@@@@--第二个知识点--@@@@@@@  
2.   
3.   
4. //利用文件名创建动作   
5. //--首先导入#import "CCAnimationHelper.h"  
6. MySprite*mySprite=[MySprite mySpriteInitWithImage:@"himi0.png"];  
7. mySprite.position=ccp(140,mySprite.contentSize.height*0.5);  
8. [self addChild:mySprite];  
9.   
10. CCAnimation*anim=[CCAnimation animationWithFile:@"himi" frameCount:12 delay:0.1];   
11. CCAnimate* animate = [CCAnimate actionWithAnimation:anim];  
12. CCSequence *seq = [CCSequence actions:animate,nil];   
13. CCRepeatForever* repeat = [CCRepeatForever actionWithAction:seq];  
14. [mySprite runAction:repeat];   
15.   
16.   
17.    
18. //利用帧缓存中的文件名创建动作   
19. //--首先导入#import "CCAnimationHelper.h"  
20. [[CCSpriteFrameCache sharedSpriteFrameCache]addSpriteFramesWithFile:@"animationsFrames.plist"];  
21. MySpriteByFrame *mySpriteByF =[MySpriteByFrame mySpriteInitWithFrameName:@"himi1.png"];  
22. mySpriteByF.position=ccp(350,size.height*0.5);  
23. [self addChild:mySpriteByF];  
24.   
25. anim=[CCAnimation animationWithFrame:@"himi" frameCount:12 delay:0.1];   
26. animate = [CCAnimate actionWithAnimation:anim];  
27. seq = [CCSequence actions:animate,nil];   
28. repeat = [CCRepeatForever actionWithAction:seq];  
29. [mySpriteByF runAction:repeat];   

    这里要提醒童鞋们的有两点：

      1.利用帧缓存创建动画的时候要注意要提前将帧加载到缓存里喔～

      2.Himi这两个方法没有写一样，所以动作帧的命名一个从0开始，另外一个从1开始！童鞋们可以自行改过来哈

运行截图如下：

          

【扯皮一下，如果你在我的Android或者iOS群中，你感觉这张哆啦A梦图熟悉不～嘿嘿，Himi的7个群都是这个GIF做为群头像，娃哈哈，我自己做的 娃哈哈；】

    第三点知识点：为你的精灵设置攻击帧；

    首先跟一些童鞋简单说下何谓攻击帧，假如主角攻击一个怪物的时候，肯定播放攻击动作，但是！你是在攻击动作开始的时候就扣怪物血还是攻击动作结束后扣怪物血呢？都不是！！！因为很不真实！所以我们应该当攻击动作播放到设定的某一帧的时候进行扣怪物血或者其他逻辑，然后继续播放剩下的攻击动作，这样才更加的真实！

   那么OK，这里Himi仍然封装成一个方法让你直接使用即可；首先看下代码：

[html]  view plain copy

1. <strong>//带有攻击帧的动画  
2. </strong>+(CCAnimation*) animationWithFrameFromStartFrameIndex:(NSString*)frame startFrameCountIndex:(int)startFrameIndex frameCount:(int)frameCount delay:(float)delay  
3. {  
4.     NSMutableArray* frames = [NSMutableArray arrayWithCapacity:frameCount];  
5.     NSString* file;  
6.     file =nil;  
7.     for (int i = startFrameIndex; i < frameCount+startFrameIndex; i++)  
8.     {  
9.           
10.         file = [NSString stringWithFormat:@"%@%i.png", frame, i];  
11.         CCSpriteFrameCache* frameCache = [CCSpriteFrameCache sharedSpriteFrameCache];  
12.         CCSpriteFrame* frame = [frameCache spriteFrameByName:file];  
13.         [frames addObject:frame];  
14.     }  
15.     return  [CCAnimation animationWithFrames:frames delay:delay];  
16. }  

[html]  view plain copy

1. +(CCAnimation*) animationWithFrameFromStartFrameIndex:(NSString*)frame startFrameCountIndex:(int)startFrameIndex frameCount:(int)frameCount delay:(float)delay  {}  
2. //参数介绍：frame ：帧名字；     startFrameIndex：指定播放起始帧 ；   frameCount：帧总数   ； delay：每帧的刷新时间  

使用方法如下：

[html]  view plain copy

1. <strong> </strong>       //--@@@@@@@--第三个知识点--@@@@@@@  
2.           
3.         [[CCSpriteFrameCache sharedSpriteFrameCache]addSpriteFramesWithFile:@"animationsFrames.plist"];  
4.         MySpriteByFrame *mySpriteAni =[MySpriteByFrame mySpriteInitWithFrameName:@"himi1.png"];  
5.         mySpriteAni.position=ccp(260,size.height*0.5);  
6.         [self addChild:mySpriteAni];  
7.         //首先执行前6帧动画  
8.         CCAnimation*anim=[CCAnimation animationWithFrameFromStartFrameIndex:@"himi" startFrameCountIndex:1 frameCount:6 delay:0.1];  
9.         CCAnimate* animate = [CCAnimate actionWithAnimation:anim];   
10.         //攻击帧执行的函数  
11.         CCCallFunc *downEnemyHp =[CCCallFunc actionWithTarget:self selector:@selector(downEnemyHp)];  
12.         //后6帧动画  
13.         anim=[CCAnimation animationWithFrameFromStartFrameIndex:@"himi" startFrameCountIndex:7 frameCount:6 delay:0.1 ];  
14.         CCAnimate* animateForAttackIndex = [CCAnimate actionWithAnimation:anim];  
15.         CCSequence *seq = [CCSequence actions:animate,downEnemyHp,animateForAttackIndex,nil];  
16.         [mySpriteAni runAction:seq];   
17. ---------回调函数  
18. -(void)downEnemyHp{  
19.     CCLabelTTF *label = (CCLabelTTF*)[self getChildByTag:99];  
20.     [label setString:@"攻击帧"];  
21. }  

     前六帧-》回调downEnemyHp函数-》继续播放剩下的播放帧数

运行截图如下：