HTML5 游戏开发基础的教程

在游戏的视觉效果定义其整体外观、感觉和游戏玩法本身。玩家被好的视觉体验所吸引,从而可达到产生更多的流量。这是创建成功的游戏和为玩家提供很多乐趣的关键。

在这篇文章中,我们基于 HTML5 游戏的不同视觉效果实现,提出几个构思方案。这些示例将依据我们自己的游戏《Skytte 》所实现的效果。我会解释支持他们的基本思想, ,并提供应用于我们项目中的效果。

你会学到什么

在我们开始之前, 我想列出一些我希望你能从本文中学习的知识:

  • 基本的游戏设计
    我们来看看通常用于制造游戏和游戏效果的模式: 游戏循环、精灵、碰撞和粒子系统。
  • 视觉效果的基本实现
    我们还将探讨支持这些模式的理论和一些代码示例。

常见的模式

让我们从游戏开发中常用的大一些模式和元素开始

精灵

这些只是在游戏中代表一个对象的二维图像。精灵可以用于静态对象, 也可以用于动画对象, 当每个精灵代表一个帧序列动画。它们也可用于制作用户界面元素。

通常游戏包含从几十到几百精灵图片。为了减少内存的使用和处理这些映像所需的能力, 许多游戏使用精灵表。

精灵表

这些都用来在一个图像中合成一套单个精灵。这减少了在游戏中文件的数量,从而减少内存和处理电源使用。精灵表包含许多单精灵堆积彼此相邻的行和列,和类似精灵的图像文件,它们包含可用于静态或动画。

精灵表例子。(图像来源: Kriplozoik)

下面是Code + Web的文章, 帮助您更好地理解使用精灵表的益处。

游戏循环

重要的是要认识到游戏对象并不真正在屏幕上移动。运动的假象是通过渲染一个游戏世界的屏幕快照, 随着游戏的时间的一点点推进 (通常是1/60 秒), 然后再渲染的东西。这实际上是一个停止和运动的效果, 并常在二维和三 维游戏中使用。游戏循环是一种实现此停止运动的机制。它是运行游戏所需的主要组件。它连续运行, 执行各种任务。在每个迭代中, 它处理用户输入, 移动实体, 检查碰撞, 并渲染游戏 (推荐按这个顺序)。它还控制了帧之间的游戏时间。

下面示例是用JavaScriptpgpg语言写的非常基本的游戏循环︰

请注意,上面的例子中是非常简单。它使用可变时间增量 (已用的变量),并建议升级此代码以使用固定的增量时间。有关详细信息, 请参阅本文。

碰撞检测

碰撞检测是指发现物体之间的交点。这对于许多游戏是必不可少的, 因为它用来检测玩家击中墙壁或子弹击中敌人, 诸如此类等等。当检测到碰撞时, 它可以用于游戏逻辑设计中;例如, 当子弹击中玩家时, 健康分数会减少十点。

有很多碰撞检测算法, 因为它是一个性能繁重的操作, 明智的选择最好的方法是很重要的。要了解有关碰撞检测、算法以及如何实现它们的更多信息, 这里有一篇来自MDN 的文章。

粒子和粒子系统

粒子基本上是用粒子系统的精灵。在游戏开发中一个粒子系统是由粒子发射器和分配给该发射器的粒子组成的一个组成部分。它用来模拟各种特效,像火灾、 爆炸、 烟、 和下雨的影响。随着时间的推移微粒和每个发射器有其自身的参数来定义各种变量,用于模拟的效果,如速度、 颜色、 粒子寿命或持续时间,重力、 摩擦和风速。

欧拉积分

欧拉积分是运动的积分方程的一种方法。每个对象的位置计算基于其速度,质量和力量,并需要重新计算每个 tick 在游戏循环。欧拉方法是最基本和最有用的像侧滚动的射击游戏,但也有其它的方法,如Verlet 积分和 RK4积分,会更好地完成其他任务。下面我将展示一个简单的实现的想法。

你需要一个基本的结构以容纳对象的位置、 速度和其他运动相关的数据。我们提出两个相同的结构,但每一个都有不同的意义,在世界空间中︰ 点和矢量。游戏引擎通常使用某种类型的矢量类,但点和矢量之间的区别是非常重要的,大大提高了代码的可读性 (例如,您计算不是两个矢量,但这两个点之间的距离,这是更自然)。

简单地说, 它代表了二维空间空间中的一个元素, 它有 x 和 y 坐标, 它定义了该点在该空间中的位置。

矢量

一个矢量是一个具有长度 (或大小) 的几何对象和方向。2 D 游戏中矢量主要是用于描述力(例如重力、 空气阻力和风) 和速度,以及禁止运动或光线反射。矢量有许多用途。

上述函数创建了新的二维矢量和点。在这种情况下, 我们不会在 javascript 中使用 new 运算符来获得大量的性能。还要注意, 有一些 第三方库可用来操纵矢量 (glMatrix 是一个很好的候选对象)。

下面是在上面定义的二维结构上使用的一些非常常用的函数。首先, 计算两点之间的距离:

矢量的大小 (长度) 可以直接从最后一行的上面的函数,这样计算︰

矢量的长度。

矢量规范化也是非常方便的。下面的函数调整矢量的大小,所以它成为一个单位矢量;也就是说,它的长度是 1,但保持它的方向。

矢量归一化。

另一个有用的例子是,其方向指从一个位置到另一个位置︰

点积是对两个矢量 (通常为单位矢量) 的运算, 它返回一个标量的数字, 表示这些矢量的角度之间的关系。

矢量点积

点积是一个矢量投影矢量 b 上的长度。返回的值为 1 表示两个矢量指向同一方向。值为-1 意味着矢量方向相反的矢量 b 点。值为 0 表示该矢量是垂直于矢量 b。

