用TexturePacker将css图片合并到一个图片中 - zj831007的专栏 - CSDN博客
用TexturePacker将css图片合并到一个图片中
& & & &今天打开电脑，收到一封Andreas Loew发来的邮件，并给我发来了TexturePacker3.0和PhysicsEditor的License, 很是感动了一番，这两个工具可是我期待以久的，可惜现在资金有限，一直没舍得买，为了感谢Andreas Loew的慷慨，我以后得多写几篇这个工具的使用心得。
& & & &我目前从事前端开发工作，从毕业到现在，经历过很多公司，基本都是创业型的公司，这些公司在前端开发方面基本没有什么经验积累，当然进来的开发人页也没什么大牛之类的人物，今天只说css部分，其实我很早看到过各大网站都在使用css sprite技术，但当时我以为是用ps布局的，当时觉得这玩意用在css中，要是图片位置经常调整是多么恐怖的事件啊，后来发现有一工具compass可以将小图片生成一张大图，但由于没有可视化界面，在项目组中推广有点难度，有幸我们还有强大的TexturePacker这个工具，其实这工具使用相当简单，下面我就用一示例演示下生成css
sprite步骤。(csdn什么时候开始不能直接粘贴图片了，，shit !).
1，首先打开工具，界面很清晰，
& &2，点击add sprite图标：，添加图片路径,所有图片名都会显示在右边的Sprite列表中。
看看中间区域，是不是大图已经自动排列好了：
是的，还为了节省空间，有些图还自动旋转了，有木有，如果你不想旋转，取消息Allow rotation&这个选项就可以了，有很多参数可以调整，大家就根据自己的需要调整吧，下面我们展开Data Format下拉列表，选择css。
3，发布，点击, 在弹出对话框中，填写文件名及路径
4，保存，点击Save.
最终生成的css文件内容如下 ：
/* ----------------------------------------------------
created with
----------------------------------------------------
$TexturePacker:SmartUpdate:c58e626cabbc8a32e4c44838$
----------------------------------------------------
usage: &span class=&{-spritename-} sprite&&&/span&
replace {-spritename-} with the sprite you like to use
.sprite {display:inline- overflow: background-repeat: no-background-image:url(sprite_css.png);}
.shockedface2_empty {width:40 height:40 background-position: -86px -2px}
.shockedface2_full {width:40 height:40 background-position: -44px -48px}
.shockedface2_half {width:40 height:40 background-position: -2px -48px}
.wolfSpiderThumb {width:44 height:44 background-position: -2px -2px}
上面还列出了使用方法，作者做得真是细心啊，到此，我们就完成了css sprite的生成工作，怎么样，简单吧，赶紧下载一个试试吧：下载地址：
---------------------------------------------------------------------------
- The sprite sheet creator turns chaos into order
- Edit your physics shapes with ease
- Follow me on Twitter
---------------------------------------------------------------------------
我的热门文章
即使是一小步也想与你分享Pages: 1/4
主题 : 超过TexturePacker的合碎图工具更新了3.02！
级别: 新手上路
可可豆: 39 CB
威望: 34 点
在线时间: 29(时)
发自: Web Page
来源于&&分类
超过TexturePacker的合碎图工具更新了3.02！&&&
新版BindImage3.02更新了！      BindImage特点1.最优合并碎图到单张图片，比现在的Cocostudio,TexturePacker要小得多，节省不少内存和磁盘空间。2.默认支持xml和plist格式描述文件，用于Cocos2d或者Cocos2dx，包括其他引擎用的xml。3.支持生成PNG图片容量优化，尽可能的优化到最小，包括单独的批量优化容量。4.支持合成图还原到碎图，并还原中心点，不会有信息丢失。5.支持序列帧优化，移除多余类似帧，描述信息公用同张碎图。6.支持自定义格式，通过lua脚本回调，内有帮助信息。另外，有项目历史记录方便用户定向到文件夹。下面是对比图。
BindImage 245*223
TexturePacker 256*256[ 此帖被在 18:29重新编辑 ]
(1241 K) 下载次数:567
本帖最近评分记录: 共1条评分记录
级别: 新手上路
可可豆: 30 CB
威望: 20 点
在线时间: 84(时)
发自: Web Page
很好用谢谢LZ
级别: 新手上路
可可豆: 82 CB
威望: 62 点
在线时间: 449(时)
发自: Web Page
很好用&&十分感谢
UID: 300874
发帖: 2378
可可豆: 3131 CB
威望: 3189 点
在线时间: 1378(时)
发自: Web Page
不错的工具，楼主这是要干掉TexturePacker的节奏啊。。。目测是MFC开发的，楼主可以考虑一下QT，跨平台。Mac党也能使用。
级别: 侠客
可可豆: 184 CB
威望: 224 点
在线时间: 687(时)
发自: Web Page
太强大了。。。。。。
UID: 267887
可可豆: 634 CB
威望: 763 点
在线时间: 384(时)
发自: Web Page
厉害 果然每方面都需要专业的人去研究 楼主精神可嘉 点赞
级别: 侠客
UID: 295243
可可豆: 406 CB
威望: 291 点
在线时间: 468(时)
发自: Web Page
顶一个，好东西
级别: 新手上路
UID: 301646
可可豆: 110 CB
威望: 75 点
在线时间: 74(时)
发自: Web Page
建议LZ支持命令行
级别: 新手上路
UID: 234712
可可豆: 26 CB
威望: 24 点
在线时间: 64(时)
发自: Web Page
级别: 新手上路
可可豆: 39 CB
威望: 34 点
在线时间: 29(时)
发自: Web Page
回 7楼(yvhfnvj) 的帖子
好的，有时间改改。
Pages: 1/4
关注本帖(如果有新回复会站内信通知您)
苹果公司现任CEO是谁？2字 正确答案:库克
发帖、回帖都会得到可观的积分奖励。
按"Ctrl+Enter"直接提交
关注CocoaChina
关注微信 每日推荐
扫一扫 浏览移动版【玩转cocos2d-x之十二】plist解析工具：Anti_TexturePacker
我的图书馆
【玩转cocos2d-x之十二】plist解析工具：Anti_TexturePacker
原创作品，转载请标明：
之前拿了一些别人的图片素材，是用TexturePacker打包合成的，结果写程序的时候不知道每个合成前小png图的名字是什么，只能一个一个从plist文件中找，然后猜测对应的名字，再进行显示，如果不对，还要继续猜。。。坑爹啊，效率大大降低了，时间都耗在找图片名字上了。后来决定动手写一个解析plist的软件，就叫它Anti_TexturePacker吧。
Anti_TexurePacker软件基于VS 2008 MFC Dialog。
1.主要功能
（1）显示由TexturePacker打包的PNG图（导入或者拖拽）
（2）读取所有小图片的信息并显示在列表中
（3）随鼠标移动小图片名字实时显示
（4）右键点击小图片复制图片名到剪切板
（5）点击列表中小图片，图片自动高亮红框
（6）裁剪所有小图片到指定文件夹，并自动命名
2.效果演示
（1）鼠标移动到小图上，右上角显示当前位置所在的PNG名。单击小图，PNG名自动复制到剪切板。
（2）在列表中选择小图名字，软件自动显示红框。包裹该小图。
（3）点击裁剪PNG，弹出保存路径，选择保存路径确定，工作线程中处理PNG图的裁剪，PNG图裁剪成功后，目录下可以看到裁剪后的小图，按照原来名字命名。
（4）直接拖拽PNG，Plist，Pack进对话框，即可打开图像。
3.更新内容及下载地址
更新说明：
& 1.中文路径打开出错异常崩溃。
&&1.支持png，plist，pack中文名。
下载地址：
更新说明：
& 1.新增对.pack格式的支持。自动识别，优先解析plist。
下载地址：
更新说明：
& 1.新增支持5种Plist类型的解析。
& 2.支持plist的UTF-8编码（主要是针对中文图片名）。
& 3.支持PNG，BMP，GIF，JPEG和TIFF图片格式的解码。
& 4.裁剪自动生成目录（目录名为大图片名）。
& 5.联网检测升级。
& 1.异常PNG解析失败导致程序崩溃bug
& 2.文件名为多级目录导致裁剪失败bug
下载地址：
更新说明：
& 1.增加了直接拖拽PNG或者Plist进对话框即可打开的功能。
下载地址：
更新说明：
1.增加PNG剪裁为小PNG功能
2.修正列表显示
下载地址：
更新说明：
1.修复旋转属性显示错误bug
2.修复png相对路径无法显示bug
3.增加双击列表显示红框功能
4.简化操作
5.修改icon
下载地址：
4.本文内容追加记录
如有发现任何bug或无法解析的plist，请反馈到此贴，或者把plist和png发到我邮箱，我会及时回复。感谢~追加
我在CCSpriteFramCache的实现中了解到了为什么有的plist无法解析，主要是meta字段format来决定plist的不同，最近没有时间来改这个东西，而且缺少一些素材，如果有发现解析错误的，请将plist和png一同发给我，感谢。~追加
有童鞋希望解析pvr.zz+plist文件，其实用Texturepacker将pvr.zz文件打开，另存为png，然后png+plist的方式就可以使用Anti_Texturepacker解析了。 ~追加
TA的最新馆藏[转]&[转]&[转]&[转]&[转]&[转]&TexturePacker使用说明_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
TexturePacker使用说明
上传于|0|0|暂无简介
阅读已结束，如果下载本文需要使用1下载券
想免费下载本文？
定制HR最喜欢的简历
你可能喜欢cocos2d-x（26）
TexturePacker纹理打包打方法及技巧
首先我们先选取我的图片，比如说
这个人物大家应该都熟悉，robert &拳皇里面的人物 &对于不是可以无数放大招的摇杆游戏里 &是我们常用的人物 &哈哈 &好了进入正题吧
第二步 & 将图片放入TexturePacker &
第三步 修改左边 框里的东西
小伙伴们可以仔细对比一下 & 第二步和第三部的区别
1.Texture format & 可以是png 可以是pvr &根据相应的需求
2.Image format 默认是RGBA8888 & & 建议小伙伴们换成RGBA4444 &大家切换的时候可以看右下角的Size大小 &区别 & & &很大这就是内存优化的一特点 &&
3.在Geometry中 &的Max size &Width &Height & 我改成了512X512 & & &默认为 & 小伙伴们可以对比着改 选用&
& 合适的大小 & &看着右下角的Size
4.Size constraints &改为NPOT（Any size but power of 2）
上面的四点其实都相关内存优化的问题。
至于跟多的内存优化可以到&http://blog.csdn.net/qq_/article/details/
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：40440次
积分：1310
积分：1310
排名：千里之外
原创：83篇
转载：41篇
(9)(4)(5)(9)(1)(1)(7)(5)(3)(1)(3)(1)(6)(18)(47)(7)}