零、简介

你如何制作一个电子游戏?这本书会告诉你你需要知道的一切。您将学习如何使用低级开源技术,从零开始构建自己的开发工具,制作各种 2D 动作游戏。你所需要的就是这本书,一个文本编辑器,一个网络浏览器和任何一台旧电脑。没有库,没有框架,没有游戏引擎,没有黑盒神秘代码,没有昂贵的专有软件或许可证。你可以将你的游戏跨平台发布到桌面、移动设备和网络上。您很快就会看到,只需编写几百行代码,您就可以开发出任何您能想到的 2D 视频游戏。

听起来很有趣?这是最好的乐趣!以下是你将学到的东西:

  • 新的 JavaScript 技巧和诀窍,包括 ES6 附带的一些技巧(第 1 章)。
  • 如何在屏幕上绘制图形,并使用这些图形创建可重用的游戏组件(第 2 章第 4 章)。
  • 如何创建一个场景图(游戏对象的父子层次结构)最大限度的灵活创建游戏场景(第四章)。
  • 如何高效地加载图像、声音、字体和其他游戏素材(第三章)并构建加载进度条(第十一章)。
  • 如何用物理制作物体动画(第五章),如何用关键帧动画制作出细节丰富的游戏角色(第八章)。
  • 关于碰撞检测你需要知道的一切(第七章),包括视频游戏设计师的“秘密黑艺术”:矢量数学(附录 A)。
  • 保存和加载游戏数据,在全屏模式下运行游戏(第 1 章,将游戏缩放到任意窗口大小(第 11 章)。)
  • 分离轴定理(SAT)是什么,为什么对游戏有用?在附录 A 中找到答案!
  • 如何创建按钮,为你的游戏添加鼠标、触摸和键盘交互性,学习如何为游戏对象创建拖放系统(第 6 章)。
  • 如何给你的游戏添加特效:简单的视差滚动,粒子特效(第 8 章,和屏幕抖动(第 11 章)。
  • 如何播放和控制声音文件以及如何从纯代码动态生成合成音效(第九章)。
  • 如何建立一个补间系统,让游戏物体沿着固定的曲线路径(第十章)。
  • 如何将所有这些部件组合在一起,制作自己的游戏引擎,以便您能够以最快、最简单、最有趣的方式构建游戏(第 11 章)。
  • 在这个过程中,你会学到很多最现代的编码和游戏开发实践。

这本书是一个独立的,制作视频游戏的经典教育,也是作为一个游戏设计师,你需要知道的所有重要技术的概要。如果你独自一人在一个荒岛上,只有一台太阳能笔记本电脑、一堆椰子和这本书,你将拥有从《太空战争》中重现 2D 电子游戏全部历史所需的一切!敬皮皮鸟。

你需要知道的事情

为了充分利用这本书,你需要具备一定程度的编程素养。您应该能够浏览您最熟悉的任何编程语言的代码块,并对其工作原理有一个大致的了解。你不需要把自己当成一个“程序员”或者某种专家。你只需要能够带着一定程度的自信摸索出解决编程问题的方法。如果你喜欢编程,你会喜欢这本书。

这本书里的编程代码是用 JavaScript 写的。JavaScript 属于 C 语言家族(C、C++、C#、Objective-C、Java 和 AS3.0),所以如果你知道这些语言中的任何一种,你将能够轻松地使用 JavaScript。即使你以前从未使用过 JavaScript,第 1 章也会给你一个快速入门。

你以前没做过编程吗?然后从这本书的前身开始,用 HTML5 和 JavaScript 进行基础游戏设计。当你在学习如何制作游戏时,它会教你如何编程,并涵盖你开始使用这本书所需要知道的一切。

用 HTML5 和 JavaScript 看过基础游戏设计吗?如果是这样,你已经准备好了。如果你认为你可能忘记了一点,或者在开始前需要复习,放松!我用一种非常偷偷摸摸的方式写了这本书。它涵盖了所有的基础知识,从零开始,并融入了所有先进的,有趣的新东西。所以,如果你忘记了一些东西,比如如何制作和渲染一个精灵,不要担心:它都在这里,并且包含了许多聪明的新技巧。基础书是关于学习如何编程和如何以最可以理解的方式做事,而这本进阶书是关于以最好的最令人兴奋的方式做事。我写这本书是为了成为一本关于制作游戏的全面的书,这本书将通过启发和开阔眼界的新方法向你重新介绍我们热爱的艺术形式。

如何阅读这本书

这是一本故事书。你可以在床上读,或者在沙滩上。就像你看《简爱》或《指环王》一样,从《T4》第一章开始,一路看到底。每章都建立在前一章的技术和概念之上。但是,如果你现在就想知道具体的技术,就在任何地方开始吧——你应该还是可以的。

*唯一不同的部分是附录 A:“运动和碰撞检测的向量。”你可以随时阅读。附录 A 是对向量数学概念的深入探索,这些概念通常与书中所有其他章节相关,但也是可选的。如果你想在开始第一章之前了解所有关于向量的知识,请先阅读附录。但是如果你不是真的那么感兴趣,或者只是想留着以后参考,完全可以跳过。

源代码

这本书里的大部分内容其实都不是这本书里的。您可以在每章附带的源代码文件中找到它。您可以从本书的产品页面www.apress.com下载源代码,或者从本书的 GitHub 资源库下载:

https://github.com/kittykatattack/agd

是的,有很多源代码!事实上,这本书里的例子太多了,大多数印刷的例子只突出了最重要的部分。你是一个足够优秀的程序员,能够理解这些部分如何融入大局。但是如果您有任何疑问,请打开完整的工作源代码并查看一下。

这本书的所有代码都是纯 JavaScript 和 HTML 编写的。它不使用任何抽象层,如 CoffeeScript、TypeScript 或 JQuery。

写这本书的时候,HTML5 为游戏开发者提供的许多最好的特性仍处于试验阶段,需要“厂商前缀”才能在所有平台上正常工作。如果你可能需要使用它们,我会在正文中提及,但我会尽量避免它们出现在本书的代码中。(为了最大限度地兼容,我将它们保存在源代码中,但通常将它们整理在 JS polyfill 文件中。)希望你在一个快乐的未来阅读这本书,那时 HTML5 进化的残余已经消失。但在此之前,以下是目前最常用的供应商前缀:

|

小贩

|

CSS 前缀

|

JavaScript 前缀

| | :-- | :-- | :-- | | 微软浏览器名歌剧 Chrome,Safari | - ms-``-moz-``-o-``-webkit - | ms``moz``o``webkit |

Image 提示编写跨平台的 CSS 可能会特别困难,因为不同的供应商在 CSS 属性的定义上往往存在差异。通过使用像 Sass 这样的好的预处理器,您可以让 CSS 再次变得有趣,并使用它的 Compass 扩展为您自动创建所有特定于供应商的代码。

此外,确保在 web 服务器上运行所有源代码。我们将在本书中用到的许多 JavaScript 和 HTML5 特性,比如 XHR,只能在网络服务器中使用。一个很好的跨平台方法是安装 Node,这是一个非常棒的纯 JavaScript 服务器。访问nodejs.org并按照说明将其安装到您的平台上。然后安装一个运行在它上面的很棒的小助手工具,叫做 http-server: ( github.com/nodeapps/http-server)。这是一个快速的迷你网络服务器,你只需要一行代码就可以运行。使用命令行 CD 到项目的根目录,并键入

http-server

然后打开任何网络浏览器

http://localhost:8080/

如果您的项目目录中有一个名为index.html的文件,您会看到它自动显示出来。如果没有,只需在项目根目录中添加任何其他 HTML 文件的名称。

如果你正在使用一个现代的代码编辑器,比如括号、Atom、Light Table 或者 Sublime Text,当你预览一个 HTML 文件的时候,这些工具中的很多都会自动为你启动一个 web 服务器。查看您正在使用的编辑器的文档。如果你在 Unix 上使用 Vim 或 Emacs 这样的文本编辑器,你可以使用watchfswatch(对于 Mac OSX)和make在文件改变时运行任务,然后使用tincr (Chrome)或Auto Reload (Firefox)这样的浏览器扩展自动刷新浏览器。有数不清的配置,所以尝试一下,找到一个你觉得舒服的工作流程。*