Cocos2d-JS游戏开发快速入门到实战 作者：何金成

Cocos2d-JS游戏开发快速入门到实战 出版社：清华大学出版社

Cocos2d-JS游戏开发快速入门到实战 内容简介

本书从游戏的基础知识介绍、Cocos引擎介绍、Cocos2dJS的环境搭建、Cocos核心概念、Cocos引擎节点、Cocos资源处理、Chipmunk物理引擎、Cocos网络编程等方面对Cocos2dJS进行了全面解析，所有章节的所有技术点均有示例，且所有示例均有配套的源码可供参考。除此之外，本书还提供聊天室、贪吃蛇、2048以及飞机大战4个项目的实战，对项目进行了全面的讲解和源码剖析。

本书有较强的实用性，可帮助想要入门游戏前端开发技术的同学快速理解并掌握Cocos2dJS前端技术，并能使用该技术进行项目开发。

Cocos2d-JS游戏开发快速入门到实战 目录

基础篇

第1章欢迎来到游戏世界

1.1游戏的前世今生

1.2游戏的玩法与分类

1.2.1MMORPG类游戏

1.2.2FPS类游戏

1.2.3ARPG类游戏

1.2.4卡牌类游戏

1.2.5RTS类游戏

1.2.6消除类游戏

1.2.7MOBA类游戏

1.2.8塔防类游戏

1.2.9跑酷类游戏

1.2.10数字类游戏

1.3游戏团队的职责与分工

1.4游戏的从无到有

1.5小结

第2章奇妙的Cocos2dJS之旅

2.1Cocos的前世今生

2.2Cocos2d引擎家族

2.3Cocos2dJS的介绍

2.3.1官方定义

2.3.2引擎架构

2.3.3引擎目录

2.4开发环境的搭建

2.4.1安装Python

2.4.2Cocos Console

2.4.3安装WebStorm

2.4.4配置Android环境

2.4.5Cocos Creator的安装

2.5Hello Cocos2dJS

2.5.1创建工程

2.5.2项目目录

2.5.3调试运行

2.5.4各平台打包及部署

2.6官方Demo

2.7小结

进阶篇

第3章Cocos核心概念

3.1导演、场景、精灵和图层

3.2实现菜单

3.2.1实现文字菜单

3.2.2实现精灵菜单

3.2.3实现开关菜单

3.3自定义场景

3.3.1创建场景脚本文件

3.3.2添加图层到场景

3.3.3添加精灵到图层

3.3.4修改main.js入口场景

3.3.5添加JS文件到project.json

3.4多场景切换

3.4.1导演的作用

3.4.2Director的常用方法

3.4.3场景切换Demo

3.5场景切换特效

3.6小结

第4章Cocos引擎节点

4.1锚点和坐标

4.2父子关系

4.3缩放和旋转

4.4计划任务

4.5电子时钟的实现

4.5.1功能分析

4.5.2底层格子的绘制和时间的定时刷新

4.5.3绘制数字

4.5.4绘制数字底色

4.6动作与组合动作

4.7生命周期

4.8事件处理

4.8.1创建单点事件监听处理

4.8.2创建事件监听的快捷方式

4.8.3键盘响应事件

4.8.4加速计事件

4.8.5鼠标响应事件

4.8.6自定义事件

4.8.7事件监听器的其他操作

4.9打地鼠

4.9.1玩法分析

4.9.2结构设计

4.9.3代码实现

4.10绘制节点

4.10.1绘图API

4.10.2绘制复杂图形

4.11小结

第5章Cocos资源处理

5.1纹理缓存

5.2图片的异步加载

5.3帧动画处理

5.4切图帧动画

5.5纹理打包文件的加载

5.5.1打包纹理文件

5.5.2加载打包文件

5.6粒子动画

5.6.1系统粒子动画

5.6.2自定义粒子动画

5.6.3使用粒子动画

5.7音乐和音效

5.8小结

第6章Chipmunk物理引擎

6.1基本概念

6.2引入Chipmunk引擎

6.3创建物理世界

6.3.1创建Space空间

6.3.2设置debug模式

6.3.3设置重力

6.3.4划分空间边界

6.4创建物理对象

6.4.1创建刚体

6.4.2设置body属性

6.4.3创建并绑定形状

6.4.4创建物理精灵对象

6.5物理世界的刷新

6.6碰撞检测

6.7运行物理世界

6.8小结

第7章Cocos网络编程

7．1网络通信协议

7．1．1TCP协议

7．1．2UDP协议

7．1．3TCP与UDP的比较

7．2NodeJS服务器环境的搭建

7．2．1NodeJS简介

7．2．2安装NodeJS

7．2．3Express框架

7．3HTTP通信

7．3．1HTTP协议位置

7．3．2请求响应模型

