(译)如何在cocos2d里面使用动画和spritesheet(1)

分类栏目:cocos教程

178

原文链接地址:http://www.raywenderlich.com/1271/how-to-use-animations-and-sprite-sheets-in-cocos2d

教程截图:

(译)如何在cocos2d里面使用动画和spritesheet(1)

  在这个博客中,我收到了大量的读者来信说,你能不能写一个关于如何在cocos2d里面使用动画和spritesheet的教程。这篇教程就应运而生了!

  在这个教程里,我将向大家展示如何用cocos2d来制作一只熊在走路的动画。同时,我会使用spritesheet来使动画运行效率更高,还有如何让用户鼠标点击决定熊的行走方向,以及怎样基于熊当前行进的方向改变熊的面朝方向。

  如果你对cocos2d完全陌生的话,你可能需要先阅读《怎么使用cocos2d来制作简单的iphone游戏》这一系列的教程,但是也不一定!(如果说你已经有相关经验就另当别论了)

Getting Started

  让我们首先创建一个工程骨架--使用cocos2d工程模板创建一个新的项目并取名为AnimBear.

  接下来,下载一些由我的老婆制作的熊行走的图片。(老婆会美工多好啊!)

  当你解压之后,看看那些图片---它们仅仅是一张张单个的熊在行走的动画帧。但是,当你把它们连续地放映,就会看到一只熊在移动。

(译)如何在cocos2d里面使用动画和spritesheet(1)

  现在,把这些图片加到工程里面,然后基于这些单个的图片来创建动画。然后,在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”来排序。

  当你这样做以后,你会注意到,默认的画布(512×512)太小了,不足以把所有的熊图片装下。所以,还会有一些图片层叠在一起。因此,我们在Canvas部分把画布改成512×1024,然后在Layout部分点击“Apply”来重新排序它们。

  我们马上要完成了--但是,请注意,有些熊的图片比其它宽一些。如果你看一下原图,你会发现和原图尺寸不一样了--这是因为,Zwoptex在默认情况下会把图片周围的透明区域剪裁掉。

  对于这些图片,它们并不是我们最终需要的,因为对于动画来说,这些图片的位置信息已经错乱了(由于透明区域的裁剪)。还好,这非常容易解决--在工具栏上选择”Untrim“,然后再点”Apply“。

  这时,你的窗口可能和下图类似:

(译)如何在cocos2d里面使用动画和spritesheet(1)

  就这么多,让我们保存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,不是吗?

(译)如何在cocos2d里面使用动画和spritesheet(1)

但是,如果你能让这只熊动起来,那将会更酷!下面就跟着我,一步步地让熊动起来!

简单的动画

  首先,让我们把熊放在屏幕中间,然后循环播放所有的动画帧,这样看起来熊就在永远的移动,这里仅仅是先让代码可以跑起来。

  因此,让我们在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;
}

接下回(译)如何在cocos2d里面使用动画和spritesheet(2)