现在的位置: 首页 > 综合 > 正文

Cocos2d-x TexturePacker的使用

2013年12月08日 ⁄ 综合 ⁄ 共 1900字 ⁄ 字号 评论关闭

转自:http://blog.csdn.net/zhy_cheng/article/details/8680931

 

首先要解释一下,为什么要使用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文件夹中。

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

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


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


  1. CCTexture2D *texture=CCTextureCache::sharedTextureCache()->textureForKey("last.png");
  2. CCSpriteBatchNode *node=CCSpriteBatchNode::batchNodeWithTexture(texture);
  3. addChild(node);
  1. CCTexture2D *texture=CCTextureCache::sharedTextureCache()->textureForKey("last.png");  
  2.   
  3. CCSpriteBatchNode *node=CCSpriteBatchNode::batchNodeWithTexture(texture);  
  4.   
  5. addChild(node);  


 

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

  1. CCSprite *s1=CCSprite::createWithSpriteFrameName("bird.png");
  2. s1->setPosition(ccp(35,32.5));
  3. node->addChild(s1);
  4. CCSprite *s2=CCSprite::createWithSpriteFrameName("cat.png");
  5. s2->setPosition(ccp(100,100));
  6. node->addChild(s2);
  1. CCSprite *s1=CCSprite::createWithSpriteFrameName("bird.png");  
  2.   
  3. s1->setPosition(ccp(35,32.5));  
  4.   
  5. node->addChild(s1);  
  6.   
  7. CCSprite *s2=CCSprite::createWithSpriteFrameName("cat.png");  
  8.   
  9. s2->setPosition(ccp(100,100));  
  10.   
  11. node->addChild(s2);  


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

最后上传代码:点击打开链接

抱歉!评论已关闭.