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游戏编程和开发技术书籍，介绍了使用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。

关东升 国内知名iOS技术作家，iOS技术顾问，高级培训讲师，移动开发专家。担任51CTO社区iOS技术顾问，精通iOS、Android和Windows Phone及HTML5等移动开发技术。曾先后主持开发大型网络游戏《神农诀》的iOS和Android客户端开发，国家农产品追溯系统的iPad客户端开发，酒店预订系统的iOS客户端开发，金融系统的iOS、Windows Phone 及Android客户端开发。在App Store上发布数款游戏和应用软件，擅长移动平台的应用和游戏类项目开发。长期为中国移动研究院、云南移动、东软、方正科技、大唐电信、中石油、深圳康拓普、上海财富168、天津港务局等企事业单位授课。著有《iOS网络编程与云端应用*实践》、《iOS传感器应用开发*实践》、《iOS图形图像、动画和多媒体编程技术*实践》、《iOS开发指南——从零基础到App Store上架》、《交互设计的艺术——iOS 7拟物化到扁平化革命》等iOS专业图书。

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

篇 基础篇
第2章 JavaScript语言基础
2.1环境搭建
2.1.1JavaScript编辑工具
2.1.2JavaScript运行测试环境
2.1.3HelloJS实例测试
2.2标识符和保留字
2.2.1标识符
2.2.2保留字
2.3常量和变量
2.3.1常量
2.3.2变量
2.3.3命名规范
2.4注释
2.5JavaScript数据类型
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.10JavaScript中的面向对象
2.10.1创建对象
2.10.2常用内置对象
2.10.3原型
2.11Cocos2dJS中的JavaScript继承
本章 小结
第3章 Hello Cocos2dJS
3.1移动平台游戏引擎
3.2Cocos2d游戏引擎
3.2.1Cocos2d游戏引擎家谱
3.2.2Cocos2dx引擎
3.2.3Cocos2dJS引擎
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.5Cocos2dJS核心概念
3.5.1导演
3.5.2场景
3.5.3层
3.5.4精灵
3.5.5菜单
3.6Node与Node层级架构
3.6.1Node中重要的操作
3.6.2Node中重要的属性
3.6.3游戏循环与调度
3.7Cocos2dJS坐标系
3.7.1UI坐标
3.7.2OpenGL坐标
3.7.3世界坐标和模型坐标
本章 小结
第4章 标签和菜单
4.1使用标签
4.1.1cc.LabelTTF
4.1.2cc.LabelAtlas
4.1.3cc.LabelBMFont
4.2使用菜单
4.2.1文本菜单
4.2.2精灵菜单和图片菜单
4.2.3开关菜单
本章 小结
第5章 精灵
5.1Sprite精灵类
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实例： 运动的小球
本章 小结

第二篇 进阶篇
第9章 游戏背景音乐与音效
9.1Cocos2dJS中音频文件
9.1.1音频文件
9.1.2Cocos2dJS跨平台音频支持
9.2使用AudioEngine引擎
9.2.1音频文件的预处理
9.2.2播放背景音乐
9.2.3停止播放背景音乐
9.3实例： 设置背景音乐与音效
9.3.1资源文件编写
9.3.2HelloWorld场景实现
9.3.3设置场景实现
本章 小结
第10章 粒子系统
10.1问题的提出
10.2粒子系统基本概念
10.2.1实例： 打火机
10.2.2粒子发射模式
10.2.3粒子系统属性
10.3Cocos2dJS内置粒子系统
10.3.1内置粒子系统
10.3.2实例： 内置粒子系统
10.4自定义粒子系统
本章 小结
第11章 瓦片地图
11.1地图性能问题
11.2Cocos2dJS中瓦片地图API
11.3实例： 忍者无敌
11.3.1设计地图
11.3.2程序中加载地图
11.3.3移动精灵
11.3.4检测碰撞
11.3.5滚动地图
本章 小结
第12章 物理引擎
12.1使用物理引擎
12.2Chipmunk引擎
12.2.1Chipmunk核心概念
12.2.2使用Chipmunk物理引擎的一般步骤
12.2.3实例： HelloChipmunk
12.2.4实例： 碰撞检测
12.2.5实例： 使用关节
12.3Box2D引擎
12.3.1Box2D核心概念
12.3.2使用Box2D物理引擎的一般步骤
12.3.3实例： HelloBox2D
12.3.4实例： 碰撞检测
12.3.5实例： 使用关节
本章 小结

第三篇 数据与网络篇
第13章 数据持久化
13.1Cocos2dJS中的数据持久化
13.2localStorage数据持久化
13.2.1cc.sys.localStorage API函数
13.2.2实例： MyNotes
本章 小结
第14章 基于HTTP网络通信
14.1网络结构
14.1.1客户端服务器结构网络
14.1.2点对点结构网络
14.2HTTP与HTTPS
14.3使用XMLHttpRequest对象开发客户端
14.3.1使用XMLHttpRequest对象
14.3.2实例： 重构MyNotes
14.4数据交换格式
14.5JSON数据交换格式
14.5.1文档结构
14.5.2JSON解码与编码
14.5.3实例： 完善MyNotes
本章 小结
第15章 基于Node.js的Socket.IO网络通信
15.1Node.js
15.1.1Node.js安装
15.1.2Node.js测试
15.2使用Socket.IO
15.2.1Socket.IO服务器端开发
15.2.2Cocos2dJS的Socket.IO客户端开发
15.3实例： Socket.IO重构MyNotes
15.3.1Socket.IO服务器端开发
15.3.2Node.js访问SQLite数据库
15.3.3Cocos2dJS的Socket.IO客户端开发
本章 小结

第四篇 优化篇
第16章 性能优化
16.1缓存创建和清除
16.1.1场景与资源
16.1.2缓存创建和清除时机
16.2图片与纹理优化
16.2.1选择图片格式
16.2.2拼图
16.2.3纹理像素格式
16.2.4背景图片优化
16.2.5纹理缓存异步加载
16.3JSB内存管理
16.4使用Bake层
16.5使用对象池
16.5.1对象池API
16.5.2实例： 发射子弹
本章 小结

