Камера не следует за игроком

Question

Камера идет противоположным путем персонажа. Я хочу, чтобы камера следовала за тем, чтобы персонаж постоянно находился в центре экрана.

Я пытался использовать преобразование (x - canvas.width / 2, y - canvas.height / 2), как показано в скрипте, но оно противоположно тому, что я хочу.

Это соответствующий код:

function render(){
    ctx.save();
    ctx.translate(x - canvas.width / 2, y - canvas.height / 2); //This is what i've tried
    tileX = 0;
    tileY = 0;
    for (var i = 0; i < map.length; i++) {
    for (var j = 0; j < map.length; j++) {

        if(map[i][j] == 0){
        if(grassReady){
            ctx.drawImage(grassImage, tileX, tileY);
        }
        }
        if(map[i][j] == 1){
        if(sandReady){
            ctx.drawImage(sandImage, tileX, tileY);
        }
        }
        tileX += 128;
    }
    tileX = 0;
    tileY += 128;
    }

    if(playerReady){
    ctx.drawImage(playerImage, x, y);
    }
    window.requestAnimationFrame(main);
}

Вот JSFiddle того, как это выглядит: https://jsfiddle.net/0szen7mr/1/

Заранее спасибо за ваше время!

** Редактировать: решение было изменить ctx.translate(x - canvas.width / 2, y - canvas.height / 2);

К

ctx.translate(-x + canvas.width / 2, -y + canvas.height / 2);**

Answer 1

Как вы, вероятно, знаете, (0,0) находится в верхнем левом углу холста Javascript и увеличивается по мере того, как вы спускаетесь и вправо. В начале вы устанавливаете x и y, так что render делает ctx.translate(0,0), потому что x=canvas.width/2 и то же самое для y. Проблема возникает, когда вы начинаете использовать клавиши со стрелками для перемещения. Например, когда вы нажимаете влево, вы уменьшаете значение x. Это важно, потому что вы можете думать о translate как о том, где находится источник холста (0,0). И это соответствует тому, что на самом деле происходит. При нажатии влево координата x уменьшается, а начало координат (верхний левый угол карты) перемещается влево. Подобное происходит в направлении y.

Это в основном то, что происходит при преобразовании функции. Подумайте о y=x^2 и о том, как y=(x-5)^2 смещается в вправо , даже если вы вычитаете из значения x.

Чтобы исправить это, вы можете настроить функцию обновления следующим образом:

function update(){
    if (38 in keysDown) { // Player holding up
        y += speed;
    }
    if (40 in keysDown) { // Player holding down
        y -= speed;
    }
    if (37 in keysDown) { // Player holding left
        x += speed;
    }
    if (39 in keysDown) { // Player holding right
        x -= speed;
    }
}