(译) Cocos2d_for_iPhone_1_Game_Development_Cookbook：1.1绘制精灵

(译)Cocos2d_for_iPhone_1_Game_Development_Cookbook

著作权声明:本文由iam126 翻译,欢迎转载分享。

请尊重作者劳动,转载时保留该声 明和作者博客链接,谢谢!

相关程序代码下载：http://download.csdn.net/detail/iam126/4068610

或搜索“Cocos2d_for_iPhone_1_Game_Development_Cookbook代码”于CSDN；

新手翻译，不准确请见谅，参考代码与原书。

 

1.1绘制精灵

 

  
在2D游戏开发中，绘制精灵是大多情况下的根本任务。Cocos2d在这方面为使用者提供了很大的灵活性。在这个案例中，我们将会用CCSprite、spritesheets，CCSpriteFrameCache、CCSpriteBatchNode来绘制精灵。我们也将绘制Mip贴图（这项材质贴图的技术，是依据不同精度的要求，而使用不同版本的材质图样进行贴图。例如：当物体移近使用者时，程序会在物体表面贴上较精细、清晰度较高的材质图案，于是让物体呈现出更高层、更加真实的效果；而当物体远离使用者时，程序就会贴上较单纯、清晰度较低的材质图样，进而提升图形处理的整体效率。LOD(细节水平)是协调纹理像素和实际像素之间关系的一个标准。一般用于中、低档显卡中。）。为了保证趣味性，本书的众多案例都会用一个不同的主题。在这个案例中，我们将会看到一个爱丽丝在草地的场景。

 

如何去做…

 

运行如下代码：

@implementation Ch1_DrawingSprites

-(CCLayer*) runRecipe

