Cocos2d-x实战 JS卷 Cocos2d-JS开发

《Cocos2d-x实战：JS卷》是著名移动开发专家关东升倾力创作的“Cocos2d-x实战”典藏大系之一！本书基于Cocos2d-x 3.2版本，系统论述Cocos2d-x之JS开发的理论与实战。全书近500页，不仅系统梳理了Cocos2d-x开发的基本方法，并给出了100多个小的示例及综合案例。是一本Cocos2d-x开发入门实践指导百科全书。

推荐一：本书配合《Cocos2d-x实战：工具卷》学习。

推荐二：关东升老师录制了400课时的Cocos教学视频，读者可以登录“智捷课堂”在线学习。

《Cocos2d-x实战 JS卷 Cocos2d-JS开发》是介绍Cocos2d-x游戏编程和开发技术书籍，介绍了使用Cocos2d-JS中核心类、瓦片地图、物理引擎、音乐音效、数据持久化、网络通信、性能优化、多平台发布、程序代码管理、两大应用商店发布产品。全书分为6：基础篇、进阶篇、数据与网络篇、设计与优化篇、多平台发布篇和实战篇。基础篇包括第2章～第8章，Cocos2d-JS介绍、环境搭建、标签、菜单、精灵、场景、层、动作、特效、动画和Cocos2d-JS用户事件。进阶篇包括第9章～第12章，游戏音乐与音效、粒子系统、瓦片地图和物理引擎。数据与网络篇包括第13章～第15章，Cocos2d-JS中的数据持久化、基于HTTP网络通信和基于Node.js的Socket.IO网络通信。优化篇包括第16章性能优化。多平台发布篇包括第17章～第19章，发布到Web平台、发布到本地iOS平台和发布到本地Android平台。实战篇包括第20章～第24章，使用Git管理程序代码、项目实战：迷失航线手机游戏、为迷失航线游戏添加广告、发布放到Google play应用商店和发布放到苹果App Store。

第1章 准备开始
1.1 本书学习路线图
1.2 使用实例代码

第一篇 基础篇
第2章 JavaScript语言基础
2.1 环境搭建
2.1.1 JavaScript编辑工具
2.1.2 JavaScript运行测试环境
2.1.3 HelloJS实例测试
2.2 标识符和保留字
2.2.1 标识符
2.2.2 保留字
2.3 常量和变量
2.3.1 常量
2.3.2 变量
2.3.3 命名规范
2.4 注释
2.5 JavaScript数据类型
2.5.1 数据类型
2.5.2 数据类型字面量
2.5.3 数据类型转换
2.6 运算符
2.6.1 算术运算符
2.6.2 关系运算符
2.6.3 逻辑运算符
2.6.4 位运算符
2.6.5 其他运算符
2.7 控制语句
2.7.1 分支语句
2.7.2 循环语句
2.7.3 跳转语句
2.8 数组
2.9 函数
2.9.1 使用函数
2.9.2 变量作用域
2.9.3 嵌套函数
2.9.4 返回函数
2.1 0JavaScript中的面向对象
2.1 0.1 创建对象
2.1 0.2 常用内置对象
2.1 0.3 原型
2.1 1Cocos2dJS中的JavaScript继承
本章小结
第3章 Hello Cocos2dJS
3.1 移动平台游戏引擎
3.2 Cocos2d游戏引擎
3.2.1 Cocos2d游戏引擎家谱
3.2.2 Cocos2dx引擎
3.2.3 Cocos2dJS引擎
3.3 搭建Cocos2dJS开发环境
3.3.1 搭建WebStorm开发环境
3.3.2 搭建Cocos Code IDE开发环境
3.3.3 下载和使用Cocos2dJS官方案例
3.3.4 使用API文档
3.4 第一个Cocos2dJS游戏
3.4.1 创建工程
3.4.2 在Cocos Code IDE中运行
3.4.3 在WebStorm中运行
3.4.4 工程文件结构
3.4.5 代码解释
3.5 Cocos2dJS核心概念
3.5.1 导演
3.5.2 场景
3.5.3 层
3.5.4 精灵
3.5.5 菜单
3.6 Node与Node层级架构
3.6.1 Node中重要的操作
3.6.2 Node中重要的属性
3.6.3 游戏循环与调度
3.7 Cocos2dJS坐标系
3.7.1 UI坐标
3.7.2 OpenGL坐标
3.7.3 世界坐标和模型坐标
本章小结
第4章 标签和菜单
4.1 使用标签
4.1.1 cc.LabelTTF
4.1.2 cc.LabelAtlas
4.1.3 cc.LabelBMFont
4.2 使用菜单
4.2.1 文本菜单
4.2.2 精灵菜单和图片菜单
4.2.3 开关菜单
本章小结
第5章 精灵
5.1 Sprite精灵类
5.1.1 创建Sprite精灵对象
5.1.2 实例： 使用纹理对象创建Sprite对象
5.2 精灵的性能优化
5.2.1 使用纹理图集
5.2.2 使用精灵帧缓存
本章小结
第6章 场景与层
6.1 场景与层的关系
6.2 场景切换
6.2.1 场景切换相关函数
6.2.2 场景过渡动画
6.3 场景的生命周期
6.3.1 生命周期函数
6.3.2 多场景切换生命周期
本章小结
第7章 动作、特效和动画
7.1 动作
7.1.1 瞬时动作
7.1.2 间隔动作
7.1.3 组合动作
7.1.4 动作速度控制
7.1.5 回调函数
7.2 特效
7.2.1 网格动作
7.2.2 实例： 特效演示
7.3 动画
7.3.1 帧动画
7.3.2 实例： 帧动画使用
本章小结
第8章 Cocos2dJS用户事件
8.1 事件处理机制
8.1.1 事件处理机制中的三个角色
8.1.2 事件管理器
8.2 触摸事件
8.2.1 触摸事件的时间方面
8.2.2 触摸事件的空间方面
8.2.3 实例： 单点触摸事件
8.2.4 实例： 多点触摸事件
8.3 键盘事件
8.4 鼠标事件
8.5 加速度计与加速度事件
8.5.1 加速度计
8.5.2 实例： 运动的小球
本章小结

第二篇 进阶篇
第三篇 数据与网络篇
第四篇 优化篇
第五篇 多平台移植篇
第六篇 实战篇

第3章Hello Cocos2dJS

在开始详细介绍Cocos2dJS引擎的API之前，有必要先了解一下手机游戏引擎有哪些，了解Cocos2dJS的前世今生。还会介绍开发工具。然后从一个HelloJS入手，介绍Cocos2dJS的基本开发流程，以及Cocos2dJS生命周期和Cocos2dJS核心知识体系。

3.1移动平台游戏引擎

游戏引擎是指一些已编写好的游戏程序模块。游戏引擎包含以下子系统： 渲染引擎(即“渲染器”，含二维图像引擎和三维图像引擎)、物理引擎、碰撞检测系统、音效、脚本引擎、电脑动画、人工智能、网络引擎以及场景管理。

在目前移动平台游戏引擎中主要可以分为2D和3D引擎。2D引擎主要有Cocos2diphone、Cocos2dx、Cocos2dJS、Corona SDK、Construct 2、WiEngine和Cyclone 2D，3D引擎主要有Unity3D、Unreal Development Kit、ShiVa 3D和Marmalade。此外，还有一些针对于HTML 5的游戏引擎，如Cocos2dhtml5、XCanvas和Sphinx等。

这些游戏引擎各有千秋，但是目前得到市场普遍认可的2D引擎是Cocos2diphone、Cocos2dx和Cocos2dJS，3D引擎是Unity3D。

3.2Cocos2d游戏引擎

Cocos2diphone、Cocos2dx和Cocos2dJS是目前最流行的2D游戏引擎。它们属于同一家族，具有相同的API。

3.2.1Cocos2d游戏引擎家谱

在介绍Cocos2dJS之前有必要先介绍一下Cocos2d的家谱，图31所示是Cocos2d的家谱。

图31Cocos2d的家谱

