使用命令行工具提升cocos2d-x开发效率 之TexturePacker篇

TexturePacker是一个常用的制作sprite sheet的工具,它提供了很多实用的功能。

一般我们制作sprite sheet都是使用他的gui版本,纯手工操作,就像下面这张图示的一样。

刚开始我们的项目也是使用这种方式,但后来发现这种方式在开发中有很大的问题。随着图片的增多,sprite sheet会越来越多,为了生成这些sprite sheet需要做很多重复的手工劳动,再考虑到给Android平台打包的sprite sheet配置和iOS的不同,还有包括图片变更,配置优化等情况,算下来光打包sprite sheet就需要巨大的工作量,这还不考虑由于手工误操作造成的各种问题。

于是我就考虑,如何尽可能地减少打包sprite sheet的工作量,提高开发的效率。后来通过搜索,看到raywenderlich上一篇关于使用TexturePacker的文章,里面比较详细地介绍了TexturePacker的用法,特别还提到了它的命令行工具的使用以及这个工具和xcode的集成,这给了我想要的答案。

接下来讲一下我在项目中如何使用这个TexturePacker的命令行工具以及实用它的一些经验。

---------------------------------------正式开始的分割线-----------------------------------------

具体下载和安装TexturePacker以及它命令行工具的方法就不说了,上面提到的那篇文章里有较详细的说明。一些准备就绪后,我们可以在命令行里执行texturepacker命令,正常情况下你将会看到texturepacker的各种参数以及使用方法的说明,如下图:

接下来为了方便说明,我们新建一个测试工程foo,这里以quick-cocos2d-x-2.2.1-rc引擎创建的工程为例,创建好后目录结构如下图:

我们需要一个目录去保存所有原始的(未打到sprite sheet里的)图片,这里我们新建个目录叫originalImages,然后找些图片,丢进这个目录,并将他们分类到不同的文件夹,接着我们再创建一个目录,用来存放我们打包sprite sheet的脚本工具,我们起名叫tools,然后,我们再创建一个目录spriteSheets,用于存放打好的图片,最后,一般我们会将工程用到的图片存放到res/images目录里面,所以为了清楚,再创建一个这个文件夹,最终目录结构如下图所示:

接下来我说一下思路,我们的脚本工具存放在tools文件夹中,运行之后会去遍历originalImages这个目录下的所有文件夹,然后将每个文件夹中的图片打包为一个sprite sheet,这个sprite sheet名字与该文件夹的名字相同,接着将打包后的sprite sheet文件复制两份,一份存入spriteSheets目录中,另一份拷贝到我们程序使用图片的目录。

举例来说,当我运行脚本,会生成三份sprite sheet,分别是button.png,button.plist,checkBox.png,checkBox.plist,common.png,common.plist,他们分别会存放入spriteSheets目录和res目录下的images目录中(一般res目录下的images目录用来存放程序中用到的图片)。

---------------------------------------渐入佳境的分割线------------------------------------------

好的,一切准备就绪,我们开始说说这个脚本究竟要如何编写。

首先我们需要大概了解一下texturepacker的一些常用参数。

--format

指定sprite sheet的格式,默认是cocos2d,做cocos2d-x项目的话,就选cocos2d就行。可选的选项如下:

--texture-format

非常重要的一个属性,指定texture的格式。如果我们做iOS上的游戏,一般都会使用PVR,因为这个format的texture是专门为苹果iPhone和iPad的图形处理器优化的,而Android因为设备硬件多种多样,所以我们一般可能会选用png格式的,感兴趣的朋友可以自己搜索一下相关内容。这个参数如果不指定值的话texturepacker会尝试去根据sprite sheet的命名来自动选择一个合适的format。具体的选项如下:

--data

指定data文件的名字,也就是plist文件的名字

--sheet

sprite sheet文件的名字

--enable-rotation

是否开启旋转。一般我们会开启,为了更有效率的将散图打在一起。

--scale

在创建sprite sheet之前为所有散图做一个调整scale的操作,比如,如果是0.5,那么就把原始图都压缩一般大小,再存入sprite sheet中

--shape-padding

设置每个图片在sprite sheet中的间隔,默认是2

--max-size

sprite sheet的最大尺寸,你不可能将所有图片都打入到一张sprite sheet里,因为没有设备能支持这样的sprite sheet,于是需要限定大小:)。

--opt

这个是很重要的一个属性,决定了sprite sheet的像素格式,这个属性可以很大程序改变sprite sheet所占的内存。常用的选项如下:

--trim

为了能在一张sprite sheet加入更多的图片,裁减掉原始图片的空白像素,但是使用的时候还是按照图片的原始尺寸来使用。

--smart-update

智能更新,为了避免重复生成相同内容的sprite sheet,texturepacker会检查现存的sprite sheet和将要生成的sprite sheet内容是否相同,如果不同再生成新的,如果相同则不生成。

---------------------------------------激动人心的分割线------------------------------------------

好了,最后激动人心的时刻到了,我们上脚本!(脚本写的一般,多包涵)

 1 #! /bin/bash
 2 
 3 CURRENT_DIR=`dirname $0`
 4 
 5 # input paths
 6 IMAGE_DIR=$CURRENT_DIR/../originalImages
 7 
 8 # path that game proj use
 9 GAME_IMAGE_PATH=$CURRENT_DIR/../res/images
