《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。
第3章Hello Cocos2dJS
在开始详细介绍Cocos2dJS引擎的API之前,有必要先了解一下手机游戏引擎有哪些,了解Cocos2dJS的前世今生。还会介绍开发工具。然后从一个HelloJS入手,介绍Cocos2dJS的基本开发流程,以及Cocos2dJS生命周期和Cocos2dJS核心知识体系。
3.1移动平台游戏引擎
游戏引擎是指一些已编写好的游戏程序模块。游戏引擎包含以下子系统: 渲染引擎(即“渲染器”,含二维图像引擎和三维图像引擎)、物理引擎、碰撞检测系统、音效、脚本引擎、电脑动画、人工智能、网络引擎以及场景管理。
在目前移动平台游戏引擎中主要可以分为2D和3D引擎。2D引擎主要有Cocos2diphone、Cocos2dx、Cocos2dJS、Corona SDK、Construct 2、WiEngine和Cyclone 2D,3D引擎主要有Unity3D、Unreal Development Kit、ShiVa 3D和Marmalade。此外,还有一些针对于HTML 5的游戏引擎,如Cocos2dhtml5、XCanvas和Sphinx等。
这些游戏引擎各有千秋,但是目前得到市场普遍认可的2D引擎是Cocos2diphone、Cocos2dx和Cocos2dJS,3D引擎是Unity3D。
3.2Cocos2d游戏引擎
Cocos2diphone、Cocos2dx和Cocos2dJS是目前最流行的2D游戏引擎。它们属于同一家族,具有相同的API。
3.2.1Cocos2d游戏引擎家谱
在介绍Cocos2dJS之前有必要先介绍一下Cocos2d的家谱,图31所示是Cocos2d的家谱。
图31Cocos2d的家谱
Cocos2d最早是由阿根廷的Ricardo和他的朋友使用Python开发的,后移植到iPhone平台,使用的语言是ObjectiveC。随着在iPhone平台取得了成功,Cocos2d引擎变得更加多元化。其中各个引擎介绍如下:
(1) ShinyCocos: 使用Ruby对Cocos2diphone进行封装,使用Ruby api开发。
(2) CocosNet: 是在MonoTouch平台上使用的Cocos2d引擎,采用.NET实现。
(3) Cocos2dandroid: 是为Android平台使用的Cocos2d引擎,采用Java实现。
(4) Cocos2dandroid1: 是为Android平台使用的Cocos2d引擎,采用Java实现,由国内人员开发。
(5) Cocos2djavascript: 是采用JavaScript脚本语言实现的Cocos2d引擎。
(6) Cocos2dx: 是采用C++实现的Cocos2d引擎,它是由Cocos2dx团队开发的分支项目。
(7) Cocos2dJS: 是采用JavaScriptAPI的Cocos2d引擎,一方面它可以绑定在Cocos2dx上开发基于本地技术的游戏; 另一方面它依托浏览器运行,开发基于Web的网页游戏。它也是由Cocos2dx团队开发的分支项目。
此外,历史上Cocos2d还出现过很多分支,随着技术的发展这些逐渐消亡了,其中最有生命力的当属Cocos2dx和Cocos2dJS引擎。
3.2.2Cocos2dx引擎
Cocos2dx设计目标如图32所示。横向能够支持各种操作系统,桌面系统包括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脚本绑定。
图32Cocos2dx设计目标
简单地说,Cocos2dx设计目标是为了实现跨平台,用户不再为同一款游戏在不同平台发布而进行编译。而且Cocos2dx为程序员考虑的更多,很多程序员可能对于C++不熟悉,针对这种情况可以使用JavaScript和LuaLua 是一个小巧的脚本语言,是巴西里约热内卢天主教大学(Pontifical Catholic University of Rio de Janeiro)里的一个研究小组,由Roberto Ierusalimschy、Waldemar Celes 和 Luiz Henrique de Figueiredo所组成并于1993年开发。——引自于百度百科(http://baike.baidu.com/view/416116.htm?fr=wordsearch)。开发游戏。
3.2.3Cocos2dJS引擎
Cocos2dJS设计得非常巧妙,使用的语言是JavaScript,容易上手。基于Cocos2dJS引擎开发的游戏程序,一方面是通过Cocos2dhtml5引擎在Web浏览器上运行,另一方面是通过JSB(JavaScript binding)技术通过Cocos2dx引擎在本地运行。Cocos2dJS运行原理如图33所示。
图33Cocos2dJS运行原理
Cocos2dJS与Cocos2dx相比更先进,不仅可以在本地运行,还可以在Web浏览器上运行。
3.3搭建Cocos2dJS开发环境
使用Cocos2dJS引擎开发游戏,主要的程序代码是JavaScript语言,因此,凡是能够开发JavaScript语言工具都适用于Cocos2dJS游戏开发。本书推荐WebStorm和Cocos Code IDE工具。
3.3.1搭建WebStorm开发环境
在上一章使用了WebStorm开发工具,它是非常优秀的JavaScript开发工具,WebStorm工具可以开发和调试基于Cocos2dJS引擎的JavaScript程序代码,但是测试和调试时只能运行在Web浏览器上。
WebStorm安装过程在上一章已经介绍了,但是要想开发基于Cocos2dJS引擎的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/jetbrainsidesupport/hmhgeddbohgjknpmjagkdomchmhgeddb内容,安装页面如图34所示。该页面中可以单击“已添加至CHROME”按钮安装插件。
图34安装JetBrains IDE Support插件
安装成功后会在浏览器的地址栏后面出现JB图标,具体如何使用在后面章节再介绍。
3.3.2搭建Cocos Code IDE开发环境
Cocos Code IDE是Cocos2dx团队开发的,用于开发Cocos2dJS和Cocos2dx Lua绑定的游戏工具,它是基于EclipseEclipse 是一个开放源代码的、基于Java的可扩展开发平台。就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境。幸运的是,Eclipse 附带了一个标准的插件集,包括Java开发工具(Java development kit,JDK)。——引自于百度百科平台的开发工具,Eclipse基于Java,要想运行Cocos Code IDE工具,需要安装JDK或JRE,JDK是Java开发工具包,JRE是Java运行环境。
1. JDK下载和安装
图35所示是JDK 7下载界面,它的下载地址是http://www.oracle.com/technetwork/java/javase/downloads/jdk7downloads1880260.html,其中有很多版本。注意选择对应的操作系统,以及32位还是64位安装的文件。
图35下载JDK
下载完JDK并安装完成后需要设置系统环境变量,主要是设置JAVA_HOME环境变量。打开环境变量设置对话框,如图36所示,可以在用户变量(上半部分,只影响当前用户)或系统变量(下半部分,影响所有用户)添加环境变量。一般情况下,在用户变量中设置环境变量。
图36环境变量设置对话框
在用户变量部分单击“新建”按钮,弹出对话框如图37所示,设置“变量名”为JAVA_HOME,变量值为“C:\Program Files\Java\jdk1.7.0_21”。注意变量值的路径。
图37设置JAVA_HOME
为了防止安装了多个JDK版本对于环境的影响,还可以在环境变量PATH追加C:\Program Files\Java\jdk1.7.0_21\bin路径,如图38所示,在用户变量中找到PATH。双击打开PATH修改对话框,如图39所示,追加C:\Program Files\Java\jdk1.7.0_21\bin。注意PATH之间用分号分隔。
图38环境变量PATH设置对话框
图39PATH修改对话框
2. Cocos Code IDE下载和安装
Cocos Code IDE下载地址是http://www.cocos2dx.org/download,在浏览器中页面如图310所示。选择合适的文件下载,目前包括Mac OS X版本和Windows版本。注意Windows有32位和64位之分,还有安装(setup)版本和压缩(zip)版本之分。
图310下载Cocos Code IDE
这里下载的是cocoscodeidewin641.0.0rc1.zip解压版本,解压之后找到Cocos Code IDE.exe文件运行可以启动Cocos Code IDE工具,在启动过程中需要选择Workspace目录,如图311所示,Workspace目录是工程的管理目录。选择好之后单击OK按钮,如果该目录不存在,则创建。
图311选择Workspace
Cocos Code IDE具体如何使用在后面章节再介绍。
3.3.3下载和使用Cocos2dJS官方案例
首先到Cocos2dJS官方网站下载Cocos2dJS开发包,目前Cocos2dJS 3.0最终版已经发布。Cocos2dJS 3.0下载解压后的目录结构如图312所示。
图312Cocos2dJS开发包内容
如果想要运行官方的案例可以进入到build目录,build目录中的内容如图313所示,这里包含各个平台编译和运行案例的工程等文件。其中,cocos2d_jsb_samples.xcodeproj文件是Cocos2dJS案例
图313Cocos2dJS开发包build
目录内容
的Xcode工程文件,cocos2d_jsb_samples.vc2012.sln文件是Cocos2dJS案例Win32平台下Visual Studio 2012解决方案文件,androidbuild.py是在Android平台下编译和运行案例时使用的。
如果在Windows下学习和开发,一般运行cocos2d_jsb_samples.vc2012.sln解决方案就可以了。如果启动cocos2d_jsb_samples.vc2012.sln解决方案,则进入如图314所示的Visual Studio 2012界面,其中的jstests工程是Cocos2dJS官方提供的案例工程。需要选中jstests工程,在右击弹出的快捷菜单中选择“设置启动项目”命令,然后运行上方工具栏中的运行调试按钮,运行jstests工程。
图314Cocos2dJS案例
首次运行需要编译Cocos2dJS时间会长一些,运行起来之后会出现一个Windows的窗口[如图315(a)所示],选择其中的一个菜单项可以运行相应的示例[如图315(b)所示]。
如果想查看jstests源代码,不能通过Visual Studio 2012查看,需要到<Cocos2dJS引擎目录>\samples\jstests\src目录下,使用文本编辑工具或者WebStorm工具。
事实上,<Cocos2dJS引擎目录>\build目录工程文件只是编译Cocos2dx库并使案例基于JSB方式运行,不能够通过这些工程修改案例中的JavaScript代码。为了能够查看、修改和运行案例中的JavaScript代码,可以在WebStorm工具中配置案例工程,管理案例。具体过程是启动WebStorm,选择File→New Project from Existing Files命令,这样选择是为了从已经存在的文件创建WebStorm工程,弹出如图316所示对话框。选择最后一个选项,这个选项的意思是文件在本地,还没有配置Web服务器。
图315运行案例
图315(续)
图316选择配置方案
提示
JavaScript和HTML等Web文件运行,需要部署到一个Web服务器下。
在图316所示界面选择好后,单击Next按钮进入设置工程根目录对话框,如图317所示,选择<Cocos2dJS引擎目录>,然后单击Project Root按钮,设置无误后,单击Finish按钮完成设置过程。设置成功界面如图318所示。
图317设置工程的根目录
图318设置成功
在导航面板中选择Samples→jstests→index.html,从右击弹出的快捷菜单中选择Debug “index.html”命令,WebStorm会启动Google Chrome浏览器,如图319所示。此时发现在浏览器中已启动jstests官方案例。
图319启动Google Chrome浏览器
3.3.4使用API文档
从Cocos2dJS官方下载的开发包中没有API文档,可以使用Cocos2dJS官方的在线API文档,可以通过http://www.cocos2dx.org/wiki/Reference选择Cocos2dJS Online API Documentation进入在线API文档,如图320所示。可以在左边的文本框中输入查询条件,找到感兴趣的内容,如图321所示。
图320Cocos2dJS在线API文档
图321从在线API文档中搜索内容
3.4第一个Cocos2dJS游戏
编写的第一个Cocos2dJS程序,命名为HelloJS,从该工程开始学习其他的内容。
3.4.1创建工程
创建Cocos2dJS工程可以通过Cocos2dx提供的命令工具Cocos实现,但这种方式不能与WebStorm或Cocos Code IDE集成开发工具很好地集成,不便于程序编写和调试。由于Cocos Code IDE工具是Cocos2dx开发的专门为Cocos2dJS和Cocos2dx Lua开发设计的,因此使用Cocos Code IDE工具很方便创建Cocos2dJS工程。
首先需要在Cocos Code IDE工具中先配置JavaScript框架,打开Cocos Code IDE工具,选择Window→Preferences命令,弹出对话框,如图322所示,选择Cocos→JavaScript,在右边的JavaScript Frameworks列表框中选择<Cocos2dJS引擎目录>。
图322配置JavaScript框架
JavaScript框架配置不需要每次都进行,只是在最开始的时候配置一下,但创建工程的时候,Cocos Code IDE工具会从这个JavaScript框架目录中创建工程文件。
接下来就可以创建JavaScript工程。选择File→New Project命令,如图323所示,弹出项目类型选择对话框。
图323项目类型选择对话框
选中CocosJavaScriptProject,然后单击Next按钮,弹出如图324所示的对话框。在Project Name文本框中输入工程名称,Create Project in Workspace是在Workspace目录中创建工程,需要选中该复选框,选中Create From Existing Resource复选框可以从已经存在的工程创建。现在不需要选中该复选框。
图324新建项目对话框
选择完成单击Next按钮进入到如图325所示配置运行环境对话框,在该对话框中可以配置项目运行时信息。Orientation项目是配置模拟器的朝向,其中landscape是横屏显示,portriat是竖屏显示。Desktop Runtime Settings中的Title文本框用于设置模拟器的标题,Desktop Windows initialize Size用于设置模拟器的大小。Add Native Codes用于设置添加本地代码到工程,这里不需要添加本地代码。最后单击Finish按钮完成创建操作,创建好工程之后,如图326所示。
图325配置运行环境对话框
图326创建工程成功界面
3.4.2在Cocos Code IDE中运行
创建好工程后可以测试一下。在左边的工程导航面板中选中index.html文件,从右击弹出的快捷菜单中选择Run As→CocosJSBinding命令运行刚刚创建的工程。运行结果如图327所示。
主要编写的程序代码是在src目录下,在本例中app.js文件负责处理主要的场景界面逻辑。如果想调试程序,可以设置断点,如图328所示,单击行号之前的位置,设置断点。
调试运行过程,从右击弹出的快捷菜单中选择Debug As→CocosJSBinding命令。如图329所示,程序运行到第32行挂起,并进入调试视图。在调试视图中可以查看程序运行的堆栈、变量、断点、计算表达式和单步执行程序等操作。
图327运行工程界面
图328设置断点
图329运行到断点挂起
在调试视图中,调试工具栏中的主要调试按钮,说明如图330所示。
图330调试工具栏按钮
第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 1Cocos2dJS中的JavaScript继承
本章小结
第3章 Hello Cocos2dJS
3.1 移动平台游戏引擎
3.2 Cocos2d游戏引擎
3.2.1 Cocos2d游戏引擎家谱
3.2.2 Cocos2dx引擎
3.2.3 Cocos2dJS引擎
3.3 搭建Cocos2dJS开发环境
3.3.1 搭建WebStorm开发环境
3.3.2 搭建Cocos Code IDE开发环境
3.3.3 下载和使用Cocos2dJS官方案例
3.3.4 使用API文档
3.4 第一个Cocos2dJS游戏
3.4.1 创建工程
3.4.2 在Cocos Code IDE中运行
3.4.3 在WebStorm中运行
3.4.4 工程文件结构
3.4.5 代码解释
3.5 Cocos2dJS核心概念
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 Cocos2dJS坐标系
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章 Cocos2dJS用户事件
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 实例: 运动的小球
本章小结
第二篇 进阶篇
第三篇 数据与网络篇
第四篇 优化篇
第五篇 多平台移植篇
第六篇 实战篇