第五篇 多平台移植篇
第17章 移植到Web平台
17.1Web服务器与移植
17.1.1Apache HTTP Server安装
17.1.2移植到Web服务器
17.2问题汇总
17.2.1JS文件的压缩与代码混淆
17.2.2判断平台
17.2.3资源不能加载问题
本章 小结
第18章 移植到本地iOS平台
18.1iOS开发环境搭建
18.1.1Xcode安装和卸载
18.1.2Xcode操作界面
18.2创建本地工程
18.3编译与移植
18.4移植问题汇总
18.4.1iOS平台声音移植问题
18.4.2使用PVR纹理格式
18.4.3横屏与竖屏设置问题
18.5多分辨率屏幕适配
18.5.1问题的提出
18.5.2分辨率策略
本章 小结
第19章 移植到本地Android平台
19.1搭建交叉编译和打包环境
19.1.1安装Android SDK
19.1.2管理Android SDK
19.1.3管理Android开发模拟器
19.1.4安装Android NDK
19.2交叉编译
19.3打包运行
19.4移植问题汇总
19.4.1JS文件编译问题
19.4.2横屏与竖屏设置问题
本章 小结

第六篇 实战篇
第20章 使用Git管理程序代码版本
20.1代码版本管理工具——Git
20.1.1版本控制历史
20.1.2术语和基本概念
20.1.3Git环境配置
20.1.4Git常用命令
20.2代码托管服务——GitHub
20.2.1创建和配置GitHub账号
20.2.2创建代码库
20.2.3删除代码库
20.2.4派生代码库
20.2.5GitHub协同开发
20.3实例： Cocos2dJS游戏项目协同开发
20.3.1提交到GitHub代码库
20.3.2克隆GitHub代码库
20.3.3重新获得GitHub代码库
本章 小结
第21章 Cocos2dJS敏捷开发项目实战——迷失航线手机游戏
21.1迷失航线游戏分析与设计
21.1.1迷失航线故事背景
21.1.2需求分析
21.1.3原型设计
21.1.4游戏脚本
21.2任务1： 游戏工程的创建与初始化
21.2.1迭代1.1： 创建工程
21.2.2迭代1.2： 添加资源文件
21.2.3迭代1.3： 添加常量文件SystemConst.js
21.2.4迭代1.4： 多分辨率适配
21.2.5迭代1.5： 发布到GitHub
21.3任务2： 创建Loading场景
21.3.1迭代2.1： 修改启动界面
21.3.2迭代2.2： 配置文件resource.js
21.4任务3： 创建Home场景
21.4.1迭代3.1： 添加场景和层
21.4.2迭代3.2： 添加菜单
21.5任务4： 创建设置场景
21.6任务5： 创建帮助场景
21.7任务6： 游戏场景实现
21.7.1迭代6.1： 创建敌人精灵
21.7.2迭代6.2： 创建玩家飞机精灵
21.7.3迭代6.3： 创建炮弹精灵
21.7.4迭代6.4： 初始化游戏场景
21.7.5迭代6.5： 游戏场景菜单实现
21.7.6迭代6.6： 玩家飞机发射炮弹
21.7.7迭代6.7： 炮弹与敌人的碰撞检测
21.7.8迭代6.8： 玩家飞机与敌人的碰撞检测
21.7.9迭代6.9： 玩家飞机生命值显示
21.7.10迭代6.10： 显示玩家得分情况
21.8任务7： 游戏结束场景
本章 小结
第22章 为迷失航线游戏添加广告
22.1使用谷歌AdMob广告
22.1.1注册AdMob账号
22.1.2管理AdMob广告
22.1.3AdMob广告类型
22.1.4下载谷歌AdMob Ads SDK
22.2为迷失航线游戏Android平台添加AdMob广告
22.2.1Google play服务下载与配置
22.2.2导入libcocos2dx类库工程到Eclipse
22.2.3导入LostRoutes工程到Eclipse
22.2.4编写AdMob相关代码
22.2.5交叉编译、打包和运行
22.3为迷失航线游戏iOS平台添加AdMob广告
22.3.1Cocos2dx引擎iOS平台下搭建AdMob开发环境
22.3.2编写AdMob相关代码
本章 小结
第23章 把迷失航线游戏发布到Google play 应用商店
23.1谷歌Android应用商店Google play
23.2还有“后一千米”
23.2.1JS文件编译
23.2.2添加图标
23.2.3应用程序打包
23.3发布产品
23.3.1上传APK
23.3.2填写商品详细信息
23.3.3定价和发布范围
本章 小结
第24章 把迷失航线游戏发布到苹果App Store应用商店
24.1苹果的App Store
24.2iOS设备测试
24.2.1创建开发者证书
24.2.2设备注册
24.2.3创建App ID
24.2.4创建配置概要文件
24.2.5设备上运行
24.3还有“后一千米”
24.3.1添加图标
24.3.2添加启动界面
24.3.3修改发布产品属性
24.3.4为发布进行编译
24.3.5应用打包
24.4发布产品
24.4.1创建应用及基本信息
24.4.2应用定价信息
24.4.3基本信息输入
24.4.4上传应用前准备
24.4.5上传应用
24.5常见审核不通过的原因
本章 小结

序　　Cocos引擎已经步入第五个年头。我非常高兴地看到，市面上高质量的Cocos引擎相关书籍越来越多。其中，关东升老师及其团队创作的“Cocos2dx实战”系列图书涵盖了C 卷、JS卷、Lua卷、工具卷、CocoStudio卷，组成了一个较为完整的系统，极具特色。此前，《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的游戏开发世界里自由遨游，实现自己的梦想！