Cocos2d最早是由阿根廷的Ricardo和他的朋友使用Python开发的，后移植到iPhone平台，使用的语言是ObjectiveC。随着在iPhone平台取得了成功，Cocos2d引擎变得更加多元化。其中各个引擎介绍如下：

(1) ShinyCocos： 使用Ruby对Cocos2diphone进行封装，使用Ruby api开发。

(2) CocosNet： 是在MonoTouch平台上使用的Cocos2d引擎，采用.NET实现。

(3) Cocos2dandroid： 是为Android平台使用的Cocos2d引擎，采用Java实现。

(4) Cocos2dandroid1： 是为Android平台使用的Cocos2d引擎，采用Java实现，由国内人员开发。

(5) Cocos2djavascript： 是采用JavaScript脚本语言实现的Cocos2d引擎。

(6) Cocos2dx： 是采用C++实现的Cocos2d引擎，它是由Cocos2dx团队开发的分支项目。

(7) Cocos2dJS： 是采用JavaScriptAPI的Cocos2d引擎，一方面它可以绑定在Cocos2dx上开发基于本地技术的游戏； 另一方面它依托浏览器运行，开发基于Web的网页游戏。它也是由Cocos2dx团队开发的分支项目。

此外，历史上Cocos2d还出现过很多分支，随着技术的发展这些逐渐消亡了，其中最有生命力的当属Cocos2dx和Cocos2dJS引擎。

3.2.2Cocos2dx引擎

Cocos2dx设计目标如图32所示。横向能够支持各种操作系统，桌面系统包括Windows、Linux和Mac OS X，移动平台包括iOS、Android、WinPhone、Bada、BlackBerry和MeeGo等。纵向方面向下能够支持OpenGL ES 1.1、OpenGL ES 1.5、OpenGL ES 2.0和DirectX 11等技术，向上支持JavaScript和Lua脚本绑定。

图32Cocos2dx设计目标

