Cocos2d-JS开发之旅——从HTML 5到原生手机游戏

内容概要

郑高强 腾讯高级工程师，有多年的游戏开发经验，精通Cocos2d-JS和HTML5，曾发表HTML5相关的国家专利，是为数不多的腾讯开源项目作者之一。

书籍目录

第一部分 准 备 篇

第1 章 Cocos2d-JS 介绍 / 2

1.1 原生手机游戏和HTML5 游戏 / 2

1.2 Cocos2d-JS 的前世今生 / 4

1.3 一次开发，同时完成HTML5 和原生游戏 / 5

1.4 Cocos2d-JS 相比Cocos2d-x 的优势和劣势 / 6

1.5 我们要准备些什么基础知识 / 6

1.6 本书适合人群 / 7

1.7 我们能学到什么 / 8

1.8 推荐的学习资源 / 8

第2 章 跑起我们的HelloWorld / 10

2.1 环境搭建 / 10

2.1.1 乞丐版装备——官方SDK 和记事本足矣 / 10

2.1.2 土豪版装备——JS编程三剑客（WebStorm+Chrome+Fiddler）/ 14

2.1.3 旗舰版装备——再来个Visual Studio 或Xcode / 18

2.2 轻松搞定第一个Cocos2d-JS 程序 / 19

2.2.1 建立第一个程序——HelloWorld / 19

2.2.2 打开HelloWorld 工程 / 20

2.2.3 运行HelloWorld / 20

2.3 HelloWorld 简约而不简单 / 22

2.3.1 程序的目录结构 / 22

2.3.2 它是怎么跑起来的 / 24

2.4 出发前再带上个武器——trace / 26

第一部分总结 / 27

第二部分 做一个简单的小游戏

第3 章 Cocos2d-JS 的平面世界 / 30

3.1 Cocos2d世界的经纬度——坐标系 / 30

3.2 场景（Scene）组成了Cocos2d 世界 / 31

3.3 Cocos2d世界物体的祖宗——节点（Node）/ 33

3.4 让2D世界层次化——层（Layer）/ 34

3.4.1 按层管理所有物体 / 34

3.4.2 把层扩展成各种功能的面板 / 35

3.5 二维世界的人物——精灵（Sprite）/ 36

3.6 天外有天——当层和精灵嵌套时怎么设置坐标 / 39

3.7 导演（Director）指挥一切 / 41

3.7.1 场景的切换 / 41

3.7.2 导演可以提供的信息 / 44

3.8 额外说说Cocos2d-JS 的语法 / 44

3.8.1 JS 面向对象和继承 / 44

3.8.2 有点麻烦的this / 46

第4 章 让世界来点动静 / 51

4.1 帧的概念 / 51

4.2 模仿胶卷电影——逐帧变化 / 52

4.3 现成的既定动作 / 54

4.3.1 基本动作 / 54

4.3.2 放一个连招——组合动作 / 59

4.3.3 让运动轨迹来多点花样 / 64

4.4 控制动作 / 66

4.4.1 停止动作 / 66

4.4.2 暂停/恢复动作 / 67

4.4.3 监听动作的开始与结束 / 68

4.5 播放声音 / 70

4.5.1 背景音乐 / 70

4.5.2 音效 / 70

4.5.3 音量 / 70

第5 章 让玩家操纵这个世界 / 72

5.1 鼠标事件 / 72

5.2 触摸事件 / 75

5.2.1 单点触摸 / 75

5.2.2 多点触摸 / 77

5.3 键盘事件 / 79

5.4 重力感应器事件 / 81

5.5 游戏进入后台/恢复显示事件 / 83

第6 章 控制小怪按时出现——定时器 / 84

6.1 每帧做点什么——scheduleUpdate / 84

6.2 scheduleOnce 取代熟悉的setTimeout / 85

6.3 schedule 取代setInterval / 86

6.4 取消定时器 / 86

6.5 暂停/恢复定时器 / 88

6.6 越来越慢的定时器 / 90

6.7 动手制作不变慢的定时器 / 92

第7 章 游戏界面 / 96

7.1 纯手工打造 / 96

7.1.1 按钮（MenuItem）/ 96

7.1.2 开关按钮（MenuItemToggle）/ 102

7.1.3 菜单（Menu）/ 103

7.1.4 文本（LabelTTF）/ 107

7.1.5 输入框 / 108

7.2 可视化编辑 / 109

7.2.1 CocosStudio UI 编辑器介绍 / 109

7.2.2 新建工程 / 111

7.2.3 UI 元素的属性 / 112

7.2.4 UI 元素的树形从属关系 / 113

7.2.5 导入图片 / 113

7.2.6 导出成果 / 114

7.2.7 回归手工——代码中加载UI文件 / 115

7.2.8 监听UI 元素 / 117

第8 章 不能光说不练——小小碰碰糖 / 122

8.1 功能说明 / 122

