Как правильно перевести карту после масштабирования?

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), а затем будут компенсированы фактическим , так что (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)); 

Или, если вы выберите apply scaling first

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

Working JSFiddle.