cocos2d-x使用TexturePacker打包图片及使用生成的plist文件创建精灵动画

分类：Cocos2d-x作者：编程之家用户

在使用TexturePacker打包工具之前先对动画的每一帧图片命名，我这里选取的cocos2d-x实例程序里面的图片，为了方便只提取了前面4帧的图片

然后打开安装好的TexturePakcer，该工具的官方下载地址，该工具需要购买激活，我这里是选择的试用。打开后点击Add Sprites然后选择需要添加的图片文件，至于该工具里面的各种调整这里不做过多的解释，最后点击Publish保存生成好的plist文件以及打包后的png图片。

打包后生成的文件如下，因为是选择的试用，生成的图片上会有奇怪的文字以及颜色发生改变，如果使用购买激活后的就不会这样...

打包工作就OK了，然后就是使用生成的plist文件创建精灵动画

[cpp] view plain copy
  1. //载入打包生成的plist文件
  2. CCSpriteFrameCache*cache=CCSpriteFrameCache::sharedSpriteFrameCache();
  3. cache->addSpriteFramesWithFile("grossini_dance_all.plist","grossini_dance_all.png");
  4. //数组长度初始化为4，根据动画的总帧数初始化
  5. CCArray*splitAniframe=CCArray::createWithCapacity(4);
  6. CCSpriteFrame*frame;
  7. char*frameNameChar=newchar[20];
  8. for(inti=1;i<=4;i++)
  9. {
  10. //下面的名字为打包前的每张图片的名字，加载plist文件很方便的一点就是可以根据打包前的图片名字直接访问到该图片
  11. sprintf(frameNameChar,"grossini_dance_%d.png",i);
  12. frame=CCSpriteFrameCache::sharedSpriteFrameCache()->spriteFrameByName(frameNameChar);
  13. splitAniframe->addObject(frame);
  14. }
  15. //根据帧序列创建动画（第二个参数为每帧之间的间隔时长）
  16. CCAnimation*splitAnimation=CCAnimation::createWithSpriteFrames(splitAniframe,0.2f);
  17. //根据动画创建动画动作
  18. CCAnimate*splitAnimate=CCAnimate::create(splitAnimation);
  19. CCSprite*testSprite=CCSprite::create();
  20. //让精灵执行该动画动作，并且是无限循环
  21. testSprite->runAction(CCRepeatForever::create(splitAnimate));
  22. testSprite->setPosition(ccp(200,200));
  23. addChild(testSprite);

精灵动画执行效果（下面只是动画的一个截图）


欢迎转载！转载时请注明出处：http://blog.csdn.net/aa4790139/article/details/8106993

如果你还没接触到过这个工具，那你今天运气非常好了...

下载地址：http://www.codeandweb.com/texturepacker

说明：这款软件需要购买的，能够发一百多块买到这么好的工具还是挺值得，可以工具的价钱，肯定他带给的的好处远不止这个数字..呵呵！

1、为什么要用这个工具呢？有什么好处？

第一点：内存问题,OpenGL ES 纹理的宽和高都要是2次幂数,以刚才的例子来说,假如 start.png 本身是 480x320,但在载入内存後,它其实会被变成一张 512x512 的纹理,而start.png 则由 101x131 变成 128x256,默认情况下面，当你在cocos2d里面加载一张图片的时候，对于每一个像素点使用４个byte来表示--１个byte（８位）代表red，另外３个byte分别代表green、blue和alpha透明通道。这个就简称RGBA8888。

因此，如果你使用默认的像素格式来加载图片的话，你可以通过下面的公式来计算出将要消耗多少内存来加载：

　　图像宽度（width）×图像高度（height）×每一个像素的位数（bytes　per　pixel）　=　内存大小

　　此时，如果你有一张５１２×５１２的图片，那么当你使用默认的像素格式去加载它的话，那么将耗费

　　５１２×５１２×４=１MB（好多啊！）

第二点：再看看关於渲染速度方面,OpenGL ES 上来说我们应该尽量减少渲染时切换纹理和 glDrawArray 的呼叫,刚才的例子每画一个图像都会切换一次纹理并呼叫一次 glDrawArray,我们这里只画3样东西,所以不会看到有什麽问题,但如果我们要渲染几十个甚至几百个图像,速度上就会被拖慢. 很明显这并不是我们所想要的..

估计就这两点就说服了你吧~ 至少我是了...呵呵！

2、认识TexturePacker的界面

我框出来的都是我们常用和一些必须点到的地方

Data Format:导出什么引擎数据，默认cocos2d,下拉列表中有很多，基本常用的引擎都支持了

Data File :导出文件位置(后缀名.plist)

Texture Format:纹理格式,默认png

