2.5　Hello Cocos2d-JS

至此开发环境基本上搭建完成了，现在就真正创建一个Cocos2d-JS项目来一睹它的真实面貌吧，开启程序员必备的HelloWorld。

2.5.1　创建工程

使用cocos console命令行来创建一个工程，创建项目的命令为cocos new，运行如下命令来查看创建项目命令所需要带的参数以及它们的含义，运行过程如图2-15所示。

根据命令帮助，可以大致清楚cocos new所需要的参数，接下来创建一个HelloWorld工程，使用如下命令：

其运行结果如图2-16所示。

通过cocos new命令就能创建一个名叫HelloWorld的Cocos项目，项目包名是com.hjc. demo，开发语言为JS。

2.5.2　项目目录

接下来用WebStorm打开所创建的项目，单击Open按钮，并选择HelloWorld文件夹，即可打开图2-17所示的主界面。

在图2-17中可以看到创建好的项目的目录，项目目录包含用户所需要的一切内容，目录文件夹或文件的内容代表的含义及其作用如表2-2所示。

其中，需要重点介绍一下project.json配置文件，内容如下。

各属性的含义如下。

（1）project_type：项目语言类型。

（2）debugMode：调试级别，默认为1。

• 0：不显示任何调试信息。
• 1:cc.error、cc.assert、cc.warn、cc.log在终端的打印信息。
• 2:cc.error、cc.assert、cc.warn在终端的打印信息。
• 3:cc.error、cc.assert在终端的打印信息。
• 4:cc.error、cc.assert、cc.warn、cc.log在Canvas的打印信息（Cocos2d-HTML5特有）。
• 5:cc.error、cc.assert、cc.warn在Canvas的打印信息（Cocos2d-HTML5特有）。
• 6:cc.error、cc.assert在Canvas的打印信息（Cocos2d-HTML5特有）。

（3）showFPS：在游戏窗口左下角是否显示绘制次数、渲染时间及帧率，默认为true。

（4）frameRate：期望帧率。

（5）noCache：是否让浏览器缓存页面。

（6）id:Web引擎Canvas元素id，仅Cocos2d-HTML5引擎使用。

（7）renderMode：引擎绘制模式，仅Cocos2d-HTML5引擎使用。

• 0：自动选择绘制模式，优先支持WebGL，不支持则采用Canvas绘制。
• 1：强制Canvas绘制。
• 2：强制WebGL绘制。

（8）engineDir:Cocos2d-HTML5引擎路径。

（9）modules：模块配置，游戏中需要引入的模块需要在此添加，例如物理引擎、扩展库等。

（10）jsList:JS源文件列表，项目的所有脚本文件都需要在此添加。

2.5.3　调试运行

创建完HelloWorld后对代码稍作修改，打开app.js，将helloLabel变量的参数“Hello World”修改为“Hello Cocos2d-JS”，将字号修改为50。

接下来就可以运行一下所创建的HelloWorld项目了，在正式打包部署之前都可以用浏览器在Web平台上直接运行看效果，真正到打包部署的时候再来具体调整各个平台之间的差异，由于Cocos2d-JS的跨平台兼容的特性，跨平台打包部署是非常容易的。简单调试可以用cocos run命令或WebStorm的JetBrains IDE Support插件联合Chrome浏览器进行。最终运行效果如图2-18所示。

1．cocos run命令调试

打开命令行终端，进入到项目的根目录下，输入命令cocos run，可以看到cocos run命令需要一个－p参数来确定运行的平台，选择Web平台就可以了，如图2-19所示。

运行cocos run命令后会自动打开Chrome浏览器，此时就可以看到如图2-18所示的运行效果。

2．WebStorm调试