序欢迎来到Cocos的开发世界。　　Cocos2dx自发布个版本以来，历经4年的成长，到如今使用者已遍布全球，数不清的采用Cocos引擎开发的游戏横扫各个畅销榜单，我自己也成了其中很多游戏的忠实玩家。Cocos引擎能一步一步走到今天，我很欣慰，感谢许多业界朋友的帮助，也感谢广大开发者的鼎力支持。　　近两年，手机游戏行业在移动互联网世界的崛起是大家有目共睹的。行业格局在变化，Cocos2dx不改初衷，开源免费始终如一，便捷高效步步提升，跨平台特性也日益完善。我们的引擎团队不断地努力改进，尽可能降低游戏开发的门槛，让更多有想法、有创意的朋友，不管是专业还是非专业出身的开发者，都能着手去实现。　　关东升老师是国内著名的移动开发专家，精通多种开发技术，也有多年的开发经验，是一位不可多得的良师益友。这次关老师携手赵大羽先生倾力创作这套“Cocos2dx实战”，共包括5册，分别是C 卷、JS卷、Lua卷、工具卷和CocoStudio卷，其中Lua卷与Cocos2dJS卷更是填补了国内市场的空白。　　这套图书系统地论述了Cocos2dx游戏开发理论与实践，涵盖了Cocos2dx开发的几乎所有方面的知识领域。全部内容深入浅出，全面系统，对Cocos2dx开发入门者和提高者都大有裨益，非常值得阅读，我在这里郑重推荐给大家。　　除了撰写图书，关老师还开设了超过400课时的Cocos引擎在线课程，我很敬佩他的专业精神，也非常感谢他一直以来对Cocos2dx的支持。关老师的书籍和在线课程在业内有相当高的人气，相信能为许多想要进入Cocos开发世界的朋友提供极大的帮助。  希望大家能从关老师的书籍和在线课程中学到更多知识与技能，我也期待能有更多的开发者加入Cocos2dx开发的大家庭。后祝愿各位都能马到成功！

前言手机游戏市场越来越火爆，Cocos2d团队推出了Cocos2dx游戏引擎，它的优势在于在一个平台下开发，多平台发布。目前很多开发团体都转型使用Cocos2dx开发游戏。基于这样的一个背景，智捷课堂与清华大学出版社策划了5本有关Cocos2dx游戏引擎丛书：  《Cocos2dx实战： C 卷》
 《Cocos2dx实战： Lua卷》 《Cocos2dx实战： 工具卷》 《Cocos2dx实战： CocoStudio卷》 《Cocos2dx实战： JS卷——Cocos2dJS开发》本书是Cocos2dx游戏引擎JS卷——Cocos2dJS开发，就是使用Cocos2dx的JavaScript语言API。本书的编写历经5个月的时间，从Cocos2dJS 3.0alpha0到Cocos2dJS 3.0终版本经历了多个版本的变化，而且Cocos2dJS 3各个版本之间有很多的变化，每次都重新修改案例、修改书中内容。经过几个月努力，终于在2014年9月完成初稿，几个月来智捷课堂团队夜以继日，几乎推掉一切社交活动，推掉很多企业邀请去讲课的机会，每天工作12小时，不敢有任何的松懈，不敢有任何的模棱两可，只做一件事情——编写此书。每一个文字、每一张图片、每一个实例都是编者的呕心之作。关于本丛书具体进展请读者关注智捷课堂官方网站http://www.51work6.com。关于本书网站为了更好地为广大读者提供服务，专门为本书建立了一个网站http://www.cocoagame.net，大家可以查看相关出版进度，并对书中内容发表评论，提出宝贵意见。关于源代码书中包括了100多个完整的案例项目源代码，大家可以到本书网站http://www.cocoagame.net下载。勘误与支持我们在网站http://www.cocoagame.net中建立了一个勘误专区，及时地把书中的问题、失误和纠正反馈给广大读者，您发现了什么问题或有什么问题，可以在网上留言，也可以发送电子邮件到[email protected]，我们会在时间回复您。也可以在新浪微博中与我们联系： @tony_关东升。本书主要由关东升撰写。此外，智捷课堂团队的贾云龙、赵大羽、李玉超、赵志荣、关珊和李政刚也参与了本书的编写工作。感谢赵大羽老师手绘了书中的全部草图，并从专业的角度修改完善，力求完美地呈现给广大读者。感谢清华大学出版社的盛东亮先生，他为本书的策划出版做了大量工作。感谢我的家人给予了我鼎力的支持，使我能投入全部精力，专心编写此书。由于手机游戏发展迅猛，编写时间仓促，书中难免存在不妥之处，敬请读者提出宝贵意见。2015年2月于北京

王哲：这次关老师携手赵大羽先生倾力创作这套“Cocos2d-x实战”，共包括5册，分别是C 卷、JS卷、Lua卷、工具卷和CocoStudio卷，其中Lua卷与JS卷更是填补了国内市场的空白。这套图书系统地论述了Cocos2dx游戏开发理论与实践，涵盖了Cocos2d-x开发的几乎所有方面的知识领域。全部内容深入浅出，全面系统，对入门和进阶者都大有裨益，非常值得阅读，我在这里郑重推荐给大家。除了撰写图书，关老师还开设了超过401课时的Cocos引擎在线课程，我很敬佩他的专业精神，也非常感谢他一直以来对

