第 2 章 Hello World

第 2 章 Hello World

古语有云:“工欲善其事,必先利其器。”唯有配备好了装备,方可上阵杀敌。学习Cocos2d-JS游戏引擎,亦是如此。本章将讲解Cocos2d-JS在各平台下的环境搭建、Hello World解析以及Cocos DevTools工具等。

本章内容:

  • Cocos Console

  • 创建、编译和运行工程

  • HelloWorld的目录结构

  • 项目在Web和Native上的启动流程

  • 项目在各平台下的打包以及部署

  • js-tests测试工程

  • 为《保卫萝卜2》项目做准备

  • 实例——利用Cocos DevTools学习Cocos2d-JS

2.1 Cocos Console

Cocos Console是Cocos2d-x引擎下的一个命令行工具,它用来管理Cocos工程,其中包含创建、运行、编译、调试以及打包项目等。

Cocos Console位于引擎包cocos2d-x/tools/cocos2d-console目录下,通过运行引擎包目录下的setup.py脚本即可安装。在安装的过程中,Cocos Console需要开发者提供Android NDK、Android SDK和Apache ANT的文件路径。另外,Cocos Console是一个采用Python语言编写的跨平台脚本工具,所以在安装Cocos Console之前,需要先安装好Python。

2.1.1 安装Python

在Mac OS X中,操作系统本身自带了Python,而在Windows操作系统中,Python则需要我们自行下载并安装,其下载地址为:https://www.python.org/downloads/index.html。若你的Mac OS X系统中没有Python,也可通过此地址下载安装。下载至Mac OS X和Windows上的安装包分别是一个.pkg或者.msi文件,例如我下载的是python-2.7.10-macosx10.6.pkg和python-2.7.10.msi文件,如图2-1所示。

{%}

图 2-1 Python在Mac OS X(左)和Windows上的安装包(右)

1. 在Mac OS X 上安装Python

在Mac OS X上,Python的安装较为简单,双击打开python-2.7.10-macosx10.6.pkg文件,然后一直点击“继续”按钮,即可完成安装。

2. 在Windows上安装Python

在Windows操作系统中,Python的安装步骤可分如下两步。

(1) Python安装:双击python-2.7.10.msi文件将其打开,将Python安装在指定磁盘路径下,这里我将Python安装到C:\Python27。

(2) 环境变量配置:当Python安装成功后,还需要配置系统环境变量,具体步骤如下。

① 右击“我的电脑”,从打开的快捷菜单中选择“属性”菜单。

② 此时会打开“属性”对话框,从中选择“高级系统设置”选项卡。

③ 点击“环境变量(N)...”按钮,打开“环境变量”对话框。

④ 从“系统变量(S)”列表框中选择“ path”,然后点击 “编辑(I)...” 按钮。

⑤ 在变量值的最后输入Python的安装路径,并在路径前面加上一个分号,例如;C:\Python27,这是因为每个环境变量之间需要用分号隔开。

⑥ 点击“确定”按钮关闭窗口。至此,Windows上的Python安装成功。

3. Python验证

在Mac OS X下,可以打开终端(Windows中为命令行程序),输入python --version。注意,version之前为两个杠(-),若出现如图2-2或图2-3所示的界面,便说明Python安装成功。

图 2-2 Mac OS X下Python验证

{%}

图 2-3 Windows下Python验证

说明 本书撰写时,setup.py脚本采用Python 2.7编写,并不支持Python 3,所以本书在Mac OS X上采用Python 2.7.10的64位版本。在Windows上,选用Python 2.7.10的32位版本。

2.1.2 Android环境配置

当安装好Python之后,你便可以开始准备Android相关的软件包了。当然,若你不需要支持Android,除了Apache Ant之外,其余步骤可以跳过,不必配置。Android所需的相关软件包如下所示。

当下载好以上所需要的依赖后,便可以正式安装Cocos Console了。此时打开终端(Windows下为命令行程序),进入Cocos2d-x引擎目录下,然后再运行setup.py脚本,相关命令如下:

1  cd /Users/Jeff/Documents/Cocos/cocos2d-x
2  python setup.py

其中,Jeff为笔者的用户名。在读者的电脑上,以读者的用户名为准。然后根据提示,将Cocos Console所需的文件路径拖曳进去,最后根据末尾行提示进行对应的操作。例如,在Mac OS X上应该再运行如下命令:

1  source /Users/Jeff/.bash_profile

