地球人己阻止不了程序猿们学习cocos2d-x了 (第一篇)

转自http://cocos2d.cocoachina.com/bbs/forum.php?mod=viewthread&tid=775&extra=page%3D1

(内容重点: CCSprite, CCSpriteFrameCache, CCSpriteBatchNode, TexturePacker)

很早就开始留意 cocos2d, 但不太习惯用 Objective C, 同时也考虑到跨平台的问题, 所以一直没有正式用过, 後来有了 cocos2d-x, 就更为关注, 老想有空时拿来玩玩写点东西.

之前下载了 cocos2d-x 看了一下附带的例子, 被里边的 scene, layer, CCTextureCache, CCSpriteFrameCache 等等弄得很是混乱, 再加上工作上的事情, 就放下了, 直到上周无意中下载了一本书的 PDF, 决定再好好地学习一下, 而我发现有关 cocos2d-x 的教程并不多, 所以我就班门弄斧的和大家分享一下我的学习过程吧.

(附带一提, 这本书叫 Learn cocos2D Game Development with iOS 5 , 这麽好的书当然要买正版支持, 我已经在 amazon 定购了, 正在运送途中)

学习一种新技术, 一般我会找一本较好的参考书(或资料), 先了解一下它的基本概念, 再通过实习应用来熟识.

我想不少童鞋可能是被cocos2d 超多的功能所吸引而选用它, 但其实写个一般的小遊戏并不需要知道得太多, 以下就是我想先了解的东西:

1) cocos2d 的基本架构 (像scene, layer 等的概念)
2) 怎样在萤幕画东西 (texture 处理, sprite 等)
3) 操控
4) 声效
5) 菜单处理

这里我略为说一下关於怎样在萤幕画东西吧. 首先如往常般的建立一个 cocos2d 项目在 VC2010 Express 里 (为方便起, 我会在 Windows 平台上写和测试, 有机会再移植到 iOS 和Android):

 

建立了这个叫 Demo 的项目後, 我们再把一些图抄到 Resources 里:
 

把这些图像画到萤幕上, 最简单就是把每个图放进一个个的 CCSprite然後加到当前的 Layer 上. 以下这段代码就是把 Background.png, Grass Block.png 和 p8.png 显示在画面:

1. CCSize size = CCDirector::sharedDirector()->getWinSize();
   
2. 
   
3.         CCSprite* pSprite = CCSprite::spriteWithFile("Background.png");
   
4.         CC_BREAK_IF(! pSprite);
   
5. 
   
6.         pSprite->setPosition(ccp(size.width/2, size.height/2));
   
7.         this->addChild(pSprite, 0);
   
8. 
   
9.                 pSprite = CCSprite::spriteWithFile("Grass Block.png");
   
10.         CC_BREAK_IF(! pSprite);
    
11. 
    
12.         pSprite->setPosition(ccp(size.width/2, size.height/2));
    
13.         this->addChild(pSprite, 0);
    
14. 
    
15.                 pSprite = CCSprite::spriteWithFile("p8.png");
    
16.         CC_BREAK_IF(! pSprite);
    
17. 
    
18.                 CCSize dim =  pSprite->getContentSize();
    
19.                 pSprite->setPosition(ccp(size.width/2, size.height/2+dim.height/2));
    
20.         this->addChild(pSprite, 0);

复制代码

程序跑起来就会看到下边这个画面:
 


不过我们最终的目标是把遊戏放到 iOS 或 Android 机子上玩, 所以我们不能不考虑一下有关OpenGL ES 优化的问题, 两大关键问题就是内存(显存)运用和速度.
先看一下内存问题, OpenGL ES  纹理的宽和高都要是2的倍数, 以刚才的例子来说, 虽然 Background.png 本身是 480x320, 但在载入内存後, 它其实会被变成一张 512x512 的纹理, 而Grass Block.png 则由 101x131 变成 128x256, 我们可以看到如此这样会造成不少浪费.

再看看关於渲染速度方面, OpenGL ES 上来说我们应该尽量减少渲染时切换纹理和 glDrawArray 的呼叫, 刚才的例子每画一个图像都会切换一次纹理并呼叫一次 glDrawArray , 我们这里只画3样东西, 所以不会看到有什麽问题, 但如果我们要渲染几十个甚至几百个图像 , 速度上就会被拖慢. 很明显这并不是我们所想要的.

那我们应该怎麽解决这些问题呢? 答案就是利用纹理地图(texture atlas), 比如下面这张纹理就是把我们想用的图像都合併在一起, 而它的大小正好是 512x512:

 

如果人手去做这个合併工作就太痛苦了, 这里要向大家推荐一个十分好用的工具: TexturePacker! ( http://www.texturepacker.com/ ) 这个工具直接支持 cocos2d, 实在是太方便了!

首先我们把想要用的图像都放到一个目录里, 再用TexturePacker 的 "Add Folder"  功能把目录加进去, TexturePacker 的默认输出格式就是 cocos2d:

 


为了节省位置, 我们可以把Border padding 和Shape Padding 都设为1, 而选了 Allow rotation 可以让 TexturePacker 更为有效率的摆放图像在纹理里:

 


在键入了输出的档案名字後, 我们就可以用 Publish 把纹理输出.


接下来, 我们把输出的两个档案(我们这里的例子是images.plist 和 images.png) 放到 Resources 里, 就可以在程序里用 CCSpriteFrameCache 把纹理和有关资料载入:

1. cache->addSpriteFramesWithFile("images.plist", "images.png");

复制代码

但现在我们只有一张叫 "images.png" 的纹理, 那麽怎样去调用比如是 Background.png 呢? 当然我们还是用 CCSprite 做渲染图像的工作, 但在建立一个 CCSprite  时, 我们换为用 spriteWithSpriteFrameName 而不是 spriteWithFile:

1. CCSprite* pSprite = CCSprite::spriteWithSpriteFrameName(" Background.png");
   
2. 
   
3. CCSpriteFrameCache *cache = CCSpriteFrameCache::sharedSpriteFrameCache();
   
4.                 cache->addSpriteFramesWithFile("images.plist", "images.png");
   
5. 
   
6.         // Get window size and place the label upper. 
   
7.         CCSize size = CCDirector::sharedDirector()->getWinSize();
   
8. 
   
9.         CCSprite* pSprite = CCSprite::spriteWithSpriteFrameName("Background.png");
   
10.         CC_BREAK_IF(! pSprite);
    
11. 
    
12.         pSprite->setPosition(ccp(size.width/2, size.height/2));
    
13.         this->addChild(pSprite, 0);
    
14. 
    
15.                 pSprite = CCSprite::spriteWithSpriteFrameName("Grass Block.png");
    
16.         CC_BREAK_IF(! pSprite);
    
17. 
    
18.         pSprite->setPosition(ccp(size.width/2, size.height/2));
    
19.         this->addChild(pSprite, 0);
    
20. 
    
21.                 pSprite = CCSprite::spriteWithSpriteFrameName("p8.png");
    
22.         CC_BREAK_IF(! pSprite);
    
23. 
    
24.                 CCSize dim = pSprite->getContentSize();
    
25.                 pSprite->setPosition(ccp(size.width/2, size.height/2+dim.height/2));
    
26.         this->addChild(pSprite, 0);

复制代码

来到这里, 我们已经逹到了节省内存和减少纹理切换, 最後一个我们想做的优化是减少 glDrawArray 的次数, 而我们所运用的技巧, 就是批次渲染(Batch Rendering), cocos2d 提供了CCSpriteBatchNode 来方便大家做有关的处理, CCSpriteBatchNode 里的CCSprite 都是要用同一个纹理的, 所以我们在建立一个 CCSpriteBatchNode 是要给它一个纹理, 再把它加到 Layer 里 :

1. CCTexture2D *texture = CCTextureCache::sharedTextureCache()->textureForKey("images.png");
   
2.                 CCSpriteBatchNode *spriteBatch = CCSpriteBatchNode::batchNodeWithTexture(texture);
   
3.                 addChild(spriteBatch);

复制代码

接下来我们如常的建立各个 CCSprite, 但不同的地方是我们不把它们加在 Layer 里而是把它们直接加到 CCSpriteBatchNode 上:

1. CCSpriteFrameCache *cache = CCSpriteFrameCache::sharedSpriteFrameCache();
   
2.                 cache->addSpriteFramesWithFile("images.plist", "images.png");
   
3. 
   
4.                 CCTexture2D *texture = CCTextureCache::sharedTextureCache()->textureForKey("images.png");
   
5.                 CCSpriteBatchNode *spriteBatch = CCSpriteBatchNode::batchNodeWithTexture(texture);
   
6.                 addChild(spriteBatch);
   
7. 
   
8.         // Get window size and place the label upper. 
   
9.         CCSize size = CCDirector::sharedDirector()->getWinSize();
   
10. 
    
11.         CCSprite* pSprite = CCSprite::spriteWithSpriteFrameName("Background.png");
    
12. 
    
13.         pSprite->setPosition(ccp(size.width/2, size.height/2));
    
14.         spriteBatch->addChild(pSprite, 0);
    
15. 
    
16.                 pSprite = CCSprite::spriteWithSpriteFrameName("Grass Block.png");
    
17. 
    
18.         pSprite->setPosition(ccp(size.width/2, size.height/2));
    
19.         spriteBatch->addChild(pSprite, 0);
    
20. 
    
21.                 pSprite = CCSprite::spriteWithSpriteFrameName("p8.png");
    
22. 
    
23.                 CCSize dim = pSprite->getContentSize();
    
24.                 pSprite->setPosition(ccp(size.width/2, size.height/2+dim.height/2));
    
25.         spriteBatch->addChild(pSprite, 0);

复制代码

大功告成!
这次先跟大家谈到这里, 下次再继续!