在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}
}

显然,如果相机移动速度过快,会将播放器置于屏幕外!