和其他艺术形式（比如电影、戏剧和小说）一样，游戏也有一系列的人物，每个人物都扮演着特定的角色。例如，Snail Bait 有跑步小人（游戏主角）、硬币、红宝石、蓝宝石、蜜蜂、蝙蝠、纽扣和一个蜗牛，图 1 中展示了其中的大多数角色。在本系列的第 1 篇文章中（参阅 小节），已经介绍了这些人物以及它们在游戏中的角色。
图 1. Snail Bait 的人物 Snail Bait 中每个人物都是一个 sprite。Sprite 是可以赋予行为 的图形化对象,例如跑步小人可以奔跑、跳跃、坠落并与游戏中的其他 sprite 相撞，而红宝石和蓝宝石可以闪耀光芒、上下跳动，与跑步小人相撞后消失。
发明术语 sprite美国德州仪器公司视频显示处理器的一个实现者是第一个使用术语 sprite 作为动画角色的人。（在标准英语中，这个单词源自于拉丁语 spiritus，意思是小精灵。）Sprite 已经在软件和硬件中得以实现；Commodore Amiga 在 1985 年就已支持高达 8 个硬件 sprite。
对于任何游戏来说，sprite 都是最基本的部分，因为游戏通常有很多 sprite，因此将其基本功能封装到可重用对象中是非常有意义的。在本文中，您将学习如何执行以下操作：
- 实现一个在任何游戏中均可重用的 Sprite 对象
- 从绘制 sprite 的对象（称之为 sprite artists）中解耦 sprite，以便在运行时灵活应用。
- 使用 sprite 表单 减少启动时间和内存需求
- 使用元数据创建 sprite
- 将 sprite 整合成为一个游戏循环
参阅 部分，获取本文的完整样例代码。
Sprite 对象我将 Snail Bait 的 sprite 实现为可在任何游戏中使用的 JavaScript 对象，因此，sprite 保存在游戏本身的文件中。我只是在 Snail Bait 的 HTML 中包含了该文件，如下所示：<script src='js/sprites.js'></script>。
表 1 列出了 Sprite 属性：
表 1. Sprite 属性属性描述artist绘制 sprite 的对象。behaviors一个行为数组，每一个都以某种方式操纵其 sprite。left左上角 sprite 的 X 坐标。top左上角 sprite 的 Y 坐标widthsprite 的宽度，用像素表示。heightsprite 的高度，用像素表示。opacitysprite 是不透明的还是透明的，或者介于两者之间。type一个代表 sprite 类型的字符串，比如 bat、bee 或 runner。velocityXsprite 的水平速度，单位为像素/秒。velocityYsprite 的垂直速度，单位为像素/秒。visiblesprite 的可见度。如果值为 false，则不需要绘制 sprite。
Sprite 是比较简单的对象，一些属性定义了其位置和大小（即 sprite 的边界框）、速度和可见度。还有一个属性，可用于将一个 sprite 与另一个 sprite 以及不透明 sprite 区分开，这意味着 sprite 可以是半透明的。
Sprite 将它们的绘制方式和行为方式分配给了其他属性，分别称为 artists 和 behaviors。
清单 1 展示了 Sprite 构造函数，该函数将 sprite 的属性设置为初始值：
清单 1. Sprite 构造函数1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| var Sprite = function (type, artist, behaviors) { // constructor
this.type = type || '';
this.artist = artist || undefined;
this.behaviors = behaviors || [];
this.left = 0;
this.top = 0;
this.width = 10; // Something other than zero, which makes no sense
this.height = 10; // Something other than zero, which makes no sense
this.velocityX = 0;
this.velocityY = 0;
this.opacity = 1.0;
this.visible = true;
return this;
};
|
表现与行为Sprite 方法的签名对表现和行为之间的关注点进行了分离：draw() 使用 Canvas 上下文绘制一个 sprite，而 update() 被设计为只根据当前时间以及动画帧速率更新 sprite 状态。行为不应该绘制 sprite 状态，而 artist 不应该操控 sprite 状态。
中的所有构造函数参数都是可选的。如果没有指定行为，构造函数将会创建一个空数组，如果您创建一个 sprite 而没有指定类型，那么该类型将是一个空字符串。如果没有指定 artist，那么它的值将是 undefined。
除了这些属性之外，sprite 还有两个方法，表 2 中列出了这两个方法：
表 2. Sprite 方法方法描述draw(context)如果 sprite 是可见的并且有一个 artist 对象，则调用 sprite artist 的 draw() 方法update(time, fps)对于每个 sprite 行为，应该调用 update() 方法。
中列出的方法的实现如清单 2 所示:
清单 2. Sprite 方法的实现1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| Sprite.prototype = { // methods
draw: function (context) {
context.save();
// Calls to save() and restore() make the globalAlpha setting temporary
context.globalAlpha = this.opacity;
if (this.artist && this.visible) {
this.artist.draw(this, context);
}
context.restore();
},
update: function (time, fps) {
for (var i=0; i < this.behaviors.length; ++i) {
if (this.behaviors === undefined) { // Modified while looping?
return;
}
this.behaviors.execute(this, time, fps);
}
}
};
|
您可以传递两个 Sprite 方法（ draw() 和 update()），这些方法是对 Canvas 2D 上下文的引用，这些方法会分别传递给 sprite 的 artist 和 behaviors 对象。
Sprite 速度：以像素/秒为单位正如您在本系列第 2 篇文章（参阅 小节）所看到的，sprite 运动必须独立于游戏动画的底层帧速率。请根据该需求指定 sprite 速度，以像素/秒为单位。
正如您在 和 中所看到的，sprite 并不复杂，大多数复杂的 sprite 都封装在 sprite 的 artist 和 behaviors 对象中。了解在运行时可以更改 sprite 的 artist 和 behavior 很重要，因为这样您可以从这些对象中解耦 sprite。您可在本系列的下一篇文章中看到，实现多个 sprite 使用的一般行为是可行的，而且是十分可取的。
您已经了解了 sprite 的实现方法了，现在可以了解一下如何实现 sprite artists 了。 |
