11.【cocos2d翻译系列】Actions, Transformations and Effects--Animation

使用精灵和精灵批处理接节点

使用Flash cs4制作动画，并导出为图片序列

当Flash支持2D动画时就表明了它是重量级的，尤其是对于角色类动画。

每一个动画创建自己的.fla文件，并且确保动画在主时间线上（timeline）。

如果你的动画在你按下回车键后在主timeline上运行，那麽就说明它可以导出为图片序列了。

找到File->Export->Export Movie。修改格式为PNG序列，并且点击保存这时它就创建了你的图片序列。

使用Photoshop制作动画，并导出为图片序列

Photoshop是十分适合创建动画的，假如你使用的是最新的版本。旧的版本可能会调用一个伙伴程序来获得的动画。

动画工具条可以在Window->Animate处找到。这样你就可以创建你的动画并且导出它们为精灵表单。

当你对你的动画满意时，找到File->Export->Render to Videc。

在文件选项区域，选上“image Sequence”，并且使用PNG格式。

然后再渲染选项中，修改你的alpha通道Straight - Unmatted。

选择你的保存位置，然后点击render就会从把你的动画创建为图片序列。

创建精灵表单

使用工具来创建你的精灵表单和.plist文件

Zwoptex就是一个用来将图片制作为精灵表单的应用。

TexturePacker是另一个可以完成此工作的应用，Mac OS X和windows下可用，基本功能免费。

这些工具都可以自动的安排图片，所以他们会充分利用纹理空间。附加的特性允许你去除空白（trim）和旋转精灵。

现在可以导出纹理和坐标（plist）了，并且添加到你的工程中。

另一个创建表单的方法就是使用mkatlas.pl，它可以在Cocos2d的tool文件夹中找到。

使用精灵表单

CCSpriteBatchNode

你需要创建一个CCSpriteBatchNode 对象，它用于存储所有精灵frame的真实图片的边界坐标。你可以将此对象添加到scene中，虽然它不会绘制任何的东西，但它是渲染管道（rendering pipeline）的一部分，应该被添加到scene中。

例如：

// Create a batch node -- just a big image which is prepared to 
// be carved up into smaller images as needed
CCSpriteBatchNode * batch  =  [ CCSpriteBatchNode batchNodeWithFile: @ "grossini.png" capacity: 50] ;
// Add the batch node to parent (it won't draw anything itself, but  needs to be there so that it's in the rendering pipeline)
[ self addChild : batch] ;

CCSpriteFrameCache

下一步你需要使用CCSpriteFrameCache单例来保存frame的名称对应frame的边界（就是精灵在表单中的矩形区域）。

例如：

// Load sprite frames, which are just a bunch of named rectangle 
// definitions that go along with the image in a sprite sheet
[ [ CCSpriteFrameCache sharedSpriteFrameCache ]  addSpriteFramesWithFile : @ "grossini.plist" ] ;

怎样显示一帧动画

当你精灵表单和frames都加载完毕，并且精灵表单也添加到了scene中了，你就可以很方便的使用函数spriteWithSpriteFrameName 通过frames创建精灵，并且作为一个孩子添加到精灵表单中。

// Finally, create a sprite, using the name of a frame in our frame cache.
sprite1 =  [ CCSprite spriteWithSpriteFrameName: @ "grossini_dance_01.png" ] ; 
// Add the sprite as a child of the sheet, so that it knows where to get its image data.
[ sheet addChild: sprite1] ;

随后如果你想切换显示的精灵图片，如下：

CCSpriteFrame  * frame  =  [ [ CCSpriteFrameCache sharedSpriteFrameCache ]  spriteFrameByName: @ "grossini_dance_02.png" ] ; 
[ sprite1 setDisplayFrame : frame] ;

注意：frame的名字是任意的，它保存在XML文件中，它们不是文件名。通常是原图片的名字作为frame的名字，但这不是必然的。

Simple Example:

CGSize s =  [[CCDirector sharedDirector] winSize];
// IMPORTANT:
// The sprite frames will be cached AND RETAINED, and they won't be released unless you call
//     [[CCSpriteFrameCache sharedSpriteFrameCache]  removeUnusedSpriteFrames];
//NOTE:
//The name of your .png and .plist must be the same name
[[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"animations/grossini.plist"];


//
// Animation using Sprite Sheet
//
CCSprite * sprite =  [CCSprite spriteWithSpriteFrameName: @"grossini_dance_01.png"];


//"grossini_dance_01.png" comes from your .plist file
sprite.position  =  ccp(s.width / 2 - 80, s.height / 2); 
CCSpriteBatchNode  *batchNode = [CCSpriteBatchNode batchNodeWithFile: @"animations/grossini.png"];
[batchNode addChild:sprite];
[self addChild:batchNode];
 
NSMutableArray * animFrames  =  [NSMutableArray array];
for ( int  i  =  1; i < 15; i++) {
 
     CCSpriteFrame * frame  =  [[CCSpriteFrameCache sharedSpriteFrameCache]spriteFrameByName:
                                            [NSString stringWithFormat:"grossini_dance_%02d.png",i]];
     [animFrames addObject:frame];
}
CCAnimation * animation =  [CCAnimation animationWithName:@"dance" delay:0.2f frames:animFrames];
[sprite runAction:[CCRepeatForever actionWithAction:[CCAnimate actionWithAnimation:animation restoreOriginalFrame:NO]]];

将下面这些代码放到你的dealloc函数中是什么重要的，否则你将会产生内存泄露

- ( void)  dealloc
{
        [ [ CCSpriteFrameCache sharedSpriteFrameCache ]  removeUnusedSpriteFrames] ;
        [ super dealloc ] ;
}

如果你将所有动画放到一个大的精灵表单中，你将会获得很好的性能（对于较老的设备最大1024X1024，对于iPhone4和iPad最大2048X2048），工具都会自动的帮你完成。