Cocos Creator2.x游戏入门

《Cocos Creator 2.x 游戏入门》由国内资深游戏设计师主笔，结合全国多家院校的课程设置，选用官方及业内典型实例编写而成。全书系统地介绍了Cocos Creator 2.x 引擎的基础知识，涵盖了Cocos Creator 2.x 所有的核心内容，包括对环境搭建、编辑器基础、场景制作、脚本开发、资源工作流程以及事件、动作、UI、动画、渲染、音效等系统模块的详细讲解，并结合具体项目案例提高学习效率。通过对本书的学习，读者可以全面掌握Cocos Creator 2.x 在2D 游戏开发中的开发流程和技术难点，提高自己的实践能力，成为一名优秀的程序员，实现制作游戏的梦想。

毛居冬，13年工作开发经验，精通游戏客户端与服务器开发，曾担任多家游戏公司CTO。掌握主流游戏引擎相关技术，精通Cocos和Unity3D等主流游戏引擎，有多款完整游戏研发经验并成功上线，如《疯狂的麦咭2》《开心赛车》《天天捕鱼》《天天斗地主》等，游戏研发与教学经验丰富，具备深厚的语言基础。

目 录 第1 章　Cocos Creator 基础与开发环境搭建 001 Cocos 大事记 001 1.1　认识Cocos Creator 001 1.1.1　初识Cocos Creator 001 1.1.2　Cocos Creator 的工作流程说明 002 1.1.3　功能特性 003 1.1.4　架构特色 003 1.1.5 使用说明 005 1.1.6　Cocos Creator 2.x 版本 005 1.2　安装Cocos Creator 007 1.2.1　下载 Cocos Creator 007 1.2.2　Windows 安装说明 007 1.2.3　Mac 安装说明 009 1.2.4　运行Cocos Creator 011 1.2.5　H5 游戏调试必备之谷歌Chrome浏览器安装 012 1.2.6　常见问题 012 1.2.7　版本兼容性和回退方法 012 1.3　使用Dashboard（仪表板） 013 1.3.1　界面总览 013 1.3.2　最近打开项目 013 1.3.3　新建项目 014 1.3.4　打开其他项目 015 1.3.5　动态 015 1.3.6　教程 016 1.4　创建项目“Hello World” 016 1.4.1　创建项目 016 1.4.2　打开场景，开始工作 017 1.4.3　预览游戏 018 1.4.4　尝试修改 018 1.4.5　本节总述 019 1.5　项目结构 019 1.5.1　项目文件夹结构 020 1.5.2　项目文件夹的功能 020 1.6　Cocos2d-x 用户上手指南 021 1.6.1　典型误区 021 1.6.2　数据驱动 022 1.6.3　Framework 层面的变化 022 1.6.4　事件系统 022 1.7　学习Cocos Creator 需要的知识 022 1.7.1　编程语言 023 1.7.2　编辑器的基本使用 023 1.7.3　游戏的基本系统 023 1.7.4　实战和扩展 023 1.8　本章小结 023 第2 章　编辑器基础 024 2.1　资源管理器 024 2.1.1　界面介绍 024 2.1.2　资源列表 025 2.1.3　创建资源 026 2.1.4　选择资源 026 2.1.5　移动资源 027 2.1.6　删除资源 027 2.1.7　其他操作 027 2.1.8　过滤资源 028 2.2　Scene 场景编辑器 028 2.2.1　视图介绍 029 2.2.2　视图常用操作 029 2.2.3　使用变换工具布置节点 030 2.3　Node Tree 层级管理器 033 2.3.1　创建节点 034 2.3.2　删除节点 034 2.3.3　建立和编辑节点层级关系 034 2.3.4　更改节点的显示顺序 035 2.3.5　其他操作 035 2.4　属性检查器 036 2.4.1　节点名称和激活开关 037 2.4.2　节点属性 037 2.4.3　组件属性 037 2.4.4　编辑属性 037 2.5　控件库 038 2.5.1　内置控件 039 2.5.2　自定义控件 039 2.6　控制台输出 040 2.6.1　日志等级 040 2.6.2　Console 设置以及功能 040 2.6.3　查看日志 041 2.7　设置 041 2.7.1　常规 041 2.7.2　数据编辑 042 2.7.3　原生开发环境 043 2.7.4　预览运行 044 2.8　项目设置 045 2.8.1　分组管理 045 2.8.2　模块设置 045 2.8.3　项目预览 046 2.8.4　自定义引擎 047 2.8.5　服务 047 2.9　Cocos Creator 的主菜单 047 2.9.1　文件 047 2.9.2　编辑 048 2.9.3　节点 048 2.9.4　组件 049 2.9.5　项目 049 2.9.6　面板 049 2.9.7　布局 050 2.9.8　扩展 050 2.9.9　开发者 050 2.9.10　帮助 050 2.10　工具栏 051 2.10.1　选择变换工具 051 2.10.2　变换工具显示模式 051 2.10.3　运行预览游戏 052 2.10.4　预览地址 052 2.10.5　打开文件夹 052 2.11　编辑器布局 052 2.11.1　调整面板大小 052 2.11.2　移动面板 053 2.11.3　层叠面板 053 2.12　预览和构建 054 2.12.1　选择预览平台 054 2.12.2　模拟器 055 2.12.3　浏览器 055 2.12.4　浏览器兼容性 056 2.12.5　构建发布 056 2.13　本章小结 056 第3 章　场景制作的工作流程 057 3.1　节点和组件 057 3.1.1　创建节点 057 3.1.2　组件 058 3.1.3　节点属性对 Sprite 组件的影响 059 3.1.4　节点颜色（Color）和不透明度（Opacity）属性 060 3.1.5　添加其他组件 060 3.1.6　本节小结 061 3.2　坐标系和节点变换属性 061 3.2.1　Cocos Creator 坐标系 061 3.2.2　锚点 062 3.2.3　子节点的本地坐标系 063 3.2.4　变换属性 064 3.3　管理节点层级和显示顺序 066 3.3.1　节点本地坐标系 067 3.3.2　管理节点逻辑关系 069 3.3.3　管理节点渲染顺序 070 3.3.4　性能考虑 070 3.4　使用场景编辑器搭建场景 070 3.4.1　使用 Canvas 作为渲染根节点 070 3.4.2　逻辑节点的归属 070 3.4.3　使用节点创建菜单快捷添加基本节点类型 071 3.4.4　提高场景制作效率的技巧 072 3.5　本章小结 073 第4 章　资源的工作流程 074 4.1　创建和管理场景 075 4.1.1　创建场景 075 4.1.2　保存场景 075 4.1.3　切换场景 075 4.1.4　修改场景资源自动释放策略 075 4.1.5　防止特定资源被自动释放 076 4.1.6　修改场景加载策略 076 4.1.7　不延迟加载资源 077 4.1.8　延迟加载依赖的资源 077 4.2　图像资源 077 4.2.1　导入图像资源 077 4.2.2　Texture 属性 078 4.2.3　寻址模式 079 4.2.4　过滤方式 079 4.2.5　genMipmaps 080 4.2.6　packable 080 4.2.7　Texture 和 SpriteFrame 资源类型 080 4.2.8　使用 SpriteFrame 081 4.2.9　性能优化注意事项 081 4.3　预制资源 082 4.3.1　创建预制资源 082 4.3.2　保存预制资源 083 4.3.3　还原预制资源 083 4.3.4　自动同步和手动同步 084 4.3.5　将预制资源还原成普通节点 085 4.3.6　预制资源的选项 085 4.4　图集资源 086 4.4.1　使用图集资源的优势 086 4.4.2　制作图集资源 086 4.4.3　导入图集资源 087 4.4.4　Atlas 和 SpriteFrame 088 4.4.5　碎图转图集 088 4.5　自动图集资源 088 4.5.1　创建自动图集资源 089 4.5.2　配置自动图集资源 089 4.5.3　生成图集 090 4.6　压缩纹理机制 090 4.6.1　配置压缩纹理 090 4.6.2　压缩纹理 091 4.6.3　示例 092 4.6.4　透明通道Alpha 提取压缩Separate Alpha 092 4.7　艺术数字资源 093 4.7.1　创建艺术数字资源 093 4.7.2　配置艺术数字资源 094 4.7.3　使用艺术数字资源 094 4.8　资源导入导出工作流程 094 4.8.1　资源导出 095 4.8.2　确认依赖 095 4.8.3　资源导入 096 4.8.4　脚本和资源冲突 096 4.8.5　工作流应用 096 4.9　图像资源的自动剪裁 097 4.9.1　Sprite 组件剪裁相关设置详解 098 4.9.2　自带位置信息的序列帧动画 098 4.9.3　TexturePacker 设置 099 4.10　脚本资源 099 4.11　字体资源 099 4.11.1　导入字体资源 099 4.11.2　使用字体资源 100 4.11.3　拖曳创建 Label（字体）节点 102 4.11.4　位图字体合并渲染 102 4.12　粒子资源 102 4.12.1　导入粒子资源 102 4.12.2　在场景中添加粒子系统 103 4.12.3　在项目中的存放 104 4.12.4　渲染错误的解决方法 104 4.13　声音资源 104 4.13.1　关于声音的加载模式 105 4.13.2　动态选择加载模式 105 4.14　骨骼动画资源 106 4.14.1　导入骨骼动画资源 106 4.14.2　创建骨骼动画资源 106 4.15　DragonBones 骨骼动画资源 107 4.15.1　导入 DragonBones 骨骼动画资源 107 4.15.2　创建DragonBones 骨骼动画资源 108 4.16　地图资源 109 4.16.1　导入地图资源 109 4.16.2　创建地图资源 110 4.16.3　在项目中的存放 111 4.17　JSON 资源 111 4.18　文本资源 111 4.19　导入其他编辑器项目 111 4.19.1　简介 111 4.19.2　操作步骤说明 111 4.19.3　Cocos Studio 项目导入说明 112 4.19.4　Cocos Builder 项目导入说明 113 4.20　本章小结 113 第5 章　脚本开发的工作流程 114 5.1　WebStorm 代码编辑器的环境配置 114 5.1.1　下载与安装WebStorm 114 5.1.2　使用WebStorm 打开Cocos Creator工程 115 5.1.3　代码提示 116 5.1.4　忽略文件 116 5.1.5　忽略目录 117 5.1.6　查看函数原型 118 5.2　Visual Studio Code 代码编辑环境配置 118 5.2.1　安装 VS Code 118 5.2.2　安装Cocos Creator API 适配插件 118 5.2.3　在项目中生成智能提示数据 118 5.2.4　切换VS Code 语言 119 5.2.5　使用VS Code 打开和编辑项目 120 5.2.6　设置文件显示和搜索过滤 120 5.3　JavaScript 快速入门 121 5.3.1　概述 121 5.3.2　变量 122 5.3.3　函数 122 5.3.4　返回值 123 5.3.5　if 123 5.3.6　if else 123 5.3.7　JavaScript 数组（Array） 124 5.3.8　JavaScript 对象（Object） 124 5.3.9　匿名函数 125 5.3.10　链式语法 126 5.3.11　this 关键字 126 5.3.12　运算符 126 5.3.13　代码风格 127 5.3.14　组合学到的知识 127 5.4　使用脚本 128 5.4.1　创建和编辑脚本 128 5.4.2　添加脚本到场景节点中 129 5.4.3　使用 cc.Class 声明类型 130 5.4.4　访问节点和组件 134 5.4.5　常用节点和组件接口 140 5.5　组件生命周期和脚本执行顺序 143 5.5.1　组件脚本生命周期 143 5.5.2　组件脚本执行顺序 145 5.6　使用脚本创建和销毁节点 148 5.6.1　创建新节点 148 5.6.2　克隆已有节点 148 5.6.3　创建预制节点 149 5.6.4　销毁节点 149 5.6.5　destroy 和 removeFromParent 的区别 150 5.7　资源管理 150 5.7.1　加载和切换场景 150 5.7.2　获取和动态加载资源 152 5.8　CCClass 进阶参考 158 5.9　属性参数 167 5.9.1　【属性检查器】的相关参数 167 5.9.2　序列化相关参数 167 5.9.3　其他参数 168 5.10　本章小结 168 第6 章　事件系统 169 6.1　监听和发射事件 169 6.1.1　监听事件 169 6.1.2　关闭监听 170 6.1.3　发射事件 170 6.1.4　事件参数说明 171 6.1.5　派送事件 171 6.1.6　事件对象 172 6.1.7　系统内置事件 172 6.2　节点系统事件 172 6.2.1　鼠标事件类型和事件对象 173 6.2.2　触摸事件类型和事件对象 174 6.2.3　触摸事件的传递 175 6.2.4　cc.Node 的其他事件 177 6.3　全局系统事件 177 6.4　本章小结 179 第7 章　动作系统与计时器 180 7.1　在 Cocos Creator 中使用动作系统 180 7.1.1　动作系统 API 180 7.1.2　动作类型 181 7.1.3　动作回调 182 7.1.4　缓动动作 183 7.2　动作列表 183 7.2.1　基础动作类型 183 7.2.2　容器动作 184 7.2.3　即时动作 184 7.2.4　时间间隔动作 185 7.3　新版本缓动系统 186 7.3.1　缓动系统（cc.tween）介绍 186 7.3.2　链式 API 186 7.3.3　设置缓动属性 187 7.3.4　支持缓动任意对象的任意属性 187 7.3.5　同时执行多个属性 187 7.3.6　easing 187 7.3.7　自定义 progress 188 7.3.8　复制缓动 188 7.3.9　插入其他的缓动到队列中 188 7.3.10　并行执行缓动 189 7.3.11　回调 189 7.3.12　重复执行 189 7.3.13　延迟执行 190 7.4　使用计时器 190 7.5　本章小结 191 第8 章　图像和渲染组件 193 8.1　Sprite 组件参考 193 8.1.1　Sprite 组件的属性 194 8.1.2　渲染模式 194 8.1.3　填充模式 195 8.2　Label 组件参考 196 8.2.1　Label 组件的属性 196 8.2.2　Label 排版属性 197 8.2.3　文本缓存类型（Cache Mode）的属性 197 8.2.4　详细说明 198 8.3　LabelOutline 组件参考 198 8.4　LabelShadow 组件参考 198 8.5　Mask（遮罩）组件参考 199 8.6　Camera 摄像机 200 8.6.1　摄像机的属性 200 8.6.2　摄像机方法 202 8.6.3　坐标转换 202 8.6.4　截图 202 8.7　ParticleSystem 组件参考 204 8.7.1　概述 204 8.7.2　创建方式 204 8.7.3　ParticleSystem 组件的属性 205 8.8　Spine 组件参考 206 8.8.1　Spine 组件的属性 207 8.8.2　Spine 换装 208 8.8.3　Spine 顶点效果 211 8.9　DragonBones 组件参考 212 8.10　Graphics 组件参考 214 8.10.1　Graphics 组件的属性 214 8.10.2　绘图接口 214 8.10.3　Graphics 举例 215 8.11　WebView 组件参考 216 8.11.1　WebView 组件的属性 217 8.11.2　WebView 事件 217 8.11.3　通过脚本代码添加回调 218 8.12　本章小结 221 第9 章　UI 系统 222 9.1　多分辨率适配方案 222 9.1.1　设计分辨率和屏幕分辨率 222 9.1.2　在场景中使用 Canvas 组件 227 9.2　对齐策略 228 9.2.1　需要贴边对齐的按钮和小元素 228 9.2.2　嵌套对齐元素 229 9.2.3　根据对齐需要自动缩放节点尺寸 230 9.2.4　制作和屏幕大小保持一致的节点 230 9.2.5　设置百分比对齐距离 231 9.2.6　运行时每帧更新对齐和优化策略 231 9.2.7　对齐组件对节点位置、尺寸的限制 232 9.3　制作可任意拉伸的 UI 图像 232 9.3.1　编辑图像资源的九宫格切分 232 9.3.2　设置 Sprite 组件使用 Sliced 模式 233 9.4　文字排版 234 9.4.1　文字在约束框中对齐 234 9.4.2　文字尺寸和行高 234 9.4.3　排版模式（Overflow） 236 9.4.4　自动换行（Enable Wrap Text） 237 9.4.5　截断（Clamp）模式自动换行 237 9.4.6　自动缩小（Shrink）模式自动换行 238 9.4.7　中文自动换行 239 9.4.8　文字节点的锚点 239 9.4.9　文字配合对齐挂件（Widget） 239 9.5　自动布局容器 240 9.5.1　布局模式（Layout Type） 240 9.5.2　节点排列方向 241 9.6　Canvas（画布）组件参考 241 9.7　Widget 组件参考 242 9.7.1　Widet 组件的属性 242 9.7.2　对齐边界 243 9.7.3　约束尺寸 243 9.7.4　对节点位置、尺寸的限制 243 9.7.5　注意 244 9.8　Button（按钮）组件参考 244 9.8.1　Button 组件的属性 245 9.8.2　Button 组件的Transition 属性 245 9.8.3　Button 单击事件 246 9.9　Layout 组件参考 248 9.9.1　Layout 组件的属性 249 9.9.2　详细说明 249 9.10　EditBox 组件参考 250 9.10.1　EditBox 组件的属性 251 9.10.2　EditBox 组件的事件 251 9.10.3　通过脚本代码添加回调 252 9.11　ScrollView 组件参考 252 9.11.1　ScrollView 组件的属性 253 9.11.2　ScrollBar 的设置 254 9.11.3　详细说明 254 9.11.4　通过脚本代码添加回调 254 9.12　ProgressBar 组件参考 255 9.12.1　ProgressBar 组件的属性 255 9.12.2　详细说明 255 9.13　BlockInputEvents 组件参考 256 9.14　PageView 组件参考 256 9.14.1　PageView 组件的属性 257 9.14.2　CCPageViewIndicator 的设置 257 9.14.3　PageView 事件 257 9.14.4　详细说明 258 9.14.5　通过脚本代码添加回调 258 9.15　本章小结 259 第10 章　动画系统 260 10.1　关于 Animation 260 10.1.1　Animation 组件 260 10.1.2　Clip 动画剪辑 261 10.1.3　节点数据的索引方式 261 10.1.4　Clip 动画文件的参数 261 10.1.5　动画编辑模式 261 10.1.6　熟悉动画编辑器 261 10.1.7　时间轴的刻度单位表示方式 262 10.1.8　基本操作 262 10.2　创建Animation 组件和动画剪辑 263 10.2.1　创建 Animation 组件 263 10.2.2　创建与挂载动画剪辑 264 10.2.3　剪辑内的数据 264 10.2.4　节点数据 264 10.3　编辑动画序列 265 10.3.1　添加一个新的属性轨道 266 10.3.2　删除一个属性轨道 266 10.3.3　添加关键帧 266 10.3.4　选择关键帧 267 10.3.5　移动关键帧 267 10.3.6　更改关键帧 267 10.3.7　删除关键帧 267 10.3.8　复制 粘贴关键帧 268 10.3.9　节点操作 268 10.4　编辑序列帧动画 268 10.4.1　为节点新增 Sprite 组件 268 10.4.2　在属性列表中添加 cc.Sprite.spriteFrame 268 10.4.3　添加帧 269 10.5　编辑时间曲线 269 10.5.1　使用预设曲线 270 10.5.2　自定义曲线 270 10.6　添加动画事件 271 10.6.1　添加事件 271 10.6.2　删除事件 271 10.6.3　指定事件触发函数以及传入参数 271 10.7　使用脚本控制动画 272 10.7.1　Animation 组件 272 10.7.2　AnimationState（动画状态） 273 10.7.3　动画事件 275 10.8　Animation（动画）组件参考 277 10.9　本章小结 278 第11 章　音乐与音效 279 11.1　音频播放 279 11.1.1　使用 AudioSource 组件播放 279 11.1.2　使用 AudioEngine 播放 280 11.2　AudioSource 组件参考 282 11.3　音频兼容性说明 282 11.3.1　DOM Audio 282 11.3.2　WebAudio 282 11.3.3　iOS WeChat 自动播放音频 283 11.4　本章小结 283 第12 章　益智猜杯子游戏 284 12.1　益智猜杯子游戏的特点 284 12.2　益智猜杯子游戏简介 284 12.2.1　益智猜杯子游戏规则 284 12.2.2　益智猜杯子游戏框架和界面 284 12.3　益智猜杯子游戏模块的实现 285 12.3.1　创建工程 285 12.3.2　目录规划 286 12.3.3　资源导入 286 12.3.4　搭建场景 288 12.4　本章小结 304 第13 章　游戏摇杆 305 13.1　游戏摇杆的特点 305 13.2　游戏摇杆的简介 305 13.2.1　游戏摇杆的规则 305 13.2.2　游戏摇杆、游戏框架和界面 306 13.3　游戏摇杆模块的实现 306 13.3.1　创建工程 306 13.3.2　目录规划 306 13.3.3　资源导入 307 13.3.4　搭建场景 307 13.4　本章小结 313 第14 章　幸运转盘抽奖游戏 314 14.1　幸运转盘抽奖游戏的特点 314 14.2　幸运转盘抽奖游戏的简介 314 14.2.1　幸运转盘抽奖游戏规则 314 14.2.2　幸运转盘抽奖游戏框架和界面 314 14.3　幸运转盘抽奖游戏模块的实现 315 14.3.1　创建工程 315 14.3.2　目录规划 315 14.3.3　资源导入 316 14.3.4　搭建场景 317 14.4　本章小结 328