10 
11 # temporary path to place the sprite sheets
12 OUTPUT_PATH=$CURRENT_DIR/../spriteSheets
13 OUTPUT_PATH_PVR=$OUTPUT_PATH/packagedPVR
14 OUTPUT_PATH_PNG=$OUTPUT_PATH/packagedPNG
15 
16 # path of the texture packer command line tool
17 TP=/usr/local/bin/TexturePacker
18 
19 # $1: Source Directory where the assets are located
20 # $2: Output File Name without extension
21 # $3: RGB Quality factor
22 # $4: Scale factor
23 # $5: Max-Size factor
24 # $6: Texture Type (PNG,PVR.CCZ)
25 # $7: Texture format
26 pack_textures() {
27 
28     ${TP} --smart-update \
29         --texture-format $7 \
30         --format cocos2d \
31         --data "$2".plist \
32         --sheet ".$6 \
33         --maxrects-heuristics best \
34         --enable-rotation \
35         --scale $4 \
36         --shape-padding 1 \
37         --max-size $5 \
38         --opt $3" \
39         --trim \
40         $1/*.png 
41 
42 }
43 
44 # check the output path
45 
46 if [ -d $OUTPUT_PATH ];then
47     :
48 else
49     mkdir $OUTPUT_PATH
50 fi
51 
52 if [ -d $OUTPUT_PATH_PVR ]
53 then
54 55 56     mkdir $OUTPUT_PATH_PVR
57 58 
59 if [ -d $OUTPUT_PATH_PNG ]
60 61 62 63     mkdir $OUTPUT_PATH_PNG
64 65 
66 # do the job
67 for i in $IMAGE_DIR/*
68 do
69     if [ -d $i ] 
70     then
71         spriteSheetName=`basename $i`
72         pack_textures $i $OUTPUT_PATH_PNG/$spriteSheetName 'RGBA8888' 1 2048 'png' "png"
73         pack_textures $i $OUTPUT_PATH_PVR/$spriteSheetName 'RGBA8888' 1 2048 'pvr.ccz' "pvr2ccz"
74     fi
75 done
76 
77 # cp them to the game proj image path
78 
79 cp -f $OUTPUT_PATH_PVR/* $GAME_IMAGE_PATH

将脚本的内容保存到一个文件中,命名后把后缀改为command,比如我是这个样子的:

然后记得在命令行里改一下脚本的权限,最后双击一下脚本,新鲜的sprite sheets就打包出来了,如果有什么图片的改动,只需要修改originalImages这个目录下的图片,然后双击一下脚本,新的sprite sheet就生成好了,再也没有了无聊烦人的手工劳动,向TP的GUI说再见吧!是不是很爽?:)

----------------------------------------最后的分割线-----------------------------------------

最后简单说一下在脚本里我们做的事情:

在脚本中我们针对originalImages里面每一个文件夹中的图,生成了两份sprite sheet,这两份唯一的区别是一份是pvr2ccz格式的,一份是png格式的,其他的属性都相同:像素格式RGBA8888,scale为1,最大尺寸为2048*2048。在生成完成后,将所有的sprite sheet拷贝到了spriteSheets这个文件夹,并把其中pvr格式的sprite sheet拷贝到了我们工程使用的图片目录里。

OK,大概就是这样子,那个脚本可以根据项目具体需求去改,我写的很简单,也没加什么log,这个其实完全可以写得更智能话写,这就留给各位去发挥了。

----------------------------------一些更新和补充----------------------------------------

最近有园子里的朋友和我交流了几个问题,我觉得其中有2个挺不错的,具体交流的内容在本文的留言里面有,不过为了方便大家查阅,我把它们整理(其实主要是截图,我是有多懒=。=)了一下,整合到这个篇文章中:

问题1:来自园友tanyongdahaoren

答案:

这个问题回答的比较明确,我就不过多解释了:)

(这里忍不住吐槽一下博客园的插入代码功能,在回复里面没有bash的选项不说,在文章中bash的代码明显没有按照bash的脚本着色,“/*”竟然按照注释理解了,真心汗一个)

问题2:来自园友sousou123

这个园友主要的想法是考虑如何用TexturePacker把单张的png图片转换成pvr格式的图片。我一开始建议它用苹果官方的工具texturetool,但后来我意识到,这个texturetool相对TexturePacker有很多不方便的地方,比如它对原始图片的格式有硬性要求,必须至少满足:

  • Height and width must be at least 8.
  • Height and width must be a power of 2.
  • Must be square (height==width)

而TexturePacker虽然可以做png到pvr转换的事情,但是毕竟设计目的是打包sprite sheet用的。

不过经过和他的讨论,最终我给出了TexturePacker的解决方案:

这段脚本所做的事情是遍历images这个文件夹下的所有png图片,然后对每一张小图片都做一次打包操作,打包后的图片格式为pvr,这就相当于对每一张图片做了一次格式的转换:从png到pvr。这个做法虽然不同于TexturePacker的设计初衷,但毕竟是可行的,而且很方便。

这里要注意一点,我们相对于之前打包的脚本多增加了一个参数:--size-constraints

这个参数非常关键,它决定了最终生成的sprite sheet的尺寸是否会受POT(Power Of Two)格式的限制。一般情况下我们生成sprite sheet的尺寸都是宽高相等,并且都是2的N次方。而对我们现在这个转换图片格式的需求,这个限制就多余了,因为我们肯定希望原始图片多大尺寸,最终转换得到的图片就是多大尺寸,所以这里我们设置这个参数的值为AnySize。

--size-constraints AnySize

不得不说TexturePacker这个工具的功能真的很强大,作者考虑问题非常得全面~

这个参数在GUI里面在这里:

还有一点小问题是,对于每一个sprite sheet,都会需要生成一个data文件,这里我们不需要这个data文件,所以在参数里面我们就随便叫了一个dummy.plist:)其他的参数你们可以按需修改。

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

相关推荐


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