Image format:图片像素格式，默认RGBA8888...根据对图片质量的需求导出不同的格式

Dithering:抖动,默认NearestNeighbour,(如果图像上面有许许多多的“条条”和颜色梯度变化)将其修改成FloydSteinberg＋Alpha;

Scale:让你可以保存一个比原始图片尺寸要大一点、或者小一点的spritesheet。比如，如果你想在spritesheet中加载“@2x"的图片（也即为Retina-display设备或者ipad创建的）。但是你同时也想为不支持高清显示的iphone和touch制作spritesheet，这时候只需要设置scale为 1.0,同时勾选autoSD就可以了。也就是说，只需要美工提供高清显示的图片，用这个软件可以自己为你生成高清和普清的图片。

Algorithm TexturePacker:里面目前唯一支持的算法就是MaxRects，即按精灵尺寸大小排列，但是这个算法效果非常好，因此你不用管它。

Border/shape padding:即在spritesheet里面，设置精灵与精灵之间的间隔。如果你在你的游戏当中看到精灵的旁边有一些“杂图”的时候，你就可以增加这个精灵之间的间隔。

Extrude:精灵边界的重复像素个数. 这个与间隔是相对应的--如果你在你的精灵的边边上看到一些透明的小点点，你就可以通过把这个值设设置大一点。

Trim:通过移除精灵四周的透明区域使之更好地放在spritesheet中去。不要担心，这些透明的区域仅仅是为了使spritesheet里面的精灵紧凑一点。--当你从cocos2d里面去读取这些精灵的时候，这些透明区域仍然在寻里。（因为，有些情况下，你可能需要这些信息来确定精灵的位置）

Shape outlines:把这个选项打开，那么就能看到精灵的边边。这在调试的时候非常有用。

AddSprite:添加图片Add Folder:根据文件夹添加图片

Publish：导出资源文件（.plist和png）

3、程序中更改资源加载方式

我就是用的上一个例子，然后将start.png,grossinis.png,grossinis_sister1.png,grossinis_sister2.png打包成一个image.plist和image.png.程序我就不重新全部上传了，就自上传和上一个例子不同的地方，没有的朋友就可以去第一篇文章下载工程，今后我们还会用到的，会用这个工程来开发我们的第一个游戏...游戏暂时保密...呵呵!

SpriteTestLayer.cpp（就只改了这个这个文件）

[cpp] view plain copy
    #include"SpriteTestLayer.h"
  3. SpriteTestLayer::SpriteTestLayer(void)
  4. boolSpriteTestLayer::init()
  5. CCSizes=CCDirector::sharedDirector()->getWinSize();
  6. //第一种加载资源方式
  7. //CCSprite*sprite=CCSprite::create("start.png");
  8. //第二种加载资源方式
  9. CCSpriteFrameCache*cache=CCSpriteFrameCache::sharedSpriteFrameCache();
  10. cache->addSpriteFramesWithFile("image.plist","image.png");
  11. CCTexture2D*texture=CCTextureCache::sharedTextureCache()->textureForKey("image.png");
  12. CCSpriteBatchNode*spriteBatch=CCSpriteBatchNode::batchNodeWithTexture(texture);
  13. addChild(spriteBatch);
  14. CCSprite*sprite=CCSprite::spriteWithSpriteFrameName("start.png");
  15. /*
  16. 加载pvr压缩格式文件方式：注意此种方法不可以像上面打成一个文件，然后根据名字来索引对应的图片
  17. 如果在AndEngine中使用，然后利用TexturePacker是可以导出三个文件格式的，就是多出来了一个xml文件
  18. 保存着索引子图片的索引，已经图片位置等信息，cocos2dx的test也没有找到相应的例子，只有单独一个
  19. 精灵才用到了加载pvr这种格式，可能cocos2dx却没有导出这个xml,也可能是这个原因吧！
  21. //第一种方式:
  22. CCSprite*sprite=CCSprite::create("image.pvr.ccz");
  23. //第二种方式：
  24. CCTexture2D*texture;
  25. CCTextureCache*cache=CCTextureCache::sharedTextureCache();
  26. texture=cache->addImage("image.pvr.ccz");
  27. CCSprite*sprite=CCSprite::create(texture);*/
  28. sprite->setAnchorPoint(ccp(0,1));//设置sprite的描点,(0,1)也就是图片的左上角
  29. sprite->setPosition(ccp(0,s.height));//设置sprite位置
  30. this->addChild(sprite);
  31. //sprite的一些基本的操作:缩放、旋转、混色
  32. m_tamara=CCSprite::spriteWithSpriteFrameName("grossini.png");
  33. m_tamara->setScaleX(2.5f);
  34. m_tamara->setScaleY(-1.0f);
  35. m_tamara->setPosition(ccp(100,70));
  36. m_tamara->setOpacity(255);//RGBA值RGB+透明度值
  37. this->addChild(m_tamara);
  38. m_grossini=CCSprite::spriteWithSpriteFrameName("grossinis_sister1.png");
  39. m_grossini->setRotation(120);
  40. m_grossini->setPosition(ccp(s.width/2,s.height/2));
  41. m_grossini->setColor(ccc3(255,0));
  42. this->addChild(m_grossini);
  43. m_kathia=CCSprite::spriteWithSpriteFrameName("grossinis_sister2.png");
  44. m_kathia->setPosition(ccp(s.width-100,s.height/2));
  45. m_kathia->setColor(ccBLUE);
  46. this->addChild(m_kathia);
  47. returntrue;
  48. }
  49. SpriteTestLayer::~SpriteTestLayer( }