这里是实体类的示例,以便其他对象可以从它继承。只描述了与运动相关的基本属性。

您可以在你的游戏中使用像素或米为单位。我们鼓励您使用米,因为在开发过程中,它更容易平衡的事情。速度,应该是米每秒,而加速度应该是米每秒的平方。

当使用一个第三方物理引擎,只是将存储在您的实体类的物理主体(或主体集) 的引用。然后,物理引擎将在每个主体内存储所述的属性,如位置和速度。

基本的欧拉积分看起来像这样︰

上面的代码必须在游戏中每个对象的每个帧中执行。下面是在 JavaScript 中的基本执行代码︰

经过的是自最后一个帧 (自最近一次调用此方法) 所经过的时间量 (以秒为单位)。对于运行在每秒 60 帧的游戏,经过的值通常是 1/60 秒,也就是 0.016 (6) s。

上文提到的增量时间的文章也涵盖了这个问题。

要移动对象,您可以更改其加速度或速度。为实现此目的,应使用如下所示的两个函数︰

要向右移动一个对象你可以这样做︰

请注意,在运动中设置的对象保持运动。您需要实现某种减速停止移动的物体 (空气阻力或摩擦,也许)。

武器的影响

现在我要解释一下, 在我们的 HTML5 游戏中, 某些武器效果是如何射击的

等离子

https://vimeo.com/135389044

在 Skytte中的等离子武器。

这是我们游戏中最基本的武器, 每次都是一枪。没有用于这种武器的特殊算法。当等离子子弹发射时, 游戏只需绘制一个随着时间推移而旋转的精灵。

简单的等离子子弹可以催生像这样︰

冲击波

https://player.vimeo.com/video/135389040

在 Skytte 的冲击波武器。

这种武器是更复杂一点。它也绘制简单精灵作为子弹,但却有一些代码,一点点传播开,并应用随机速度。这给这个武器带来了更具破坏性的感觉,,所以玩家觉得他们可以施加比血浆武器更大的伤害, 并且在敌人中间有更好的控制人群。

该代码工作方式类似于血浆武器代码,但是它生成三发子弹,每个子弹都有一个稍微不同的方向。

上面的代码需要一些数学函数来实现:

https://player.vimeo.com/video/135389040

在 Skytte中雷武器。

这很有趣。武器射激光射线,但它在每个帧的程序生成 (这将在稍后解释)。为了探测命中, 它会创建一个矩形对撞机, 它会在与敌人碰撞时每秒钟造成伤害。

火箭

https://vimeo.com/135389043

图 8︰ 在 Skytte中火箭武器。

这种武器射导弹。火箭是一个精灵, 一个粒子发射器附着在它的末端。还有一些更复杂的逻辑,比如搜寻最近的敌人或限制火箭的转弯值, 使其更少机动性。。此外,火箭就不会立即寻找敌方目标 — — 他们直接飞行一段时间, 以避免不切实际的行为。

火箭走向他们的相邻的目标。这是通过计算弹丸在给定的方向移动所需的适当力量来实现的。为了避免只在直线上移动, 计算的力在 skytte不应该太大。

假设,火箭从前面所述的实体类继承的类。

高射炮

https://vimeo.com/135389047

在 Skytte 中高射炮武器。

高射炮被设计为射击许多小子弹 (象猎枪), 是小斑点精灵。它有一些在锥形区域内的点的位置用特定的逻辑来随机生成这些。

高射炮武器子弹锥区。

在一个圆锥形的区域中生成随机点︰

函数返回两个值之间的一个随机浮点数。一个简单的实现就像这个样子︰

https://vimeo.com/135389046

在 Skytte 中的电武器。

电是射击在特定半径范围内的敌人的武器。它有一个有限的范围, 但可以射击在几个敌人, 并总是射击成功。它使用相同的算法绘制曲线, 以模拟闪电作为射线武器, 但具有更高的曲线因子。

使用技术

产生弯曲的线条

为了制造激光束效应和电子武器, 我们开发了一种计算和变换玩家的舰船和敌人之间的直线距离的算法。换句话说,我们测量的两个对象之间的距离,找到中间点,并在这一段距离随机移动它。我们为每个新场景创建重复此操作。

若要绘制这些部分我们使用 HTML5 绘制函数 lineTo()。为了实现发光颜色我们使用多行绘制到另一个更不透明的颜色和更高的描边宽度。

程序上弯曲的线条。

要查找并偏移其他两个点之间的点︰

找到最近的相邻目标

火箭和电武器找到最近的敌人,我们遍历一群活跃的敌人并比较他们的位置与火箭的位置,或此项目中电武器射击点。当火箭锁定其目标,并会飞向目标时,直到它击中目标或飞出屏幕。电武器,它会等待目标出现在范围内。

一个基本的实现可能如下所示︰

结论

这些主题涵盖只支持它们的基本思路。我希望读这篇文章后,你对如何开始并持续发展游戏项目会有更好的主意。查阅下面的参考,你可以自己试着做类似的游戏项目。

打赏支持我翻译更多好文章,谢谢!

打赏译者

打赏支持我翻译更多好文章,谢谢!

任选一种支付方式

2 2 收藏 1 评论

关于作者:紫洋

从设计到开发,一路磕磕撞撞,却也不断回旋上升前进,在多次的转型与蜕变的历炼过程中,学习理解并融入每一行业,珍视面临的挑战与机遇,并努力做一些让自己感到骄傲的事! 个人主页 · 我的文章 · 13 ·      

相关文章

可能感兴趣的话题



直接登录
最新评论
跳到底部
返回顶部