HTML5 2D 游戏开发 实现 Sprite 行为（3）轻量型行为
|
- UID
- 1066743
|
HTML5 2D 游戏开发 实现 Sprite 行为（3）轻量型行为
轻量型行为前一节中讨论的跑步小人的跑动行为需要维持状态，也就是说，行为持续的时间会推动 sprite 的图像移动。这种状态将跑步状态与行为紧密联系在一起。所以，如果您希望让另一个 sprite 跑动，则需要拥有另一个跑动行为。
不需要维持状态的行为更加灵活；例如，可将这些行为用作轻量型行为。轻量型行为是对象的一个实例，可供其他许多对象同时使用。图 3 演示了一种无状态的移动行为，它让 sprite 在一个平台上来回移动。该行为一个实例被用于游戏的纽扣和蜗牛，所有这些对象都在平台上来回移动，如图 3 所示：
图 3. 纽扣移动顺序 清单 6 给出了 Snail Bait 的 createButtonSprites() 方法，它将单独的移动行为添加到每个纽扣：
清单 6. 创建移动纽扣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
| SnailBait.prototype = {
...
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,
[ this.paceBehavior ]);
}
else {
button = new Sprite('button',
buttonArtist,
[ this.paceBehavior ]);
}
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);
}
},
...
};
|
清单 7 给出了 paceBehavior 对象：
清单 7. 移动行为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
| var SnailBait = function () {
...
this.paceBehavior = {
checkDirection: function (sprite) {
var sRight = sprite.left + sprite.width,
pRight = sprite.platform.left + sprite.platform.width;
if (sRight > pRight && sprite.direction === snailBait.RIGHT) {
sprite.direction = snailBait.LEFT;
}
else if (sprite.left < sprite.platform.left &&
sprite.direction === snailBait.LEFT) {
sprite.direction = snailBait.RIGHT;
}
},
moveSprite: function (sprite, fps) {
var pixelsToMove = sprite.velocityX / fps;
if (sprite.direction === snailBait.RIGHT) {
sprite.left += pixelsToMove;
}
else {
sprite.left -= pixelsToMove;
}
},
execute: function (sprite, time, fps) {
this.checkDirection(sprite);
this.moveSprite(sprite, fps);
}
},
|
移动行为修改了一个 sprite 的水平位置。该行为实现基于时间的运动，通过将 sprite 的速度（以像素/秒为单位）除以动画的帧率（以帧/秒为单位），可以计算出当前动画帧中的移动 sprite 的像素数，从而获得像素/帧的值。（请参阅本系列第二篇文章中的 一节，了解基于时间的运动的更多信息）。 |
|
|
|
|
|
