Question

我正在使用Super Smash Bros中的相机创建一个相机，相机的中心跟随所有玩家的中心点，并扩展到包含所有玩家。

我将它设置为找到2个玩家之间的距离，如果它大于画布大小，则相机比例降低以减小块的大小，玩家精灵等。

ctx.scale(cameraS,cameraS);
ctx.translate(-(cameraX*cameraS)+(CANVAS_WIDTH/2),-(cameraY*cameraS)+(CANVAS_HEIGHT/2));

这些是缩放并将绘制的图像移动到相对于屏幕的位置。

这是使用代码的实际游戏，正如您所知，图像的缩放和移动稍微不正确，但我不确定为什么！ https://dl.dropboxusercontent.com/u/51784213/Conjugate/index.html

作为参考，红点是两个玩家之间的中心位置。这些线条显示了实际画布的死角。当缩放为1（根本没有缩放）时，红点完全居中。当缩放开始减小时，红点开始以奇怪的方向偏离中心。

为了使代码正常工作，即使在缩放过程中，点也应始终居中！

Answer 1

以相反的顺序应用变换;所以你先翻译然后缩放。这意味着对于点(x, y)，在当前转换之后，您将获得

( 
    (x + CANVAS_WIDTH/2 - cameraX*cameraS) * cameraS, 
    (y + CANVAS_HEIGHT/2 - cameraY*cameraS) * cameraS 
)

这里实际需要的是画布由缩放(cameraX, cameraY)翻译，然后由实际(CANVAS_WIDTH/2, CANVAS_HEIGHT/2)偏移，以便(cameraX, cameraY)位于可见画布。

或者更确切地说，点(x, y)所需的转换是

( (x - cameraX) * cameraS + CANVAS_WIDTH/2, (y - cameraY) * cameraS + CANVAS_HEIGHT/2 )

因此，如果您选择首先应用翻译，则代码变为

ctx.scale(cameraS,cameraS); ctx.translate(-cameraX+CANVAS_WIDTH/(2*cameraS),-cameraY+CANVAS_HEIGHT/(2*cameraS));

或者，如果您选择先应用缩放

ctx.translate(-cameraX*cameraS + CANVAS_WIDTH/2, -cameraY*cameraS + CANVAS_HEIGHT/2); ctx.scale(cameraS, cameraS);

<强> Working JSFiddle

如何在缩放后正确翻译我的地图？

1 个答案: