原文链接地址：http://www.raywenderlich.com/1271/how-to-use-animations-and-sprite-sheets-in-cocos2d
教程截图：
在这个博客中，我收到了大量的读者来信说，你能不能写一个关于如何在cocos2d里面使用动画和spritesheet的教程。这篇教程就应运而生了！
在这个教程里，我将向大家展示如何用cocos2d来制作一只熊在走路的动画。同时，我会使用spritesheet来使动画运行效率更高，还有如何让用户鼠标点击决定熊的行走方向，以及怎样基于熊当前行进的方向改变熊的面朝方向。
如果你对cocos2d完全陌生的话，你可能需要先阅读《怎么使用cocos2d来制作简单的iphone游戏》这一系列的教程，但是也不一定！（如果说你已经有相关经验就另当别论了）
Getting Started
让我们首先创建一个工程骨架--使用cocos2d工程模板创建一个新的项目并取名为AnimBear.
接下来，下载一些由我的老婆制作的熊行走的图片。（老婆会美工多好啊！）
当你解压之后，看看那些图片---它们仅仅是一张张单个的熊在行走的动画帧。但是，当你把它们连续地放映，就会看到一只熊在移动。
现在，把这些图片加到工程里面，然后基于这些单个的图片来创建动画。然后，在cocos2d里面，还有另一种更加高效的方式来创建动画--那就是使用spritesheet。（也叫精灵表单）
精灵表单和熊
如果你从来没有使用过spritesheet，你可以把它看作是一张巨大的图片，你可以把许许多多的sprite放进去。与spritesheet对应的，还有一个plist文件，这个文件指定了每个独立的sprite在这张“大图”里面的位置和大小，当你在代码之间需要使用这个sprite的时候，就可以很方面地使用plist文件中的这些信息来获取sprite。
为什么这会提高效率呢？因为cocos2d对它进行了优化！如果你使用spritesheet来获取sprite，那么当场景中有许多sprite的时候，如果这些sprite共享一个spritesheet，那么cocos2d就会使用一次OpenGL ES调用来渲染这些sprite。但是，如果是单个的sprite的话，那么就会有N次OpenGL ES call，这个代价是相当昂贵的。
简而言之--使用spritesheet会更快，尤其是当你有很多的sprite的时候！（使用spritesheet还可以减少游戏占用的内存大小，具体参考我翻译的文章《在cocos2d里面如何使用TexturePacker和像素格式来优化spritesheet》）
由于要使用spritesheet，你当然可以手工用图片编辑器来创建，然后创建一个plist指定每一个sprite在spritesheet里面的位置和大小。然后，那样将会是一个非常傻比的行为，因为Robert Payne已经开发出了一个非常好用的工具，叫做Zwoptex，它可以帮助我们自动生成这一切！
Zwoptex To Victory!
如果你还没有这个工具，那么可以从 zwoptexapp.com上面下载。它有一个免费的Flash版本和一个收费的安装版，但是最近我使用的是可安装的版本。
安装完这个工具之后，选择FileNew，然后你将会看到一个空白窗口。打开你先前下载的熊的图片，并把它们拖到这个窗口里面。
你会看到，所有的熊的图片都层叠在一起。我们需要将他们摊开放在spritesheet上面，因此在Layout部分点击“Apply”来排序。
当你这样做以后，你会注意到，默认的画布（５１２×５１２）太小了，不足以把所有的熊图片装下。所以，还会有一些图片层叠在一起。因此，我们在Canvas部分把画布改成５１２×１０２４，然后在Layout部分点击“Apply”来重新排序它们。
我们马上要完成了--但是，请注意，有些熊的图片比其它宽一些。如果你看一下原图，你会发现和原图尺寸不一样了--这是因为，Zwoptex在默认情况下会把图片周围的透明区域剪裁掉。
对于这些图片，它们并不是我们最终需要的，因为对于动画来说，这些图片的位置信息已经错乱了（由于透明区域的裁剪）。还好，这非常容易解决--在工具栏上选择”Untrim“，然后再点”Apply“。
这时，你的窗口可能和下图类似：
就这么多，让我们保存spritesheet图片和定义，这样我们就可以在程序中使用它们啦.
点击Export部分的”Save.png“，把这个文件取名为”AnimBear.png“并保存到你的resources文件夹下面。然后点击”Save.plist“，命名为”AnimBear.plist“，同样保存到你的resources文件夹下面。
更新：当我们在Zwoptex里面点击保存的时候，确保选择”Cocos2d“作为导出格式，否则你的plist文件就不能正确在cocos2d里面使用！谢谢Muhammad在评论部分给我指出来了！
现在，让我们回到XCode，然后把刚刚这两个文件加进去。或击点击Resources文件夹，选择”AddExisting Files。。。“，选择AnimBear.png和AnimBear.plist文件，然后点增加。
好了，让我们打开AnimBear.plist文件，看看Zwoptex到底为我们做了些什么事。你将会看到它仅仅是一个包含两个section的属性文件--两个部分分别为frames和metadata。在frames部分，包含了一系列的对spritesheet中每个图片的描述信息，这些描述信息里面包含了图片在spritesheet中的位置、大小和名字等信息。很cool，不是吗？
但是，如果你能让这只熊动起来，那将会更酷！下面就跟着我，一步步地让熊动起来！
简单的动画
首先，让我们把熊放在屏幕中间，然后循环播放所有的动画帧，这样看起来熊就在永远的移动，这里仅仅是先让代码可以跑起来。
因此，让我们在HelloWorldScene.h里面增加一些属性吧，在那个文件中做以下修改：
// Add inside the HelloWorld interface
CCSprite *_bear;
CCAction *_walkAction;
CCAction *_moveAction;
BOOL _moving;
// Add after the HelloWorld interface
@property (nonatomic, retain) CCSprite *bear;
@property (nonatomic, retain) CCAction *walkAction;
@property (nonatomic, retain) CCAction *moveAction;
实际上，我们并不是马上需要所有的这些属性，但是，我们把它们先定义在这里，这样，等下我们就不用回过头来再改代码了。
现在，有趣的部分来了！打开HelloWorldScene.m，然后作如下改动：
// At the top, under @implementation
@synthesize bear = _bear;
@synthesize moveAction = _moveAction;
@synthesize walkAction = _walkAction;
// In dealloc
self.bear = nil;
self.walkAction = nil;
// Replace the init method with the following
-(id) init {
if((self = [super init])) {
// Add the stuff from below!
}
return self;
}
