HTML5 2D游戏编程核心技术

图书标准信息

• 作者 [美]戴维·吉尔里（David Geary） 著
• 出版社 机械工业出版社
• 出版时间 2016-12
• 版次 1
• ISBN 9787111551294
• 定价 99.00元
• 装帧 平装
• 开本 16开
• 纸张 胶版纸
• 页数 459页
• 字数 350千字

【内容简介】

　　本书通过精心编写且容易理解的代码，以及抓住关键问题的文字描述，阐明了游戏开发过程中的每一个细节。本书第1～19章讲解了Snail Bait游戏的完整开发过程，从以一个简单的显示图像的游戏版本开始，涵盖了HTML5视频游戏开发的所有特点。第20章总结全书，使用本书前19章讲述的大部分技术内容实现了第二个视频游戏。不管是游戏开发新手，还是专业的游戏开发人员，都能从本书中获益。

　　本书中所有的程序源码，包括本书中讨论过的、指定章节的特殊版本的游戏代码，都可以在华章网站（www.hzbook.com）上下载。

【作者简介】

　　David Geary，是《Core HTML5 Canvas》一书的作者，HTML5 Denver社区的联合创始人，也是计算机图形学和网络应用开发的著名专家。他之前写过8本书，包括畅销书《Graphic Java》以及《Core Java Server Faces》，读者可以在推特@davidgeary上关注他。

【目录】

译者序

 

前言

 

致谢

 

第1章　概述 1

 

1.1　Snail Bait游戏 3

 

1.2　HTML5游戏开发最佳实践 8

 

1.2.1　窗口失去焦点时暂停游戏 8

 

1.2.2　窗口重获焦点时实现倒计时功能 9

 

1.2.3　使用CSS实现UI特效 10

 

1.2.4　对游戏运行缓慢的状态做出检测和处理 11

 

1.2.5　添加社交功能 11

 

1.2.6　将所有游戏图像放在单独的sprite表单中 11

 

1.2.7　在服务器中存储高分榜和实时游戏数据 13

 

1.3　特别功能 13

 

1.4　Snail Bait游戏中的HTML和CSS 15

 

1.5　开始Snail Bait游戏编程 21

 

1.6　本书中使用的JavaScript 23

 

1.7　小结 25

 

1.8　练习 26

 

第2章　原始素材和开发环境 27

 

2.1　使用开发者工具 28

 

2.1.1　控制台 29

 

2.1.2　Chrome Canary的帧速率计数器 32

 

2.1.3　调试 34

 

2.1.4　时间线 35

 

2.1.5　Profiling 39

 

2.2　获取资源 40

 

2.2.1　图像 40

 

2.2.2　图像处理 41

 

2.2.3　音效和音乐 41

 

2.2.4　动画 42

 

2.3　使用CSS背景 43

 

2.4　生成小图标 45

 

2.5　缩短编码周期 46

 

2.6　小结 48

 

2.7　练习 48

 

第3章　图形和动画 49

 

3.1　使用HTML5 canvas元素绘制图形和图像 51

 

3.1.1　绘制背景 52

 

3.1.2　绘制跑步小人 53

 

3.1.3　绘制平台 53

 

3.2　实现平滑的HTML5动画 55

 

3.2.1　requestAnimationFrame()方法 57

 

3.2.2　requestAnimationFrame()的polyfill实现 57

 

3.3　实现游戏主循环 60

 

3.4　计算帧速率 61

 

3.5　滚动游戏背景 62

 

3.5.1　平移坐标系 62

 

3.5.2　滚动Snail Bait游戏的背景 65

 

3.6　制作基于时间的运动 67

 

3.7　反转滚动方向 67

 

3.8　绘制动画帧 68

 

3.9　使用视差产生视深的假象 68

 

3.10　小结 71

 

3.11　练习 71

 

第4章　游戏的基本架构 72

 

