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 把纹理和有关资料载入:

复制代码 cache->addSpriteFramesWithFile("images.plist", "images.png");

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

复制代码 CCSprite* pSprite = CCSprite::spriteWithSpriteFrameName(" Background.png"); CCSpriteFrameCache *cache = CCSpriteFrameCache::sharedSpriteFrameCache();         cache->addSpriteFramesWithFile("images.plist", "images.png");         // Get window size and place the label upper.         CCSize size = CCDirector::sharedDirector()->getWinSize();         CCSprite* pSprite = CCSprite::spriteWithSpriteFrameName("Background.png");         CC_BREAK_IF(! pSprite);         pSprite->setPosition(ccp(size.width/2, size.height/2));         this->addChild(pSprite, 0);         pSprite = CCSprite::spriteWithSpriteFrameName("Grass Block.png");         CC_BREAK_IF(! pSprite);         pSprite->setPosition(ccp(size.width/2, size.height/2));         this->addChild(pSprite, 0);         pSprite = CCSprite::spriteWithSpriteFrameName("p8.png");         CC_BREAK_IF(! pSprite);         CCSize dim = pSprite->getContentSize();         pSprite->setPosition(ccp(size.width/2, size.height/2+dim.height/2));         this->addChild(pSprite, 0);

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

复制代码 CCTexture2D *texture = CCTextureCache::sharedTextureCache()->textureForKey("images.png");         CCSpriteBatchNode *spriteBatch = CCSpriteBatchNode::batchNodeWithTexture(texture);         addChild(spriteBatch);

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

复制代码 CCSpriteFrameCache *cache = CCSpriteFrameCache::sharedSpriteFrameCache();         cache->addSpriteFramesWithFile("images.plist", "images.png");         CCTexture2D *texture = CCTextureCache::sharedTextureCache()->textureForKey("images.png");         CCSpriteBatchNode *spriteBatch = CCSpriteBatchNode::batchNodeWithTexture(texture);         addChild(spriteBatch);         // Get window size and place the label upper.         CCSize size = CCDirector::sharedDirector()->getWinSize();         CCSprite* pSprite = CCSprite::spriteWithSpriteFrameName("Background.png");         pSprite->setPosition(ccp(size.width/2, size.height/2));         spriteBatch->addChild(pSprite, 0);         pSprite = CCSprite::spriteWithSpriteFrameName("Grass Block.png");         pSprite->setPosition(ccp(size.width/2, size.height/2));         spriteBatch->addChild(pSprite, 0);         pSprite = CCSprite::spriteWithSpriteFrameName("p8.png");         CCSize dim = pSprite->getContentSize();         pSprite->setPosition(ccp(size.width/2, size.height/2+dim.height/2));         spriteBatch->addChild(pSprite, 0);

大功告成!

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