本书向大家介绍HTML5游戏行业最新动态以及未来发展方向，同时也提及了当前HTML5技术相关市场。全书针对Egret HTML5游戏做了全方位讲解，涉及游戏中的渲染方法、音频与网络的处理。游戏中常用的GUI使用方法，同时还为大家讲解了DraongBones骨骼动画系统、P2物理引擎系统和HTML5游戏中性能和网络的优化技巧。

前言 为什么要写这本书 2015年HTML5游戏可谓是异常火爆，从最初的单机小游戏，到后来的中重度网络游戏如雨后春笋般涌现。随着市场的需求增多，越来越多的开发者投入到HTML5游戏开发行业中来。Egret算是较早进入HTML5游戏领域的引擎，随着Egret使用者的增多，开发者对于教程的渴望程度也愈发强烈。事实上，我们在1年前就着手准备书籍的撰写，但鉴于当时Egret仍然处于发展期，新功能变化较多，所以书籍的事情也一拖再拖。直到Egret 2.5版本发布，所有功能模块才最终趋于稳定状态。其实，早在2.5版本发布之前，本书的第一个版本已经完成，而后我们又针对2.5版本进行了修改与调整。希望这本书能够尽量做到最好。 如果大家在学习中遇到技术问题，或者发现不清楚的地方，可以访问Egret社区（http://bbs.egret.com）和我们沟通交流。 本书特点 1.内容丰富，由浅入深 本书在内容组织上本着“起点低，重点高”的原则，内容覆盖了从Egret必知必会的基础知识，到Egret中所涉及的高级功能，如DragonBones、P2物理引擎等内容。为了让读者更加方便地学习本书的内容，在每个章节中，我们还提供了一些实际的游戏项目案例，让大家在实践中学习。 2.结构清晰，讲解到位 本书中每个章节环环相扣，从最基础的矢量绘图，到位图操作，再到动画等知识，使得初学者非常容易上手。后面的高级部分，可让读者深入学习游戏中一些高级技巧。 3. 完整的案例源代码 为了便于读者学习，我们提供书中所有案例的完整源代码（http://broadview.com.cn/28193），读者可以直接导入开发环境中运行，仔细研究其效果，能最大限度地帮助读者掌握开发技术。 本书适合的读者 喜欢游戏并且怀揣梦想的有志青年。 想成为HTML5 游戏开发者的人，本书中的内容会教会你HTML5 游戏开发所需要的绝大部分技能。 具备其他平台游戏开发经验的人，阅读本书会让你了解并且掌握HTML5 独特的开发技巧。 前端开发工程师，本书将带你进入到HTML5 游戏开发领域。 本书分工与致谢 本书一共有5 位作者，整体设计以及撰写思路由张鑫磊负责，其中第1 章、第2 章、第4章、第9 章、第12 章、第14 章、第16 章、第17 章由张鑫磊撰写，第3 章、第7 章、第11 章、第13 章、第15 章由王建文撰写，第5 章、第6 章、第8 章、第10 章由杨啸撰写，第18 章由刘晨光撰写，第19 章由陈文登撰写。 在此由衷地感谢一直以来支持我们的开发者以及支持本书的所有人！ 由于作者的水平和学识有限，且书中所涉及的知识较多，难免有错误、疏漏之处，敬请广大读者批评指正，并多提宝贵意见。

