实施“橡皮筋” Android 中使用 Canvas 转换的相机

Question

我正在为 Android 编写一个 2D 横向卷轴游戏，并尝试实现一种跟随玩家角色上下移动的橡皮筋/弹性相机运动。

例如，假设屏幕的正常状态是字符始终垂直居中。如果角色跳跃，“摄像机”会跟随角色，首先在他上升时向上，然后在他下降时向下。

我已经使用 canvas.translate(x,y) 和如下代码完成了此操作：

drawBackground();
canvas.save();
canvas.translate(0, canvasHeight/2 - player.y);
drawPlayer();
canvas.restore();

但是，这看起来不自然，因为它没有考虑速度，所以无论角色上升或下降的速度有多快，屏幕始终以他为中心。我尝试使用某种画布速度变量，但我似乎无法正确使用。我想要的是，如果玩家静止不动，则摄像机保持在玩家的中心，但是当他跳跃时，摄像机应该“滞后”在他身后一点并尝试赶上。

谁能给我一些关于我应该如何做到这一点的建议？请尽可能具体！

谢谢

Answer 1

只需为相机位置编写一个低通滤波器即可：

var player = {x: 0, y: 0};
var camera = {x: 0, y: 0};
var t = 0.1;

while(true) {
    camera.x = camera.x*(1 - t) + player.x*t
    camera.y = camera.y*(1 - t) + player.y*t
    drawStuff(camera, player)
}

t的值越大，相机的反应越快。 drawStuff 是一个在不知道你的游戏如何工作的情况下我无法编写的函数。希望你能做到！

后续问题

var playerPosition = {x: 0, y: 0};
var playerVelocity = {x: 0, y: 0};
var camera = {x: 0, y: 0};
var t = 0.1;

while(true) {
    var targetPosition = f(playerPosition, playerVelocity);
    camera.x = camera.x*(1 - t) + targetPosition.x*t
    camera.y = camera.y*(1 - t) + targetPosition.y*t
    drawStuff(camera, player)
}

其中 f 是一些函数，描述了给定速度和位置下相机应指向的位置。像这样的东西可能就足够了：

function f(pos, vel) {
    var k = 0.5;
    return {x: pos.x + vel.x * k, y: pos.x + vel.y*k}
}

显然，如果相机移动太快，这将使玩家离开屏幕！