4.1　在JavaScript对象中封装游戏函数 73

 

4.1.1　SnailBait的构造函数 74

 

4.1.2　SnailBait的原型 75

 

4.2　理解JavaScript语言中挑剔的this指针 77

 

4.3　处理键盘输入 79

 

4.4　玩家按p键时暂停或者恢复游戏 81

 

4.5　冻结游戏，确保它精确地在暂停的位置恢复 82

 

4.6　在窗口失去焦点时暂停游戏 83

 

4.7　使用动态的倒计时来恢复一个暂停的游戏 84

 

4.7.1　向游戏玩家显示提示板（简短信息） 85

 

4.7.2　Snail Bait的倒计时 87

 

4.8　小结 89

 

4.9　练习 90

 

第5章　游戏加载动画 91

 

5.1　定义Snail Bait游戏的窗口 93

 

5.2　使用CSS过渡让元素淡入、淡出 96

 

5.2.1　让元素淡入 97

 

5.2.2　让元素淡出 98

 

5.2.3　snailbait-toast元素的CSS 99

 

5.2.4　显示和隐藏提示板 100

 

5.3　让拥有与CSS过渡属性Opacity关联的元素淡入、淡出 103

 

5.4　实现加载动画 105

 

5.5　显示游戏画面 109

 

5.6　小结 112

 

5.7　练习 113

 

第6章　sprite对象 114

 

6.1　sprite对象 116

 

6.1.1　sprite对象的属性 118

 

6.1.2　sprite对象的构造函数 119

 

6.1.3　sprite对象的方法 119

 

6.2　将sprite对象整合到游戏主循环中 121

 

6.3　实现sprite对象的artist对象 124

 

6.3.1　图形artist对象 124

 

6.3.2　图像artist对象 125

 

6.3.3　sprite图像表单artist对象 125

 

6.3.4　定义sprite图像表单单元格 128

 

6.4　创建和初始化游戏的sprite对象 130

 

6.5　使用元数据定义sprite对象 133

 

6.6　滚动sprite对象 136

 

6.7　小结 138

 

6.8　练习 138

 

第7章　sprite对象行为 140

 

7.1　行为基础 142

 

7.2　跑步小人行为 143

 

7.3　跑步小人的跑动行为 146

 

7.4　轻量级行为 148

 

7.5　游戏独立行为 150

 

7.6　组合行为 155

 

7.7　小结 159

 

7.8　练习 159

 

第8章　时间轴，第1部分：有限行为及线性运动 160

 

8.1　实现一个初始的跳跃行为算法 161

 

8.2　将处理跳跃行为的职责转交给跑步小人 162

 

8.3　实现跳跃行为 164

 

8.4　使用秒表记录动画时间 165

 

8.5　重新定义跳跃行为 168

 

8.6　实现线性运动 170

 

8.6.1　上升阶段 170

 

8.6.2　下降阶段 171

 

8.7　暂停行为 173

 

8.8　小结 175

 

8.9　练习 175

 

第9章　时间轴，第2部分：非线性运动 176

 

9.1　理解时间及其衍生物 177

 

9.2　使用动画计时器和缓变功能实现非线性跳跃 177

 

9.3　实现动画计时器 179

 

9.4　实现缓变功能 181

 

9.5　微调缓变功能 184

 

9.6　实现真实的跳动行为 185

 

9.7　使行为随机化 189

 

9.8　使用动画计时器和缓变功能实现非线性颜色改变 190

 

9.9　小结 193

 

9.10　练习 193

 

第10章　时间轴，第3部分：时间系统 194

 

10.1　Snail Bait游戏的时间系统 195

 

10.2　创建和启动时间系统 197

 

10.3　将时间系统整合进Snail Bait游戏中 198

 

10.3.1　使用时间系统驱动游戏动画 198

 

10.3.2　实现使用时间系统修改游戏时间流的函数 199

 

10.3.3　在计算帧速率时分解时间比率 199

 

10.3.4　使用时间系统暂停和恢复游戏 200

 

10.4　重新定义秒表和动画计时器的当前时间 202

 

10.5　实现时间系统 206

 

10.6　小结 208

 

10.7　练习 208

 

第11章　碰撞检测 209

 

11.1　碰撞检测过程 210

 

11.2　碰撞检测技术 211

 

11.3　Snail Bait游戏中的碰撞检测 212

 

11.3.1　sprite对象的碰撞矩形 212

 

11.3.2　跑步小人的碰撞行为 214

 

11.4　为碰撞检测选择碰撞候选对象 215

 

11.5　在跑步小人与其他sprite对象之间检测碰撞 216

 

11.6　处理碰撞 217

 

11.7　优化碰撞检测 220

 

11.7.1　改善包围盒 220

 

11.7.2　使用空间分割方法 221

 

11.8　监测碰撞检测的运行性能 222

 

11.9　编程实现碰撞检测的边界案例 223

 

11.10　小结 226

 

11.11　练习 226

 

第12章　重力 228

 

12.1　为跑步小人实现坠落行为 228

 

12.2　实现重力 230

 

12.2.1　跑步小人的坠落行为 232

 

12.2.2　计算初始下降速度 236

 

12.2.3　在跑步小人坠落过程中暂停游戏 237

 

12.3　最终版的碰撞检测 237

 

12.4　小结 238

 

12.5　练习 239

 

第13章　sprite动画和特殊效果 240

 

13.1　实现sprite动画 241

 

13.2　创建特效 246

 

13.2.1　晃动游戏画面 246

 

13.2.2　场景切换 248

 

13.3　编排效果 253

 

13.3.1　炸死蜜蜂 254

 

13.3.2　引爆按钮 256

 

13.4　小结 258

 

13.5　练习 258

 

第14章　声音和音乐 259

 

14.1　创建声音和音乐文件 261

 

14.2　加载音乐和音效 262

 

14.3　设置声音和音乐控件 263

 

14.4　播放音乐 264

 

14.5　循环播放音乐 265

 

14.6　播放音效 267

 

14.6.1　创建sprite音频对象 270

 

14.6.2　定义音效对象 271

 

14.6.3　实现多声道播放音效 272

 

14.7　打开和关闭声音播放 279

 

14.8　小结 280

 

14.9　练习 280

 

第15章　移动设备 281

 

15.1　在移动设备上运行Snail Bait游戏 284

 

15.2　检测移动设备 284

 

15.3　缩放游戏以适应移动设备 286

 

15.3.1　HTML5 viewport元标签 287

 

15.3.2　以编程方式调整游戏画面以适应移动设备屏幕 291

 

15.4　修改游戏动画底部的控制说明 295

 

15.5　修改欢迎界面 295

 

15.5.1　实现欢迎提示 296

 

15.5.2　实现移动设备中的控制说明 301

 

15.5.3　实现移动设备版开始提示 305

 

15.5.4　显示移动设备中的开始提示 306

 

15.6　添加触控事件 307

 

15.7　在移动设备中处理音频的方法 310

 

15.8　在主屏幕上添加启动图标，并以全屏模式运行游戏 312

 

15.9　小结 313

 

15.10　练习 313

 

第16章　粒子系统 314

 

16.1　排烟孔粒子系统 315

 

16.2　使用排烟孔粒子系统 318

 

16.2.1　定义排烟孔粒子系统数据 318

 

16.2.2　创建排烟孔粒子系统 318

 

16.2.3　将排烟孔粒子系统存入Snail Bait游戏的sprite对象数组中 319

 

16.2.4　在每个动画帧中滚动排烟孔粒子系统 320

 

16.3　编程实现排烟孔粒子系统 321

 

16.3.1　把排烟孔粒子系统伪装成sprite对象 321

 

16.3.2　组合火焰粒子 323

 