第1 章 欢迎来到HTML5 的世界 1 1.1 什么是HTML5 1 1.2 HTML5 的前世今生 3 1.3 W3C 与WHATWG 工作组 4 1.4 令人称赞的Canvas 与WebGL 5 1.4.1 Canvas 5 1.4.2 WebGL 5 1.5 何为HTML5 游戏 6 1.5.1 从技术角度出发 6 1.5.2 从非技术角度出发 6 1.6 HTML5 游戏的特点与痛点 6 1.6.1 特点 7 1.6.2 痛点 8 1.7 HTML5 游戏的当下与未来 9 1.7.1 产品研发阶段 9 1.7.2 测试上线运营阶段 12 1.7.3 未来 13 1.8 小结 13 第2 章 奇妙的前端之旅 14 2.1 JavaScript 的苦与痛 14 2.2 伟大的ECMAScript 标准 15 2.2.1 ECMAScript 标准是什么 15 2.2.2 历史 15 2.2.3 版本 16 2.3 JavaScript 的代替品：Dart、CoffeeScript、 TypeScript 16 2.3.1 Dart 16 2.3.2 CoffeeScript 17 2.3.3 TypeScript 17 2.4 初出茅庐的WebAssembly 18 2.4.1 WebAssembly 是什么 18 2.4.2 asm.js 18 2.5 HTML5 游戏开发利器——游戏引擎 18 2.6 一个神器：Egret Runtime 19 2.6.1 什么是Egret Runtime 19 2.6.2 为什么要用 Egret Runtime 19 2.7 小结 21 第3 章 Hello Egret 22 3.1 Egret 引擎简介 22 3.1.1 Egret 引擎的特点 22 3.1.2 Egret 引擎的主要功能 23 3.1.3 Egret 引擎的应用案例 24 3.2 搭建开发环境 25 3.2.1 Egret 引擎版本的选择 25 3.2.2 Egret Wing：强大的IDE 工具 31 3.2.3 ResDepot：资源管理工具 33 3.2.4 Texture Merger：资源打包工具 33 3.3 Hello World 34 3.3.1 创建第一个项目 34 3.3.2 运行项目 36 3.3.3 修改一下，成为自己的Hello World 37 3.4 Hello World 分析 38 3.4.1 项目源代码目录 38 3.4.2 项目配置文件 38 3.4.3 项目运行库 39 3.4.4 项目编译目录 39 3.4.5 项目资源目录 40 3.4.6 项目发布目录 40 3.5 库与代码风格 41 3.5.1 Egret 引擎的代码风格 41 3.5.2 核心库与扩展库的使用方法 42 3.5.3 第三方库的集成方法 42 3.6 命令行模式详解 45 3.6.1 创建项目 45 3.6.2 编译项目 45 3.6.3 运行项目 46 3.6.4 发布项目 47 3.6.5 了解更多 47 3.7 小结 48 第4 章 游戏的基础知识 49 4.1 显示对象 49 4.1.1 什么是显示对象 49 4.1.2 坐标系 51 4.1.3 显示对象的种类 57 4.1.4 显示列表 58 目录 4.2 显示对象的架构 58 4.2.1 容器与非容器 58 4.2.2 DisplayObject 类与DisplayObjectContainer 类 62 4.2.3 Sprite 与Shape 62 4.3 Shape 矢量图 67 4.3.1 绘制矩形 68 4.3.2 清空绘图 70 4.3.3 绘制圆形 70 4.3.4 绘制直线 72 4.3.5 绘制曲线 74 4.3.6 绘制圆弧 76 4.3.7 多个形状的绘制 77 4.4 显示列表与容器类 79 4.4.1 关于显示容器 79 4.4.2 添加与删除显示对象 81 4.4.3 显示对象操作的注意点 83 4.5 遮罩与碰撞检测 87 4.5.1 遮罩的使用 87 4.5.2 非精确碰撞检测 91 4.5.3 精确碰撞检测 92 4.5.4 包围盒碰撞 94 4.6 混合模式 96 4.6.1 NORMAL 模式 96 4.6.2 ADD 模式 99 4.6.3 ERASE 模式 102 4.7 小结 103 第5 章 事件与用户交互 104 5.1 事件消息机制 104 5.1.1 事件处理机制的原理 104 5.1.2 第一个事件处理的例子 105 5.1.3 事件流机制 105 5.2 事件 107 5.2.1 事件类 107 5.2.2 自定义事件 110 5.3 侦听器 110 5.3.1 创建侦听器 110 5.3.2 注册侦听器与移除侦听器 112 5.3.3 侦听器中的this 112 5.4 事件的优先级 113 5.5 自定义事件发送类 114 5.5.1 继承EventDispatcher 114 5.5.2 复合EventDispatcher 114 5.5.3 实现IEventDispatcher 接口 115 5.6 触摸事件 117 5.6.1 触摸事件类型 117 5.6.2 开启touchEnable 117 5.7 实践：同色点点看 118 5.8 小结 125 第6 章 游戏资源管理 126 6.1 RES 资源加载模块 126 6.2 资源配置文件 127 6.3 加载资源配置文件 129 6.3.1 外部文件 129 6.3.2 直接读取 130 6.3.3 对比说明 130 6.4 预加载资源组 131 6.5 动态创建资源组 132 6.6 读取资源文件 133 6.7 资源的缓存机制 135 6.8 释放资源 136 6.9 内置文件类型解析器 136 6.9.1 配置九宫格参数 136 6.9.2 配置声音资源 138 6.9.3 读取解析二进制文件 138 6.10 扩展资源文件类型解析器 139 6.11 小结 139 第7 章 位图操作 140 7.1 创建位图 140 7.1.1 认识位图 140 7.1.2 位图格式 140 7.1.3 位图来源 141 7.1.4 位图加载 141 7.1.5 位图显示 141 7.2 操作纹理集 142 7.2.1 从RES 中获取纹理 142 7.2.2 SpriteSheet 纹理集类 142 7.3 纹理填充方式 145 7.3.1 位图填充拉伸以填充区域 146 7.3.2 重复位图以填充区域 146 7.4 位图的九宫格 147 7.4.1 缘起 147 7.4.2 九宫格原理 148 7.4.3 代码中使用九宫格 148 7.4.4 通过ResDepot 设置九宫格 149 7.5 滤镜 151 7.5.1 滤镜可用性及WebGL 开关 151 7.5.2 发光滤镜 152 7.5.3 投影滤镜 153 7.5.4 颜色矩阵滤镜 154 目录VII 7.5.5 模糊滤镜 156 7.5.6 设置滤镜品质 157 7.5.7 滤镜使用优化技巧 157 7.6 实践：《抓间谍》 158 7.6.1 游戏设计稿 158 7.6.2 准备素材 158 7.6.3 编写代码 158 7.7 小结 162 第8 章 文本 163 8.1 普通文本 163 8.1.1 创建普通文本 163 8.1.2 设置文本样式 168 8.1.3 字体的设置 170 8.1.4 多样式混合文本 172 8.1.5 设置文本超链接 175 8.2 输入文本 177 8.2.1 创建可输入文本 177 8.2.2 设置输入文本样式 178 8.3 位图文本 179 8.3.1 创建位图文本字体 179 8.3.2 位图文本的使用 181 8.4 实践：游戏登录和活动公告板 183 8.5 小结 192 第9 章 动画与粒子特效 193 9.1 逐帧动画 193 9.1.1 逐帧动画简介 193 9.1.2 动画素材制作方法 194 9.1.3 创建一个逐帧动画 198 9.1.4 播放和暂停动画 202 9.1.5 跳转动画 202 9.1.6 动态切换动画数据 202 9.1.7 动画的缓存机制 203 9.1.8 动画数据详解 203 9.2 缓动动画 206 9.2.1 Tween 缓动动画 206 9.2.2 缓动的基本用法 207 9.2.3 缓动对象的基本控制参数 208 9.2.4 缓动对象的缓动变化事件 208 9.2.5 缓动过程参数设定 208 9.2.6 缓动对象的其他方法 208 9.3 粒子特效 209 9.3.1 粒子系统简介 209 9.3.2 粒子系统使用 210 9.3.3 自定义粒子特效 211 9.4 小结 212 第10 章 音乐与音效 214 10.1 声音类 214 10.1.1 egret.Sound 类 214 10.1.2 使用声音类 215 10.2 音频控制类 218 10.2.1 播放 218 10.2.2 音量 218 10.2.3 暂停 218 10.3 声音事件 222 10.4 音乐与音效类型设置 225 10.5 小结 226 第11 章 数据操作 227 11.1 JSON 数据操作 227 11.1.1 JSON 数据格式简介 227 11.1.2 为什么使用JSON 数据格式 228 11.1.3 在Egret 中加载JSON 数据 229 11.1.4 在Egret 中操作JSON 数据 229 11.2 二进制数据操作 230 11.2.1 读取二进制数据对象 230 11.2.2 写入字节流 230 11.2.3 定位字节流指针 231 11.2.4 读取字节流 231 11.2.5 大端模式与小端模式 232 11.3 实践：仿《找你妹》游戏 233 11.3.1 游戏策划案 233 11.3.2 准备资源 234 11.3.3 编写代码 235 11.4 小结 240 第12 章 网络通信 241 12.1 HTTP 网络请求 241 12.1.1 构建简单的网络请求 241 12.1.2 POST 与 GET 请求 242 12.1.3 发送带有数据的网络请求 244 12.1.4 检测网络请求状态 247 12.2 WebSocket 通信 247 12.2.1 创建WebSocket 连接 248 12.2.2 发送数据 249 12.2.3 读取数据 249 12.2.4 WebSocket 的网络状态 250 12.2.5 断开与重连服务器 251 12.3 实践：游戏中的聊天室 251 12.4 小结 259 第13 章 计时器与心跳控制器 260 13.1 Timer 260 13.1.1 创建计时器 260 13.1.2 加入计时器事件侦听 260 13.1.3 启动计时器 261 13.1.4 修改计时器时间间隔 261 13.1.5 修改计时器 261 13.2 Ticker 262 13.2.1 Ticker 与Timer 的不同 262 13.2.2 开启心跳侦听 262 13.2.3 移除心跳侦听 263 13.2.4 Ticker 的最新用法 263 13.3 setTimeout 与clearTimeout 264 13.4 getTimer 265 13.5 《抓间谍》和《找你妹》 265 13.5.1 《抓间谍》 265 13.5.2 《找你妹》 267 13.6 小结 268 第14 章 反射机制与依赖注入 270 14.1 反射机制 270 14.1.1 什么是反射机制 270 14.1.2 getDefinitionByName 方法 274 14.1.3 获取运行时对象类型 275 14.1.4 检查域内定义 276 14.2 依赖注入 277 14.2.1 什么是依赖注入 277 14.2.2 Injector 注入器 278 14.2.3 注入器的应用场景 281 14.3 小结 281 第15 章 屏幕适配与环境交互 282 15.1 4 种屏幕适配策略 282 15.1.1 设置屏幕适配策略 282 15.1.2 exactFit 模式 283 15.1.3 noScale 模式 283 15.1.4 showAll 模式 284 15.1.5 fixedWidth 模式和fixedHeight 模式 285 15.1.6 noBorder 模式 286 15.1.7 在程序内设置缩放模式 286 15.2 屏幕方向设置 286 15.2.1 竖屏模式 287 15.2.2 横屏模式 288 15.2.3 反向横屏模式 288 15.2.4 自动模式 289 15.3 环境交互 289 15.3.1 Egret 与网页JavaScript 交互 289 15.3.2 读取网页GET 参数 290 15.4 小结 290 第16 章 调试与性能检测 291 16.1 TypeScript 断点调试 291 16.2 日志输出面板 298 16.2.1 打开日志显示开关 299 16.2.2 输出日志 299 16.2.3 显示脏矩形和帧频信息 299 16.3 Egret Inspector 浏览器调试工具 300 16.3.1 安装Egret Inspector 301 16.3.2 运行Egret Inspector 302 16.4 小结 302 第17 章 打包发布到原生平台 303 17.1 打包原生APP 原理 303 17.1.1 编译型语言和解释型语言 303 17.1.2 浏览器内核与JavaScript 解释器 303 17.2 打包为iOS 原生APP 304 17.2.1 下载Egret iOS Support 305 17.2.2 将HTML5 游戏打包为iOS 原生 APP 305 17.3 打包为Android 原生APP 306 17.3.1 下载Egret Android Support 306 17.3.2 将HTML5 游戏打包为Android 原 生APP 306 17.4 打包为Runtime 版本 308 17.4.1 打包Egret Runtime 版本 308 17.4.2 测试Runtime 版本游戏 309 17.4.3 Egret Runtime 中的白名单 310 17.5 小结 311 第18 章 DragonBones 骨骼动画系统 312 18.1 DragonBones 简介 312 18.1.1 DragonBones 的由来 312 18.1.2 DragonBones 产品家族 313 18.1.3 DragonBones 产品特点 313 18.2 2D 骨骼动画的基本概念 314 18.2.1 骨骼动画的优势和原理 314 18.2.2 DragonBones 2D 骨骼动画中的常用术语 314 18.3 DragonBones Pro 介绍 316 18.3.1 DragonBones Pro 的下载与安装 316 18.3.2 编辑界面详解 318 18.3.3 基本动画项目 329 18.3.4 项目的导入与导出 331 18.4 DragonBones 骨骼动画开发入门 333 18.4.1 做好准备工作 333 18.4.2 学习一个示例 334 18.5 DragonBones 骨骼动画数据格式详解 338 18.5.1 DragonBones 4.0 格式说明 338 18.5.2 Armature 数据格式 341 18.5.3 Bone 数据格式 342 18.5.4 Slot 数据格式 342 18.5.5 Skin 数据格式 343 18.5.6 Animation 数据格式 344 18.6 DragonBones 骨骼动画事件系统详解 346 18.7 DragonBones 常用高级特性 347 18.7.1 动态换装 347 18.7.2 程序控制骨骼运动 349 18.7.3 改变动画速度 349 18.7.4 动画复用 350 18.7.5 动画遮罩与混合 350 18.8 DragonBones 极速模式 351 18.8.1 极速模式简介 351 18.8.2 快速使用极速模式 352 18.8.3 极速模式详解 353 18.8.4 深入使用数据缓存 355 18.9 小结 356 第19 章 P2 物理引擎 357 19.1 P2 物理引擎简介 357 19.1.1 什么是P2 物理引擎 357 19.1.2 创建一个P2 物理项目 358 19.1.3 用p2DebugDraw 实现模拟视图 361 19.2 P2 中的形状 365 19.2.1 形状 365 19.2.2 形状属性 375 19.2.3 形状贴图 378 19.3 刚体属性 380 19.3.1 速度相关 380 19.3.2 角度相关 383 19.3.3 对象相关 385 19.3.4 其他属性 385 19.4 刚体操作 388 19.4.1 addBody 和removeBody 388 19.4.2 addShape 和removeShape 388 19.4.3 adjustCenterOfMass 391 19.4.4 applyForce 393 19.4.5 applyImpulse 398 19.4.6 sleep 和wakeup 403 19.4.7 emit、on、off、has 406 19.4.8 fromPolygon 408 19.4.9 hitTest 413 19.4.10 getAABB 416 19.4.11 getArea 421 19.4.12 setDensity 421 19.4.13 overlaps 422 19.4.14 toWorldFrame 和toLocalFrame 426 19.4.15 rayCast 429 19.4.16 RayCastResult 类 432 19.4.17 Raycast 应用实例 433 19.5 碰撞处理 438 19.5.1 认识碰撞 439 19.5.2 碰撞事件 442 19.5.3 碰撞信息Equation 445 19.6 关节 452 19.6.1 DistanceConstraint 452 19.6.2 GearConstraint 457 19.6.3 LockConstraint 458 19.6.4 PrismaticConstraint 464 19.6.5 RevoluteConstraint 469 19.7 弹簧 474 19.7.1 LinearSpring 474 19.7.2 RotationalSpring 476 19.8 小结 477