第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年开发。——引自于百度百科(http://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下载界面，它的下载地址是http://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下载地址是http://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文档，可以通过http://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调试工具栏按钮
3.4.3在WebStorm中运行Cocos Code IDE工具提供的运行是本地运行，即Cocos2dJS程序通过JSB在本地运行。如果需要测试Web浏览器上运行情况，需要使用WebStorm工具。由于已经在Cocos Code IDE创建了工程，不需要再创建，但是需要进入到WebStorm中进行设置。具体设置过程参考3.3.3节，创建文件在本地WebStorm工程，为了能与Cocos Code IDE共用相同工程，需要设置WebStorm的Project Root为Cocos Code IDE的Workspace目录。设置完成界面如图331所示。其中的HelloJS是要运行的工程，从右击弹出的快捷菜单中选择HelloJS中的index.html文件就可以运行。具体运行过程参考3.3.3节。运行结果如图332所示。

图331设置完成界面

图332在浏览器中运行

3.4.4工程文件结构至此创建的HelloJS工程已经能够运行起来，下面介绍一下HelloJS工程中的文件结构。使用Cocos Code IDE打开HelloJS工程，

图333HelloJS工程中的文件结构
左侧的导航面板如图333所示。在图333所示导航面板中，res文件夹存放资源文件，src文件夹是主要的程序代码，其中的app.js是实现游戏场景的JavaScript文件，resource.js定义资源对应的变量。HelloJS根目录下还有config.json、project.json、index.html和main.js，其中config.json保存模拟器运行配置信息，在创建工程时生成； project.json是项目的配置信息； index.html是Web工程的首页； main.js是与首页index.html对应的JavaScript文件。3.4.5代码解释HelloJS工程中有很多文件，下面详细解释一下它们内部的代码。1. index.html文件index.html文件只有在Web浏览器上运行才会启动它。index.html代码如下： 
!DOCTYPE html
html
head
meta charset=”utf-8″
titleCocos2d-html5 Hello World test/title
link rel=”icon” type=”image/GIF” href=”res/favicon.ico”/
meta name=”apple-mobile-web-app-capable” content=”yes”/①
meta name=”full-screen” content=”yes”/
meta name=”screen-orientation” content=”portrait”/
meta name=”x5-fullscreen” content=”true”/
meta name=”360-fullscreen” content=”true”/②
style
body, canvas, div {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/style
/head
body style=”padding:0; margin: 0; background: #000;”
canvas id=”gameCanvas” width=”800″ height=”450″/canvas③
script src=”frameworks/cocos2d-html5/CCBoot.js”/script④
script src=”main.js”/script⑤
/body
/html
上述代码第①~②行是设置网页的meta信息，meta信息是网页基本信息，这些设置能够使得index.html网页很好地在移动设备上显示。第③行代码放置一个canvas标签，canvas标签是HTML5提供的，通过JavaScript可以在Canvas上绘制2D图形，Cocos2dJS在网页运行的游戏场景都是通过Canvas渲染出来的，Cocos2dJS的本地运行游戏场景的渲染是通过OpenGL渲染出来的。事实上，HTML5也有类似于OpenGL渲染技术，它是WebGL，但是考虑到浏览器的支持程度不同，Cocos2dJS没有采用WebGL渲染技术而是选择的Canvas渲染，虽然Canvas渲染速度不及WebGL，但是一般的网页游戏都能满足要求。第④行代码是导入JavaScript文件CCBoot.js，不需要维护该文件。第⑤行代码是导入JavaScript文件main.js，需要维护该文件。2. main.js文件main.js负责启动游戏场景，无论Web浏览器运行还是本地运行都是通过该文件启动游戏场景的。main.js代码如下： 
cc.game.onStart=function(){①
cc.view.adjustViewPort(true);②
cc.view.setDesignResolutionSize(800, 450, cc.ResolutionPolicy.SHOW_ALL);③
cc.view.resizeWithBrowserSize(true);④
//load resources
cc.LoaderScene.preload(g_resources, function () {⑤
cc.director.runScene(new HelloWorldScene());⑥
}, this);
};
cc.game.run();⑦
上述代码第①行是启动游戏，cc.game是一个游戏启动对象。代码第②~④行是设置游戏视图属性，其中第③行是设置游戏视图大小，它涉及屏幕适配问题，cc.ResolutionPolicy.SHOW_ALL是屏幕适配策略。第⑤行代码是加载游戏场景所需资源，其中g_resources参数是加载资源的数组，该数组是在src/resource.js文件中定义的。第⑥行代码是运行HelloWorldScene场景，cc.director是导演对象，运行HelloWorldScene场景会进入到该场景。第⑦行代码cc.game.run()是运行游戏启动对象。3. project.json文件项目配置信息project.json文件代码如下： 
{
“project_type”: “javascript”,

“debugMode” : 1,
“showFPS” : true,①
“frameRate” : 60,②
“id” : “gameCanvas”,
“renderMode” : 0,
“engineDir”:”frameworks/cocos2d-html5″,

“modules” : ［”cocos2d”］,③

“jsList” : ［④
“src/resource.js”,⑤
“src/app.js”⑥
］
}
project.json文件采用JSON字符串表示，重点关注有标号的语句，其中第①行代码设置是否显示帧率调试信息，帧率调试就是显示在左下角文字信息。第②行代码设置帧率为60，即屏幕1/60s刷新一次。第③行代码是加载游戏引擎的模块，Cocos2dJS引擎有很多模块，模块的定义是在HelloJS＼frameworks＼cocos2dhtml5＼moduleConfig.json，在资源管理器中才能看到该文件，这些模块在场景启动的时候加载，因此一定要根据需要导入，否则造成资源的浪费。例如，再添加一个chipmunk物理引擎模块，代码第③行可以修改为如下形式： 
“modules” : ［”cocos2d”,”chipmunk”］
代码第④~⑥行是声明需要加载的JavaScript文件，这里的文件主要是由用户编写的，每次添加一个JavaScript文件到工程中，就需要在此处添加声明。4. config.json文件只有在Cocos Code IDE中运行才需要该文件，它是配置模拟器运行信息的，该文件在工程发布时和Web环境下运行都没有用处。但如果想在Cocos Code IDE中运行，并改变模拟器大小和方向，可以修改该文件。config.json文件代码如下： 
{
“init_cfg”: {①
“isLandscape”: true,②
“name”: “HelloJS”,③
“width”: 960,④
“height”: 640,⑤
“entry”: “main.js”,⑥
“consolePort”: 6050,
“debugPort”: 5086,
“forwardConsolePort”: 10088,
“forwardUploadPort”: 10090,
“forwardDebugPort”: 10086
},
“simulator_screen_size”: ［
{
“title”: “iPhone 3Gs (480×320)”,
“width”: 480,
“height”: 320
},
…
］
}
上述代码第①行是初始配置信息，其中第②行是设置横屏显示还是竖屏显示，第③行代码name属性是设置模拟器上显示的标题，第④和⑤行是设置屏幕的宽和高，第⑥行代码是设置入口文件。5. resource.js文件resource.js文件在src文件夹中，处于该文件夹中的文件是由用户来维护的。在resource.js文件中定义资源对应的变量。resource.js文件代码如下： 
var res={①
HelloWorld_png : “res/HelloWorld.png”,
CloseNormal_png : “res/CloseNormal.png”,
CloseSelected_png : “res/CloseSelected.png”
};

var g_resources=［］;②
for (var i in res) {
g_resources.push(res［i］);③
}
上述代码第①行是定义JSON变量res，它为每一个资源文件定义一个别名，在程序中访问资源，资源名不要“写死”，写死被称为硬编码(英文为Hard Code或Hard Coding)，硬编码指的是在软件实作上，把输出或输入的相关参数(如路径、输出的形式或格式)直接以常量的方式书写在源代码中，而非在运行时期由外界指定的设置、资源、数据或格式做出适当回应。——引自于维基百科(http://zh.wikipedia.org/zh-cn/%E5%AF%AB%E6%AD%BB)而是通过一个可配置的别名访问，这样当环境变化之后修改起来很方便。第②行代码是定义资源文件集合变量g_resources，它的内容是通过代码第③行把res变量中的资源文件循环添加到g_resources中。当然，可以采用下面的形式逐一添加： 
var g_resources=［
//image
res.HelloWorld_png,
res.CloseNormal_png,
“res/CloseSelected.png”
］;
放在g_resources变量中的资源，会在场景启动的时候加载。在Web浏览器下运行，如果加载的资源找不到，则会报出404错误。6. app.js文件app.js文件在src文件夹中，处于该文件夹中的文件是由用户来维护的。可以看到图327所示的场景是在app.js中实现的。app.js代码如下： 
var HelloWorldLayer=cc.Layer.extend({①
sprite:null,　　//定义一个精灵属性
ctor:function () {　　//构造方法
this._super();　　//初始化父类
var size=cc.winSize;　　//获得屏幕大小
var closeItem=new cc.MenuItemImage(②
res.CloseNormal_png,
res.CloseSelected_png,
function () {
cc.log(“Menu is clicked!”);
}, this);
closeItem.attr({
x: size.width – 20,
y: 20,
anchorX: 0.5,
anchorY: 0.5
});③

var menu=new cc.Menu(closeItem);　　//通过closeItem菜单项创建菜单对象
menu.x=0;④
menu.y=0;⑤
this.addChild(menu, 1); //把菜单添加到当前层上

var helloLabel=new cc.LabelTTF(“Hello World”, “Arial”, 38);//创建标签对象
helloLabel.x=size.width / 2;
helloLabel.y=0;
this.addChild(helloLabel, 5);
this.sprite=new cc.Sprite(res.HelloWorld_png);//创建精灵对象
this.sprite.attr({
x: size.width / 2,
y: size.height / 2,
scale: 0.5,
rotation: 180
});
this.addChild(this.sprite, 0);⑥

this.sprite.runAction(
cc.sequence(
cc.rotateTo(2, 0),
cc.scaleTo(2, 1, 1)
)
);　　//在精灵对象上执行一个动画
helloLabel.runAction(
cc.spawn(
cc.moveBy(2.5, cc.p(0, size.height – 40)),
cc.tintTo(2.5,255,125,0)
)
);　　//在标签对象上执行一个动画
return true;
}
});

var HelloWorldScene=cc.Scene.extend({⑦
onEnter:function () {⑧
this._super();⑨
var layer=new HelloWorldLayer();⑩
this.addChild(layer);//把HelloWorldLayer层放到HelloWorldScene场景中
}
});
在app.js文件中声明了两个类HelloWorldLayer(见代码第①行)和HelloWorldScene(见代码第⑦行)，然后通过HelloWorldScene实例化HelloWorldLayer，见代码第⑩行。HelloWorldScene是场景，HelloWorldLayer是层，场景包含若干个层。场景和层会在3.5节具体介绍。另外，上述代码第②行是创建一个图片菜单项对象，单击该菜单项的时候回调function方法。

提示cc.MenuItemImage中res.CloseNormal_png和res.CloseSelected_png变量是在resource.js文件中定义的资源文件别名。在后文中，res.开头的变量都是资源文件的别名，这里不再详细解释。

第③行代码是菜单项对象的位置，其中closeItem.attr({…})语句可以设置多个属性，类似的还有代码第⑥行，采用JSON格式表示，x属性表示x轴坐标，y属性表示y轴坐标，anchorX表示x轴锚点，anchorY表示y轴锚点。关于锚点的概念后面小节介绍。关于精灵x和y轴属性，也可以通过代码④和⑤方式设置。代码第⑧行是声明onEnter方法，它是在进入HelloWorldScene场景时回调的。onEnter方法是重写父类的方法，必须通过this._super()语句调用父类的onEnter方法，见代码第⑨行所示。3.5Cocos2dJS核心概念Cocos2dJS中有很多概念，这些概念很多来源于动画、动漫和电影等行业，如导演、场景和层等概念。当然，也有些传统的游戏的概念。Cocos2dJS中核心概念包括导演、动作、场景、效果、层、粒子运动、节点、地图、精灵、物理引擎、菜单。本节介绍导演、场景、层、精灵、菜单概念以及对应的类，由于节点概念很重要，会在下一节详细介绍。而其他的概念在后面的章节中介绍。3.5.1导演导演类cc.Director用于管理场景，采用单例设计模式，在整个工程中只有一个实例对象。由于是单例模式，能够保存一致的配置信息，便于管理场景对象。获得导演类Director实例语句如下： 
var director=cc.Director._getInstance();
也可以在程序中直接使用cc.director，该对象是在框架内使用如下语句进行赋值： 
cc.director=cc.Director._getInstance();
所以，cc.director是cc.Director的实例对象。导演对象职责如下： (1) 访问和改变场景。(2) 访问Cocos2dJS的配置信息。(3) 暂停、继续和停止游戏。(4) 转换坐标。3.5.2场景场景类cc.Scene是构成游戏的界面，类似于电影中的场景。场景大致可以分为以下几类： 

图334cc.Scene类图
(1) 展示类场景。播放视频或简单地在图像上输出文字，来实现游戏的开场介绍、胜利和失败提示、帮助介绍。(2) 选项类场景。主菜单、设置游戏参数等。(3) 游戏场景。这是游戏的主要内容。场景类cc.Scene的类图如图334所示。从类图可见，Scene继承了Node类，Node是一个重要的类，很多类都从Node类派生而来，其中有Scene、Layer等。3.5.3层层是写游戏的重点，用户大约99%以上的时间是在层上实现游戏内容。层的管理类似于Photoshop中的图层，它也是一层一层叠在一起。图335所示是一个简单的主菜单界面，它是由三个层叠加实现的。为了让不同的层可以组合产生统一的效果，这些层基本上都是透明或者半透明的。层的叠加是有顺序的，如图335所示，从上到下依次是菜单层、精灵层、背景层。Cocos2dJS是按照这个次序来叠加界面的。这个次序同样用于事件响应机制，即菜单层先接收到系统事件，然后是精灵层，后是背景层。在事件的传递过程中，如果有一个层处理了该事件，则排在后面的层将不再接收到该事件。每一层又可以包括很多各式各样的内容要素，如文本、链接、精灵、地图等内容。

图335层叠加

层类cc.Layer的类图如图336所示。3.5.4精灵精灵类cc.Sprite是游戏中非常重要的概念，它包括敌人、控制对象、静态物体和背景等。通常情况它会进行运动，运动方式包括移动、旋转、放大、缩小和动画等。cc.Sprite类图如图337所示。从图中可见，cc.Sprite是cc.Node子类，cc.Sprite包含很多类型。例如，物理引擎精灵类PhysicsSprite也都属于精灵。3.5.5菜单菜单在游戏中是非常重要的概念，它提供操作的集合，在Cocos2dJS中菜单类是cc.Menu。cc.Menu类图如图338所示。从类图可见，cc.Menu类派生于cc.Layer。

图336cc.Layer类图

图337cc.Sprite类图

图338cc.Menu类图

在菜单中又包含了菜单项cc.MenuItem，cc.MenuItem类图如图339所示。从图中可见，菜单项cc.MenuItem有很多种形式的子类，如cc.MenuItemLabel、cc.MenuItemSprite和cc.MenuItemToggle，它表现出不同的效果。每个菜单项都有三个基本状态： 正常、选中和禁止。

图339cc.MenuItem类图

3.6Node与Node层级架构Cocos2dJS采用层级(树形)结构管理场景、层、精灵、菜单、文本、地图和粒子系统等节点(node)对象。一个场景包含多个层，一个层又包含多个精灵、菜单、文本、地图和粒子系统等对象。层级结构中的节点可以是场景、层、精灵、菜单、文本、地图和粒子系统等任何对象。节点的层级结构如图340所示。

图340节点的层级结构

这些节点有一个共同的父类cc.Node，部分子类cc.Node类图如图341所示。cc.Node类是Cocos2dJS为重要的根类，它是场景、层、精灵、菜单、文本、地图和粒子系统等类的根类。

图341cc.Node类图

3.6.1Node中重要的操作cc.Node作为根类，它有很多重要的方法。下面分别介绍一下： (1) var childNode=new cc.Node()，创建节点。(2) node.addChild(childNode, 0, 123)，增加新的子节点。第二个参数是Z轴绘制顺序，第三个参数是标签。(3) var childNode=node.getChildByTag(123)，查找子节点。通过标签查找子节点。(4) node.removeChildByTag(123, true)，通过标签删除子节点，并停止所有该子节点上的一切动作。(5) node.removeChild(childNode, true)，删除childNode节点，并停止所有该子节点上的一切动作。(6) node.removeAllChildrenWithCleanup(true)，删除node节点的所有子节点，并停止这些子节点上的一切动作。(7) node.removeFromParentAndCleanup(true)，从父节点删除node节点，并停止所有该节点上的一切动作。3.6.2Node中重要的属性Node还有两个非常重要的属性： position和anchorPoint。position(位置)属性是Node对象的实际位置。position属性往往还要配合使用anchorPoint属性，为了将一个Node对象(标准矩形图形)精准地放置在屏幕某一个位置上，需要设置该矩形的锚点，anchorPoint是相对于position的比例，默认是(0.5,0.5)。看看下面的几种情况： (1) 图342所示是anchorPoint为(0.5,0.5)情况，这是默认情况。(2) 图343所示是anchorPoint为(0.0,0.0)情况。

图342anchorPoint为(0.5,0.5)

图343anchorPoint为(0.0,0.0)

(3) 图344所示是anchorPoint为(1.0,1.0)情况。(4) 图345所示是anchorPoint为(0.66, 0.5)情况。为了进一步了解anchorPoint的使用情况，修改HelloJS实例。在app.js的ctor方法中修改label代码： 
var helloLabel=new cc.LabelTTF(“Hello World”, “Arial”, 38);

helloLabel.setPosition(size.width / 2, 0);①
//helloLabel.x=size.width / 2;②
//helloLabel.y=0;③

helloLabel.setAnchorPoint(cc.p(1.0, 1.0));④
//helloLabel.anchorX=1.0;⑤
//helloLabel.anchorY=1.0;⑥

this.addChild(helloLabel, 5);
上述代码第①行调用setPosition(x, y)方法设置position属性，也可以直接通过属性helloLabel.x和helloLabel.y设置，见代码第②行和第③行。代码第④行调用setAnchorPoint (x, y)方法设置anchorPoint属性，也可以直接通过属性helloLabel.anchorX和helloLabel.anchorY设置，见代码第⑤行和第⑥行。

图344anchorPoint为(1.0,1.0)

图345anchorPoint为(0.66, 0.5)

此外，由于多个属性需要设置，可以通过helloLabel.attr({…})语句进行设置。代码如下： 
helloLabel.attr({
x: size.width / 2,
y: 0,
anchorX: 1.0,
anchorY: 1.0
});
运行结果如图346所示，helloLabel设置了anchorPoint为(1.0,1.0)。

图346helloLabel的anchorPoint为(1.0,1.0)

3.6.3游戏循环与调度每一个游戏程序都有一个循环在不断运行，它是由导演对象来管理、维护。如果需要场景中的精灵运动起来，可以在游戏循环中使用定时器(cc.Scheduler)对精灵等对象的运行进行调度。因为cc.Node类封装了cc.Scheduler类，所以也可以直接使用cc.Node中定时器相关方法。cc.Node中定时器相关方法主要有： (1) scheduleUpdate()。每个Node对象只要调用该方法，那么这个Node对象就会定时地每帧回调用一次自己的update(dt)方法。(2) schedule(callback_fn, interval, repeat, delay)。与scheduleUpdate方法功能一样，不同的是，可以指定回调方法(通过callback_fn指定)。interval是时间间隔，repeat是执行的次数，delay是延迟执行的时间。(3) unscheduleUpdate()。停止update(dt)方法调度。 (4) unschedule(callback_fn)。可以指定具体方法停止调度。(5) unscheduleAllCallbacks()。可以停止所有的调度。为了进一步了解游戏循环与调度的使用，修改HelloJS实例。修改app.js代码，添加update(dt)声明。代码如下： 
var HelloWorldLayer=cc.Layer.extend({
sprite: null,
ctor: function () {
…
var closeItem=new cc.MenuItemImage(
res.CloseNormal_png,
res.CloseSelected_png,
function () {
cc.log(“Menu is clicked!”);
this.unscheduleUpdate();
}, this);

…
var helloLabel=new cc.LabelTTF(“Hello World”, “Arial”, 38);

helloLabel.attr({
x: size.width / 2,
y: 0,
anchorX: 1.0,
anchorY: 1.0
});

helloLabel.setTag(123);①
//更新方法
this.scheduleUpdate();②
//this.schedule(this.update, 1.0/60, cc.REPEAT_FOREVER, 0.1);③

this.addChild(helloLabel, 5);

//add “HelloWorld” splash screen
this.sprite=new cc.Sprite(res.HelloWorld_png);
this.sprite.attr({
x: size.width / 2,
y: size.height / 2,
scale: 0.5,
rotation: 180
});
this.addChild(this.sprite, 0);

this.sprite.runAction(
cc.sequence(
cc.rotateTo(2, 0),
cc.scaleTo(2, 1, 1)
)
);
helloLabel.runAction(
cc.spawn(
cc.moveBy(2.5, cc.p(0, size.height – 40)),
cc.tintTo(2.5, 255, 125, 0)
)
);
return true;
},
update: function (dt) {④
var label=this.getChildByTag(123);⑤
label.x=label.x 0.2;⑥
label.y=label.y 0.2;⑦
}
});
为了能够在ctor方法之外访问标签对象helloLabel，需要为标签对象设置Tag属性，其中的第①行代码就是设置Tag属性为123，第⑤行代码是通过Tag属性重新获得这个标签对象。为了能够开始调度，还需要在ctor方法中调用scheduleUpdate(见第②行代码)或schedule(见第③行代码)。代码第④行的update(dt)方法是在调度方法，精灵等对象的变化逻辑都是在这个方法中编写的。这个例子很简单，只是让标签对象动起来，第⑥行代码就是改变它的位置。为了省电等，如果不再使用调度，一定不要忘记停止调度。可以在Close菜单项的单击事件中停止调度。代码如下： 
var closeItem=new cc.MenuItemImage(
res.CloseNormal_png,
res.CloseSelected_png,
function () {
cc.log(“Menu is clicked!”);
this.unscheduleUpdate();
}, this);
代码this.unscheduleUpdate()就是停止调度update，如果是其他的调度方法，则可以采用unschedule或unscheduleAllSelectors停止。3.7Cocos2dJS坐标系在图形图像和游戏应用开发中坐标系是非常重要的。在Android和iOS等平台应用开发的时候使用的二维坐标系的原点在左上角，而在Cocos2dJS坐标系中其原点在左下角，而且Cocos2dJS坐标系又可以分为世界坐标系和模型坐标系。3.7.1UI坐标UI坐标就是Android和iOS等应用开发的时候使用的二维坐标系。它的原点位于左上角，如图347所示。UI坐标原点是在左上角，x轴向右为正，y轴向下为正。在Android和iOS等平台使用的视图、控件等都遵守这个坐标系。然而在Cocos2dJS中默认不是采用UI坐标，但是有的时候也会用到UI坐标，例如在触摸事件发生的时候，会获得一个触摸对象(touch)。触摸对象提供了很多获得位置信息的方法，如下面代码所示： 
vartouchLocation=touch.getLocationInView();
使用getLocationInView()方法获得触摸点坐标事实上就是UI坐标，它的坐标原点在左上角。3.7.2OpenGL坐标在上面提到了OpenGL坐标，OpenGL坐标是一种三维坐标。由于Cocos2dJS的JSB是采用OpenGL渲染，因此默认坐标就是OpenGL坐标，只不过只采用两维(x和y轴)。如果不考虑z轴，OpenGL坐标的原点在左下角，如图348所示。

图347UI坐标

图348OpenGL坐标

一般会通过一个触摸对象获得OpenGL坐标位置，如下面代码所示： 
var touchLocation=touch.getLocation();

提示三维坐标根据z轴的指向不同分为左手坐标和右手坐标。右手坐标是z轴指向屏幕外，如图349(a)所示。左手坐标是z轴指向屏幕里，如图349(b)所示。OpenGL坐标是右手坐标，而微软平台的Direct3DDirect3D(简称D3D)是微软公司在Microsoft Windows操作系统上所开发的一套3D绘图编程接口，是DirectX的一部分，目前广为各家显卡所支持。与OpenGL同为计算机绘图软件和计算机游戏常使用的两套绘图编程接口。—— 引自于维基百科(http://zh.wikipedia.org/wiki/Direct3D)是左手坐标。

图349三维坐标

3.7.3世界坐标和模型坐标由于OpenGL坐标又可以分为世界坐标和模型坐标，所以Cocos2dJS的坐标也有世界坐标和模型坐标。你是否有过这样的问路经历： 张三会告诉你向南走1km，再向东走500m。而李四会告诉你向右走1km，再向左走500m。这里两种说法或许都可以找到你要寻找的地点。张三采用的坐标是世界坐标，他把地球作为参照物，表述位置使用地理的东、南、西和北。而李四采用的坐标是模型坐标，他让你自己作为参照物，表述位置使用你的左边、你的前边、你的右边和你的后边。从图350中可以看到，A的坐标是(5,5)，B的坐标是(6,4)，事实上这些坐标值就是世界坐标。如果采用A的模型坐标来描述B的位置，则B的坐标是(1,-1)。

图350世界坐标和模型坐标
有时需要将世界坐标与模型坐标互相转换。可以通过Node对象的如下方法实现： (1) {cc.Point} convertToNodeSpace(worldPoint)。将世界坐标转换为模型坐标。(2) {cc.Point} convertToNodeSpaceAR(worldPoint)。将世界坐标转换为模型坐标。AR表示相对于锚点。(3) {cc.Point} convertTouchToNodeSpace(touch)。将世界坐标中触摸点转换为模型坐标。(4) {cc.Point} convertTouchToNodeSpaceAR(touch)。将世界坐标中触摸点转换为模型坐标。AR表示相对于锚点。(5) {cc.Point} convertToWorldSpace(nodePoint)。将模型坐标转换为世界坐标。(6) {cc.Point} convertToWorldSpaceAR(nodePoint)。将模型坐标转换为世界坐标。AR表示相对于锚点。
下面通过两个例子了解一下世界坐标与模型坐标的互相转换。1. 世界坐标转换为模型坐标图351所示是世界坐标转换为模型坐标实例运行结果。

图351世界坐标转换为模型坐标
在游戏场景中有两个Node对象，其中Node1的坐标是(400, 500)，大小是300×100像素； Node2的坐标是(200, 300)，大小也是300×100像素。这里的坐标事实上就是世界坐标，它的坐标原点是屏幕的左下角。编写代码如下： 
var HelloWorldLayer=cc.Layer.extend({
sprite: null,
ctor: function () {
this._super();

var size=cc.winSize;
var closeItem=new cc.MenuItemImage(
res.CloseNormal_png,
res.CloseSelected_png,
function () {
cc.log(“Menu is clicked!”);
}, this);
closeItem.attr({
x: size.width – 20,
y: 20,
anchorX: 0.5,
anchorY: 0.5
});
var menu=new cc.Menu(closeItem);
menu.x=0;
menu.y=0;
this.addChild(menu, 1);

//创建背景
var bg=new cc.Sprite(res.bg_png); ①
bg.setPosition(size.width / 2, size.height / 2);
this.addChild(bg, 2); ②

//创建Node1
var node1=new cc.Sprite(res.node1_png); ③
node1.setPosition(400, 500);
node1.setAnchorPoint(1.0, 1.0);
this.addChild(node1, 2); ④

//创建Node2
var node2=new cc.Sprite(res.node2_png); ⑤
node2.setPosition(200, 300);
node2.setAnchorPoint(0.5, 0.5);
this.addChild(node2, 2); ⑥

var point1=node1.convertToNodeSpace(node2.getPosition());⑦
var point3=node1.convertToNodeSpaceAR(node2.getPosition());⑧

cc.log(“Node2 NodeSpace=(” point1.x “,” point1.y “)”);
cc.log(“Node2 NodeSpaceAR=(” point3.x “,” point3.y “)”);

return true;
}
});
代码第①~②行是创建背景精灵对象，这个背景是一个白色900×640像素的图片。代码第③~④行是创建Node1对象，并设置了位置和锚点属性。代码第⑤~⑥行是创建Node2对象，并设置了位置和锚点属性。第⑦行代码将Node2的世界坐标转换为相对于Node1的模型坐标。而第⑧行代码是类似的，它是相对于锚点的位置。运行结果如下： 
JS: Node2 NodeSpace=(100,-100)
JS: Node2 NodeSpaceAR=(-200,-200)
结合图351解释一下，Node2的世界坐标转换为相对于Node1的模型坐标，就是将Node1的左下角作为坐标原点(图352中的A点)，不难计算出A点的世界坐标是(100, 400)，那么convertToNodeSpace方法就是A点坐标减去C点坐标，结果是(-100,100)。而convertToNodeSpaceAR方法要考虑锚点，因此坐标原点是B点，B点坐标减去C点坐标，结果是(-200,-200)。2. 模型坐标转换为世界坐标图352所示是模型坐标转换为世界坐标实例运行结果。

图352模型坐标转换为世界坐标

在游戏场景中有两个Node对象，其中Node1的坐标是(400, 500)，大小是300×100像素； Node2是放置在Node1中的，它对于Node1的模型坐标是(0, 0)，大小是150×50像素。编写代码如下： 
var HelloWorldLayer=cc.Layer.extend({
sprite: null,
ctor: function () {
this._super();
var size=cc.winSize;
var closeItem=new cc.MenuItemImage(
res.CloseNormal_png,
res.CloseSelected_png,
function () {
cc.log(“Menu is clicked!”);
}, this);
closeItem.attr({
x: size.width – 20,
y: 20,
anchorX: 0.5,
anchorY: 0.5
});
var menu=new cc.Menu(closeItem);
menu.x=0;
menu.y=0;
this.addChild(menu, 1);

//创建背景
var bg=new cc.Sprite(res.bg_png);
bg.setPosition(size.width / 2, size.height / 2);
this.addChild(bg, 2);

//创建Node1
var node1=new cc.Sprite(res.node1_png);
node1.setPosition(400, 500);
node1.setAnchorPoint(0.5, 0.5);
this.addChild(node1, 2);

//创建Node2
var node2=new cc.Sprite(res.node2_png); 
node2.setPosition(0, 0); ①
node2.setAnchorPoint(0, 0); ;②

node1.addChild(node2, 2); ③

var point2=node1.convertToWorldSpace(node2.getPosition());④
var point4=node1.convertToWorldSpaceAR(node2.getPosition());⑤

cc.log(“Node2 WorldSpace=(” point2.x “,” point2.y “)”);
cc.log(“Node2 WorldSpaceAR=(” point4.x “,” point4.y “)”);

return true;
}
});
上述代码主要关注第③行，它是将Node2放到Node1中，这是与之前的代码的区别。这样第①行设置的坐标就变成了相对于Node1的模型坐标了。第④行代码将Node2的模型坐标转换为世界坐标。而第⑤行代码是类似的，它是相对于锚点的位置。运行结果如下： 
JS: Node2 WorldSpace=(250,450)
JS: Node2 WorldSpaceAR=(400,500)
图352所示的位置可以用世界坐标描述。将代码第①~③行修改如下： 
node2-setPosition(Vec2(250, 450));
node2-setAnchorPoint(Vec2(0.0, 0.0));
this-addChild(node2, 0);
本章小结通过对本章的学习，可以了解Cocos2dJS开发环境的搭建，熟悉Cocos2dJS核心概念，这些概念包括导演、场景、层、精灵和菜单等节点对象。此外，还介绍了Node和Node层级架构，以及Cocos2dJS的坐标系。