HTML5 2D 游戏开发 Sprites（4）使用元数据创建 sprite
|
- UID
- 1066743
|
HTML5 2D 游戏开发 Sprites（4）使用元数据创建 sprite
使用元数据创建 sprite 清单 11 显示了一些 Snail Bait 的 sprite 元数据：
清单 11. 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
| var SnailBait = function (canvasId) {
// Bats..............................................................
this.batData = [
{ left: 1150, top: this.TRACK_2_BASELINE - this.BAT_CELLS_HEIGHT },
{ left: 1720, top: this.TRACK_2_BASELINE - 2*this.BAT_CELLS_HEIGHT },
{ left: 2000, top: this.TRACK_3_BASELINE },
{ left: 2200, top: this.TRACK_3_BASELINE - this.BAT_CELLS_HEIGHT },
{ left: 2400, top: this.TRACK_3_BASELINE - 2*this.BAT_CELLS_HEIGHT },
],
// Bees..............................................................
this.beeData = [
{ left: 500, top: 64 },
{ left: 944, top: this.TRACK_2_BASELINE - this.BEE_CELLS_HEIGHT - 30 },
{ left: 1600, top: 125 },
{ left: 2225, top: 125 },
{ left: 2295, top: 275 },
{ left: 2450, top: 275 },
],
// Buttons...........................................................
this.buttonData = [
{ platformIndex: 7 },
{ platformIndex: 12 },
],
// Metadata for Snail Bait's other sprites is omitted for brevity
};
|
从元数据创建 sprite 是一个不错的主意，因为：
- Sprite 元数据位于某个地方，而不是遍布在代码中。
- 当从元数据中解耦这些创建 sprite 的方法时，这些方法更简单一些。
- Metadata 可从任何地方获取。
因为 sprite 元数据在代码中位于一个地方，因此很容易发现和修改它们。另外，由于元数据是在创建 sprite 的方法之外定义的，而这些方法比较简单，更容易理解和修改。最后，尽管 Snail Bait 元数据直接嵌入在代码中，但是 sprite 元数据还是可以从任何地方获取，比如可在运行时创建元数据的级别编辑器。总而言之，与直接在创建 sprite 的方法中指定 sprite 数据相比，元数据易于修改，更为灵活。
回忆一下 ，创建游戏 sprite 之后，Snail Bait 的 createSprites() 方法调用了两个方法：initializeSprites() 和 addSpritesToSpriteArray()。清单 12 展示了 initializeSprites() 方法：
清单 12. 初始化 Snail Bait sprites1
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
| SnailBait.prototype = { // methods
...
initializeSprites: function() {
this.positionSprites(this.bats, this.batData);
this.positionSprites(this.bees, this.beeData);
this.positionSprites(this.buttons, this.buttonData);
this.positionSprites(this.coins, this.coinData);
this.positionSprites(this.rubies, this.rubyData);
this.positionSprites(this.sapphires, this.sapphireData);
this.positionSprites(this.snails, this.snailData);
},
positionSprites: function (sprites, spriteData) {
var sprite;
for (var i = 0; i < sprites.length; ++i) {
sprite = sprites;
if (spriteData.platformIndex) { // put sprite on a platform
this.putSpriteOnPlatform(sprite, this.platforms[spriteData.platformIndex]);
}
else {
sprite.top = spriteData.top;
sprite.left = spriteData.left;
}
}
},
};
|
对于该游戏的 sprite 数组，initializeSprites() 调用了 positionSprites() 方法。该方法将 sprite 放到 sprite 元数据指定的位置。请注意，一些 sprite（比如纽扣和蜗牛）驻留在平台顶部。putSpriteOnPlatform() 方法如清单 13 所示。
清单 13. 将 sprite 放到平台上1
2
3
4
5
6
7
8
9
| SnailBait.prototype = { // methods
...
putSpriteOnPlatform: function(sprite, platformSprite) {
sprite.top = platformSprite.top - sprite.height;
sprite.left = platformSprite.left;
sprite.platform = platformSprite;
},
}
|
给定一个 sprite 和一个平台，putSpriteOnPlatform() 方法将 sprite 放置在平台顶部，并在 sprite 中存储该平台的引用，以便进一步引用它们。
您可能会怀疑，但是清单 14 已经证实，将单个 sprite 添加到所有封装 sprites 的数组中是一件非常简单的事情：
清单 14. 创建和初始化 Snail Bait sprite1
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
35
36
37
38
39
| SnailBait.prototype = { // methods
...
addSpritesToSpriteArray: function () {
var i;
for (i=0; i < this.bats.length; ++i) {
this.sprites.push(this.bats);
}
for (i=0; i < this.bees.length; ++i) {
this.sprites.push(this.bees);
}
for (i=0; i < this.buttons.length; ++i) {
this.sprites.push(this.buttons);
}
for (i=0; i < this.coins.length; ++i) {
this.sprites.push(this.coins);
}
for (i=0; i < this.rubies.length; ++i) {
this.sprites.push(this.rubies);
}
for (i=0; i < this.sapphires.length; ++i) {
this.sprites.push(this.sapphires);
}
for (i=0; i < this.snails.length; ++i) {
this.sprites.push(this.snails);
}
for (i=0; i < this.snailBombs.length; ++i) {
this.sprites.push(this.snailBombs);
}
},
};
|
现在，您已经了解了如何实现 sprite 和 sprite artists，以及 Snail Bait 如何创建和初始化其 sprite，接下来我将向您介绍如何将 sprite 合并到 Snail Bait 游戏循环中。 |
|
|
|
|
|