7．3．3HTTP客户端

7．3．4HTTP服务端

7．4WebSocket通信

7．4．1WebSocket出现之前的实时通信方式

7．4．2WebSocket原理

7．4．3WebSocket客户端

7．4．4WebSocket服务端

7．5小结

实战篇

第8章聊天室

8．1功能模块

8．2时序图

8．3功能设计

8．4客户端

8．4．1分层架构

8．4．2类图设计

8．4．3登录场景的实现

8．4．4聊天场景的实现

8．4．5网络处理的实现

8．4．6相关工具类

8．5服务端

8．5．1分层架构

8．5．2类图设计

8．5．3网络处理

8．5．4逻辑处理

8．5．5内存管理

8．6前后端通信

8．7小结

第9章贪吃蛇

9．1游戏玩法

9．2游戏分析

9．2．1身体关节

9．2．2移动方向

9．3游戏开发

9．3．1项目构建

9．3．2开始/结束场景

9．3．3游戏场景

9．3．4关节节点

9．3．5相关工具类

9．4运行效果

9．5小结

第10章2048

10.1游戏玩法

10.2游戏分析

10.3游戏开发

10.3.1项目构建

10.3.2开始/结束场景

10.3.3游戏场景

10.3.4滑动方块

10.3.5相关工具类

10.4运行效果

10.5小结

第11章飞机大战

11.1游戏玩法

11.2游戏分析

11.3游戏开发

11.3.1项目构建

11.3.2场景与状态机

11.3.3游戏场景

11.3.4游戏背景

11.3.5子弹类

11.3.6玩家类

11.3.7敌机类

11.3.8道具类

11.3.9加载动画

11.3.10全局管理

11.4运行效果

11.5小结

Cocos2d-JS游戏开发快速入门到实战 精彩文摘

第3章Cocos核心概念

经过前面的介绍，相信大家已经迫不及待地想要看看Cocos究竟有多大的本事。从本章开始逐步了解Cocos的核心概念，了解Cocos的世界到底是如何运转的。

本章内容：

■导演、场景、精灵和图层

■实现菜单

■自定义场景

■多场景切换

■场景切换特效

3.1导演、场景、精灵和图层

在Cocos的设计理念中，一款游戏就如同一部电影，在电影中有导演、场景、演员和布景，整个电影如何演、怎么演，演员在什么场景做什么事，都是由导演来控制，而在具体的场景、具体的布景中，演员淋漓尽致地表演，他们相互协作、相互依赖，最终形成了电影。

相似地，在Cocos的设计中也有类似的角色，它们分别是Director(导演)、Scene(场景)、Sprite(精灵)和Layer(图层)。它们在Cocos引擎中有着不同的责任，导演负责控制所有场景之间的转换与切换，场景控制所有层和精灵的展示，精灵负责所有的动作表现，图层则负责场景的构成及用户交互。它们之间相互依赖的关系如图31所示。

图31导演、场景、精灵和图层的关系

读者可以通过把游戏和电影中的内容对应来加深理解。一般来说，在一场电影中只会有一个导演，在一个Cocos游戏中也只会有一个导演类； 一场电影会有多个镜头，对应Cocos中就是多个场景，而同一时刻只会同时运行一个场景，就像电影中不可能同时出现多个镜头； 电影场景中的房屋、天空、大地对应Cocos游戏中的图层，而房屋中的桌椅板凳、天空中的云、地面上的人对应Cocos中的精灵。以上各种元素构成了一整部电影，通过电影的这么一个过程，读者比较能够容易理解Cocos的机制原理。

这里以第2章创建的HelloWorld工程的默认JS文件app.js为例来了解导演、场景、精灵和图层。读者可以跟随代码一步一步进入Cocos2dJS的世界。

首先看游戏的入口文件main.js，Web启动会通过index.html加载CCBoot.js，然后加载入口文件main.js，而Native启动会通过原生代码加载jsb_boot.js，然后调用main.js，无论是Web还是Native启动，最终都会以main.js为入口进入到游戏，下面来看一看main.js里都做了什么。

cc.game.onStart=function(){

if(!cc.sys.isNative && document.getElementById("cocosLoading"))

//If referenced loading.js, please remove it

document.body.removeChild(document.getElementById("cocosLoading"));

//传true值让retina显示可用，在Android设备上默认为不可用以提高性能

cc.view.enableRetina(cc.sys.os===cc.sys.OS_IOS ? true : false);

//调整视图属性

cc.view.adjustViewPort(true);

//取消下面代码的注释来为你的游戏设置固定的朝向

cc.view.setOrientation(cc.ORIENTATION_PORTRAIT);

//设置分辨率的策略和大小

cc.view.setDesignResolutionSize(960, 640, cc.ResolutionPolicy.SHOW_ALL);