8.2 新建项目 / 123

8.3 制作糖果 / 124

8.4 游戏界面 / 125

8.5 一个新知识——遮罩（ClippingNode）/ 129

8.6 点击消除 / 134

8.7 补充糖果 / 137

8.8 关卡设计 / 139

8.9 保存进度——如何读/写数据 / 141

第9 章 把成果分享到网上 / 143

9.1 一句命令打包整个程序 / 143

9.2 文件太大，精简一下 / 146

9.3 世界上有免费的服务器吗 / 149

9.3.1 又当爹又当娘——Github 介绍 / 149

9.3.2 开通免费的个人主页 / 150

9.3.3 方便的Windows客户端 / 151

9.4 发布碰碰糖游戏，PC 手机都能玩 / 153

9.5 自定义类库让更新更方便 / 155

第二部分总结 / 158

第三部分 再做一个高大上游戏

第10 章 走向高大上的必经之路——简单的性能优化 / 160

10.1 化零为整——SpriteSheet / 160

10.1.1 零碎小图的问题 / 160

10.1.2 使用TexturePacker / 161

10.1.3 另一种Sprite 初始化方式——SpriteFrame / 163

10.2 分批处理——SpriteBatchNode / 164

10.3 不要乱丢垃圾——缓存池（pool）/ 167

10.4 拍一张定妆照——位图缓存（BakeLayer）/ 171

第11 章 让主角不再死板 / 173

11.1 帧动画（Frame Animation）/ 173

11.2 骨骼动画 / 176

11.2.1 什么是骨骼动画 / 176

11.2.2 CocosStudio 动画编辑器（Animation Editor）/ 177

11.2.3 导出骨骼动画 / 180

11.2.4 在代码中加载骨骼动画 / 180

11.2.5 更好用的工具——DragonBones / 183

第12 章 动态的背景 / 188

12.1 视差滚动背景（ParallaxNode）/ 188

12.2 实现一个无穷的视差滚动背景 / 190

12.3 瓦片地图（TiledMap）/ 193

12.3.1 瓦片地图介绍 / 193

12.3.2 使用工具：Tiled Map Editor / 194

12.3.3 在代码中加载瓦片地图 / 198

12.4 自行实现无限行走的瓦片地图 / 200

第13 章 界面的文字有点丑 / 204

13.1 高级货位图字体（BMFont）/ 204

13.2 制作位图字体 / 205

13.2.1 BMFont / 205

13.2.2 更特别的字体 / 207

13.3 使用位图字体 / 209

第14 章 超炫的效果——粒子系统 / 211

14.1 粒子系统介绍 / 211

14.2 Cocos2d-JS的粒子系统 / 211

14.3 Cocos2d-JS提供的几种现成效果 / 215

14.4 参数太多手写太累——各种可视化编辑器 / 222

14.5 在代码中加载可视化编辑的粒子系统 / 223

14.6 让粒子系统自生自灭 / 224

第15 章 尝试做一个更大的游戏——Hungry Hero（上篇）/ 226

15.1 游戏简介 / 226

15.2 将会用到什么技术 / 227

15.3 场景列表 / 228

15.4 超人的设计 / 230

15.5 食物的设计 / 232

15.6 障碍物的设计 / 232

15.7 咖啡和蘑菇的设计 / 233

15.8 背景的设计 / 233

15.9 音乐和音效 / 234

第16 章 尝试做一个更大的游戏——Hungry Hero（下篇）/ 235

16.1 准备工作 / 235

16.1.1 代码架构 / 235

16.1.2 打包SpriteSheet / 236

16.2 菜单界面的实现 / 237

16.2.1 添加界面元素 / 237

16.2.2 菜单 / 238

16.2.3 声音按钮 / 239

16.2.4 给画面添加动感 / 240

16.3 声音播放的统一管理 / 241

16.4 关于界面的实现 / 243

16.5 游戏数据的记录 / 245

16.6 游戏过程界面的实现 / 245

16.6.1 游戏UI / 246

16.6.2 加入背景 / 248

16.6.3 结束画面 / 250

16.7 超人登场 / 252

16.7.1 超人的帧动画 / 252

16.7.2 游戏过程场景的框架 / 254

16.7.3 超人的几种状态 / 256

16.7.4 超人起飞 / 256

16.7.5 操控超人 / 258

16.7.6 超人的飞行过程 / 261

16.8 食物 / 263

16.8.1 使用缓存池 / 263

16.8.2 分离食物的逻辑 / 264

16.8.3 食物的移动 / 266

16.8.4 食物的四种排列 / 267

16.8.5 咖啡和蘑菇 / 271

16.8.6 超人和食物的碰撞检测 / 272

16.8.7 接入游戏过程场景 / 274

16.9 障碍物 / 274

16.9.1 封装四种障碍物 / 274

16.9.2 分离障碍物的逻辑 / 278

16.9.3 创建障碍物 / 279

