Question

照相机以与角色相反的方式移动。我希望摄像机跟随，以便角色始终位于屏幕中央。

我已经尝试使用小提琴中所示的transform（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也会如何移到 right 。

要对其进行修复，可以使更新功能如下：

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

相机不跟随玩家

1 个答案: