0

我正在画布中创建一个摄像机，就像 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（根本没有缩放）时，红点完全居中。当缩放开始减小时，红点开始以奇怪的方向偏离中心。

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

4

1 回答 1

0

转换以相反的顺序应用；所以你首先翻译然后缩放。这意味着对于一个点(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);

工作 JSFiddle。

于 2013-05-09T08:29:53.647 回答