而在Windows操作系统中,则重启命令行程序即可。但是实际上,在Mac OS X上,也需要重新启动终端程序。另外,值得注意的是,Apache Ant路径需要指定到bin文件夹下。Mac OS X和Windows操作系统上Cocos Console的安装过程分别如图2-4和图2-5所示。

{%}

图 2-4 Mac OS X下Cocos Console的安装过程

注意 在Mac OS X上将文件夹拖曳进去时,路径的末尾会有一个空格,应将空格删除。

{%}

图 2-5 Windows下Cocos Console的安装过程

此时,Cocos Console安装成功。若要卸载Cocos Console,则Mac OS X用户可删除/Users/用户名/下.bash_profile文件中对应的值,而Windows用户只需删除对应的系统环境变量值即可。

2.2 创建、编译和运行工程

当Cocos Console安装完毕后,便可通过Cocos Console创建Cocos2d-JS工程,具体有如下几种方式:

1  // 创建一个名为projectName,并同时包含Cocos2d-HTML5和Cocos2d-x JSB的项目
2  cocos new projectName -l js
3  // 创建一个名为projectName,且仅含Cocos2d-HTML5的项目, --no-native表示不需要支持Native平台(iOS、Android、Mac、Windows等),仅支持浏览器即可
4  cocos new projectName -l js --no-native
5  // 在桌面上创建一个名为projectName的项目
6  cocos new projectName -l js -d ./Desktop
7  // 在桌面上创建一个名为projectName的项目,并设置为竖屏
8  cocos new projectName -l js -d ./Desktop --portrait

此外,亦可通过如下命令在桌面上创建一个名为HelloWorld的工程:

1  cd ./Desktop
2  cocos new HelloWorld -l js

其中,-l表示采用的语言,可选值为cpplua以及js。运行命令之后,便可在桌面上看到HelloWorld文件夹。图2-6为HelloWorld工程的创建过程。

{%}

图 2-6 Cocos Console创建工程的过程图

当项目创建完毕后,可以通过下列命令将项目运行在浏览器中,效果如图2-7所示:

1  cd ./Desktop/HelloWorld
2  cocos run -p web

{%}

图 2-7 运行在浏览器上的HelloWorld工程

除创建命令外,Cocos Console还为工程提供了运行、编译等命令,具体如下:

1  // 运行在指定的平台上
2  cocos run -p web|ios|android|mac|win32
3  // 将项目工程打包到指定的平台上
4  cocos compile -p web|ios|android|mac|win32 -m release

值得说明的是,若发布在Web平台上,可添加--advanced参数,它表示使用Closure编译器的高级模式编译JS文件,这将获得更高的压缩率,但是有出现bug的风险,请读者自行斟酌使用。若出现bug,可参考https://developers.google.com/closure/compiler/docs/api-tutorial3解决。另外,Cocos Console提供了相关的help指令,方便开发者查询Cocos Console相关的指令。下面举几个help指令的例子,其中help可用字母h替代:

1  cocos new --help
2  cocos run --help
3  cocos compile --help

2.3 HelloWorld的目录结构

此时,虽然基于Cocos2d-JS的HelloWorld工程创建完毕,并且也成功地运行在浏览器上,但是读者对HelloWorld工程可能还比较陌生,并不知道每个文件夹和文件是做什么的,也不知道项目是如何启动的。接下来,我将带大家走进Cocos2d-JS的HelloWorld世界。

打开刚刚创建好的HelloWorld工程,可以看到其目录结构如图2-8所示。

{%}

图 2-8 HelloWorld目录结构

图2-8中有4个一级文件夹目录,一个.html文件、一个.json文件以及多个.js脚本等。表2-1为目录结构的详细介绍。

表2-1 目录结构

目录或文件名

内容简介

CMakeLists.txt

Cocos Console编译时所依赖的文件

frameworks

包含Web引擎和Native引擎

—cocos2d-html5

Cocos2d-HTML5游戏引擎

—cocos2d-x

Cocos2d-x游戏引擎

—runtime-src

各平台的项目工程文件,包含iOS、Mac OS X、Android以及Windows等

—index.html

Web工程的主页面,其主要内容和职责如下。
• 包含用于显示游戏场景的canvas元素。
• 引入用于引擎初始化和加载的引擎脚本:CCBoot.js。
• 引入游戏启动的入口脚本:main.js。
• 包含一些适配移动端浏览器页面的meta元素