张鑫磊，网络ID：A闪，白鹭引擎布道师，微软MVP，知名博客主。曾就职于搜狐畅游担任技术主管，拥有多年游戏开发经验，曾担任 Flash 资深培训讲师。开源硬件爱好者，热衷于新鲜技术分享，拥有独立IP访问量超过800万的个人博客ashan.org。__eol____eol__刘晨光，网络ID：Lancelot，白鹭引擎技术总监，DragonBones创始人。研究Flash 14年，曾就职于Adobe北京研发中心Flash Runtime部门，担任创新项目主管，参与过Stage3D项目的开发。电竞爱好者，目前专注于设计类工具产品的研究。本书DragonBones部分由刘晨光撰写。__eol____eol__杨啸，网络ID：新房客，资深ActionScript开发者，7年游戏从业经验，曾主导《萌之战争》《逍遥春秋》《七雄争霸2》等项目研发到后期上线。经历了JavaScript页游、Flash页游以及Egret HTML5等技术的发展变革。作者对自己的评价是“红尘万丈一码农”。__eol____eol__王建文，网络ID：城市拓荒者，白鹭资深技术顾问。资深ActionScript 3开发者，曾任AIR开发MMOARPG手游项目客户端主程，参与过Starling中文站的翻译工作。曾为微软、百度、大众等知名公司进行过项目开发。擅长游戏的架构设计和性能优化。在白鹭任职技术顾问期间撰写了若干实用性强的技术文档，也兼任技术宣讲师。__eol____eol__陈文登，网络ID：ladeng6666、拉登Dony。Egret开发者论坛版主。《Box2D物理游戏初学者指南》作者。因在网络上分享了大量Box2D、Nape、P2物理游戏开发教程，而被大家熟知。作为一位乐于助人的大叔，热衷于为网友解答问题。__eol__