TexturePacker的使用

2013-03-16 15:16:16     我来说两句       作者： 临江仙

收藏    我要投稿

首先要解释一下，为什么要使用TexturePacker？

 

这是应为我们做的游戏最终要运行在Android手机或者苹果手机上，而Android或者ios系统使用的是OpenGL ES来渲染。所以我们要针对OpenGL ES来进行优化。

 

内存方面，OpenGL ES纹理要求宽和高都是2的n次幂的倍数。想一想，如果图片的宽为33，而高为65，那么图片加载到内存后的大小为多少？考虑到宽和高都是2的n次幂，所以加载到内存后的大小是64*128。所以我们可以考虑将小的图片拼成到的图片，然后加载。

 

渲染速度方面，OpenGL ES要求切换的纹理少，所以将图片拼成大图片，这样就减少了纹理的切换。

 

所以使用TexturePacker是很有必要的。

 

 

 

 

打开TexturePacker，点击Add Folder，将图片全部加载进来。注意：我们应该事先将要拼凑的图片放到同一个文件夹下。

 

这样。TexturePacker就自动将我们要拼凑的图片拼成了一个大图，并且大图的宽和高都是2的n次幂的倍数。

 

下面设置输出格式：

 

 

 

Texture format设置成PNG。然后选择Data file和Texture file的保存位置。点击工具栏上的Publis。这样我们就得到了plist文件和png文件。

 

 

 

 

下面就是在cocos2d-x中使用这两个文件。

 

将这两个文件复制到Resources文件夹中。

 

使用下面的代码加载着两个文件

 

 

[cpp] 

 

CCSpriteFrameCache::sharedSpriteFrameCache()->addSpriteFramesWithFile("last.plist","last.png");  

 

CCSpriteFrameCache::sharedSpriteFrameCache()->addSpriteFramesWithFile("last.plist","last.png");

接着创建一个CCSpriteBatchNode，将要渲染的精灵加载到CCSpriteBatchNode。 

 

 

 

 

[cpp] 

CCTexture2D *texture=CCTextureCache::sharedTextureCache()->textureForKey("last.png");  

  

CCSpriteBatchNode *node=CCSpriteBatchNode::batchNodeWithTexture(texture);  

  

addChild(node);  

 

CCTexture2D *texture=CCTextureCache::sharedTextureCache()->textureForKey("last.png");

 

CCSpriteBatchNode *node=CCSpriteBatchNode::batchNodeWithTexture(texture);

 

addChild(node);

 

 

然后就是创建精灵并且加载精灵了。

 

 

[cpp]

CCSprite *s1=CCSprite::createWithSpriteFrameName("bird.png");  

  

s1->setPosition(ccp(35,32.5));  

  

node->addChild(s1);  

  

CCSprite *s2=CCSprite::createWithSpriteFrameName("cat.png");  

  

s2->setPosition(ccp(100,100));  

  

node->addChild(s2);  

 

CCSprite *s1=CCSprite::createWithSpriteFrameName("bird.png");

 

s1->setPosition(ccp(35,32.5));

 

node->addChild(s1);

 

CCSprite *s2=CCSprite::createWithSpriteFrameName("cat.png");

 

s2->setPosition(ccp(100,100));

 

node->addChild(s2);

其中“bird.png”是小图片的名字。注意：CCSpriteBatchNode中的Sprite都要用同一个纹理。