[Cocos2d-html5] 使用Ant一步一步压缩混淆Cocos2d-html5游戏

本帖最后由 陈升想Nero 于 2012-7-16 22:31 编辑 作者：吕定平 David Lv 用 Cocos2d-html5开发游戏完成之后,下一步就是将文件打包然后发布了. 下面将会一步一步的讲解如何进行打包. 在进行打包操作前,我们必须要搭建好环境,如标题所示,我们是使用Ant进行打包的. Ant是什么?大家可以去google一下. 要将ant首先需要安装jre,就是Java运行环境或者说Java虚拟机.大家可以到 http://www.java.com/zh_CN/去下载 现在最新的版本是Version 7 Update 5,根据提示一步一步的进行安装,有不清楚的可以google一下. 安装好之后,你可以在命令行下输入:java –version 看到下面类似的信息就说明你已经安装好了: 下一步是安装Ant,大家可以到 http://ant.apache.org/bindownload.cgi去下载最新的Ant. Ant是一个工具,不需要进行安装,只要把文件解压出来,然后将文件夹路径加入到环境变量的Path变量中就可以了.如下图所示: 找到Path变量点击”编辑”, 然后在后面加入ant 的bin 目录所在位置: 这样就设置好了.可以打开命令行看一下是否装好了,输入:ant –version 应该会看到类似的信息. 如果在安装上遇到什么问题,你可以在网上找一找相关教程.我这里就不作太多的讲解了. 我们还需要google compiler工具包,大家可以到下面的地址去下载: http://closure-compiler.googlecode.com/files/compiler-latest.zip 不过,cocos2d-html5引擎包已经将该文件包含进了压缩包里.你可以到tools/compiler文件夹下找到.你需要记住这个文件的目录,因为在后面的步骤中需要用到该路径. 工具已经安装设置好了,那么就让我们回归正题. Cocos2d-HTML5一般的发布方式分为两种: 一、 将游戏逻辑代码与游戏引擎分开打包. 这种情况适合于不需要对游戏代码进行混淆的需求,只需要将分散的游戏逻辑文件打包进一个文件,以便于浏览器下载. 这种情况下,你只要新建一个build.xml,将你要打包的文件加入列表,然后执行ant操作就可以能完成操作了.详细步骤如下: 1. 生成build.xml文件 大家可以用一个现成的build.xml文件进行修改来完成配制操作,这样可以省事很多,Cocos2d-HTML5开发组已经为我们准备好了相应的模板,你可以在tests目录下找到该文件.该文件是cocos2d-html5准备的打包模板,同时也使用文件对测试例进行打包.文件内容比较大,我们慢慢来看. <?xml version="1.0"?> <project name="Javascript compress project" basedir="." default="compile_test"> <taskdef name="jscomp" classname="com.google.javascript.jscomp.ant.CompileTask" classpath="${basedir}/../tools/compiler/compiler.jar"/> 复制代码 这一部分用于定义一些环境变量,如basedir="." 定义basedir为当前目录,也就是build.xml所在目录. default="compile_test" 用于指定ant在不指定执行任务时所执行的默认任务. Taskdef这一段是定义google compiler的设置.其他的不用修改,只需要修改classpath="${basedir}/../tools/compiler/compiler.jar"就可以了,前面已经让大家记录了一下google compiler的路径,现在就要派上用场.我们这里是使用相对路径,如果你的目录结构与上面一样,那么就不需要修改,如果修改了,你就需要修改一下,让ant能找得到compiler.jar这个文件就可以了. 如果路径设置不对就会出现下面的提示信息: 接下来看下面的内容: <target name="compile_test"> <jscomp compilationLevel="simple" warning="quiet" debug="false" output="cocos2d-html5-testcases.js"> <sources dir="${basedir}"> <file name="Classes/AppDelegate.js"/> <file name="testbasic.js"/> <file name="testResource.js"/> <file name="Classes/tests/TouchesTest/Ball.js"/> <file name="Classes/tests/TouchesTest/Paddle.js"/> 复制代码 <target name="compile_test">定义了任务目标名称.前面的default指定的就是这个. <jscomp compilationLevel="simple" 用于定义编译模式,有三种模式可以指定:whitespace(去除空白行和回车,并把文件合并成一个文件),simple(进行简单编译,在whitespace基础上加入了清除无用代码,改变局部变量名等.),advanced(对js文件进行运行时优化,会改变函数名称,相当于压缩和混淆了.)我们这里先用simple进行编译,在后面的会讲advanced会如何操作. output="cocos2d-html5-testcases.js">用于指定打包后的文件放到哪里,取什么文件名.<sources dir="${basedir}">用于定义js文件目录,可以指定当前目录或其他目录. <file name="Classes/AppDelegate.js"/>用于指定要打包的文件,可以在文件中加入子目录名称等. 剩下的事就是将需要打包的文件都加入到file列表中了. 2. 使用ant生成打包后的文件 编辑好build.xml之后,就是用命令行通过ant工具进行打包操作了. 首先将命令行目录切换到build.xml所在目录 然后执行ant,就可以了.由于我们的默认任务是compile_test就是我们现在想要执行的任务,所以只需Ant就行了.执行顺利的话会看到下面类似的画面: 那么,文件就打包好了. 3. 修改加载文件 打包好了之后,我们就不再需要加载那么多文件了.需要加载引擎文件和游戏逻辑文件就可以了.找到cocos2d.js,进行类型的修改: cc.loadjs('lib/Cocos2d-html5-canvasmenu-min.js'); cc.loadjs('tests/cocos2d-html5-testcases.js'); 这样就将原来的多个文件改成只加载两个文件了. 操作完成! 二、 将游戏逻辑代码与游戏引擎合并打包到一个文件中 这种打包文件会将引擎代码与游戏代码一起打包,为什么不能用高级模式单独打包游戏代码逻辑呢?高级模式下会混淆所有的函数名称,如果只用高级模式打包游戏逻辑,所以游戏逻辑中的引擎相关的类名和函数名都会被混淆,这样就会出现找不到类名的情况. 具体步骤如下: 1. 配置build.xml文件 前面已经讲了一些信息,我们这里讲不同的地方以及需要注意的地方 <target name="compile_test_advanced"> <jscomp compilationLevel="advanced" warning="quiet" debug="false" output="cocos2d-html5-testcases-advanced.js"> <externs dir="${basedir}/../cocos2d"> <file name="cocos2d_externs.js"/> </externs> 复制代码 用了一个不同的名称: compile_test_advanced,用于与simple模式相区别. 然后模式设置为advanced. compilationLevel="advanced" 需要注意的是: <externs dir="${basedir}/../cocos2d"> <file name="cocos2d_externs.js"/> </externs> 复制代码 这里用于定义需要排除的关键字,由于引擎需要在混淆时将某些关键字排除在外,特别引入了该文件,在引擎中已经包含了该文件,你只需要引用到正确的路径就可以了. 然后就是引擎的文件列表,还有就是你的游戏文件.在现成的build.xml文件中,前面已经设置好了引擎的文件,你只需要将后面的tests文件修改成你要打包的游戏逻辑文件就可以了. 2. 修改cocos2d.js文件 将所有文件打包进一个文件里之后,也就不需要再分文件加载了,所以需要修改cocos2d.js文件.cocos2d-html5开发组也已准备好了该文件,叫做 cocos2d_single.js你可以看一下该文件,也可以直接复制该文件到你的游戏目录下.记得在build.xml文件列表最下面加入该文件就可以了.因为该文件为游戏代码的入口,所以一定要加. 3. 执行ant操作 下面就可以进行ant打包操作了.这时,我们不能只输入ant命令了,还要加一个参数,将高级模式的任务名称加进去.如: ant compile_test_advanced 这时就会出现下面类似的信息: 这样就打包好了高级模式下的游戏文件了. 4. 修改html文件引用 下面修改一下html文件的引用就完成打包操作了.如下: 上面已经对打包操作进行了详细的讲解,有许多不足的地方还请多多包涵.欢迎大家拍砖. 谢谢大家!