Egret：HTML5游戏开发指南

作品简介

《Egret——HTML5游戏开发指南》由浅入深，在讲解游戏开发基础的同时提供众多实战案例供读者学习。《Egret——HTML5游戏开发指南》章节内容包含Egret基础概念及基础图形图像处理方法、网络相关操作、移动设备适配、性能优化、文本动画相关知识、调试技巧、DragonBones骨骼动画系统和P2物理引擎等。通过《Egret——HTML5游戏开发指南》，读者可以了解并掌握HTML5游戏开发技能，并通过Egret开发复杂又好玩的HTML5游戏。

《Egret——HTML5游戏开发指南》适合喜欢游戏且有志于成为HTML5游戏开发者的人阅读，也适合具备其他平台游戏开发经验的人以及前端开发工程师了解和掌握HTML5开发技巧，并进入HTML5游戏开发领域。

作品目录

• 前言
• 为什么要写这本书
• 本书特点
• 1.内容丰富，由浅入深
• 2.结构清晰，讲解到位
• 3.完整的案例源代码
• 本书适合的读者
• 本书分工与致谢
• 第1章　欢迎来到HTML5的世界
• 1.1　什么是HTML5
• 1.2　HTML5的前世今生
• 第一阶段：Web增强与破垄断
• 第二阶段：移动互联网
• 1.3　W3C与WHATWG工作组
• 1.4　令人称赞的Canvas与WebGL
• 1.4.1　Canvas
• 1.4.2　WebGL
• 1.5　何为HTML5游戏
• 1.5.1　从技术角度出发
• 1.5.2　从非技术角度出发
• 1.6　HTML5游戏的特点与痛点
• 1.6.1　特点
• 1.即点即玩
• 2.社交化
• 3.跨平台
• 4.开放
• 1.6.2　痛点
• 1.游戏开发商不成熟
• 2.渠道入口不完善
• 3.支付问题
• 1.7　HTML5游戏的当下与未来
• 1.7.1　产品研发阶段
• 1.7.2　测试上线运营阶段
• 1.7.3　未来
• 1.8　小结
• 第2章　奇妙的前端之旅
• 2.1　JavaScript的苦与痛
• 2.2　伟大的ECMAScript标准
• 2.2.1　ECMAScript标准是什么
• 2.2.2　历史
• 2.2.3　版本
• 2.3　JavaScript的代替品：Dart、CoffeeScript、TypeScript
• 2.3.1　Dart
• 2.3.2　CoffeeScript
• 2.3.3　TypeScript
• 2.4　初出茅庐的WebAssembly
• 2.4.1　WebAssembly是什么
• 2.4.2　asm.js
• 2.5　HTML5游戏开发利器——游戏引擎
• 2.6　一个神器：Egret Runtime
• 2.6.1　什么是Egret Runtime
• 2.6.2　为什么要用Egret Runtime
• 1.渲染性能表现
• 2.屏幕适配策略
• 3.充分利用硬件功能
• 2.7　小结
• 第3章　Hello Egret
• 3.1　Egret引擎简介
• 3.1.1　Egret引擎的特点
• 3.1.2　Egret引擎的主要功能
• 3.1.3　Egret引擎的应用案例
• 1.太极
• 2.诸神之战
• 3.2　搭建开发环境
• 3.2.1　Egret引擎版本的选择
• 1.Egret引擎版本号的设定规则
• 2.主版本号的升迁历史
• 3.Egret引擎安装过程及引擎维护界面
• 4.Egret多版本系统
• 3.2.2　Egret Wing：强大的IDE工具
• 3.2.3　ResDepot：资源管理工具
• 3.2.4　Texture Merger：资源打包工具
• 3.3　Hello World
• 3.3.1　创建第一个项目
• 3.3.2　运行项目
• 3.3.3　修改一下，成为自己的Hello World
• 3.4　Hello World分析
• 3.4.1　项目源代码目录
• 3.4.2　项目配置文件
• 3.4.3　项目运行库
• 3.4.4　项目编译目录
• 3.4.5　项目资源目录
• 3.4.6　项目发布目录
• 3.5　库与代码风格
• 3.5.1　Egret引擎的代码风格
• 3.5.2　核心库与扩展库的使用方法
• 3.5.3　第三方库的集成方法
• 1.准备第三方模块
• 2.部署第三方模块
• 3.在Egret项目中导入第三方模块
• 3.6　命令行模式详解
• 3.6.1　创建项目
• 3.6.2　编译项目
• 1.编译引擎
• 2.增量编译
• 3.6.3　运行项目
• 3.6.4　发布项目
• 3.6.5　了解更多
• 3.7　小结
• 第4章　游戏的基础知识
• 4.1　显示对象
• 4.1.1　什么是显示对象
• 4.1.2　坐标系
• 4.1.3　显示对象的种类
• 4.1.4　显示列表
• 4.2　显示对象的架构
• 4.2.1　容器与非容器
• 4.2.2　DisplayObject类与DisplayObjectContainer类
• 4.2.3　Sprite与Shape
• 4.3　Shape矢量图
• 4.3.1　绘制矩形
• 4.3.2　清空绘图
• 4.3.3　绘制圆形
• 4.3.4　绘制直线
• 4.3.5　绘制曲线
• 4.3.6　绘制圆弧
• 4.3.7　多个形状的绘制
• 4.4　显示列表与容器类
• 4.4.1　关于显示容器
• 1.轻量级的容器
• 2.自定义容器
• 4.4.2　添加与删除显示对象
• 1.添加显示对象到显示列表
• 2.删除显示对象
• 4.4.3　显示对象操作的注意点
• 1.显示对象独立于显示列表
• 2.相对坐标系
• 3.多次添加显示对象到显示列表
• 4.删除操作的注意点
• 4.5　遮罩与碰撞检测
• 4.5.1　遮罩的使用
• 4.5.2　非精确碰撞检测
• 4.5.3　精确碰撞检测
• 4.5.4　包围盒碰撞
• 4.6　混合模式
• 4.6.1　NORMAL模式
• 4.6.2　ADD模式
• 4.6.3　ERASE模式
• 4.7　小结
• 第5章　事件与用户交互
• 5.1　事件消息机制
• 5.1.1　事件处理机制的原理
• 5.1.2　第一个事件处理的例子
• 5.1.3　事件流机制
• 5.2　事件
• 5.2.1　事件类
• 1.bubbles属性
• 2.currentTarget属性
• 3.eventPhase属性
• 4.target属性
• 5.data属性
• 6.stopPropagation()和stopImmediatePropagation()方法
• 7.type属性
• 5.2.2　自定义事件
• 5.3　侦听器
• 5.3.1　创建侦听器
• 5.3.2　注册侦听器与移除侦听器
• 5.3.3　侦听器中的this
• 5.4　事件的优先级
• 5.5　自定义事件发送类
• 5.5.1　继承EventDispatcher
• 5.5.2　复合EventDispatcher
• 5.5.3　实现IEventDispatcher接口
• 5.6　触摸事件
• 5.6.1　触摸事件类型
• 5.6.2　开启touchEnable
• 5.7　实践：同色点点看
• 5.8　小结
• 第6章　游戏资源管理
• 6.1　RES资源加载模块
• 6.2　资源配置文件
• 6.3　加载资源配置文件
• 6.3.1　外部文件
• 6.3.2　直接读取
• 6.3.3　对比说明
• 6.4　预加载资源组
• 6.5　动态创建资源组
• 6.6　读取资源文件
• 6.7　资源的缓存机制
• 6.8　释放资源
• 6.9　内置文件类型解析器
• 6.9.1　配置九宫格参数
• 6.9.2　配置声音资源
• 6.9.3　读取解析二进制文件
• 6.10　扩展资源文件类型解析器
• 6.11　小结
• 第7章　位图操作
• 7.1　创建位图
• 7.1.1　认识位图
• 7.1.2　位图格式
• 7.1.3　位图来源
• 7.1.4　位图加载
• 7.1.5　位图显示
• 7.2　操作纹理集
• 7.2.1　从RES中获取纹理
• 7.2.2　SpriteSheet纹理集类
• 1.使用Texture Merger生成纹理集
• 2.使用纹理集
• 7.3　纹理填充方式
• 7.3.1　位图填充拉伸以填充区域
• 7.3.2　重复位图以填充区域
• 7.4　位图的九宫格
• 7.4.1　缘起
• 7.4.2　九宫格原理
• 7.4.3　代码中使用九宫格
• 7.4.4　通过ResDepot设置九宫格
• 7.5　滤镜
• 7.5.1　滤镜可用性及WebGL开关
• 7.5.2　发光滤镜
• 7.5.3　投影滤镜
• 7.5.4　颜色矩阵滤镜
• 7.5.5　模糊滤镜
• 7.5.6　设置滤镜品质
• 7.5.7　滤镜使用优化技巧
• 7.6　实践：《抓间谍》
• 7.6.1　游戏设计稿
• 7.6.2　准备素材
• 7.6.3　编写代码
• 1.初始化
• 2.间谍目标变换
• 3.倒计时部分
• 4.角色变换和抓捕
• 5.胜负判断
• 6.游戏源码下载
• 7.7　小结
• 第8章　文本
• 8.1　普通文本
• 8.1.1　创建普通文本
• 8.1.2　设置文本样式
• 1.创建文本边框
• 2.创建文本描边
• 3.创建文本粗体与斜体
• 8.1.3　字体的设置
• 8.1.4　多样式混合文本
• 8.1.5　设置文本超链接
• 8.2　输入文本
• 8.2.1　创建可输入文本
• 8.2.2　设置输入文本样式
• 8.3　位图文本
• 8.3.1　创建位图文本字体
• 8.3.2　位图文本的使用
• 8.4　实践：游戏登录和活动公告板
• 1.Main.ts代码
• 2.BulletinPanel代码
• 8.5　小结
• 第9章　动画与粒子特效
• 9.1　逐帧动画
• 9.1.1　逐帧动画简介
• 9.1.2　动画素材制作方法
• 方式一：从GIF图片转换为逐帧动画数据
• 方式二：从SWF动画中转换
• 方式三：安装Flash插件
• 9.1.3　创建一个逐帧动画
• 9.1.4　播放和暂停动画
• 9.1.5　跳转动画
• 9.1.6　动态切换动画数据
• 9.1.7　动画的缓存机制
• 9.1.8　动画数据详解
• 1.mc段
• 2.res段
• 9.2　缓动动画
• 9.2.1　Tween缓动动画
• 9.2.2　缓动的基本用法
• 9.2.3　缓动对象的基本控制参数
• 9.2.4　缓动对象的缓动变化事件
• 9.2.5　缓动过程参数设定
• 9.2.6　缓动对象的其他方法
• 9.3　粒子特效
• 9.3.1　粒子系统简介
• 9.3.2　粒子系统使用
• 1.初始化
• 2.配置文件
• 3.启动
• 4.停止
• 5.更换纹理
• 6.创建示例
• 9.3.3　自定义粒子特效
• 1.扩展流程
• 2.需要重写的方法
• 9.4　小结
• 第10章　音乐与音效
• 10.1　声音类
• 10.1.1　egret.Sound类
• 10.1.2　使用声音类
• 10.2　音频控制类
• 10.2.1　播放
• 10.2.2　音量
• 10.2.3　暂停
• 10.3　声音事件
• 10.4　音乐与音效类型设置
• 10.5　小结
• 第11章　数据操作
• 11.1　JSON数据操作
• 11.1.1　JSON数据格式简介
• 11.1.2　为什么使用JSON数据格式
• 11.1.3　在Egret中加载JSON数据
• 11.1.4　在Egret中操作JSON数据
• 11.2　二进制数据操作
• 11.2.1　读取二进制数据对象
• 11.2.2　写入字节流
• 11.2.3　定位字节流指针
• 11.2.4　读取字节流
• 11.2.5　大端模式与小端模式
• 11.3　实践：仿《找你妹》游戏
• 11.3.1　游戏策划案
• 11.3.2　准备资源
• 1.图片资源
• 2.数据资源
• 11.3.3　编写代码
• 1.背景以及UI
• 2.倒计时部分
• 3.关卡核心逻辑
• 4.胜负判断
• 5.游戏预览
• 11.4　小结
• 第12章　网络通信
• 12.1　HTTP网络请求
• 12.1.1　构建简单的网络请求
• 12.1.2　POST与GET请求
• 12.1.3　发送带有数据的网络请求
• 12.1.4　检测网络请求状态
• 12.2　WebSocket通信
• 12.2.1　创建WebSocket连接
• 12.2.2　发送数据
• 12.2.3　读取数据
• 12.2.4　WebSocket的网络状态
• 12.2.5　断开与重连服务器
• 12.3　实践：游戏中的聊天室
• 12.4　小结
• 第13章　计时器与心跳控制器
• 13.1　Timer
• 13.1.1　创建计时器
• 13.1.2　加入计时器事件侦听
• 13.1.3　启动计时器
• 13.1.4　修改计时器时间间隔
• 13.1.5　修改计时器
• 13.2　Ticker
• 13.2.1　Ticker与Timer的不同
• 13.2.2　开启心跳侦听
• 13.2.3　移除心跳侦听
• 13.2.4　Ticker的最新用法
• 13.3　setTimeout与clearTimeout
• 13.4　getTimer
• 13.5　《抓间谍》和《找你妹》
• 13.5.1　《抓间谍》
• 1.关卡倒计时
• 2.情报系统更新
• 3.角色变换和抓捕
• 4.练习
• 13.5.2　《找你妹》
• 13.6　小结
• 第14章　反射机制与依赖注入
• 14.1　反射机制
• 14.1.1　什么是反射机制
• 14.1.2　getDefinitionByName方法
• 14.1.3　获取运行时对象类型
• 14.1.4　检查域内定义
• 14.2　依赖注入
• 14.2.1　什么是依赖注入
• 14.2.2　Injector注入器
• 14.2.3　注入器的应用场景
• 14.3　小结
• 第15章　屏幕适配与环境交互
• 15.1　4种屏幕适配策略
• 15.1.1　设置屏幕适配策略
• 15.1.2　exactFit模式
• 15.1.3　noScale模式
• 15.1.4　showAll模式
• 15.1.5　fixedWidth模式和fixedHeight模式
• 15.1.6　noBorder模式
• 15.1.7　在程序内设置缩放模式
• 15.2　屏幕方向设置
• 15.2.1　竖屏模式
• 15.2.2　横屏模式
• 15.2.3　反向横屏模式
• 15.2.4　自动模式
• 15.3　环境交互
• 15.3.1　Egret与网页JavaScript交互
• 15.3.2　读取网页GET参数
• 15.4　小结
• 第16章　调试与性能检测
• 16.1　TypeScript断点调试
• 16.2　日志输出面板
• 16.2.1　打开日志显示开关
• 16.2.2　输出日志
• 16.2.3　显示脏矩形和帧频信息
• 16.3　Egret Inspector浏览器调试工具
• 16.3.1　安装Egret Inspector
• 16.3.2　运行Egret Inspector
• 16.4　小结
• 第17章　打包发布到原生平台
• 17.1　打包原生APP原理
• 17.1.1　编译型语言和解释型语言
• 17.1.2　浏览器内核与JavaScript解释器
• 17.2　打包为iOS原生APP
• 17.2.1　下载Egret iOS Support
• 17.2.2　将HTML5游戏打包为iOS原生APP
• 17.3　打包为Android原生APP
• 17.3.1　下载Egret Android Support
• 17.3.2　将HTML5游戏打包为Android原生APP
• 17.4　打包为Runtime版本
• 17.4.1　打包Egret Runtime版本
• 17.4.2　测试Runtime版本游戏
• 17.4.3　Egret Runtime中的白名单
• 17.5　小结
• 第18章　DragonBones骨骼动画系统
• 18.1　DragonBones简介
• 18.1.1　DragonBones的由来
• 18.1.2　DragonBones产品家族
• 18.1.3　DragonBones产品特点
• 18.2　2D骨骼动画的基本概念
• 18.2.1　骨骼动画的优势和原理
• 18.2.2　DragonBones 2D骨骼动画中的常用术语
• 骨架
• 骨骼（骨头）
• 插槽
• 图片（纹理）
• 纹理集
• 动画补间
• 动画过渡
• 动画融合
• 正向动力学（FK）和反向动力学（IK）
• 18.3　DragonBones Pro介绍
• 18.3.1　DragonBones Pro的下载与安装
• 18.3.2　编辑界面详解
• 1.系统工具栏
• 2.主场景工具栏
• 3.可见可选过滤面板
• 4.变换面板
• 5.场景树面板
• 6.层级面板
• 7.资源面板
• 8.编辑模式切换按钮
• 9.动画面板
• 10.时间轴面板
• 18.3.3　基本动画项目
• 1.空关键帧
• 2.图片添加方法
• 3.图层顺序
• 4.轴点工具
• 18.3.4　项目的导入与导出
• 18.4　DragonBones骨骼动画开发入门
• 18.4.1　做好准备工作
• 18.4.2　学习一个示例
• 18.5　DragonBones骨骼动画数据格式详解
• 18.5.1　DragonBones 4.0格式说明
• 18.5.2　Armature数据格式
• 18.5.3　Bone数据格式
• 18.5.4　Slot数据格式
• 18.5.5　Skin数据格式
• 18.5.6　Animation数据格式
• 18.6　DragonBones骨骼动画事件系统详解
• 18.7　DragonBones常用高级功能
• 18.7.1　动态换装
• 18.7.2　程序控制骨骼运动
• 18.7.3　改变动画速度
• 18.7.4　动画复用
• 18.7.5　动画遮罩与混合
• 18.8　DragonBones极速模式
• 18.8.1　极速模式简介
• 18.8.2　快速使用极速模式
• 18.8.3　极速模式详解
• 18.8.4　深入使用数据缓存
• 18.9　小结
• 第19章　P2物理引擎
• 19.1　P2物理引擎简介
• 19.1.1　什么是P2物理引擎
• 19.1.2　创建一个P2物理项目
• 19.1.3　用p2DebugDraw实现模拟视图
• 19.2　P2中的形状
• 19.2.1　形状
• 1.Circle圆形
• 2.Box矩形
• 3.Capsule胶囊形状
• 4.Particle粒子形状
• 5.Line线段形状
• 6.Plane平面形状
• 7.Heightfield海拔形状
• 8.Convex多边形形状
• 19.2.2　形状属性
• 19.2.3　形状贴图
• 19.3　刚体属性
• 19.3.1　速度相关
• 1.position
• 2.velocity
• 3.damping
• 4.fixedX
• 5.fixedY
• 6.force
• 7.gravityScale
• 19.3.2　角度相关
• 1.angle
• 2.angularVelocity
• 3.angularDamping
• 4.angularForce
• 5.fixedRotation
• 19.3.3　对象相关
• 1.shapes
• 2.world
• 19.3.4　其他属性
• 1.id
• 2.type
• 3.mass
• 4.ccdIterations
• 5.ccdSpeedThreshold
• 6.collisionResponse
• 7.allowSleep
• 8.sleepSpeedLimit
• 9.sleepState
• 10.sleepTimeLimit
• 11.idleTime
• 19.4　刚体操作
• 19.4.1　addBody和removeBody
• 19.4.2　addShape和removeShape
• 19.4.3　adjustCenterOfMass
• 19.4.4　applyForce
• 19.4.5　applyImpulse
• 19.4.6　sleep和wakeup
• 19.4.7　emit、on、off、has
• 19.4.8　fromPolygon
• 19.4.9　hitTest
• 19.4.10　getAABB
• 19.4.11　getArea
• 19.4.12　setDensity
• 19.4.13　overlaps
• 19.4.14　toWorldFrame和toLocalFrame
• 19.4.15　rayCast
• 1.raycast函数
• 2.Ray类
• 19.4.16　RayCastResult类
• 19.4.17　Raycast应用实例
• 19.5　碰撞处理
• 19.5.1　认识碰撞
• 19.5.2　碰撞事件
• 1.碰撞检测
• 2.postBroadPhaseEvent
• 3.preSolveEvent
• 4.beginContact
• 5.endContact
• 19.5.3　碰撞信息Equation
• 1.ContactEquation
• 2.FrictionEquation
• 19.6　关节
• 19.6.1　DistanceConstraint
• 19.6.2　GearConstraint
• 19.6.3　LockConstraint
• 19.6.4　PrismaticConstraint
• 19.6.5　RevoluteConstraint
• 19.7　弹簧
• 19.7.1　LinearSpring
• 19.7.2　RotationalSpring
• 19.8　小结