HTML5 2D 游戏开发 图形和动画（6）基于时间的运动
|
- UID
- 1066743
|
HTML5 2D 游戏开发 图形和动画（6）基于时间的运动
基于时间的运动动画的帧速率各不相同，但您不能让不同的帧速率影响您的动画运行速率。例如，无论动画的底层帧速率是多少，Snail Bait 都以 42 像素/秒的速度滚动背景。动画必须是基于时间的，这意味着速度以像素/秒指定，并且一定不能依赖于帧速率。
使用基于时间的运动来计算给定帧中移动某个对象的像素数，这很简单：用速度除以当前帧速率。速度（像素/秒）除以帧速率（帧/秒），结果是像素/帧，这意味着您在当前帧中需要将某个东西移动该数量的像素。
最佳实践动画速度必须与帧速率无关。
清单 11 显示了 Snail Bait 如何使用基于时间的运动来计算背景的位移：
清单 11. 设置背景位移1
2
3
4
5
6
7
8
9
10
11
12
13
| var BACKGROUND_VELOCITY = 42, // pixels / second
bgVelocity = BACKGROUND_VELOCITY;
function setBackgroundOffset() {
var offset = backgroundOffset + bgVelocity/fps; // Time-based motion
if (offset > 0 && offset < background.width) {
backgroundOffset = offset;
}
else {
backgroundOffset = 0;
}
}
|
setBackgroundOffset() 函数计算在当前帧中背景需移动的像素数，用背景的速度除以当前帧速率来计算它。然后将该值加到当前背景的位移。
为了持续滚动背景，setBackgroundOffset() 在该值小于 0 或大于背景宽度时将背景位移重置为 0。
视差如果您曾经坐在行驶中的汽车的乘客座位上，看着您的手刀穿过高速的电线杆，你就知道靠近自己的的东西的移动速度比距离远的东西更快。这就是所谓的 视差。
Snail Bait 是一个 2D 游戏平台，但它使用温和的视差效果，使平台看起来仿佛比背景更接近您。该游戏通过滚动平台的速度明显快于后台而实现视差。
图 6 演示了 Snail Bait 如何实现该视差。上面的截屏显示了在一个特定时间点上的背景，而底部的截屏显示了一些动画帧后面的背景。从这两个截屏可以看出，在相同的时间长度中，平台的移动比背景远得多。
图 6. 视差：平台（近）滚动得比背景（远）更快  清单 12 显示了设置平台速度和位移的函数：
清单 12. 设置平台速度和位移1
2
3
4
5
6
7
8
9
10
| var PLATFORM_VELOCITY_MULTIPLIER = 4.35;
function setPlatformVelocity() {
// Platforms move 4.35 times as fast as the background
platformVelocity = bgVelocity * PLATFORM_VELOCITY_MULTIPLIER;
}
function setPlatformOffset() {
platformOffset += platformVelocity/fps; // Time-based motion
}
|
回忆一下 ，它列出了 Snail Bait 的游戏循环。该循环包括一个 animate() 函数，在需要绘制游戏的下一个动画帧时，浏览器会调用该函数。然后，该 animate() 函数调用一个 draw() 函数来绘制下一个动画帧。位于开发阶段中的 draw() 函数的代码如清单 13 所示：
清单 13. draw() 函数1
2
3
4
5
6
7
8
9
10
11
12
13
14
| function setOffsets() {
setBackgroundOffset();
setPlatformOffset();
}
function draw() {
setPlatformVelocity();
setOffsets();
drawBackground();
drawRunner();
drawPlatforms();
}
|
draw() 函数设置了平台速度，并为背景和平台设置了位移。然后，它绘制背景、跑步者和平台。 |
|
|
|
|
|