{

   /*** Draw a sprite using CCSprite ***/

   //用CCSprite绘制精灵

   CCSprite *tree1 = [CCSprite spriteWithFile:@"tree.png"];

   //Position the sprite using the tree base as a guide (y anchor point= 0)

   //设置树的位置、中心点、尺寸

   [tree1 setPosition:ccp(20,20)];

   tree1.anchorPoint = ccp(0.5f,0);

   [tree1 setScale:1.5f];

   [self addChild:tree1 z:2 tag:TAG_TREE_SPRITE_1];

   /*** Load a set of spriteframes from a PLIST file and draw one by name***/

   //从PLIST文件中读取精灵帧

   //Get the sprite frame cache singleton

   //得到精灵帧的缓存单例

   CCSpriteFrameCache *cache = [CCSpriteFrameCache sharedSpriteFrameCache];

   //Load our scene sprites from a spritesheet

   //从精灵帧中读取场景精灵

   [cache addSpriteFramesWithFile:@"alice_scene_sheet.plist"];

   //Specify the sprite frame and load it into a CCSprite

   //指定精灵帧给CCSprite

   CCSprite *alice = [CCSpritespriteWithSpriteFrameName:@"alice.png"];

   //Generate Mip Maps for the sprite

   //为精灵生成Mipmap

   [alice.texture generateMipmap];

   ccTexParams texParams = { GL_LINEAR_MIPMAP_LINEAR, GL_LINEAR,GL_CLAMP_TO_EDGE, GL_CLAMP_TO_EDGE };

   [alice.texture setTexParameters:&texParams];

   //Set other information.

   //设置爱丽丝的信息

   [alice setPosition:ccp(120,20)];

   [alice setScale:0.4f];

   alice.anchorPoint = ccp(0.5f,0);

   //Add Alice with a zOrder of 2 so she appears in front of other sprites

   //设置爱丽丝的z深度

   [self addChild:alice z:2 tag:TAG_ALICE_SPRITE];

   //Make Alice grow and shrink.

   //使爱丽丝放大缩小

   [alice runAction: [CCRepeatForever actionWithAction:[CCSequenceactions:[CCScaleTo actionWithDuration:4.0f scale:0.7f], [CCScaleToactionWithDuration:4.0f scale:0.1f], nil] ] ];

   /*** Draw a sprite CGImageRef ***/

   //精灵CGImageRef格式

   UIImage *uiImage = [UIImage imageNamed: @"cheshire_cat.png"];

   CGImageRef imageRef = [uiImage CGImage];

   CCSprite *cat = [CCSprite spriteWithCGImage:imageRefkey:@"cheshire_cat.png"];

   [cat setPosition:ccp(250,180)];

   [cat setScale:0.4f];

   [self addChild:cat z:3 tag:TAG_CAT_SPRITE];

   /*** Draw a sprite using CCTexture2D ***/

   //使用CCTexture2D绘制精灵

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

   CCSprite *tree2 = [CCSprite spriteWithTexture:texture];

   [tree2 setPosition:ccp(300,20)];

   tree2.anchorPoint = ccp(0.5f,0);

   [tree2 setScale:2.0f];

   [self addChild:tree2 z:2 tag:TAG_TREE_SPRITE_2];

   /*** Draw a sprite using CCSpriteFrameCache and CCTexture2D ***/

   //使用CCSpriteFrameCache和CCTexture2D绘制精灵

   CCSpriteFrame *frame = [CCSpriteFrame frameWithTexture:texturerect:tree2.textureRect];

   [[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFrame:framename:@"tree.png"];

   CCSprite *tree3 = [CCSprite spriteWithSpriteFrame:[[CCSpriteFrameCachesharedSpriteFrameCache] spriteFrameByName:@"tree.png"]];

   [tree3 setPosition:ccp(400,20)];

   tree3.anchorPoint = ccp(0.5f,0);

   [tree3 setScale:1.25f];

   [self addChild:tree3 z:2 tag:TAG_TREE_SPRITE_3];

   /*** Draw sprites using CCBatchSpriteNode ***/

   //使用CCBatchSpriteNode绘制精灵

   //Clouds

   //云

   CCSpriteBatchNode *cloudBatch = [CCSpriteBatchNodebatchNodeWithFile:@"cloud_01.png" capacity:10];

   [self addChild:cloudBatch z:1 tag:TAG_CLOUD_BATCH];

   for(int x=0; x<10; x++)

   {

       CCSprite *s = [CCSprite spriteWithBatchNode:cloudBatchrect:CGRectMake(0,0,64,64)];

       [s setOpacity:100];

       [cloudBatch addChild:s];

       [s setPosition:ccp(arc4random()%500-50, arc4random()%150+200)];

   }

   //Middleground Grass

   //中间地带的草坪

   int capacity = 10;

   CCSpriteBatchNode *grassBatch1 = [CCSpriteBatchNodebatchNodeWithFile:@"grass_01.png" capacity:capacity];

   [self addChild:grassBatch1 z:1 tag:TAG_GRASS_BATCH_1];

   for(int x=0; x<capacity; x++)

   {

       CCSprite *s = [CCSprite spriteWithBatchNode:grassBatch1rect:CGRectMake(0,0,64,64)];

       [s setOpacity:255];

       [grassBatch1 addChild:s];

       [s setPosition:ccp(arc4random()%500-50, arc4random()%20+70)];

   }

   //Foreground Grass

   //前景的草坪

   CCSpriteBatchNode *grassBatch2 = [CCSpriteBatchNodebatchNodeWithFile:@"grass_01.png" capacity:10];

   [self addChild:grassBatch2 z:3 tag:TAG_GRASS_BATCH_2];

   for(int x=0; x<30; x++)

   {

       CCSprite *s = [CCSprite spriteWithBatchNode:grassBatch2 rect:CGRectMake(0,0,64,64)];

       [s setOpacity:255];

       [grassBatch2 addChild:s];

       [s setPosition:ccp(arc4random()%500-50, arc4random()%40-10)];

   }

   /*** Draw colored rectangles using a 1px x 1px white texture ***/

   //用白色纹理绘制长方形

   //Draw the sky using blank.png

   //用blank.png绘制天空

   [self drawColoredSpriteAt:ccp(240,190) withRect:CGRectMake(0,0,480,260)withColor:ccc3(150,200,200) withZ:0];

   //Draw the ground using blank.png

   //用blank.png绘制地面

   [self drawColoredSpriteAt:ccp(240,30) withRect:CGRectMake(0,0,480,60)withColor:ccc3(80,50,25) withZ:0];

   return self;

}

-(void)drawColoredSpriteAt:(CGPoint)position withRect:(CGRect)rectwithColor:(ccColor3B)color withZ:(float)z

{

   CCSprite *sprite = [CCSprite spriteWithFile:@"blank.png"];

   [sprite setPosition:position];

   [sprite setTextureRect:rect];

   [sprite setColor:color];

   [self addChild:sprite];

   [self reorderChild:sprite z:z];

}

@end

 

如何运行…

 

这个案例让我们知道了绘制精灵的绝大多数的方法。

 

从文件中创建精灵：

首先，我们使用了最简单绘制精灵的办法。直接使用了图片文件制作：

+(id)spriteWithFile:(NSString*)filename;

这时最为直接了当的方式去初始化一个精灵并且适用于很多情况。

 

其他通过文件读取的方式：

除此之外，我们也了解到一些创建精灵的案例是通过UIImage／CGImageRef，CCTexture2D，以及使用CCSpriteFrame实例化CCTexture2D对象的方式。CGImageRef允许我们将cocos2d与其他框架工具相配合。CCTexture2D则是创建纹理的底层机制。

 

使用CCSpriteFrameCache读取spritesheets：

接下来，我们了解了效率更高的使用精灵的方式——CCSpriteFrameCache类。在Cocos2d－iPhone v0.99版本中介绍过，CCSpriteFrameCache单例是所有精灵帧的缓存。使用spritesheets（精灵帧）以及它相关联的PLIST文件（使用Zwoptem软件创建）我们从缓存中读取更多的精灵：

+(id)spriteWithSpriteFrameName(NSString*)filename;

 

Mip贴图：

Mip贴图可以让你的精灵在缩放的情况下没有锯齿。当我们把爱丽丝的图片缩小的时候，锯齿情况会不可避免的发生。当mip贴图开启的情况下，cocos2d会动态的产生更低的分辨率来理顺小图的像素。当你注释掉如下行时，你会发现像素跟着图片变小了：

[alice.texturegenerateMipmap];

ccTexParamstexParams = { GL_LINEAR_MIPMAP_LINEAR, GL_LINEAR, GL_CLAMP_TO_EDGE,GL_CLAMP_TO_EDGE };

[           alice.texturesetTexParameters:&texParams];

 

使用CCSpritBatchNode绘制精灵：

CCSpriteBatchNode是在0.99.5版本加入的，是一种多次重绘同一精灵的极其高效的方式。使用一下方法可以创建一个缓存文件：

CCSpriteBatchNode *cloudBatch =

[CCSpriteBatchNodebatchNodeWithFile:@"cloud_01.png" capacity:10];

然后，你使用下面这个代码创建众多精灵。

CCSprite *s = [CCSpritespriteWithBatchNode:cloudBatch

rect:CGRectMake(0,0,64,64)];

            [cloudBatch addChild:s];

设置你想绘制精灵的数量，使cocos2d去分配足够的空间。他也是另外一种效率方式，不过你并不需要非得用它。在这三个例子中我们随机放置了10个云彩以及60组草坪。

 

绘制长方形的颜色块：

最后，我们使用广泛且相当简单的方法绘制了蓝天黑土。我们使用白色贴图，并为之上色。设置他的textureRect来颜色控制范围：

CCSprite *sprite = [CCSpritespriteWithFile:@"blank.png"];

[sprite setTextureRect:CGRectMake(0,0,480,320)];

[sprite setColor:ccc3(255,128,0)];

 

(译)Cocos2d_for_iPhone_1_Game_Development_Cookbook

著作权声明:本文由iam126 翻译,欢迎转载分享。

请尊重作者劳动,转载时保留该声 明和作者博客链接,谢谢!

相关程序代码下载：http://download.csdn.net/detail/iam126/4068610

或搜索“Cocos2d_for_iPhone_1_Game_Development_Cookbook代码”于CSDN；

新手翻译，不准确请见谅，参考代码与原书。