运行结果：

哈哈！ 效果一样，没问题了，以后就用这种方法加载资源图片吧！

如果讲述得有误，或者不对的地方，还望各位指出！

参看资料：

http://www.cocoachina.com/bbs/read.php?tid=103764

http://www.cnblogs.com/andyque/archive/2011/03/18/1988097.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

如何使用CCRenderTexture创建动态纹理 Cocos2d-x 2 1 4
    本文实践自 RayWenderlich、Ali Hafizji 的文章《How To Create Dynamic Textures with CCRenderTexture in Cocos2D 2.X》，文中使用Cocos2D，我在这里使用Cocos2D-x 2.1.4进行学习和移植。在这篇文章，将会学习到如何创建实时纹理、如何用Gimp创建无缝拼接纹
Cocos-code-ide使用入门学习
Cocos-code-ide使用入门学习地点：杭州滨江邮箱：appdevzw@163.com微信公众号：HopToad 欢迎转载，转载标注出处：http://blog.csdn.netotbaron/article/details/424343991.  软件准备 下载地址：http://cn.cocos2d-x.org/download 2.  简介2.1         引用C
Cocos2D-x-3.0 编译(Win7)
第一次開始用手游引擎挺激动！！！进入正题。下载资源1：从Cocos2D-x官网上下载，进入网页http://www.cocos2d-x.org/download，点击Cocos2d-x以下的Download  v3.0，保存到自定义的文件夹2：从python官网上下载。进入网页https://www.python.org/downloads/，我当前下载的是3.4.0（当前最新
Cocos2d-x 2 0 在Windows平台下的使用
    Cocos2d-x是一款强大的基于OpenGLES的跨平台游戏开发引擎，易学易用，支持多种智能移动平台。官网地址：http://cocos2d-x.org/当前版本：2.0    有很多的学习资料，在这里我只做为自己的笔记记录下来，错误之处还请指出。在VisualStudio2008平台的编译：1.下载当前稳
quick-cocos2d-x实例之挑战记忆极限设计文档
1.  来源 QuickV3sample项目中的2048样例游戏，以及最近《最强大脑》娱乐节目。将2048改造成一款挑战玩家对数字记忆的小游戏。邮箱：appdevzw@163.com微信公众号：HopToadAPK下载地址：http://download.csdn.net/detailotbaron/8446223源码下载地址：http://download.csdn.net/
Cocos2d-x 3 X CMake MinGW版本编译运行
   Cocos2d-x3.x已经支持使用CMake来进行构建了，这里尝试以QtCreatorIDE来进行CMake构建。Cocos2d-x3.X地址：https://github.com/cocos2d/cocos2d-x1.打开QtCreator，菜单栏→"打开文件或项目..."，打开cocos2d-x目录下的CMakeLists.txt文件；2.弹出CMake向导，如下图所示：设置
vs 2013 编译cocos2d-x-3.9
 下载地址：链接:https://pan.baidu.com/s/1IkQsMU6NoERAAQLcCUMcXQ提取码:p1pb下载完成后，解压进入build目录使用vs2013打开工程设置平台工具集，打开设置界面设置： 点击开始编译等待编译结束编译成功在build文件下会出现一个新文件夹Debug.win32，里面就是编译
