纹理地图

 TexturePacker下载地址 http://www.texturepacker.com/

下载后申请KEY，只要有自己的技术博客就可以注册的。

以下步骤来自：http://cocos2d.cocoachina.com/bbs/forum.php?mod=viewthread&tid=775&extra=page%3D2

 

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




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




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


接下来, 我们把输出的两个档案(我们这里的例子是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 上:接下来我们如常的建立各个 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);