—main.js

游戏入口文件,其中包含游戏初始化代码以及启动代码

—manifest.webapp

热更新配置文件

—project.json

工程配置文件

publish

该目录初始状态下不存在,当工程以发布模式打包后,会创建该文件夹并保存对应平台的发布包

Runtime

该目录初始状态下不存在,用来存储调试模式打包的工程执行文件

res

项目资源文件夹,用来存储所有图片、音频、字体以及动画等资源

—HelloWorld.png

默认资源图片

—loading.js

浏览器上页面启动的loading效果

src

项目脚本文件夹,用来存储游戏的所有JavaScript代码

—app.js

项目代码

—resource.js

资源的全局变量定义

其中,project.json为项目配置文件,其内容如下所示:

1  {
2      "project_type": "javascript",
3      "debugMode" : 1,
4      "showFPS" : true,
5      "frameRate" : 60, "noCache" : false,
6      "id" : "gameCanvas",
7      "renderMode" : 0,
8      "engineDir":"frameworks/cocos2d-html5",
9      "modules" : ["cocos2d"],
10     "jsList" : [
11         "src/resource.js",
12         "src/app.js"
13     ]
14 }

这些属性影响着整个Cocos2d-JS项目,一些属性的背后更是深藏功与名。各属性的意义如下。

  • project_type:项目类型。

  • debugMode:表示程序的调试级别,默认值是1,可选值为0到6。

    • 0:不显示任何调试信息。

    • 1cc.errorcc.assertcc.warncc.log在调试终端中打印信息,这是默认值。

    • 2cc.errorcc.assertcc.warn在调试终端中打印信息。

    • 3cc.errorcc.assert在调试终端中打印信息。

    • 4cc.errorcc.assertcc.warncc.log在canvas上显示信息,这是Cocos2dHTML5引擎独有的功能。这在微信开发上是一个非常有用的功能。

    • 5cc.errorcc.assertcc.warn在canvas上显示信息,这是Cocos2d-HTML5引擎独有的功能。

    • 6cc.errorcc.assert在canvas上显示信息,这是Cocos2d-HTML5引擎独有的功能。

  • showFPS:若其值为true,则游戏窗口左下角会显示绘制函数调用次数、渲染时间以及帧率。默认取值为true,项目打包上线时,应将其设置为false

  • frameRate:设置期望帧率。游戏中的实际帧率会取决于游戏每帧消耗时间和运行平台等条件,期望帧率会保证游戏运行帧率不会超过期望帧率,并尽力运行在期望帧率上。

  • noCache:设置是否让浏览器缓存html页面。

  • id:Web引擎页面中canvas元素的id,仅服务于Cocos2d-HTML5引擎。

  • renderMode:引擎绘制模式,仅服务于Cocos2d-HTML5引擎,在Native上无效,其值的可取范围为0~2,表示的意义如下。

    • 0:由引擎自动选择绘制模式,遵循“择优选择”的理念,即若支持WebGL,则优先考虑使用WebGL绘制,否则采用canvas绘制。

    • 1:强制使用canvas绘制模式。

    • 2:强制使用WebGL绘制模式,但是实际上WebGL仍然可能会在一些移动浏览器上被忽略而自动使用canvas绘制模式。

  • engineDir:Cocos2d-HTML5引擎路径,仅在debug模式下有效,保持默认值即可。如果采用Cocos2d-JS Lite版开发游戏,则此字段可以忽略。

  • modules:模块配置。可将游戏中需要引入的模块添加到此数组中,例如游戏中需要Chipmunk物理引擎支持,则应该在此数组中添加chipmunk字符串。此配置仅服务于Cocos2d-HTML5引擎,当Cocos Console在发布模式下编译生成项目时,会根据modules中所包含的模块进行打包。所以,modules应当保持精简,按需取值,避免打出的包中引入了没有用到的模块,增大了游戏脚本的大小。关于存在哪些模块以及每个模块的定义,可以参考frameworks/cocos2d-html5/modulesConfig.json文件。

  • jsList:开发者的JS脚本游戏逻辑代码列表,游戏中所依赖的脚本都应该放入这个列表中。此外,应当注意这些JS文件的相互依赖关系以及加入的先后顺序。

2.4 项目在Web和Native上的启动流程

Cocos2d-JS是一个跨浏览器和原生平台的游戏引擎,在对应平台上的启动流程自然也有所不同。