在开发过程中，如果使用WebStorm IDE开发，那么调试就会方便很多。WebStorm是JetBrains公司旗下的一款JavaScript开发工具，被广大中国JS开发者誉为“Web前端开发神器”“最强大的HTML5编辑器”“最智能的JavaScript IDE”等。它与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。其强大之处就在于只要Chrome浏览器安装了JetBrains IDE Support插件，就能通过Chrome与WebStorm联调实时刷新看运行效果，这对于广大JS开发者来说是福音。

其配置需要如下几个步骤。

（1）调整WebStorm的Debugger为实时刷新，打开WebStorm的配置设置面板，在搜索栏中搜索Live Edit，选择Debugger的Live Edit，如图2-20所示。

（2）给Chrome浏览器安装JetBrains插件，JetBrains插件可以直接从Chrome浏览器的“获取更多扩展程序”入口去搜索，也可以通过其他渠道下载插件直接离线安装，安装完成后会出现图2-21所示的图标。

（3）全部配置完成后就可以直接启动调试、运行了，可以通过右上角的调试或运行按钮打开浏览器，也可以右击index.html文件，选择“运行”或“调试”命令，如图2-22所示。调试或运行成功后会弹出浏览器，可以看到如图2-18所示的最终运行效果。

2.5.4　各平台打包及部署

在项目开发完成后需要对游戏进行打包和部署，Cocos2d-JS是一个跨平台引擎，因此同样的代码可以在多个平台打包和部署，并且还能实现其他平台的代码与JS代码的交互。这里着重介绍3个最主流的平台，即iOS平台、Android平台和Web浏览器平台。

1．iOS

由于iOS平台的特殊性，打包和部署iOS平台的安装包需要在Mac OSX环境下进行，并且需要安装Xcode。直接打开前文提到的项目目录下的“frameworks/runtime-src/project. ios_mac”里面的HelloWorld.xcodeproj工程。

图2-23所示为打开并运行工程的结果，熟悉iOS编程的读者应该不会陌生，左边红框区域是iOS工程的oc原生代码的地方，若需要对原生代码进行修改可以在此进行（同理，mac目录是Mac的oc原生代码的地方），Cocos2d-JS的iOS工程和普通iOS工程基本一样，依然需要设置开发者账号等信息来打包，打包过程也与iOS原生工程一致。上面红框区域是选择运行或打包的设备，中间的红框区域则是iOS原生模拟器的运行效果。

2．Android

和iOS工程打包一样，Android工程打包需要Android的开发环境，前文在配置Cocos环境的时候已经配置好了Android SDK和Android NDK，未配置好的读者需要参照上文介绍再自行配置一下。

Android工程提供了两种IDE的工程，一种是使用Eclipse导入项目目录“frameworks/runtime-src”下的proj.android工程，另一种是使用Android Studio导入项目目录“frameworks/runtime-src”下的proj.android-studio工程，具体使用哪一个，根据个人开发环境而定，这里以Eclipse开发环境为例加以介绍。

首先需要给Eclipse配置Android开发环境，给Eclipse安装ADT插件（可以使用在线或离线安装方式），ADT插件的官方下载地址为“http://developer.android.com/sdk/installing/installing-adt.html”，装好ADT后可以在Android SDK Manager中下载几个Android版本的系统镜像，ADT装好之后再去配置中心配置好Android SDK的根目录，如图2-24所示。

配置好环境后导入Android工程，右击选择import→Android→Existing Android Code Into Workspace，然后选择proj.android目录导入。导入工程之后发现AppActivit.java文件有报错，查看发现是缺少依赖，还需要进行一些设置。

首先需要添加jsjavabridge目录为source folder, jsjavabridge是Java代码连接JS代码的桥接部分，添加方式为对jsjavabridge目录右击，选择Build Path→Use as Source Folder。

添加之后会发现jsjavabridge里面的代码有报错，其实是缺少jar包依赖，需要手动添加一下，将HelloWorld工程目录“frameworks/cocos2d-x/cocos/platform/android/java/libs”下的3个jar包添加到项目的Build Path中，具体操作方式为对项目右击，选择Build Path→Add External Archives，然后选择对应的3个jar包。如果觉得麻烦，也可以直接将这3个jar包复制到项目目录下，再添加进Build Path中。

