HTML5 2D 游戏开发 Sprites（3）创建和初始化 Snail Bait sprite
|
- UID
- 1066743
|
HTML5 2D 游戏开发 Sprites（3）创建和初始化 Snail Bait sprite
创建和初始化 Snail Bait spriteSnail Bait 定义了最终包含 sprite 的数组，如清单 7 所示：
清单 7. 在游戏构造函数中定义 sprite 数组1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| var SnailBait = function (canvasId) { // constructor
...
this.bats = [],
this.bees = [],
this.buttons = [],
this.coins = [],
this.platforms = [],
this.rubies = [],
this.sapphires = [],
this.snails = [],
this.runner = new Sprite('runner', this.runnerArtist);
this.sprites = [ this.runner ]; // Add other sprites later
...
};
|
中的每个数组都包含相同类型的 sprite，bats 数组包含蝙蝠 sprite，bees 数组包含蜜蜂 sprite 等。该游戏也有一个包含所有游戏 sprite 的数组 。蜜蜂、蝙蝠等单个数组并不是必要的，事实上它们是多余的，但是它们可以提升性能，例如，游戏检查跑步小人是否位于一个平台上时，在 platforms 数组上进行迭代，比在 sprites 数组上进行迭代更为有效。
还展示了该游戏如何创建跑步小人 sprite，以及如何将该 sprite 添加到 sprites 数组。因为这个游戏只有一个跑步小人，所以没有跑步小人数组。请注意，该游戏使用一个类型 runner 和一个 artist 来实例化跑步小人，但实例化时没有指定任何行为。这些行为（将在本系列下期文章中讨论）稍后将会添加到代码中。
游戏开始时，Snail Bait（以及其他操作）会调用一个 createSprites() 方法，正如您在清单 8 中所看到的那样。
清单 8. 开始游戏1
2
3
4
5
6
7
8
9
| SnailBait.prototype = { // methods
...
start: function () {
this.createSprites();
this.initializeImages();
this.equipRunner();
this.splashToast('Good Luck!');
},
};
|
createSprites() 方法，创建除跑步小人之外的所有游戏 sprite，如清单 9 所示：
清单 9. 创建和初始化 Snail Bait sprite1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| SnailBait.prototype = { // methods
...
createSprites: function() {
this.createPlatformSprites();
this.createBatSprites();
this.createBeeSprites();
this.createButtonSprites();
this.createCoinSprites();
this.createRubySprites();
this.createSapphireSprites();
this.createSnailSprites();
this.initializeSprites();
this.addSpritesToSpriteArray();
},
|
createSprites() 调用可以帮助函数创建其他类型的 sprite，然后调用初始化 sprite 的方法，并将它们添加到 sprites 数组，这些函数的实现如清单 10 所示：
清单 10. 创建和初始化单个 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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
| SnailBait.prototype = { // methods
...
createBatSprites: function () {
var bat, batArtist = new SpriteSheetArtist(this.spritesheet, this.batCells),
redEyeBatArtist = new SpriteSheetArtist(this.spritesheet, this.batRedEyeCells);
for (var i = 0; i < this.batData.length; ++i) {
if (i % 2 === 0) bat = new Sprite('bat', batArtist);
else bat = new Sprite('bat', redEyeBatArtist);
bat.width = this.BAT_CELLS_WIDTH;
bat.height = this.BAT_CELLS_HEIGHT;
this.bats.push(bat);
}
},
createBeeSprites: function () {
var bee, beeArtist = new SpriteSheetArtist(this.spritesheet, this.beeCells);
for (var i = 0; i < this.beeData.length; ++i) {
bee = new Sprite('bee', beeArtist);
bee.width = this.BEE_CELLS_WIDTH;
bee.height = this.BEE_CELLS_HEIGHT;
this.bees.push(bee);
}
},
createButtonSprites: function () {
var button, buttonArtist = new SpriteSheetArtist(this.spritesheet, this.buttonCells),
goldButtonArtist = new SpriteSheetArtist(this.spritesheet, this.goldButtonCells);
for (var i = 0; i < this.buttonData.length; ++i) {
if (i === this.buttonData.length - 1) {
button = new Sprite('button', goldButtonArtist);
}
else {
button = new Sprite('button', buttonArtist);
}
button.width = this.BUTTON_CELLS_WIDTH;
button.height = this.BUTTON_CELLS_HEIGHT;
button.velocityX = this.BUTTON_PACE_VELOCITY;
button.direction = this.RIGHT;
this.buttons.push(button);
}
},
createCoinSprites: function () {
var coin, coinArtist = new SpriteSheetArtist(this.spritesheet, this.coinCells);
for (var i = 0; i < this.coinData.length; ++i) {
coin = new Sprite('coin', coinArtist);
coin.width = this.COIN_CELLS_WIDTH;
coin.height = this.COIN_CELLS_HEIGHT;
this.coins.push(coin);
}
},
createPlatformSprites: function () {
var sprite, pd; // Sprite, Platform data
for (var i=0; i < this.platformData.length; ++i) {
pd = this.platformData;
sprite = new Sprite('platform-' + i, this.platformArtist);
sprite.left = pd.left;
sprite.width = pd.width;
sprite.height = pd.height;
sprite.fillStyle = pd.fillStyle;
sprite.opacity = pd.opacity;
sprite.track = pd.track;
sprite.button = pd.button;
sprite.pulsate = pd.pulsate;
sprite.power = pd.power;
sprite.top = this.calculatePlatformTop(pd.track);
this.platforms.push(sprite);
}
},
createSapphireSprites: function () {
// Listing omitted for brevity. Discussed in the next article in this series.
},
createRubySprites: function () {
// Listing omitted for brevity. Discussed in the next article in this series.
},
createSnailSprites: function () {
// Listing omitted for brevity. Discussed in the next article in this series.
},
};
|
中展示的这些方法值得关注，原因有 3 个。第一，这些方法都非常简单：每个方法都创建了 sprite，设置其宽度和高度，并将它们添加到单个 sprite 数组中。第二，createBatSprites() 和 createButtonSprites() 使用多个 artist 创建类型相同的 sprite，createBatSprites() 方法可替代 artist，使一半蝙蝠的眼睛呈红色，另一半蝙蝠的眼睛呈白色，如图 4 所示。createButtonSprites() 方法使用 artist 方法绘制蓝色或金色纽扣。
图 4. 红眼蝙蝠和白眼蝙蝠 中的这些方法的值得关注的第三个原因（也是最重要原因）是，它们都使用 sprite 元数据创建了 sprite。 |
|
|
|
|
|
