Confusing Cocos2d-html5 games with ant one-step Compression

Author: Lu dingping David Lv

After developing the game with Cocos2d-html5, the next step is to package the file and then release it. next, we will explain how to pack the package step by step. before packaging, we must build an environment, as shown in the title. We use Ant for packaging. what is Ant? You can google it. To install ant first, you need to install jre, that is, the Java Runtime Environment or Java virtual machine. You can download the file at http://www.java.com/zh_cn/2012-7-16.

Download attachments (64.69
KB) the latest Version is Version 7 Update 5. Follow the prompts to install it step by step. If you have any questions, google it. after the installation, you can enter "java-version" in the command line to see the following similar information, which indicates that you have installed it. The next step is to install Ant ",

Then add the location of the ant bin directory to the end: set it. you can open the command line to check whether it is installed. Enter ant-version to see similar information. if you encounter any problems during installation, you can find related tutorials online. I will not explain it too much here. we also need the google compiler toolkit. You can download it at the following address: idea packages the game logic Code separately from the game engine. this situation is suitable for scenarios where you do not need to confuse game code. You only need to package scattered game logic files into a file to facilitate Browser Download. in this case, you only need to create a new build. xml, add the files you want to package to the list, and then execute the ant operation to complete the operation. the detailed steps are as follows:

1. generate build. you can use an existing build for xml files. modify the xml file to complete the preparation operation, this can save a lot of trouble, the Cocos2d-HTML5 development team has prepared the corresponding template for us, you can find the file in the tests directory. this file is a packaging template prepared by the cocos2d-html5 and also uses the file to package the test instance. the file content is relatively large. Let's take a look.

1. <? XML version = "1.0"?>
   
2. <Project name = "javascript compress project" basedir = "." default = "compile_test">
   
3. <Taskdef name = "jscomp" classname = "com. Google. Javascript. jscomp. Ant. compiletask"
   
4. Classpath = "$ {basedir}/../tools/Compiler/compiler. Jar"/>

Copy the Code to define some environment variables, such as basedir = ". "define basedir as the current directory, that is, build. XML directory. default = "compile_test" is used to specify the default task executed by ANT when the task is not specified. taskdef defines the settings of Google compiler. you do not need to modify others. You only need to modify classpath = "$ {basedir }/.. /tools/Compiler/compiler. jar "is enough. We have already recorded the Google compiler path, which will be useful now. here we use relative paths. If your directory structure is the same as above, you do not need to modify it. If so, you need to modify it so that ant can find compiler. JAR file. if the path is set incorrectly, the following message is displayed:

1. <Target name = "compile_test">
   
2. <Jscomp compilationlevel = "simple" Warning = "quiet"
   
3. Debug = "false" output = "cocos2d-html5-testcases.js">
   
4. <Sources dir = "$ {basedir}">
   
5. <File name = "Classes/AppDelegate. js"/>
   
6. <File name = "testbasic. js"/>
   
7. <File name = "testResource. js"/>
   
8. <File name = "Classes/tests/TouchesTest/Ball. js"/>
   
9. <File name = "Classes/tests/TouchesTest/Paddle. js"/>

Copy the Code <target name = "compile_test"> to define the name of the task target. this is what the previous default specifies. <jscomp compilationlevel = "simple" is used to define the compilation mode. Three modes can be specified: whitespace (remove blank lines and press enter, and merge the files into one file ), simple (for simple compilation, add useless code and change the local variable name on the basis of whitespace .), advanced (optimizing JS files during runtime will change the function name, which is equivalent to compression and obfuscation .) here we first use simple for compilation, and we will talk about how advanced works later. output = "cocos2d-html5-testcases.js"> specifies the location of the packaged file and the file name. <sources dir = "$ {basedir}"> used to define the JS file directory. You can specify the current directory or other directories. <file name = "classes/appdelegate. JS "/> specifies the file to be packaged. You can add sub-directory names to the file. the rest is to add all the files to be packaged to the file list.

2. use ant to generate the packaged file and edit the build. after XML, you can use the command line tool to package. first, switch the command line directory to build. run ant in the directory where XML is located. because compile_test is the default task we want to execute now, we only need ant. if the execution is successful, you will see a similar image: The file is packaged.

3. after the modified and loaded files are packaged, we no longer need to load so many files. you can load the engine file and game logic file. find cocos2d. JS to modify the type: CC. loadjs ('lib/Cocos2d-html5-canvasmenu-min.js '); CC. loadjs ('tests/cocos2d-html5-testcases.js '); this will change the original multiple files to load only two files. operation completed!

2. Merging the game logic code and the game engine into a single file. This packaging file will package the engine code and the game code together. Why cannot I package the game code logic in advanced mode separately? In advanced mode, all function names are obfuscated. If you only use advanced mode to package the game logic, the engine-related class names and function names in the game logic will be obfuscated, in this case, the class name cannot be found. the procedure is as follows:

1. Some information has been mentioned before the configuration of the build. xml file. Here we will talk about different places and areas to be aware.

1. <Target name = "compile_test_advanced">
   
2. <Jscomp compilationLevel = "advanced" warning = "quiet"
   
3. Debug = "false" output = "cocos2d-html5-testcases-advanced.js">
   
4. <Externs dir = "$ {basedir}/../cocos2d">
   
5. <File name = "cocos2d_externs.js"/>
   
6. </Externs>

The replication Code uses a different name: compile_test_advanced, which is used to distinguish it from the simple mode. The mode is set to advanced. compilationlevel = "advanced". Note that:

1. <Externs dir = "$ {basedir}/../cocos2d">
   
2. <File name = "cocos2d_externs.js"/>
   
3. </Externs>

Copy the code here to define the keywords to be excluded. Because the engine needs to exclude some keywords during obfuscation, this file is particularly introduced and already contains this file in the engine, you only need to reference the correct path. then there is the engine file list, and there is your game file. in the ready-made build. in the XML file, the engine file has been configured. You only need to change the following tests file to the game logic file you want to package.

2. modify cocos2d. after the JS file packs all the files into one file, it does not need to be loaded by file splitting. Therefore, you need to modify cocos2d. JS file. cocos2d-html5 Development Group has prepared the file, called cocos2d_single.js you can look at the file, you can also directly copy the file to your game directory. remember to go to build. add the file to the bottom of the XML file list. because this file is the entry to the game code, you must add it.

3. you can perform the ant package operation after performing the ant operation. at this time, we can't just enter the ant command, but add a parameter to add the task name in advanced mode. for example, ant compile_test_advanced displays the following similar information: in this way, the game files in advanced mode are packaged.

4. modify the reference of the HTML file to complete the packaging operation. as shown in the following figure: the packaging operation has been described in detail. please bear with me for many shortcomings. you are welcome to make a brick. thank you!