1. Web

在Web上,index.html生成canvas,并加载CCBoot.js文件,然后CCBoot.js读取project.json文件,从而预加载resource.js以及jsList中所有的.js文件。到此,游戏中所有的代码文件被加载完毕。随后,index.html又引入main.js文件,最终main.js启动了游戏。整个过程的代码如下,启动流程图如图2-9所示:

1  <body style="padding:0; margin: 0; background: #000;">
2  <script src="res/loading.js"></script>
3  <canvas id="gameCanvas" width="800" height="450"></canvas>
4  <script src="frameworks/cocos2d-html5/CCBoot.js"></script>
5  <script cocos src="main.js"></script>

{%}

图 2-9 Cocos2d-JS游戏在浏览器上的启动流程

2. Native

在Native中,Cocos2d-JS工程的启动流程相对简单一些。打开HelloWorld/frameworks/runtime-src/Classes/AppDelegate.cpp文件,可以在AppDelegate类的applicationDidFinishLaunching函数中看到如下代码:

1  bool AppDelegate::applicationDidFinishLaunching(){
2      // 导演初始化
3      auto director = Director::getInstance();
4      auto glview = director->getOpenGLView();
5      if(!glview) {
6          #if(CC_TARGET_PLATFORM == CC_PLATFORM_WP8) || (CC_TARGET_PLATFORM == CC_PLATFORM_WINRT)
7              glview = cocos2d::GLViewImpl::create("HelloWorld");
8      #else
9          glview = cocos2d::GLViewImpl::createWithRect("HelloWorld", Rect(0,0,900,640));
10     #endif
11         director->setOpenGLView(glview);
12     }
13     director->setAnimationInterval(1.0 / 60); // 帧率设置
14     // 获取脚本引擎(SpiderMonkey)单例对象
15     ScriptingCore* sc = ScriptingCore::getInstance();
16     sc->addRegisterCallback(register_all_cocos2dx);
17     sc->addRegisterCallback(register_cocos2dx_js_core);
18     sc->addRegisterCallback(jsb_register_system);
19     // ......
20     sc->start();
21     sc->runScript("script/jsb_boot.js"); // 运行jsb_boot.js脚本
22     // ......
23     ScriptEngineProtocol *engine = ScriptingCore::getInstance();
24     ScriptEngineManager::getInstance()->setScriptEngine(engine);
25     ScriptingCore::getInstance()->runScript("main.js");
26     return true;
27 }

在第21行代码中,脚本引擎运行jsb_boot.js脚本,此脚本中同样读取project.json配置文件,然后在第25行中运行main.js文件,从而进入游戏。

说明 Native即为原生操作系统平台,例如iOS、Android、Mac OS X等。总之,在Cocos2d-JS中,除了浏览器外,都可以称为Native。

2.5 项目在各平台下的打包以及部署

在游戏开发的过程中,可能需要和Objective-C或者Java语言交互(参见第13章),这就需要你在对应的开发工具中打开Cocos2d-JS工程。前面我提到过frameworks/runtime-src文件夹保存着各平台的工程文件,接下来就来看看应当如何使用这些工程文件。

1. iOS和Mac OS X

iOS和Mac OS X上的工程文件用起来比较简单,在安装了Xcode的前提下,双击打开frameworks/runtime-src/proj.ios_mac/HelloWorld.xcodeproj文件即可。值得说明的是,这个工程文件中集成了iOS和Mac OS X项目,你可以点击如图2-10所示的HelloWorld-mobile按钮选择你所要的平台。

{%}

图 2-10 iOS和Mac OS X工程选择

2. Android

在Android上,则需将HelloWorld/frameworks/runtime-src/proj.android导入到Eclipse中,操作步骤如图2-11、图2-12和图2-13所示。

{%}

图 2-11 导入工程

{%}

图 2-12 选择Android工程

{%}

图 2-13 选择Android工程路径

导入后,HelloWorld工程会报错,如图2-14所示,这是因为HelloWorld没找到libcocos2dx库项目,只需通过上述步骤再将HelloWorld/frameworks/js-bindings/cocos2d-x/cocos/platform/android/java也导入到 Eclipse中即可,完成后的效果如图2-15所示。

{%}

图 2-14 将HelloWorld工程导入Eclipse

{%}

图 2-15 将libcocos2dx库导入到Eclipse

3. Web部署