cocos2d-x游戏开发系列教程-超级玛丽01-前言
分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！http://www.captainbed.net前言上次用象棋演示了cocos2dx的基本用法，但是对cocos2dx并没有作深入的讨论，这次以超级马里奥的源代码为线索，我们一起来学习超级马里奥的实
Cocos2d-x CCControlPotentiometer之圆形音量button及特效
1. 圆形音量button事实上作者的本意应该是叫做“电位计button”。可是我觉得它和我们的圆形音量button非常像，所以就这么叫它吧~先看效果：好了，不多解释，本篇到此为止。（旁白： 噗。就这样结束了？）啊才怪~我们来看看代码：[cpp] viewplaincopyprint?CCContro
Cocos2d-x入门教程二简单的静态显示对象
原文链接：http://www.cnblogs.com/physwf/archive/2013/04/26/3043912.html为了进一步深入学习贯彻Cocos2d，我们将自己写一个场景类，但我们不会走的太远，凡是都要循序渐进，哪怕只前进一点点，那也至少是前进了，总比贪多嚼不烂一头雾水的好。在上一节中我们建
cocos2d-x中CCScale9Sprite的另一种实现
2019独角兽企业重金招聘Python工程师标准>>>cocos2d2.0之后加入了一种九宫格的实现，主要作用是用来拉伸图片，这样的好处在于保留图片四个角不变形的同时，对图片中间部分进行拉伸，来满足一些控件的自适应（PS: 比如包括按钮，对话框，最直观的形象就是ios里的短信气泡了），这就要求图
Cocos2d-x v2.2.2版本+Win7+VS2010环境搭建
原文链接：http://www.cnblogs.com/linji/p/3599478.html1.环境和工具准备Win7VS2010/2012，至于2008v2版本之后似乎就不支持了。 2.安装pythonv.2.0版本之前是用vs模板创建工程的，到vs2.2之后就改用python创建了。到python官网下载版本2.7.5的，然后
Ubuntu14.04+eclipse下cocos2d-x3.0正式版环境的搭建
环境:ubuntu14.04adt-bundle-linux-x86_64android-ndk-r9d-linux-x86_64cocos2d-x-3.0正式版apache-ant1.9.3python2.7(ubuntu自带)加入环境变量exportANDROID_SDK_ROOT=/home/yangming/adt-bundle-linux/sdkexportPATH=${PATH}:/$ANDROID_SDK_ROOTools/export
分别基于WIN32 API界面编程和Cocos2d-x实现的两个版本FlappyBird游戏
1开发背景游戏程序设计涉及了学科中的各个方面，鉴于目的在于学习与进步，本游戏《FlappyBird》采用了两个不同的开发方式来开发本款游戏，一类直接采用win32底层API来实现，另一类采用当前火热的cocos2d-x游戏引擎来开发本游戏。2需求分析2.1数据分析本项目要开发的是一款游
Cocos2d-x 开发小记二：控件
原文链接：http://www.cnblogs.com/linji/p/3599912.html//纯色色块控件（锚点默认左下角）CCLayerColor*ccc=CCLayerColor::create(ccc4(255,0,0,128),200,100);//渐变色块控件CCLayerGradient*ccc=CCLayerGradient::create(ccc4(255,0,0,
Cocos2d-x 开发小记一：基本动作
原文链接：http://www.cnblogs.com/linji/p/3599488.html//载入一张图片CCSprite*leftDoor=CCSprite::create("loading/door.png");leftDoor->setAnchorPoint(ccp(1,0.5));//设置锚点为右边中心点leftDoor->setPosition(ccp(240,160));/
买Cocos2d-x视频课程送纸质图书
为了答谢广大学员对智捷课堂以及关老师的支持，现购买51CTO学院关老师的Cocos2d-x课程之一可以送智捷课堂编写图书一本（专题可以送3本）。一、Cocos2d-x课程列表：1、Cocos2d-x入门与提高视频教程__Part22、Cocos2d-x数据持久化与网络通信__Part33、Cocos2d-x架构设计与性能优化内存优
‎Cocos2d-x 学习笔记(11.10) Spawn
Spawn让多个action同时执行。Spawn有多种不同的create方法，最终都调用了createWithTwoActions(FiniteTimeAction*action1,FiniteTimeAction*action2)方法。createWithTwoActions调用initWithTwoActions方法：对两个action变量初始化：_one=action1;_two=action2;如果两个a
quick-cocos2d-x-develop资源打包环境安装
需要环境：php,luajit.昨天在cygwin上安装php和luajit环境，这真特么是一个坑。建议不要用虚拟环境安装打包环境，否则可能会出现各种莫名问题。折腾了一下午，最终将环境转向linux。其中，luajit的安装脚本已经在quick-cocos2d-x-develop/bin/中，直接luajit_install.sh即可。我的lin
Cocos2d-x 3.0心得01－图片载入与混合模式
v3.0相对v2.2来说，最引人注意的。应该是对触摸层级的优化。和lambda回调函数的引入（嗯嗯，不枉我改了那么多类名。话说，每次cocos2dx大更新。总要改掉一堆类名函数名）。这些特性应该有不少人研究了，所以今天说点跟图片有关的东西。v3.0在载入图片方面也有了非常大改变，仅仅只是
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot