编辑推荐

  初学者的入门指南,从零开始完整讲解了一个复杂的横向卷轴平台视频游戏的开发过程

  《HTML5 2D游戏编程核心技术》涵盖丰富的代码和演示实例,通过高可靠性、可复用的代码帮助专业开发者掌握必备知识

  游戏编程提供了有创意的财富和商业机会,而且并不难理解。《HTML5 2D游戏编程核心技术》作者DavidGeary向读者展示了如何使用可以免费获取的浏览器工具及资源创作视频游戏,并在桌面浏览器和移动端上运行它们。

  《HTML5 2D游戏编程核心技术》循序渐进地实现一个复杂的街机风格游戏,而且完全从零开始,不需要使用任何专有的游戏框架。通过学习SnailBait游戏的完整开发过程,会让你对设计和构建任何类型的HTML52D游戏有更深层次的理解。

  《HTML5 2D游戏编程核心技术》涵盖以下内容:

  创作光滑、无闪烁的动画

  实现不受游戏中潜在动画帧频影响的运动

  驱动sprite对象,让它们执行闪闪发光、爆炸等运动

  在音轨上对多声道声音特效实现分层

  弯曲时间创作非线性动画特效,例如跳跃或者弹跳等

  通过一个时间系统,控制游戏中的时间流逝

  实现用于仿真自然现象的粒子系统

  有效地发现sprite对象之间的碰撞

  构建一个包含特殊属性的开发者后门

  使用Node.js和socket.io将实时游戏指标传给服务器

  开发一个提示板,用于显示服务器上存储的高分榜

  在移动设备上实现HTML5

内容简介

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

  《HTML5 2D游戏编程核心技术》中所有的程序源码,包括《HTML5 2D游戏编程核心技术》中讨论过的、指定章节的特殊版本的游戏代码,都可以在华章网站(www.hzbook.com)上下载。

作者简介

  DavidGeary,是《CoreHTML5Canvas》一书的作者,HTML5Denver社区的联合创始人,也是计算机图形学和网络应用开发的著名专家。他之前写过8《HTML5 2D游戏编程核心技术》,包括畅销书《GraphicJava》以及《CoreJavaServerFaces》,读者可以在推特@davidgeary上关注他。

目录

译者序

前言

致谢

第1章 概述1

1.1 SnailBait游戏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 SnailBait游戏中的HTML和CSS15

1.5 开始SnailBait游戏编程21

1.6 《HTML5 2D游戏编程核心技术》中使用的JavaScript23

1.7 小结25

1.8 练习26

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

2.1 使用开发者工具28

2.1.1 控制台29

2.1.2 ChromeCanary的帧速率计数器32

2.1.3 调试34

2.1.4 时间线35

2.1.5 Profiling39

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 使用HTML5canvas元素绘制图形和图像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 滚动SnailBait游戏的背景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 SnailBait的倒计时87

4.8 小结89

4.9 练习90

第5章 游戏加载动画91

5.1 定义SnailBait游戏的窗口93

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

5.2.1 让元素淡入97

5.2.2 让元素淡出98

5.2.3 snailbait-toast元素的CSS99

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 SnailBait游戏的时间系统195

10.2 创建和启动时间系统197

10.3 将时间系统整合进SnailBait游戏中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 SnailBait游戏中的碰撞检测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 在移动设备上运行SnailBait游戏284

15.2 检测移动设备284

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

15.3.1 HTML5viewport元标签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 将排烟孔粒子系统存入SnailBait游戏的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 SnailBait游戏的开发者后门372

18.2 开发者后门的HTML元素及CSS373

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元素及CSS386

18.6.2 在SnailBait游戏的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 在SnailBait游戏中引入socket.io406

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 部署SnailBait游戏423

19.10 将文件上传到服务器425

19.11 小结426

19.12 练习426

第20章 后记:BodegaRevenge游戏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

前言/序言

  前  言Preface

  《HTML5 2D游戏编程核心技术》是为希望使用HTML5进行2D游戏开发,且具备一定JavaScript编程经验的开发人员而准备的。在《HTML5 2D游戏编程核心技术》中,笔者从零开始完整讲解了一个复杂的横向卷轴平台视频游戏的开发过程,并将该视频游戏命名为“SnailBait”。在开发过程中,笔者没有使用任何第三方图形框架或游戏框架,因此读者将从《HTML5 2D游戏编程核心技术》中学会以编程方式实现平滑动画、sprite爆炸、开发人员后门程序、游戏难易度设计等所有内容。如果读者正在使用某个游戏框架开发游戏,那么《HTML5 2D游戏编程核心技术》对于帮助读者理解游戏框架内部的工作原理也同样大有裨益。

  出于教学目的,SnailBait游戏仅实现了一个关卡,然而它却具备了街机风格游戏的全部特点。SnailBait游戏在滚动的背景上同时操作多个动画对象,即sprite对象,在播放游戏背景音乐的同时添加多种音频效果。sprite对象具备多种行为,包括但不限于跑动、跳跃、飞行、闪光、弹跳、来回移动、爆炸、碰撞、平台着陆、从游戏画面底部跌落等。

  另外,SnailBait游戏还实现了多个特色功能。例如,一个可以减慢或加快游戏整体速度的时间系统;游戏加载过程动画;当游戏主角失去生命时,震动游戏画面的特殊效果;模拟烟雾和燃烧的粒子系统等。当游戏窗口失去焦点时,SnailBait游戏会暂停运行,而当游戏窗口重新获得焦点时,SnailBait游戏会以一个倒计时动画作为开始,以便玩家有时间来恢复对游戏的控制。

  虽然没有使用游戏框架或图形框架,但是SnailBait游戏使用Node.js和socket.io技术实现了将游戏中的一些指标数据发送到服务器端、高分存储和检索,并在游戏窗口顶部显示高分榜等功能。当游戏运行缓慢时,SnailBait游戏还将显示警告信息。而当按下“Ctrl+D”组合键启动游戏时,SnailBait游戏将启动开发人员后门程序,从而赋予操作人员特殊权限,例如修改时间轴的流动,或者显示sprite对象碰撞检测矩形以及其他功能等。

  当SnailBait游戏检测到自己运行在移动设备上时,将通过调用触摸事件处理句柄、调整游戏窗口大小来重新配置自身,以便适应移动设备的屏幕大小及控制方式。

  《HTML5 2D游戏编程核心技术》将展示如何一步一步编程实现SnailBait游戏的所有功能,这样读者就可以在自己的游戏中实现类似的功能。

  《HTML5 2D游戏编程核心技术》简史

  早在2010年,笔者从一款流行的Android系统下的开源游戏ReplicaIsland中下载了图片和声音,并使用它们在Android系统中实现了SnailBait游戏的初始版本。

  当时,笔者已经对HTML5Canvas技术产生了浓厚的兴趣,并开始写作上一本图书《HTML5Canvas核心技术:图形、动画与游戏开发》。在写作期间,笔者持续完善了SnailBait游戏,将它从基于Java语言及Android的系统环境,迁移到了基于JavaScript语言、HTML5canvas元素及浏览器的环境中。在2012年写作完成时,笔者已经开发出了一个虽然原始但功能基本完整的游戏版本。

  2012年年底,笔者基于SnailBait游戏开始为IBMdeveloperWorks网站撰写10篇关于游戏编程的系列技术文章(关于这些技术文章的链接,请参阅后面的“网上资源”部分)。在接下来的10个月中,基于写作需要,笔者继续完善、修改了SnailBait游戏。

  2013年夏天,SnailBait游戏已经日趋成熟。笔者前往加利福尼亚的塞瓦斯托波尔,把SnailBait游戏开发的全过程放在一起,拍摄了一部长达15小时的O’Reilly视频,取名为“HTML52D游戏开发”。从某个方面而言,这部视频就是《HTML5 2D游戏编程核心技术》的电影版。虽然该视频直到9月才得以发布,但它依然成为当年的十大畅销O’Reilly视频之一(关于这段视频的链接,请参阅后面的“网上资源”部分)。

  2013年7月,从塞瓦斯托波尔回到家之后,笔者便全身心地投入到《HTML5 2D游戏编程核心技术》的写作中。笔者改写了IBMdeveloperWorks网站上的10篇系列技术文章,将这些文章作为《HTML5 2D游戏编程核心技术》的开始章节,并在其后添加了10章的新内容。在写作的整个过程中,笔者不断迭代修改SnailBait游戏的代码,使其更具有可读性。

  2013年12月,在《HTML5 2D游戏编程核心技术》第1~19章完成后,笔者决定增加最后一章。该章讲解了如何使用《HTML5 2D游戏编程核心技术》介绍的技术实现一个简单完整的视频游戏,这就是第20章中Bodega’sRevenge游戏的由来。

  如何阅读《HTML5 2D游戏编程核心技术

  《HTML5 2D游戏编程核心技术》的写作目的简单明确:通过讲解如何实现一个复杂的视频游戏,教会读者开发属于自己的游戏。

  读者可以采用多种方式阅读《HTML5 2D游戏编程核心技术》。首先,笔者为了使《HTML5 2D游戏编程核心技术》更便于阅读,在书中添加了大量的截图、程序清单和图表。

  书中灵活地使用了“注意”“提示”“警告”和“最佳实践”模块。这些模块精简了《HTML5 2D游戏编程核心技术》主要内容,每个“注意”“提示”“警告”和“最佳实践”模块都有一个标题(除了只有一行的模块之外),这样读者一眼就可以判定这些辅助内容是否与自己的实际情况有关。总体而言,《HTML5 2D游戏编程核心技术》主要是在讲解开发方法,而这些模块则重点提示了开发的原因。如果读者时间有限,那么可以抛开这些模块,直接阅读《HTML5 2D游戏编程核心技术》的主要内容,从而快速掌握游戏底层的工作机制,同时确保不会遗漏任何重要内容。

  《HTML5 2D游戏编程核心技术》第1~19章讲解了SnailBait游戏的完整开发过程,从一个简单的显示图像的游戏版本开始,涵盖了HTML5视频游戏开发的所有特点。第20章总结《HTML5 2D游戏编程核心技术》,使用《HTML5 2D游戏编程核心技术》前19章讲述的大部分技术内容实现了第二个视频游戏。

  如果读者计划精读《HTML5 2D游戏编程核心技术》,而不仅仅是把它当作一个参考,那么建议从第1章或第20章开始阅读,其中第20章除了对第1~19章所学内容进行了回顾与综述外,还增加了部分新知识,例如极坐标系统和旋转坐标系统的应用。

  假如读者从第20章开始阅读,甚至只是略微地浏览一下第20章,读者都可以对前19章所讲述的内容有一个大致的了解,但是不要奢望在第一次阅读时就能理解透彻。

  笔者猜想大部分读者都希望把《HTML5 2D游戏编程核心技术》当作一个参考,因此除了在每章的开头部分加入该章主题外,还在每章的开始部分添加了一段关于该章内容的简要介绍。这样将给读者快速定位具体内容带来很大便利。同时,笔者还加入了许多关于如何实现具体功能的分步说明,这样读者就可以按照这些步骤实现自己的类似功能。

  《HTML5 2D游戏编程核心技术》练习

  被动地阅读一《HTML5 2D游戏编程核心技术》不会将任何人变成一个游戏开发程序员。读者必须通过自己动手编写一些代码来真正学会实现一款游戏的方法。为此,《HTML5 2D游戏编程核心技术》在每一章的结束部分都列出了一些练习,以帮助读者更好地学习。

  为了完成练习,读者需要下载SnailBait游戏源代码的最终版本,并且修改代码。在某些情况下,练习将指导读者修改某个具体版本的SnailBait游戏源代码,这些版本的游戏源代码与具体的章节有关。关于SnailBait游戏源代码版本划分的详细信息,请阅读下面的内容。

  SnailBait游戏源代码及其版本划分

  《HTML5 2D游戏编程核心技术》讲述的主要内容来源于两个视频游戏。读者可以通过“网上资源”部分的URL地址查看、下载这两个游戏及其源代码。

  在阅读时,读者会发现参考SnailBait游戏的源代码对于理解书中的内容非常有帮助,而通过参考与读者正在阅读的章节对应的源代码,这种帮助将更加明显。例如,在第1章里,我们实现了SnailBait游戏的一个初始版本,简单绘制了游戏背景和游戏主角。这个版本的源代码与最终版本的源代码虽然有少量相似之处,但此时就查阅最终版本的源代码一点用都没有,大量的代码反而会让读者眼花缭乱。反倒是参考corehtml5games.com/book/code/ch01网址上这个对应第1章结束的版本更有助于读者理解第1章所讲述的内容。《HTML5 2D游戏编程核心技术》每章(除第2章外)对应的源代码版本的URL都按照corehtml5games.com/book/code/ch??的格式设定,其中“??”代表了对应于第01~20章的两位数字。

  如上所述,除非另有说明,否则《HTML5 2D游戏编程核心技术》每章最后部分的练习都对应于按照章节一步一步开发游戏,在章节结束时得到的SnailBait游戏版本。

  网上资源

  《HTML5 2D游戏编程核心技术》配套网站:corehtml5games.com

  SnailBait游戏的在线网址:corehtml5games.com/snailbait

  Bodega’sRevenge游戏的在线网址:corehtml5games.com/bodegas-revenge

  SnailBait游戏源代码下载地址:corehtml5games.com/book/downloads/snailbait

  Bodega’sRevenge游戏源代码下载地址:corehtml5games.com/book/downloads/bodegas-revenge

  O’Reilly网站上作者的“HTML5二维游戏开发”视频:shop.oreilly.com/product/0636920030737.do

  IBMdeveloperWorks网站上作者的“HTML5二维游戏开发”系列技术文章:www.ibm.com/developerworks/java/library/j-html5-game1/index.html

  作者2013年在亚特兰大HTML5用户组会议上关于HTML5游戏编程的演讲视频:youtube.com/watch?v=S256vAqGY6c

  作者出版的《HTML5Canvas核心技术:图形、动画与游戏开发》在亚马逊上的链接:http://amzn.to/1jfuf0C

  预备知识

  如果人们不能说某种语言或以这种语言书写,他们就不会考虑上这样一门创造性的书写课。同样,为了使用HTML5编程实现复杂游戏,读者就必须掌握JavaScript语言。JavaScript语言是学习《HTML5 2D游戏编程核心技术》的前提基础。

  《HTML5 2D游戏编程核心技术》程序清单所列的代码几乎都是用JavaScript语言编写的,但这并不代表只掌握JavaScript语言就够了,读者还需要掌握与之相关的HTML和CSS,熟悉计算机图形学,并具备基本的数学知识。

  关注自己的游戏

  最后,让我们来讨论一下为什么我们能够聚在这里。笔者猜想读者之所以阅读《HTML5 2D游戏编程核心技术》是因为大家希望通过编程来实现一款属于自己的游戏。

  《HTML5 2D游戏编程核心技术》按章节讨论了游戏编程的各个方面,例如实现sprite、碰撞检测等。虽然它们属于SnailBait游戏,但是读者也能轻松地将这些实现方法套用到自己的游戏当中。

  《HTML5 2D游戏编程核心技术》章节顺序的编排也很重要,这些章节展示了如何从头开始一步一步编程实现一款游戏。在《HTML5 2D游戏编程核心技术》的开始部分,首先收集原始素材,搭建开发环境,然后从绘制游戏的基本图形开始编程开发。在随后的章节中,逐步向游戏中添加动画、sprite对象、sprite对象行为等功能,从而逐步完善SnailBait游戏。如果读者正在从零开始开发一款游戏,那么可能会希望遵循同样的讲解方式,这样读者就可以一边学习实现功能的方法,一边在自己的游戏中实现这些功能。

  在开始认真编写代码之前,大家应该多花一些时间来搭建开发环境,并尽可能地熟悉手中浏览器的开发者工具。建议大家在第2章结束前,尽可能缩短自己的开发周期,因为在准备阶段多花的时间将会大大提高后续的开发效率。

  最后要感谢大家购买《HTML5 2D游戏编程核心技术》。笔者迫不及待地想要看到你自己创造的游戏!

  DavidGeary

  科罗拉多州,柯林斯堡

  2014年

  Acknowledgements致  谢

  我非常庆幸自己能够拥有一位非常优秀的编辑,他也是我20年写作生涯里的唯一一位编辑,一个总能从我的下一《HTML5 2D游戏编程核心技术》中读懂并接受我的观念的编辑,一个总是指导我将概念变成作品的编辑,GregDoench。像往常一样,GregDoench在《HTML5 2D游戏编程核心技术》从计划写作到成书的全过程中给了我充分的帮助及指导。

  MaryLouNohr是一位非常棒的文字编辑,她参与编辑了我此前的所有著作。当她再次欣然同意担任《HTML5 2D游戏编程核心技术》的责任编辑时,我感到自己非常幸运。

  这是我和AlinaKirsanova合作的第2《HTML5 2D游戏编程核心技术》,AlinaKirsanova是一位非常出色的排版编辑,我的PDF文件经过她的处理后,总会变得非常漂亮。JulieNahil监督了《HTML5 2D游戏编程核心技术》的出版,使整个出版过程都能按照出版商的要求如期进行。

  每当完成一《HTML5 2D游戏编程核心技术》的写作时,我都会选择那些个人认为能够帮助我改进作品的人来担任审稿人。这一次我选择了4位非常出色的审稿人:JimO'Hara、TimothyHarrington、SimonSarris和WillamMalone。GintasSanders允许我在SnailBait游戏中使用他的金币图片,并指出了SnailBait游戏中的许多不足。

  在为O’Reilly拍摄“HTML5二维游戏开发”视频时,我有幸接触到了当时的现场观众,其中一位观众给我留下了深刻印象,他向我提出了很多问题和建议,此人就是《HTML5 2D游戏编程核心技术》的审稿人JimO’Hara。在此后的审稿过程中,JimO’Hara一如既往地认真负责,向我提出了许多好问题、好建议。

  编辑GregDoench介绍我认识了TimHarrington,他是德锐大学的一个高级学术应用分析师,并且具有游戏开发的实际经验。他的许多建议使我深受启发,并促使我重新思考如何更好地完成《HTML5 2D游戏编程核心技术》。

  我一直在为《HTML5 2D游戏编程核心技术》寻找一位非常了解游戏编程的图形专家,最后我找到了SimonSarris。让我喜出望外的是,他不仅是一位精通游戏编程的图形专家,还是一位优秀的作家,他提出的几种不同方法帮助我完善了《HTML5 2D游戏编程核心技术》。

  最后,我很庆幸WilliamMalone能够审阅《HTML5 2D游戏编程核心技术》。William是一位专业的游戏开发人员,他开发了SesameStreet游戏(相关信息请查阅http://bit.ly/1nlSY3N)。William的工作对《HTML5 2D游戏编程核心技术》产生了深刻的影响,他指出了我忽略了的许多细节,特别是关于移动设备的问题。


其他推荐