(译)cocos2d精灵教程:第一部分

来源:互联网 时间:1970-01-01

原文链接地址:http://www.iphonegametutorials.com/2010/09/10/cocos2d-sprite-tutorial/

教程截图:

前言:CocoaChina上有位网友问我能不能翻译一些比较高级的文章。首先,非常感谢这位网友的建议。之前翻译的3篇菜单教程,相比于前面TinyWings来说,确实显得有点小儿科了。但是,需要说明的是,那三篇菜单教程是后面教程的基础。在iphonegametutorials这个网站上,作者会引用到前面的文章。所以今天,我还是会翻译三篇“小儿科”的文章。不过希望大家还是耐着性子看一遍,权当温故知新。如果大家觉得哪些主题比较感兴趣,麻烦把E文链接发给我,我可以翻译。同时,我希望本博客能给游戏开发人员提供一些帮助,我希望有兴趣的开发人员能够加入到翻译的队伍中来,我需要你们的帮助,毕竟我一个人的时间和精力有限。当然,我们也可以自己写游戏开发教程:)。比如知易写的就很不错,通俗易懂。如果有意向一起翻译或者愿意写游戏教程的朋友,请加我qq:254041321。谢谢大家一直关注我!

当然,如果有自己的博客,并且写了教程的,也可以把链接发给我,我转载并注明版权和出处。总之,我希望这个博客是我们共同的游戏开发博客。上面会有很多的资源和分享。希望得到你们的支持和参与,再次表示感谢!

----------------------------------------------------------------------------------------------------------------------

朋友们,欢迎回来!今天,我们将要征服cocos2d里面的精灵。这个过程并不会像你想像中那么难,接下来的教程,我就会证明给你看。首先,我们有N种方法在屏幕上显示一张图片。。。其实,我们在《coco2d菜单教程:第三部分》就已经知道一种显示图片的方式了。

那么,我们今天将学习哪些内容呢?我们将学习有关 “CCSprite”, “CCSpriteSheets”, “CCSpriteFrame”,以及“Texture2d” 和 “CCTextureCache”的一切!在这篇教程的最后,我们将有一条龙在一个简单的背景地形上面飞,路径由用户的手指滑动touch决定。很酷呢?

这里有本教程的完整源代码:

(。。。这里省略掉了一大段内容,讲的是0.99.5对api接口的变动,现在我们都用1.0了,这些内容我也不翻译了。。。)

  因此,在这个教程中,我们还是学习一些基础知识--不过没有菜单啦,我们主要关心的是精灵(sprite)。先看一看整个教程最后的产品是什么样子吧!如下图所示:

是否有点激动了呢?我敢打赌你现在很激动。。。不管怎么说,直接切入主题吧。。。

首先,我们使用上个教程的 SceneManager.h/.m ,这里我们只创建“PlayLayer”类。

我们首先要做的就是把“dragon.png”图片拖到Resources文件夹下去,它是一张750×560的图片,我把它缩小显示在下图。你可以从这里下载完整大小的图片资源。

那里面还有一张地形背景图,它的大小为480×320,我也把它缩小显示出来了:

像之前的菜单教程一样,把这里图片添加进resources分组下面去--你按住ctrl-click在“Resources”文件夹里面挑选你想要添加进工程的图片,记住,如果图片不是放在Reources文件夹下,那么最好选中 “copy to directory”复选框。

好了,一旦你添加进去以后,它看起来的结构如下图所示:

我们的工程将包含两个类(delegate类除外): SceneManager 和 PlayLayer。我们已经知道SceneManger是如何工作的了,这里就不再啰嗦了。(可以参考《cocos2d菜单教程:第一部分》),但是,下面是我移除掉一些菜单选项后的SceneManager类。

SceneManager.h

#import

#import "PlayLayer.h"@interface SceneManager : NSObject {
}

+(void) goPlay;
@end

SceneManager.m

#import "SceneManager.h"

@interface SceneManager ()
+(void) go: (CCLayer *) layer;
+(CCScene *) wrap: (CCLayer *) layer;
@end

@implementation SceneManager

+(void) goPlay{
CCLayer *layer = [PlayLayer node];
[SceneManager go: layer];
}

+(void) go: (CCLayer *) layer{
CCDirector *director = [CCDirector sharedDirector];
CCScene *newScene = [SceneManager wrap:layer];

if ([director runningScene]) {
[director replaceScene:newScene];
}else {
[director runWithScene:newScene];
}
}

+(CCScene *) wrap: (CCLayer *) layer{
CCScene *newScene = [CCScene node];
[newScene addChild: layer];
return newScene;
}
@end

一定要记得,把delegate类里面的CCDirector replaceScene调用,改成 “[SceneManager goPlay];”调用。

好,如果你们都看了菜单教程的话,那么看到这里,你们可能会觉得烦了。所以,来点新鲜的吧:

PlayLayer.h

#import "cocos2d.h"

#import "SceneManager.h"

@interface PlayLayer : CCLayer {
NSMutableArray *_flyActionArray;

CCSprite *_dragon;
CCAction *_flyAction;
CCAction *_moveAction;
BOOL _moving;
}

@property (nonatomic, retain) NSMutableArray *flyActionArray;

@property (nonatomic, retain) CCSprite *dragon;
@property (nonatomic, retain) CCAction *flyAction;
@property (nonatomic, retain) CCAction *moveAction;
@end

那么,这里做了些什么事呢?我们创建了三个实例变量:_dragon, _flyAction and _moveAction.从名字差不多也可以看出来它们到底是干什么用的,_dragon是我们的主角精灵,_flyAnimmation负责处理dragon的煽动翅膀的动画,而_moveAction负责处理从一点移动到另一个点。

因此,CCSprite非常重要,但是,你可能会问你自己,我到底是应该继承CCSprite,还是包含一个CCSprite实例呢?我这里不使用一个Dragon类来继承CCSprite的原因是你可以从文件中加载一张图片来初始化它。这里有一个非常著名的问题:“Is-a”还是“has-a”?好吧,我的喜好是派生至CCNode,然后把所有的CCSprite当作它的属性。因为,我相信这样做会给你最大的灵性性。我承认,如果从CCSprite继承的话,刚开始会有许多方便之处,比如可以直接添加到BatchNode等。但是,我还是坚信,把CCSprite当作一个属性的话,你可以在以后的编程中获得巨大的好处。

小提示:属性是objc提供给我们的一种方便地生成get/set方法的一种机制,同时还有其它一些好处,比如可以协助内存管理。

For example:

@interface HeroPlayer : NSObject {
NSString* weapon;
NSString* armor;
}

- (NSString*) weapon;
- (NSString*) armor;

- (void) setWeapon: (NSString*)input;
- (void) setArmor: (NSString*)input;

 @property是objc声明属性的关键字,括号里面的retain指明set方法时,传入的参数会调用retain,使其引用计数加1.(译者:这样的话,你可以用self.xxx = [CCNode node];因为,cocos2d里面大量使用autorelease对象,这种对象出了当前mainLoop的话就会被release掉。所以,经常需要retain。而使用self.xxx = [CCNode node];的话,如果xxx属性里面的括号声明成了retain,那么就不用再retain了。简言之,self.xxx = [CCNode node];  和 xxx = [[CCNode node] retain];等价。但是,我们很少会在cocos2d里面retain什么东西,因为,我们基本上都会调用addChild方法,而这个方法会把参数自动retain一次,所以产生的autorelease对象才不会被释放掉。)

@implementation HeroPlayer

@synthesize weapon;
@synthesize armor;
...
@end

@synthesize会自动为我们生成getter和setter。因此,我们只需要为这个类实现dealloc方法就可以了。

访问器(getter/setter)只有当它们不存在的时候才生成,所以可以放心使用 @synthesize来声明属性,之后,你再可以按需要定制相应的getter和setter。编译器会判断哪个方法没有,然后自已生成之。

好了,刚刚讲了一些题外话。。。接下来,让我们看看PlayLayer的实现:

PlayLayer.m

#import "PlayLayer.h"

@implementation PlayLayer

@synthesize flyActionArray = _flyActionArray;

@synthesize dragon = _dragon;
@synthesize moveAction = _moveAction;
@synthesize flyAction = _flyAction;

enum {
kTagSpriteSheet = 1,
};

-(id) init{
self = [super init];
if (!self) {
return nil;
}

CCSprite *background = [CCSprite spriteWithFile:@"Terrain.png"];
background.position = ccp(160, 240);
[self addChild:background];

CCTexture2D *texture = [[CCTextureCache sharedTextureCache] addImage:@"dragon.png"];

CCSpriteSheet *sheet = [CCSpriteSheet spriteSheetWithTexture:texture capacity:10];
[self addChild:sheet z:0 tag:kTagSpriteSheet];

CGSize s = [[CCDirector sharedDirector] winSize];

_flyActionArray = [[NSMutableArray alloc] init];
NSMutableArray *animFrames = [NSMutableArray array];

for (int i = 0; i < 8; i++) {

[animFrames removeAllObjects];

for (int j = 0; j <10; j++) {
CCSpriteFrame *frame = [CCSpriteFrame frameWithTexture:texture rect:CGRectMake(j*75, i*70, 75, 70) offset:CGPointZero];
[animFrames addObject:frame];
}
CCAnimation *animation = [CCAnimation animationWithName:@"fly" delay:0.1f frames:animFrames];
CCAnimate *animate = [CCAnimate actionWithAnimation:animation restoreOriginalFrame:NO];
CCSequence *seq = [CCSequence actions: animate,
nil];

self.flyAction = [CCRepeatForever actionWithAction: seq ];
[_flyActionArray addObject:self.flyAction];
}

CCSpriteFrame *frame1 = [CCSpriteFrame frameWithTexture:texture rect:CGRectMake(0, 0, 75, 70) offset:CGPointZero];

self.dragon = [CCSprite spriteWithSpriteFrame:frame1];
_dragon.position = ccp( s.width/2-80, s.height/2);

[sheet addChild:_dragon];

self.flyAction = [_flyActionArray objectAtIndex:0];
[_dragon runAction:_flyAction];

self.isTouchEnabled = YES;

return self;
}

- (void) dealloc
{
[[CCSpriteFrameCache sharedSpriteFrameCache] removeUnusedSpriteFrames];
[self.flyActionArray removeAllObjects];

self.dragon = nil;
self.flyAction = nil;
self.moveAction = nil;
[super dealloc];
}

@end

ok,上面的代码看起来比较长,不过没关系,让我们分别解释下:

首先是加载背景图片

CCSprite *background = [CCSprite spriteWithFile:@"Terrain.png"];
background.position = ccp(160, 240);
[self addChild:background];