根据读者的需求,Web项目的部署也可能完全不同。这里我们以模拟局域网为例,讲解如何使用XAMPP在局域网上部署Cocos2d-JS Web项目,这样可以方便读者在开发过程中通过真机测试。

XAMPP是一款集成了Cross-Platform (X) 、Apache、MySQL、PHP以及Perl的软件,安装完之后,便可在个人电脑上搭建服务器环境。XAMPP是多平台软件,所以它提供了Mac OS X、Windows、Linux等操作系统。其安装步骤较为简单,下载完安装包之后,直接双击来打开它,然后一直点击Next按钮直到安装完毕即可。该软件的下载地址:https://www.apachefriends.org/download.html

XAMPP在Mac OS X和Windows中的界面图分别如图2-16和图2-17所示。

{%}

图 2-16 XAMPP在Mac OS X下的界面图

{%}

图 2-17 XAMPP在Windows下的界面图

说明

实际上,在终端(Windows中对应命令行程序)调用命令python -m SimpleHTTPServer,也可以直接快速搭建Web服务器,相关代码如下:

1 cocos new HelloJS -l js -d ./Desktop
2 cd ./Desktop/HelloJS/
3 python -m SimpleHTTPServer 8080

其中,8080为指定端口,可省略,默认值为8000。当执行上面第三行指令后,便可以在浏览器中通过http://localhost:8080/地址打开HelloJS项目。另外,在局域网内,localhost可用IP地址代替。

其中,在Mac OS X下可以通过点击Open Application Folder(Windows操作系统中对应Explorer)按钮,打开XAMPP安装路径。在此目录中,可以看到一个名为htdocs的文件夹(如图2-18所示),将打包好的Web项目放在此文件夹中,便可在局域网内通过IP地址访问到。当然,这需要先选中Manage Servers面板中的Apache Web Server选项,然后点击Start按钮(Windows下直接点击Start按钮即可,如图2-17所示),启动Apache Web服务器。

{%}

图 2-18 htdocs目录结构

我习惯把工作区间设在XAMPP/htdocs路径下,如图2-18所示。因为这样在启动Apache Web的情况下,便可在浏览器通过http://localhost/HelloWorld/地址直接访问工程。当然,也可以通过IP地址的方式访问,如图2-19所示。

{%}

图 2-19 通过IP地址访问工程

另外,值得说明的是,当Web项目打包之后,HelloWorld文件夹下将出现publish文件夹,而publish文件夹又包含html5文件夹(如图2-20所示),此文件夹便是发布之后的项目,它通过终端命令cocos compile -p web -m release得到。

{%}

图 2-20 打包后的html5游戏包

此时读者可将自己的移动设备开启WiFi,保证和电脑在同一局域网下,然后在移动设备的浏览器上键入http://192.168.64.191/HelloWorld/publish/html5/,也可将此地址通过网络第三方工具转为二维码,然后通过扫描二维码在移动设备上访问HelloWorld项目,从而起到一个Web项目部署模拟的效果。

2.6 js-tests测试工程

js-tests位于cocos2d-x/tests/文件夹下,它是Cocos2d-JS引擎的测试例子,也是一个非常好的学习资料,我强烈建议你经常打开这个工程看看,多阅读它的实现代码。并且,在实际开发中,js-tests也是一个非常好的参考示例。js-tests项目工程运行在浏览器上的效果如图2-21所示。

{%}

图 2-21 js-tests在浏览器上的运行效果

注意

1. cocos2d-x/tests/js-tests/index.html不可以通过双击直接打开运行,它需要放在服务器上,即将cocos2d-x文件夹放在XAMPP/htdocs路径下,然后在浏览器中输入http://localhost/cocos2d-x/tests/js-tests/index.html,这样才能正确打开js-tests工程。

2. 若在浏览器上出现一些奇奇怪怪的问题,让读者百思不得其解,可能是浏览器缓存的问题,不妨考虑清理下浏览器缓存或在开发过程中将project.json文件中的noCache值设置为true

2.7 为《保卫萝卜2》项目做准备

经过前面的学习,读者应该对Cocos2d-JS有了初步的了解,并且此时读者的电脑上应该是安装好了Cocos Console. 那么从现在开始,我们将和读者一起来制我们自己的《保卫萝卜2》。

1. 《保卫萝卜》简介

