Sprite artists 和 sprite 表单Sprite artists 可使用以下 3 种方法之一实现：
- 描边和填充 artist：绘制基本图形，比如线条、弧形和曲线
- 图像 artist：使用 2D 上下文的 drawImage() 方法绘制一个图像
- Sprite 表单 artist：从 sprite 表单绘制一个图像（也可使用 drawImage()）
不管 artist 是什么类型， 所有 sprite artist 都必须满足以下条件：该对象必须执行一个 draw() 方法，此方法接受一个 sprite 和一个 Canvas 2D 上下文作为参数。
接下来，我们将讨论每个 artist 类型，先检查一下 sprite 表单。
描边和填充 artist描边和填充 artist 没有标准实现，您需要使用 Canvas 2D 上下文的图形化功能，以实现它们。清单 3 显示了描边和填充 artist 的实现，绘制 Snail Bait 平台 sprite：
清单 3. 描边和填充 artist1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| // Stroke and fill artists draw with Canvas 2D drawing primitives
var SnailBait = function (canvasId) { // constructor
...
this.platformArtist = {
draw: function (sprite, context) {
var top;
context.save();
top = snailBait.calculatePlatformTop(sprite.track);
// Calls to save() and restore() make the following settings temporary
context.lineWidth = snailBait.PLATFORM_STROKE_WIDTH;
context.strokeStyle = snailBait.PLATFORM_STROKE_STYLE;
context.fillStyle = sprite.fillStyle;
context.strokeRect(sprite.left, top, sprite.width, sprite.height);
context.fillRect (sprite.left, top, sprite.width, sprite.height);
context.restore();
}
},
};
|
正如您从 中所看到的，平台只不过是一些矩形， 中列出的平台 artist 使用 Canvas 2D 上下文的 strokeRect() 和 fillRect() 方法来绘制这些矩形。本系列第 2 篇文章（参阅这篇文章的 小节）提供了关于这些方法的更多信息。矩形的位置和大小是由平台 sprite 边界框决定的。
图像 artist与描边和填充 artist 不一样，图像 artist 有一个标准实现，如清单 4 所示：
清单 4. 图像 artist1
2
3
4
5
6
7
8
9
10
11
12
| // ImageArtists draw an image
var ImageArtist = function (imageUrl) { // constructor
this.image = new Image();
this.image.src = imageUrl;
};
ImageArtist.prototype = { // methods
draw: function (sprite, context) {
context.drawImage(this.image, sprite.left, sprite.top);
}
};
|
您可以使用一个图像 URL 构造一个图像 artist，该 artist 的 draw() 方法在其 sprite 位置绘制整个图像。
Snail Bait 没有使用图像 artist 对象，因此从 sprite 表单绘制图像效率更高一些。
Sprite 表单确保网站快速加载的一个最有效的方法是将您发出的 HTTP 请求数量减至最小。大多数游戏都使用了大量图像，如果对每个图像都发出一个 HTTP 请求，则会影响您的启动时间。鉴于这个原因，HTML5 游戏开发人员创建了一个包含所有游戏图像的大型图像，该图像称为 sprite 表单。图 2 显示了 Snail Bait 的 sprite 表单：
图 2. Snail Bait 的 sprite 表单 如果给定一个 sprite 表单，那么您需要使用一个方法将该 sprite 表单中的特定矩形绘制到一个画布上。幸运的是，Canvas 2D 上下文的 drawImage() 方法使您能够轻松地实现此操作。该技术被 sprite 表单 artists 对象所用。
Sprite 表单 artistsprite 表单 artists 对象的实现如清单 5 所示：
清单 5. Sprite 表单 artist1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| // Sprite sheet artists draw an image from a sprite sheet
SpriteSheetArtist = function (spritesheet, cells) { // constructor
this.cells = cells;
this.spritesheet = spritesheet;
this.cellIndex = 0;
};
SpriteSheetArtist.prototype = { // methods
advance: function () {
if (this.cellIndex == this.cells.length-1) {
this.cellIndex = 0;
}
else {
this.cellIndex++;
}
},
draw: function (sprite, context) {
var cell = this.cells[this.cellIndex];
context.drawImage(this.spritesheet,
cell.left, cell.top, // source x, source y
cell.width, cell.height, // source width, source height
sprite.left, sprite.top, // destination x, destination y
cell.width, cell.height); // destination width, destination height
}
};
|
您可引用一个 sprite 表单和一个边界框数组（称为单元格）实例化 sprite 表单。这些单元格表示 sprite 表单的矩形区域，每个表单封装一个 sprite 图像。
sprite 表单 artist 也包含一个指向其单元格的指针。sprite 表单的 draw() 方法使用该指针访问当前单元格，然后使用 Canvas 2D 上下文的 drawImage() 方法的 9 个参数的版本将该单元格的内容绘制到 sprite 所在位置的画布上。
sprite 表单 artist 的 advance() 方法使单元格指针推进到下一个单元格，当指针指向最后一个单元格时返回第一个单元格。sprite 表单 artist 的 draw() 方法的后续调用绘制相应的图像。通过反复向前推进指针并绘制图像，sprite 表单 artist 可从 sprite 表单连续绘制一组图像。
正如您从 所看到的，sprite 表单 artist 很容易实现。也容易使用它们，只需使用一个 sprite 表单和单元格实例化 artist 对象，然后根据需要调用 advance() 和 draw() 方法即可。麻烦的是如何定义单元格。
定义 sprite 表单单元格清单 6 显示了 Snail Bait 游戏中蝙蝠、蜜蜂和蜗牛的 sprite 表单的单元格定义：
清单 6. Snail Bait 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
26
27
28
29
30
31
32
33
34
| var BAT_CELLS_HEIGHT = 34,
BEE_CELLS_WIDTH = 50,
BEE_CELLS_HEIGHT = 50,
...
SNAIL_CELLS_WIDTH = 64,
SNAIL_CELLS_HEIGHT = 34,
...
// Spritesheet cells................................................
batCells = [
{ left: 1, top: 0, width: 32, height: BAT_CELLS_HEIGHT },
{ left: 38, top: 0, width: 46, height: BAT_CELLS_HEIGHT },
{ left: 90, top: 0, width: 32, height: BAT_CELLS_HEIGHT },
{ left: 129, top: 0, width: 46, height: BAT_CELLS_HEIGHT },
],
beeCells = [
{ left: 5, top: 234, width: BEE_CELLS_WIDTH, height: BEE_CELLS_HEIGHT },
{ left: 75, top: 234, width: BEE_CELLS_WIDTH, height: BEE_CELLS_HEIGHT },
{ left: 145, top: 234, width: BEE_CELLS_WIDTH, height: BEE_CELLS_HEIGHT }
],
...
snailCells = [
{ left: 142, top: 466, width: SNAIL_CELLS_WIDTH, height: SNAIL_CELLS_HEIGHT },
{ left: 75, top: 466, width: SNAIL_CELLS_WIDTH, height: SNAIL_CELLS_HEIGHT },
{ left: 2, top: 466, width: SNAIL_CELLS_WIDTH, height: SNAIL_CELLS_HEIGHT },
];
|
定义单元格边界框是一个很繁琐的任务，需要投入一些时间来设计一个可帮您实现这些任务的工具。图 3 展示了这样一个工具，该工具可在 Core HTML Canvas 网站在线运行（参阅 ）：
图 3. 一个简单的 sprite 表单检查器 游戏开发人员的工具箱游戏开发人员的生活并不都是快乐而轻松的。他们需要在繁琐的工作中花费大量的时间，比如确定 sprite 表单单元格以及设计游戏级别。因此，大多数游戏开发人员需要花费相当多的时间来实现相关的工具，比如 中的表单检查器，帮助他们完成这些繁琐的任务。
所示的应用程序展示一个图像并跟踪该图像中的鼠标移动。当您移动鼠标时，应用程序将绘制引导线，并更新应用程序左上角显示鼠标所在位置的读数。该工具使得确定每个图像和 sprite 表单的边界框变得非常容易。
现在关于如何实现 sprite 及其 artist 已经有一个不错的方式，可以看看 Snail Bait 如何创建和初始化其 sprite。 |
