cocos2d-x之texturepacker的使用

-

在很多情况下，我们在cocos2d-x 加载精灵都是一张一个精灵的加载。这种方法对于较少的精灵存在的游戏是比较方便的。但是一旦精灵很多，我们就没必要一个个加载了。

在cocos2d有一种将很多图片保存成为一张大图片，然后独取出来单独使用，这个方法就是plist的图片帧文件，它能极大的减小图片体积，最重要的是大图就能符合2的N次幂宽高的要求了。

TexturePackerGUI是专门制作cocos2d plist文件的软件，这个软件最好的优势是有Windows版本的。下面是简单的使用方法：

打开TexturePackerGUI，将前面的开始界面素材拖入到窗口的右侧栏中。

建议将DataFormat改成cocos2d-0.99.4，然后点击Publish按钮，保存为game.plist，浏览位置就会发现多出一个game.png(你保存在哪里，图片就在那里生成加载)，它们之间是对应的。

 

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

复制代码

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

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

复制代码

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

复制代码

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

大功告成!

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