《保卫萝卜》是飞鱼科技于2012年7月推出的一款休闲塔防游戏,发布后迅速蹿升至App Store中国区榜首,并被超过120个国家推荐为热门游戏。其续作《保卫萝卜2:极地冒险》于2013年11月正式上线,发布当日仅6小时即登上中国区总榜第一,并持续位居榜首长达21天,是一款老少皆宜的国民级休闲塔防手游。《保卫萝卜》《保卫萝卜2》总下载量已接近两亿,《保卫萝卜3》由腾讯代理发行,将在今年上线。

《保卫萝卜2》游戏主页面、关卡选择页面、游戏玩法页面分别如图2-22、图2-23和图2-24所示。若读者没有玩过《保卫萝卜2》,我建议你去App Store或Google Play上下载一个,然后体验一番,这样对本书的学习将会有非常大的帮助。因为我们将《保卫萝卜2》这个项目贯穿到本书大部分章节中作为章节实例,让读者可以在学习枯燥无味的理论知识后,立马动手做出作品。

{%}

图 2-22 《保卫萝卜2》游戏主页面

{%}

图 2-23 《保卫萝卜2》关卡选择页面

{%}

图 2-24 《保卫萝卜2》游戏玩法页面

说明 笔者虽已获得《保卫萝卜》系列素材官方授权,但因本书撰写时,《保卫萝卜3》还未上线,所以本书暂用《保卫萝卜2》的素材。

2. 使用WebStorm + Chrome开发《保卫萝卜2》

通过前面的学习,你已经知道了如何创建、编译、运行Cocos2d-JS游戏了,但是,你并不晓得通过何种工具开发Cocos2d-JS游戏,这里我推荐一套方案——WebStorm + Chrome。

WebStorm是JetBrains公司旗下一款JavaScript开发工具,被广大中国JavaScript开发者誉为“Web前端开发神器”“最强大的HTML5编辑器”“最智能的JavaScript IDE”等。WebStorm不仅提供了最智能的代码补全、代码格式化以及联想查询等高效功能,而且在代码高亮着色上也非常完美,其下载地址为:http://www.jetbrains.com/webstorm/

Chrome是Google(谷歌)公司于2008年9月发布的多平台浏览器,它支持Mac OS X、Windows、iOS、Android以及Linux等操作系统。Chrome不仅调试方便,还提供了Mobile Emulation来进行真机模拟,这对Cocos2d-JS游戏的屏幕适配(详情可参见第7章)等是非常有帮助的。

当下载和安装好WebStorm和Chrome之后,启动终端(Windows下为命令行程序),通过如下命令在桌面上创建《保卫萝卜2》(这里将其命名为Carrot)工程:

1  cocos new Carrot -l js -d ./Desktop

接着,打开安装好的WebStorm,点击Create New Project,然后选择Empty Project,接着在Location中输入指定路径,最后点击Create按钮,如图2-25和图2-26所示。

说明 虽然官方推出Cocos IDE,但是我觉得Cocos IDE并不适合初学者使用,并且本书撰写时,Cocos IDE正在寻找新的解决方案,所以推荐WebStorm + Chrome的方式。若项目以Native为主,则可以考虑使用WebStorm或者Sublime编辑代码,然后在Xcode中运行项目。

{%}

图 2-25 WebStorm主页面

{%}

图 2-26 创建工程

然后把刚才创建好的Carrot项目复制到XAMPP/htdocs/Cocos2d-JS文件夹下,此时回到WebStorm编辑器,右击Cocos2d-JS,选择Synchronize 'Cocos2d-JS'刷新目录,如图2-27所示,刷新后便可看到Carrot的目录结构了,如图2-28所示。

图 2-27 刷新Cocos2d-JS目录

{%}

图 2-28 Carrot目录结构

此时,你可以右击index.html,然后选择Debug 'index.html',如图2-29所示,从而让Carrot运行在浏览器上。

图 2-29 选择Debug index.html

不幸的是,当你点击Debug 'index.html'之后,Chrome浏览器并没有反应,这是因为你还需要为Chrome安装一个名为JetBrains IDE Support的扩展程序(插件)。Chrome插件的安装步骤如下。

(1) 打开Chrome浏览器,点击如图2-30中箭头所指的菜单按钮。

(2) 选择“更多工具”→“扩展程序”。

(3) 点击底部“获取更多扩展程序”超文本链接,进入Chrome扩展程序商店,然后搜索安装JetBrains IDE Support插件。若搜索失败,可在Chrome打开扩展程序面板的情况下,将随书资源中的JetBrains_IDE_Support_2.0.8_0.crx文件拖到Chrome浏览器中直接安装。