在所有操作之后项目就没有报错了，这就算配置完成，接下来就可以在Java原生与JS代码之间自由切换了。当想要打包时，和原生Android项目的打包过程一样，可以用Eclipse的ADT插件在Android模拟器上运行、调试项目。

如图2-25所示，导入后的Cocos2d-JS工程是这样的界面，左边红框部分是项目目录，包含Android原生Java代码和依赖的库、资源等，中间的红框部分是代码编辑区域，上面的红框部分是运行、调试等按钮，下面红框部分是调试、运行的Console输出窗口。当然，在调试Cocos2d-JS项目时也可以使用ADT提供的DDMS调试工具。

3．Web

在Web平台部署运行相对来说就简单许多，因为Cocos2d-HTML5本身就是一个Web项目，只需将这个Web项目发布出去就可以了。需要用一个外部的Web服务器来发布这个Web项目，有很多Web服务器可以选择，例如Apache、Nginx、Tomcat、JBoss、Jetty、IIS等，其中对静态Web项目支持比较好的是Apache和Nginx。

Tomcat的发布方式有几种，可以复制Web项目到其webapps目录下，或者在conf文件中指定发布目录，再启动进程。Apache和Nginx都只需在其配置文件中配置好Web发布目录，再启动服务器进程，这样即可对外发布项目。IIS则是Windows环境下微软的Web服务器，通过可视化的操作即可创建发布目录。

以上操作都需要用户有一定的服务器知识才便于操作，然而有XAMPP这样的一站式集成Web服务器，集成了Apache、MySQL、PHP和Perl，通过可视化操作方便服务器建站的操作，这里以XAMPP为例简单说明一下。XAMPP的官方下载地址为“https://www. apachefriends.org/zh_cn/download.html”，里面包含了Windows、Mac和Linux的版本。

其安装步骤很简单，跟着安装提示一直单击“下一步”按钮，直到安装成功。安装成功后打开XAMPP，可以看到如图2-26所示的主界面。

单击Open Application Folder，可以看到XAMPP的应用程序目录，其中的htdoc目录是它的Web服务发布目录。如果了解Apache的服务器配置，可以在配置文件中修改这个目录的位置，具体修改方式为修改httpd.conf文件的DocumentRoot后面的值，httpd.conf文件可以通过Manage Servers→Apache Web Server→Configure→Open Conf File打开。

用户可以将整个HelloWorld工程复制到XAMPP的Web服务发布目录下，然后启动XAMPP服务器，选择Manage Servers标签，接着对Apache Web Server单击Start按钮即可，如果看到running字样，则说明启动成功。如果启动不成功，可以查看一下80端口是否占用，如果占用可以修改Apache服务器的启动端口或关闭正在运行80端口的服务器，如果仍然不能启动成功，查看一下本机是否已经运行了一个Apache服务器。

启动完成后就可以在浏览器中运行查看最终效果了，如图2-27所示。

由于笔者使用了默认的80端口，所以可直接输入“http://localhost/HelloWorld”运行，如果设置了其他端口，需要在localhost后面加上冒号和端口号。

4．cocos console命令行

上面3个小节介绍了如何使用对应平台的IDE来发布和部署，细心的读者可能会发现其实Cocos Console已经提供了一系列的打包和部署命令（以android工程为例）：

其中，打包后的工程会出现在HelloWorld根目录的publish目录下，值得一提的是，不同的平台打包步骤仍然有所不同。

• Android平台打包需要keystore签名文件，可以用keytool工具来生成。
• iOS平台上的cocos命令只能打包.app目录，不能打包ipa，需要用xcrun命令来打包ipa，并且需要证书和签名等信息。
• Web平台最好发布使用cocos命令打包之后的项目，而不是原来的开发目录，打包后的Web项目会对JS代码进行加密和压缩。