背景图片加载后放置在屏幕的中心(默认情况下,图片的anchorPoint是图片的中心,你可以使用anchorPoint属性来改变它--举个例子:把背景的anchorPoint从中心点

background.anchorPoint = ccp(0.5,0.5);

改成图片的左下角:

background.anchorPoint = ccp(0.0,0.0);

接下来:

CCTexture2D *texture = [[CCTextureCache sharedTextureCache] addImage:@"dragon.png"];

CCSpriteSheet *sheet = [CCSpriteSheet spriteSheetWithTexture:texture capacity:10];
[self addChild:sheet z:0 tag:kTagSpriteSheet];

CCTextureCache和CCTexture2D是n种方式中的一种,可以把一张图片加载到CCSprite中去。我是认真的,真的有n种方法可以做这个事情。。。现在,我不想让你头晕,所以先不列举其它方法了。。。让我们先看看这段代码都做了些什么吧。首先,加载一张dragon.png图片到texture对象中。

因此,接下来,好多人都对CCSpriteSheet的使用感到迷惑不解(译者:大家注意,现在没有这个类了,改成CCSpriteBatchNode来代替了,但是思想还是一样的)。一个CCSpriteSheet是一种效率比较高的渲染精灵的方式。比如,你把CCSprite加到CCLayer中,那么sprite的draw函数在每一帧调用时都会执行7个opengl 调用来完成sprite的渲染。一个精灵的时候当然没问题,但是,当你在屏幕上有200个精灵的时候,那么就会有200×7次opengl调用。。。而CCSpriteSheet(或者CCSpriteBatchNode)可以“批处理”它的孩子精灵的draw调用。这意味着,当把200个精灵加到Spritesheet中去的时候,只要使用7个opengl调用就可以完成200个孩子的渲染了。在本例中,我们看到dragon类也有许多精灵,所以我们要使用spritesheet。

Riq在cocos2d for iphone里面提到:

1.通过使用纹理集(texture atlas),你可以加快游戏的加载时间,同时减少耗费的内存资源。

2.通过使用CCSpriteSheet(CCSpriteBatchNode),你可以提供渲染的性能,(具体查看Performance Tests)

3.通过使用CCTextureCache和CCSpriteSheet,那么你可以同时获得加载时间的性能和渲染的性能提升。

当然,现在只有一只龙,可能看不出明显的效果提升。但是,这是最佳实践,你最好一开始就按照这种方式去做,它会为你以后省去很多麻烦事。

_flyActionArray = [[NSMutableArray alloc] init];
NSMutableArray *animFrames = [NSMutableArray array];

for (int i = 0; i < 8; i++) {

[animFrames removeAllObjects];

for (int j = 0; j <10; j++) {
CCSpriteFrame *frame = [CCSpriteFrame frameWithTexture:texture rect:CGRectMake(j*75, i*70, 75, 70) offset:CGPointZero];
[animFrames addObject:frame];
}
CCAnimation *animation = [CCAnimation animationWithName:@"fly" delay:0.1f frames:animFrames];
CCAnimate *animate = [CCAnimate actionWithAnimation:animation restoreOriginalFrame:NO];
CCSequence *seq = [CCSequence actions: animate,
nil];

self.flyAction = [CCRepeatForever actionWithAction: seq ];
[_flyActionArray addObject:self.flyAction];
}

上面这个部分似乎做了很多事情--但是,实际上很简单。我们使用CCSpriteFrame来创建精灵动画帧,一个CCSpriteFrame就是从texture里面抠出来的一块小图片区域,需要指定矩形区域。它并不包含图片本身,而是更像一帧图像。每一次,动画运行的时候,就会运行一系列的CCSpriteFrames,而每个CCSpriteFrames指向texture里的一小块图片。

因为我们的dragon每个动画都有10张图片,总共有8个方向飞行的动画(对应东南西北8个方向的动画)。我们创建了80个帧,然后把每一个方向飞行的动画都存到NSMutableArray里面。然后,我们把所有的flyAction再添加到_flyActionArray里面去。

CCSpriteFrame *frame1 = [CCSpriteFrame frameWithTexture:texture rect:CGRectMake(0, 0, 75, 70) offset:CGPointZero];

self.dragon = [CCSprite spriteWithSpriteFrame:frame1];
_dragon.position = ccp( s.width/2-80, s.height/2);

[sheet addChild:_dragon];

self.flyAction = [_flyActionArray objectAtIndex:0];
[_dragon runAction:_flyAction];

因为dragon刚开始时需要有一张图片作为初始状态,所以,我们从animation里面取出第一帧(位置在0,0,宽度是75,高度是70)。我们把dragon精灵初始位置设在屏幕中间偏左一点,然后把它加到spritesheet中,目的是为了获得更好的性能提升。

然后,我们开始运行第一个动画。。。现在,我们可以飞啦!

下篇教程见!

-------------------------------------------------------------------------------------------------------------------------

后记:这里使用的方法,说实话,真的过时了。:)不过我们了解了也是有好处的。之前翻译的ray的教程里面,都是使用texturePacker生成pvr.ccz和plist文件来处理的。获得动画帧也很简单,直接spriteFrameByName就可以了。

最后,对于教程开头的“大胆的建议”,如果大家没什么兴趣的话,就看看,然后一笑而过吧~


相关阅读:
Top