简单地说，Cocos2dx设计目标是为了实现跨平台，用户不再为同一款游戏在不同平台发布而进行编译。而且Cocos2dx为程序员考虑的更多，很多程序员可能对于C++不熟悉，针对这种情况可以使用JavaScript和LuaLua 是一个小巧的脚本语言，是巴西里约热内卢天主教大学(Pontifical Catholic University of Rio de Janeiro)里的一个研究小组，由Roberto Ierusalimschy、Waldemar Celes 和 Luiz Henrique de Figueiredo所组成并于1993年开发。——引自于百度百科(https://baike.baidu.com/view/416116.htm?fr=wordsearch)。开发游戏。

3.2.3Cocos2dJS引擎

Cocos2dJS设计得非常巧妙，使用的语言是JavaScript，容易上手。基于Cocos2dJS引擎开发的游戏程序，一方面是通过Cocos2dhtml5引擎在Web浏览器上运行，另一方面是通过JSB(JavaScript binding)技术通过Cocos2dx引擎在本地运行。Cocos2dJS运行原理如图33所示。

图33Cocos2dJS运行原理

Cocos2dJS与Cocos2dx相比更先进，不仅可以在本地运行，还可以在Web浏览器上运行。

3.3搭建Cocos2dJS开发环境

使用Cocos2dJS引擎开发游戏，主要的程序代码是JavaScript语言，因此，凡是能够开发JavaScript语言工具都适用于Cocos2dJS游戏开发。本书推荐WebStorm和Cocos Code IDE工具。

3.3.1搭建WebStorm开发环境

在上一章使用了WebStorm开发工具，它是非常优秀的JavaScript开发工具，WebStorm工具可以开发和调试基于Cocos2dJS引擎的JavaScript程序代码，但是测试和调试时只能运行在Web浏览器上。

WebStorm安装过程在上一章已经介绍了，但是要想开发基于Cocos2dJS引擎的JavaScript程序，还需要安装Google Chrome浏览器和JetBrains IDE Support插件。Google Chrome浏览器安装不再介绍，这里重点介绍JetBrains IDE Support插件。

JetBrains IDE Support是安装在Google Chrome浏览器上的插件，它是为了配合WebStorm工具调试使用的。JetBrains IDE Support插件安装过程是在Google Chrome浏览器的网址中输入https://chrome.google.com/webstore/detail/jetbrainsidesupport/hmhgeddbohgjknpmjagkdomchmhgeddb内容，安装页面如图34所示。该页面中可以单击“已添加至CHROME”按钮安装插件。

图34安装JetBrains IDE Support插件

安装成功后会在浏览器的地址栏后面出现JB图标，具体如何使用在后面章节再介绍。

3.3.2搭建Cocos Code IDE开发环境

Cocos Code IDE是Cocos2dx团队开发的，用于开发Cocos2dJS和Cocos2dx Lua绑定的游戏工具，它是基于EclipseEclipse 是一个开放源代码的、基于Java的可扩展开发平台。就其本身而言，它只是一个框架和一组服务，用于通过插件组件构建开发环境。幸运的是，Eclipse 附带了一个标准的插件集，包括Java开发工具(Java development kit，JDK)。——引自于百度百科平台的开发工具，Eclipse基于Java，要想运行Cocos Code IDE工具，需要安装JDK或JRE，JDK是Java开发工具包，JRE是Java运行环境。

1. JDK下载和安装

图35所示是JDK 7下载界面，它的下载地址是https://www.oracle.com/technetwork/java/javase/downloads/jdk7downloads1880260.html,其中有很多版本。注意选择对应的操作系统，以及32位还是64位安装的文件。

图35下载JDK

下载完JDK并安装完成后需要设置系统环境变量，主要是设置JAVA_HOME环境变量。打开环境变量设置对话框，如图36所示，可以在用户变量(上半部分，只影响当前用户)或系统变量(下半部分，影响所有用户)添加环境变量。一般情况下，在用户变量中设置环境变量。

图36环境变量设置对话框

在用户变量部分单击“新建”按钮，弹出对话框如图37所示，设置“变量名”为JAVA_HOME，变量值为“C:＼Program Files＼Java＼jdk1.7.0_21”。注意变量值的路径。

图37设置JAVA_HOME

为了防止安装了多个JDK版本对于环境的影响，还可以在环境变量PATH追加C:＼Program Files＼Java＼jdk1.7.0_21＼bin路径，如图38所示，在用户变量中找到PATH。双击打开PATH修改对话框，如图39所示，追加C:＼Program Files＼Java＼jdk1.7.0_21＼bin。注意PATH之间用分号分隔。

图38环境变量PATH设置对话框

图39PATH修改对话框

2. Cocos Code IDE下载和安装

Cocos Code IDE下载地址是https://www.cocos2dx.org/download，在浏览器中页面如图310所示。选择合适的文件下载，目前包括Mac OS X版本和Windows版本。注意Windows有32位和64位之分，还有安装(setup)版本和压缩(zip)版本之分。

图310下载Cocos Code IDE

这里下载的是cocoscodeidewin641.0.0rc1.zip解压版本，解压之后找到Cocos Code IDE.exe文件运行可以启动Cocos Code IDE工具，在启动过程中需要选择Workspace目录，如图311所示，Workspace目录是工程的管理目录。选择好之后单击OK按钮，如果该目录不存在，则创建。

图311选择Workspace

Cocos Code IDE具体如何使用在后面章节再介绍。

3.3.3下载和使用Cocos2dJS官方案例

首先到Cocos2dJS官方网站下载Cocos2dJS开发包，目前Cocos2dJS 3.0最终版已经发布。Cocos2dJS 3.0下载解压后的目录结构如图312所示。

图312Cocos2dJS开发包内容

如果想要运行官方的案例可以进入到build目录，build目录中的内容如图313所示，这里包含各个平台编译和运行案例的工程等文件。其中，cocos2d_jsb_samples.xcodeproj文件是Cocos2dJS案例

图313Cocos2dJS开发包build

目录内容

的Xcode工程文件，cocos2d_jsb_samples.vc2012.sln文件是Cocos2dJS案例Win32平台下Visual Studio 2012解决方案文件，androidbuild.py是在Android平台下编译和运行案例时使用的。

如果在Windows下学习和开发，一般运行cocos2d_jsb_samples.vc2012.sln解决方案就可以了。如果启动cocos2d_jsb_samples.vc2012.sln解决方案，则进入如图314所示的Visual Studio 2012界面，其中的jstests工程是Cocos2dJS官方提供的案例工程。需要选中jstests工程，在右击弹出的快捷菜单中选择“设置启动项目”命令，然后运行上方工具栏中的运行调试按钮，运行jstests工程。

图314Cocos2dJS案例

首次运行需要编译Cocos2dJS时间会长一些，运行起来之后会出现一个Windows的窗口［如图315(a)所示］，选择其中的一个菜单项可以运行相应的示例［如图315(b)所示］。

如果想查看jstests源代码，不能通过Visual Studio 2012查看，需要到＼samples＼jstests＼src目录下，使用文本编辑工具或者WebStorm工具。

事实上，＼build目录工程文件只是编译Cocos2dx库并使案例基于JSB方式运行，不能够通过这些工程修改案例中的JavaScript代码。为了能够查看、修改和运行案例中的JavaScript代码，可以在WebStorm工具中配置案例工程，管理案例。具体过程是启动WebStorm，选择File→New Project from Existing Files命令，这样选择是为了从已经存在的文件创建WebStorm工程，弹出如图316所示对话框。选择最后一个选项，这个选项的意思是文件在本地，还没有配置Web服务器。

图315运行案例

图315（续）

图316选择配置方案

提示

JavaScript和HTML等Web文件运行，需要部署到一个Web服务器下。

在图316所示界面选择好后，单击Next按钮进入设置工程根目录对话框，如图317所示，选择，然后单击Project Root按钮，设置无误后，单击Finish按钮完成设置过程。设置成功界面如图318所示。

图317设置工程的根目录

图318设置成功

在导航面板中选择Samples→jstests→index.html，从右击弹出的快捷菜单中选择Debug “index.html”命令，WebStorm会启动Google Chrome浏览器，如图319所示。此时发现在浏览器中已启动jstests官方案例。

图319启动Google Chrome浏览器

3.3.4使用API文档

从Cocos2dJS官方下载的开发包中没有API文档，可以使用Cocos2dJS官方的在线API文档，可以通过https://www.cocos2dx.org/wiki/Reference选择Cocos2dJS Online API Documentation进入在线API文档，如图320所示。可以在左边的文本框中输入查询条件，找到感兴趣的内容，如图321所示。

图320Cocos2dJS在线API文档

图321从在线API文档中搜索内容

3.4第一个Cocos2dJS游戏

编写的第一个Cocos2dJS程序，命名为HelloJS，从该工程开始学习其他的内容。

3.4.1创建工程

创建Cocos2dJS工程可以通过Cocos2dx提供的命令工具Cocos实现，但这种方式不能与WebStorm或Cocos Code IDE集成开发工具很好地集成，不便于程序编写和调试。由于Cocos Code IDE工具是Cocos2dx开发的专门为Cocos2dJS和Cocos2dx Lua开发设计的，因此使用Cocos Code IDE工具很方便创建Cocos2dJS工程。

首先需要在Cocos Code IDE工具中先配置JavaScript框架，打开Cocos Code IDE工具，选择Window→Preferences命令，弹出对话框，如图322所示，选择Cocos→JavaScript，在右边的JavaScript Frameworks列表框中选择。

图322配置JavaScript框架

JavaScript框架配置不需要每次都进行，只是在最开始的时候配置一下，但创建工程的时候，Cocos Code IDE工具会从这个JavaScript框架目录中创建工程文件。

接下来就可以创建JavaScript工程。选择File→New Project命令，如图323所示，弹出项目类型选择对话框。

图323项目类型选择对话框

选中CocosJavaScriptProject，然后单击Next按钮，弹出如图324所示的对话框。在Project Name文本框中输入工程名称，Create Project in Workspace是在Workspace目录中创建工程，需要选中该复选框，选中Create From Existing Resource复选框可以从已经存在的工程创建。现在不需要选中该复选框。

图324新建项目对话框

选择完成单击Next按钮进入到如图325所示配置运行环境对话框，在该对话框中可以配置项目运行时信息。Orientation项目是配置模拟器的朝向，其中landscape是横屏显示，portriat是竖屏显示。Desktop Runtime Settings中的Title文本框用于设置模拟器的标题，Desktop Windows initialize Size用于设置模拟器的大小。Add Native Codes用于设置添加本地代码到工程，这里不需要添加本地代码。最后单击Finish按钮完成创建操作，创建好工程之后，如图326所示。

图325配置运行环境对话框

图326创建工程成功界面

3.4.2在Cocos Code IDE中运行

创建好工程后可以测试一下。在左边的工程导航面板中选中index.html文件，从右击弹出的快捷菜单中选择Run As→CocosJSBinding命令运行刚刚创建的工程。运行结果如图327所示。

主要编写的程序代码是在src目录下，在本例中app.js文件负责处理主要的场景界面逻辑。如果想调试程序，可以设置断点，如图328所示，单击行号之前的位置，设置断点。

调试运行过程，从右击弹出的快捷菜单中选择Debug As→CocosJSBinding命令。如图329所示，程序运行到第32行挂起，并进入调试视图。在调试视图中可以查看程序运行的堆栈、变量、断点、计算表达式和单步执行程序等操作。

图327运行工程界面

图328设置断点

图329运行到断点挂起

在调试视图中，调试工具栏中的主要调试按钮，说明如图330所示。

图330调试工具栏按钮

Cocos引擎已经步入第五个年头。我非常高兴地看到，市面上高质量的Cocos引擎相关书籍越来越多。其中，关东升老师及其团队创作的的“Cocos2d-x实战”系列图书涵盖了C++卷、JS卷、Lua卷、工具卷、Cocos Studio卷，组成了一个较为完整的系统，极具特色。此前，《Cocos2d-x实战：C++卷》已经发行，并在开发者中反响热烈。如今，关老师再次创作的《Cocos2d-x实战：JS卷——Cocos2d-JS开发》，是国内第一本JS相关图书，非常值得一读。
Cocos2d-JS是Cocos的一个重要分支，它无缝融合了Cocos2d-HTML5快速原型能力和Cocos2d-x原生高性能、简单、易用的API，配合完整的工具链支持，让开发更加高效，实现一次开发跨全平台部署在网页和原生应用平台上。
经过两年多的发展，Cocos2d-JS已经非常成熟、值得信赖。现在，市面上有许多大家耳熟能详的优秀作品就是采用Cocos2d-JS打造的，比如新上线的微信游戏《仙侠道》、DeNA的《变形金刚：崛起》和《航海王：启航》、EA的《FIFA 2014巴西世界杯》、美国大鱼游戏的《Big Fish Casino》、边锋的《三国杀传奇》、KooGame的《狂斩三国2》，以及流行的途游棋牌游戏系列，等等。此外，Cocos2d-JS也是目前Qzone玩吧网页游戏使用最广泛的游戏引擎，并且是Facebook官方推荐的跨平台游戏引擎。
手机游戏行业风云变幻，HTML5游戏及应用因为自由开放的分发方式、多样的流量获取方式、更高的转化率等，获得越来越多的青睐。对于有兴趣在手游和HTML5领域进行耕耘的开发者朋友们，关东升老师这本《Cocos2d-x实战：JS卷——Cocos2d-JS开发》是很好的参考图书。此外，该书系统地论述了Cocos2d-JS游戏开发的理论与实践，涵盖了最新版本的Cocos2d-JS v3.x核心类、瓦片地图、物理引擎、数据持久化、性能优化、数据通信、跨网页和原生平台游戏发布等多个方面。全书内容循序渐进，结构完整，并结合多个游戏实例详解，非常适合入门者学习。
非常感谢关老师，这套Cocos引擎系列图书必将为大量想要进入移动游戏开发与HTML5游戏开发的朋友提供极大的帮助。
祝广大读者在跨原生与HTML5的游戏开发世界里自由遨游，实现自己的梦想！
林顺
2015年1月