cocos2d-x學習筆記02——精靈貼圖

通過認真學習cocos2d-x的地球人系列之一http://www.cocoachina.com/gamedev/misc/2012/0525/4295.html的文章，於是有必要親自動手實踐一下。

1.基本貼圖，最原始，效率最低的方式

CCSize size = CCDirector::sharedDirector()->getWinSize();
CCSprite* pSprite = CCSprite::spriteWithFile("src01/bk.jpg"); 
CC_BREAK_IF(! pSprite);
pSprite->setPosition(ccp(size.width/2,size.height/2));
this->addChild(pSprite, 0);

pSprite = CCSprite::create("src01/tianjiang.png");
CC_BREAK_IF(! pSprite);
pSprite->setPosition(ccp(size.width*2/3,size.height*2/3));
this->addChild(pSprite, 0);

pSprite = CCSprite::spriteWithFile("src01/tianbin.png");
CC_BREAK_IF(! pSprite);
pSprite->setPosition(ccp(size.width/3,size.height/3));
this->addChild(pSprite, 0);  

運行結果

2.爲了減少渲染時切換紋理的次數，用TexturePacker把背景圖和2張怪物圖打包到一張紋理圖裏去，同時生成這張紋理圖對應的plist配置文件

此紋理圖如下

核心代碼如下

CCSize size = CCDirector::sharedDirector()->getWinSize();
CCSpriteFrameCache* cache = CCSpriteFrameCache::sharedSpriteFrameCache();
cache->addSpriteFramesWithFile("src01/images.plist","src01/images.png");


CCSprite* pSprite = CCSprite::spriteWithSpriteFrameName("bk.jpg"); 
CC_BREAK_IF(! pSprite);
pSprite->setPosition(ccp(size.width/2,size.height/2));
addChild(pSprite, 0);


pSprite = CCSprite::spriteWithSpriteFrameName("tianjiang.png");
CC_BREAK_IF(! pSprite);
pSprite->setPosition(ccp(size.width*2/3,size.height*2/3));
addChild(pSprite, 0);


pSprite = CCSprite::spriteWithSpriteFrameName("tianbin.png");
CC_BREAK_IF(! pSprite);
pSprite->setPosition(ccp(size.width/3,size.height/3));
addChild(pSprite, 0); 

結果：

可以看見左下方的第一行數字依然不變爲3，雖然減少了渲染時切換紋理的次數，但是渲染次數依然爲不變、

3.爲了減少glDrawArray 的呼叫，避免平凡調用它，而通過批次渲染技術減少調用的次數，也就是爲了減少渲染次數

核心代碼如下：

CCSize size = CCDirector::sharedDirector()->getWinSize();
CCSpriteFrameCache* pCache = CCSpriteFrameCache::sharedSpriteFrameCache();
pCache->addSpriteFramesWithFile("src01/images.plist","src01/images.png");

CCTexture2D* pTexture =  CCTextureCache::sharedTextureCache()->textureForKey("src01/images.png");
CCSpriteBatchNode* pSpriteBatch = CCSpriteBatchNode::batchNodeWithTexture(pTexture);
addChild(pSpriteBatch);

CCSprite* pSprite = CCSprite::spriteWithSpriteFrameName("bk.jpg"); 
CC_BREAK_IF(! pSprite);
pSprite->setPosition(ccp(size.width/2,size.height/2));
pSpriteBatch->addChild(pSprite, 0);

pSprite = CCSprite::spriteWithSpriteFrameName("tianbin.png");
CC_BREAK_IF(! pSprite);
pSprite->setPosition(ccp(size.width/2,size.height/2));
pSpriteBatch->addChild(pSprite, 0);

pSprite = CCSprite::spriteWithSpriteFrameName("tianjiang.png");
CC_BREAK_IF(! pSprite);
pSprite->setPosition(ccp(size.width/3,size.height/3));
pSpriteBatch->addChild(pSprite, 0); 

結果

可以看見左下方的第一行爲1了，它是指渲染次數，雖然3張圖片，用批處理節點就可以使渲染次數成爲1.（渲染次數越少，越不容易造成閃爍）。