我不知道该怎么做。我同时翻译角色和背景，但如果出现任何问题，角色位置就会滑出画布的可视区域，并且我需要画布翻译基于玩家的位置（hero.x ，英雄.y）。
目前我已经
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 640;
canvas.height = 480;
// then in my update function
if (38 in keysDown && hero.y > 0) { // UP KEY PRESSED
ctx.translate(0,12); // translate background position +12y
hero.y -= hero.speed * modifier; // move player up on the background image
} else if (40 in keysDown && hero.y < 3750-64) { // DOWN KEY PRESSED
ctx.translate(0, -12);
hero.y += hero.speed * modifier;
}
}
移动了玩家和画布，但不能保证一起移动......如果它完全冻结，则玩家会偏离中心，甚至离开屏幕。
可视画布区域为 640x480，但您可以导航的背景图像为 5,000 x 3,750。
在网络浏览器上，当它不冻结时，它会按照我想要的方式工作，以与角色相同的速度移动播放器和背景。
然而，手机上相同的速率使玩家比屏幕平移的速度快得多，这意味着玩家即使仍然移动背景，也会直接走出可视区域。
如果我执行 ctx.translate(hero.x, Hero.y) 并使用玩家的 Hero.x、hero.y 坐标或它的某些变体减去偏移量，它会移动背景 BY 每次我按下按键时的测量值，而不是将其移动到到该位置。
我怎样才能使一切都以玩家位置为条件来移动玩家和背景，但是一起，或者自动调整下一个 update() 以集中在玩家……？
I cannot figure out how to do this. I was translating the character and background at the same time, but if there's any hiccup, the character position slides out of the viewable area of the canvas, and I need the canvas translation to be based off the position of the player (hero.x, hero.y).
Currently I have
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 640;
canvas.height = 480;
// then in my update function
if (38 in keysDown && hero.y > 0) { // UP KEY PRESSED
ctx.translate(0,12); // translate background position +12y
hero.y -= hero.speed * modifier; // move player up on the background image
} else if (40 in keysDown && hero.y < 3750-64) { // DOWN KEY PRESSED
ctx.translate(0, -12);
hero.y += hero.speed * modifier;
}
}
That moves the player and the canvas but not guaranteed together...if it freezes at all, the player is off center or even off screen.
The viewable canvas area is 640x480, but the background image you can navigate on is 5,000 x 3,750.
On the web browser, when it doesn't freeze, it works how I want, moving the player and background at the same pace as the character.
However, that same rate on the phone puts the player much faster than the screen translates which means the player walks right out of the viewable area even though it still moves the background.
If I do ctx.translate(hero.x, hero.y) and use the hero.x, hero.y coordinates of the player, or some variation of it minus an offset, it moves the background BY that measurement each time I press the key instead of moving it TO that position.
How can I make everything conditional on the players position to move both the player and background, but together, or automatically adjust next update() to center on the player....?
发布评论
评论（1）
好吧，简单的方法是实际上始终将玩家绘制在中心！换句话说，永远不要改变或翻译他或她的坐标。相反，担心翻译与之相关的其他所有内容。
由于您希望玩家始终位于中心，因此您应该始终将玩家绘制在画布的中心（对您来说是 640/2 x 480/2）
然后您需要做的是保持 X 的画布偏移量和Y 并使用该偏移绘制所有内容（背景等），然后重置变换并在普通的旧中心绘制英雄。
所以你的绘图函数可能看起来像这样：
这是一个使用鼠标向下和向上操作的实例。背景中有一个移动的大“太阳”，而“保持”矩形保持静止，因为它实际上总是绘制在同一个位置：
http://jsfiddle.net/3CfFE/
Well, the easy way would be to actually always draw the player in the center! In other words, never ever change or translate his or her coordinates. Instead worrying about translating everything else in relation to that.
Since you want the player to always be in the center, you should always draw the player at the center of the canvas (640/2 x 480/2 for you)
Then you'll want to do is keep a canvas offset for X and Y and draw everything (Background, etc) using that offset, then reset the transformation and draw the hero in the plain old center.
So your draw function might look something like this:
Here is a live example that works with mouse down and up. There is a big "sun" for the background that moves, while the "stays" rectangle stays still because it is literally always drawn in the same place:
http://jsfiddle.net/3CfFE/