16.9.4 障碍物的移动 / 280

16.9.5 碰到障碍物 / 281

16.9.6 接入游戏过程场景 / 282

16.10 游戏结束 / 283

16.11 加入特效，大功告成 / 285

16.11.1 碰撞障碍物的画面抖动 / 285

16.11.2 吃食物的效果 / 286

16.11.3 蘑菇和咖啡效果 / 287

16.11.4 极速状态下的风痕 / 289

第三部分总结 / 291

第四部分 把两个游戏做成原生手机游戏

第17 章 咱们也来做APP / 294

17.1 一次开发到处运行 / 294

17.2 Android 调试和发布 / 295

17.2.1 命令行运行 / 295

17.2.2 命令行发布 / 297

17.2.3 可视化调试和发布——Cocos Code IDE / 299

17.3 在iOS 侧运行和发布 / 302

17.4 Cocos2d-JS App的启动过程 / 303

第18 章 真是这么美好吗？更多问题来了 / 304

18.1 内存管理 / 304

18.1.1 内存管理机制 / 304

18.1.2 如何使用retain 和release / 309

18.2 HTML5 和JSB 接口差异 / 310

18.3 如何解决兼容问题 / 311

18.4 把碰碰糖和Hungry Hero 部署到手机 / 313

18.4.1 碰碰糖的改造 / 313

18.4.2 Hungry Hero 的改造 / 314

第四部分总结 / 320

第五部分 高 级 篇

第19 章 订阅者模式——事件机制 / 322

19.1 谁更早知道这个事——事件优先级 / 322

19.2 不让别人知道——停止事件传递 / 324

19.3 自定义事件——eventManager / 326

19.4 自己动手做更贴心的消息中心 / 328

第20 章 屏幕尺寸适配哪家强 / 331

20.1 各种终端的屏幕尺寸 / 332

20.2 Cocos2d-JS屏幕适配大法 / 332

20.2.1 设计尺寸（WinSize）、可视尺寸（VisibleSize）和屏幕尺寸（FrameSize）/ 333

20.2.2 方案1——自适应拉伸 / 333

20.2.3 方案2——全显示 / 335

20.2.4 方案3——无黑边 / 335

20.2.5 方案4——固定高度 / 337

20.2.6 方案5——固定宽度 / 339

第21 章 让死去的主角灰掉——渲染控制 / 342

21.1 让人羡慕的Flash 效果 / 342

21.2 Cocos2d 能模仿Flash 吗 / 344

21.3 要从GPU说起 / 345

21.4 想怎么画就怎么画——自定义着色器（shader）/ 346

21.4.1 Cocos2d 和OpenGL ES / 346

21.4.2 画一个蓝色三角形 / 347

21.4.3 让原来彩色的精灵变黑白 / 351

21.4.4 着色器可以做更多 / 355

21.4.5 HTML5 和JSB 在着色器中的兼容问题 / 356

21.5 更简单的方式——混合模式（blendFunc）/ 357

21.5.1 混合模式介绍 / 357

21.5.2 利用混合模式 / 358

第22 章 动态热更新 / 363

22.1 热更新的原理 / 363

22.2 Cocos2d-JS热更新的关键点 / 364

22.3 利用AssetsManager 实现热更新 / 364

22.4 部署服务器测试热更新 / 371

第23 章 想说的还有很多 / 374

23.1 怎么从单机走向网络 / 374

23.2 发布游戏需要知道的 / 375

23.3 接下来可以做什么 / 375

23.4 欢迎反馈问题给笔者Kenko / 375

第五部分总结 / 376

作者简介

《Cocos2d-JS开发之旅——从HTML 5到原生手机游戏》从简单到复杂逐渐深入介绍Cocos2d-JS，包括HTML5和手机原生游戏两个方面的内容。这些内容融汇了作者多年的工作经验和Cocos2d-JS 的亲身使用教训，有助于读者快速掌握游戏开发的方法和避开不必要的麻烦。

《Cocos2d-JS开发之旅——从HTML 5到原生手机游戏》以两个游戏为线索，每一章的学习都为最终实现游戏而准备。除了基础的Cocos2d-JS使用方法，本书还会探讨如何调试发布原生手机游戏和另外一些高级话题。

《Cocos2d-JS开发之旅——从HTML 5到原生手机游戏》适合所有对2D 游戏开发感兴趣的人群，尤其是计算机专业学生、Flash/JS 开发者，因为Cocos2d-JS简单易懂，读者会发现自己已有的基础能快速应用或转移到Cocos2d-JS 游戏的开发中。

《Cocos2d-JS开发之旅——从HTML 5到原生手机游戏》配套资源的下载地址可通过扫描封面后勒口处的二维码获取，也可以登录“博文视点”网站（www.broadview.com.cn）下载相关资源。

 Cocos2d-JS开发之旅——从HTML 5到原生手机游戏下载