JavaScript:你喜欢游戏吗？(第四部分)

原文：https://medium.com/hackernoon/javascript-do-you-like-games-part-4-9d6e8adb5626

我们将继续使用显示对象，它扩展了场景。您可以在本系列的第 1 部分中回顾这个模式，但是我们将对事物的命名方式进行一些修改。

它的工作非常简单；它将需要在一个子数组中呈现的对象分组，并且它将公开允许我们向这个数组添加和移除元素的方法。它实际上在功能上非常类似于画布。

我们希望在我们的场景中呈现的所有东西都是显示对象。想象一个游戏，我们有一艘宇宙飞船。每当飞船移动，它的推进器就会被点燃。显示物体可以容纳飞船和推进器，因为它们属于一起。

像这样分开物体意味着我们也可以单独测试碰撞，因为与推进器碰撞的东西不应该记录在船上。

你可以使用这种逻辑更进一步，增加收集能量的能力，为船只增加更多的火力，并使这些增强可以被敌人的火力摧毁，等等。

现在我们只关心分组逻辑:

engine/ui/DisplayObject.js

雪碧床单:它们是什么，能提供什么？

一个游戏通常需要大量的图形资源。在 2D 游戏中，这些图像通常被称为精灵。每个图像都有宽度、高度和颜色深度。像素由 4 个通道定义:

每个通道都有一个从 0 到 255 的值。可以用 8 位存储最大值 255(二进制 255 = 11111111)；4 个通道每个通道 8 位= 32 位。每个像素总共有 4 个字节。64x64 图像所需的内存为 6464*4 = 16.3 千字节。

这不是很多，但管理多个角色、项目和动画会影响内存和隐含的性能。最好的方法是将所有图形资产存储在一个 sprite 表中。下面是愤怒的小鸟游戏中的部分精灵表示例:

它有各种各样的猪，他们受到的伤害阶段，以及一些鸟。有一些工具可以帮助你创建 sprite 工作表，比如 TexturePacker ，但是你也可以创建自己的实用程序来相对容易地完成这项工作。

您可以创建具有固定宽度和高度单元格的 sprite 表，或者您可以通过裁剪透明部分使每个 sprite 占用尽可能少的空间来优化它们。

我们的引擎将有一个 SpriteSheet 类，它将实现一个 getTile() 方法来返回基于其位置的特定图块。我们目前的工作思路是，工作表中的所有图块都具有相同的宽度和高度(因此，如果一个图像是 64x32px，则它们都是)。

engin/ui/SpriteSheet.js

它需要两个参数:加载的图像和图块大小。加载的图像将由我们的 AssetsLoader 实用程序类提供，我们在本系列的第 2 部分中已经介绍过。

由于我们的 sprite 表对于每个图块都有固定的宽度和高度，所以我们可以遍历整个图像并存储每个 sprite 的坐标。

动画精灵没有什么不同，看看街头霸王游戏中的 Ryu 精灵表:

Ryu Sprite Sheet (702 x 130 px)

这和电影胶片是一个概念。你有很多帧的静态图像，你以很高的帧速率遍历它们。这给人以运动的错觉。

那么一个动画的 prite 类会是什么样子呢？它应该有几样东西:

engine/ui/AnimatedSprite.js

这就是所谓的 blitting。帧速率控制由 update() 方法中的日期实例管理。我们检查经过的时间是否大于周期…如果是，我们简单地将帧索引增加 1；无论是 update() 还是 render() 方法仍然是每秒调用~60 次，这并不影响我们。

让我们把所有东西放在一起:

sprites/index.js

下面是 Ryu 以 10 fps 的速度循环播放动画的工作演示:

源代码:

[## 红景天/游戏-physx

在下一篇文章中，我们将尝试用我们目前拥有的引擎创建一个简单的游戏，比如小行星或者太空入侵者。