{%}

图 2-30 点击Chrome菜单

安装成功后如图2-31所示。此时,再点击Debug 'index.html',便可在浏览器中看到Carrot项目的运行效果。当然,此时你看到的仅仅只是一个HelloWorld的图片。不要急,在下一章的实例中,我们将带你开发《保卫萝卜2》的主页面,如图2-22所示。

{%}

图 2-31 JetBrains IDE Support插件

2.8 实例——利用Cocos DevTools 学习Cocos2d-JS

Cocos DevTools是Cocos2d-x团队于2015年2月26日推出的一个浏览器工具,可谓是神器,其下载地址为:http://h5.cocos.com/static/cocos-devtools/index.html

Cocos DevTools工具的安装极其简单,只需设置浏览器显示书签栏,然后根据提示将按钮拖曳到书签栏中即可。安装完成后,在浏览器的书签栏中出现Cocos DevTools v1.0则表示安装成功,如图2-32所示。

{%}

图 2-32 Cocos DevTools工具

安装好Cocos DevTools工具之后,在浏览器上运行一个Cocos2d-JS项目。例如,打开js-tests工程,然后点击书签栏中的Cocos DevTools工具,此时会出现如图2-33左下角所示的选项卡面板,其中包含场景元素和性能调试这两个选项卡。在场景元素中,你可以选中想要的元素,从而对它进行编程。例如在图2-33中,我选中了ActionManager Test元素,并将光标聚焦在地址栏中,再通过option + command + J(Windows按Ctrl + Shift + J键)组合键打开浏览器的Console(控制台),最后在Console中进行编码。图2-33中 Console 的代码如下:

1  var node = _cocos_devtools.curr;
2  var moveBy = cc.moveBy(2, cc.p(-200, 0));
3  node.runAction(moveBy);

第1行代码表示获取当前Cocos DevTools工具所选中的元素,第2行代码创建了一个动作(参见第4章),第3行代码运行这个动作。或许这些代码你现在看不太懂,但是并没有关系,因为这里抛出Cocos DevTools工具,只是希望你在阅读本书的时候,能够合理、高效地利用此工具。因为它能在很大程度上帮助你学习Cocos2d-JS引擎,即在你阅读本书的相关知识点时,可以立马通过此工具结合浏览器Console进行实践,从而降低了学习成本,提高了学习效率。

当然,我相信你已经感受到了,Cocos DevTools工具并非只是一个帮助学习的工具,它在项目的实际开发中是一个非常强大的助手。例如,当游戏里有非常多的元素时,你很难通过代码将想要的元素获取出来,但是通过Cocos DevTools工具,则容易许多,而这一般用在修复bug等方面上。

{%}

图 2-33 使用Cocos DevTools工具学习Cocos2d-JS

2.9 小结

通过本章,我们知道了Cocos2d-JS项目的目录结构,了解每个文件夹和文件的作用,并且顺手搭建好了开发环境,掌握了Cocos2d-JS工程的创建、编译、运行、打包等技能。此外,还学到了通过WebStorm + Chrome的方式开发Cocos2d-JS游戏,并且掌握了如何使用Cocos DevTools工具。最后,创建了Carrot(《保卫萝卜2》)的项目工程。无奈笔者有点调皮且霸道,因为你并未在Carrot中看到任何和《保卫萝卜2》有关的东西。

2.10 参考资源

本章的参考资源如下。

目录

  • 献词
  • 序一
  • 序二
  • 序三
  • 前言
  • 第一部分 基础篇
  • 第 1 章 Cocos2d-JS介绍
  • 第 2 章 Hello World
  • 第 3 章 核心框架
  • 第 4 章 动作模块
  • 第 5 章 事件机制
  • 第 6 章 音频处理
  • 第 7 章 屏幕适配
  • 第二部分 进阶篇
  • 第 8 章 数据存储
  • 第 9 章 粒子系统
  • 第 10 章 UI控件
  • 第 11 章 性能优化
  • 第 12 章 游戏地图
  • 第三部分 高级篇
  • 第 13 章 反射调用
  • 第 14 章 Chipmunk物理引擎
  • 第 15 章 网络编程
  • 第 16 章 JavaScript Binding
  • 第四部分 实战篇
  • 第 17 章 《保卫萝卜2》实战