16.3.3　组合烟泡 327

 

16.4　暂停排烟孔粒子系统 337

 

16.5　小结 338

 

16.6　练习 338

 

第17章　用户界面 339

 

17.1　记录玩家游戏成绩 340

 

17.2　增加游戏生命指示器 343

 

17.3　显示游戏字幕 348

 

17.4　使用Tweet发布玩家游戏得分 354

 

17.5　当游戏运行缓慢时通知游戏玩家 357

 

17.5.1　监控帧速率 361

 

17.5.2　编程实现运行缓慢通知的事件处理句柄 363

 

17.6　编程实现通关动画 364

 

17.7　小结 368

 

17.8　练习 368

 

第18章　开发者后门程序 370

 

18.1　Snail Bait游戏的开发者后门 372

 

18.2　开发者后门的HTML元素及CSS 373

 

18.3　显示及隐藏开发者后门 375

 

18.4　更新开发者后门的元素 377

 

18.5　实现开发者后门的复选框 378

 

18.5.1　显示及隐藏碰撞矩形 380

 

18.5.2　启用或禁用运行缓慢通知 382

 

18.5.3　显示或隐藏排烟孔粒子系统 383

 

18.5.4　更新开发者后门的复选框 383

 

18.6　实现开发者后门的滑动条 384

 

18.6.1　为开发者后门的滑动条定义HTML元素及CSS 386

 

18.6.2　在Snail Bait游戏的Java-Script代码中访问滑动条的读数 387

 

18.6.3　创建并初始化开发者后门的滑动条 388

 

18.6.4　将运行缓慢的滑动条关联到游戏中 389

 

18.6.5　将时间速率滑动条关联到游戏中 389

 

18.6.6　将游戏关联到时间速率滑动条上 390

 

18.6.7　在显示开发者后门之前更新滑动条 391

 

18.7　实现开发者后门刻度尺 392

 

18.7.1　创建并访问刻度尺的canvas元素 393

 

18.7.2　淡入淡出刻度尺 394

 

18.7.3　绘制刻度尺 395

 

18.7.4　更新刻度尺 396

 

18.7.5　拖动游戏画面 397

 

18.8　小结 401

 

18.9　练习 401

 

第19章　服务器端开发：内部指标、高分记录及部署 403

 

19.1　Node.js及socket.io简介 404

 

19.2　在Snail Bait游戏中引入socket.io 406

 

19.3　创建一个简单的服务器 407

 

19.4　在服务器端创建套接字 407

 

19.5　启动服务器 408

 

19.6　在客户端创建一个套接字并连接到服务器 408

 

19.7　记录游戏内部指标 409

 

19.8　管理高分记录 412

 

19.8.1　实现高分记录的用户界面 413

 

19.8.2　检索服务器中的高分记录 415

 

19.8.3　在客户端显示高分记录 418

 

19.8.4　监视姓名输入 419

 

19.8.5　验证并将高分记录存储到服务器 420

 

19.8.6　重新显示高分记录 422

 

19.8.7　开始新游戏 422

 

19.9　部署Snail Bait游戏 423

 

19.10　将文件上传到服务器 425

 

19.11　小结 426

 

19.12　练习 426

 

第20章　后记：Bodega Revenge游戏 428

 

20.1　设计用户界面 430

 

20.2　创建sprite表单 433

 

20.3　实例化游戏 433

 

20.4　实现sprite对象 434

 

20.4.1　炮塔 434

 

20.4.2　炮弹 437

 

20.4.3　小鸟 439

 

20.5　实现sprite对象的行为 441

 

20.5.1　炮塔的行为 442

 

20.5.2　炮弹的行为 447

 

20.5.3　小鸟的行为 450

 

20.6　绘制剩余炮弹指示器 454

 

20.7　为移动设备实现触摸控制 456

 

20.8　小结 458

 

20.9　练习 459