Сбросить / заблокировать html5 позицию холста, чтобы центрировать на плеере при панорамировании

Question

Я не могу понять, как это сделать. Я переводил персонажа и фон одновременно, но если есть какой-то сбой, позиция персонажа выдвигается из видимой области холста, и мне нужно, чтобы перевод холста основывался на позиции игрока (hero.x , hero.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 KEY
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, но фоновое изображение, по которому вы можете перемещаться, - 5000 x 3750.

В веб-браузере, когда он не зависает, он работает так, как я хочу, перемещая игрока и фон в том же темпе, что и персонаж.

Однако, та же самая скорость на телефоне заставляет игрока намного быстрее, чем переводит экран, что означает, что игрок уходит прямо из видимой области, даже если он все еще перемещает фон.

Если я выполняю ctx.translate (hero.x, hero.y) и использую координаты hero.x, hero.y игрока или какой-либо его вариант за вычетом смещения, он перемещает фон BY это измерение каждый раз, когда я нажимаю клавишу вместо ее перемещения TO этой позиции.

Как я могу сделать все, чтобы положение игрока зависело от положения игрока и фона, но вместе или автоматически настраивать следующее обновление () для центрирования игрока ... ?????

Answer 1

Как сделать все, чтобы положение игрока зависело от положения игрока и фона, но вместе или автоматически настроить следующее обновление () для центра игрока

Что ж, проще всего было бы всегда рисовать игрока в центре! Другими словами, никогда не меняйте и не переводите свои координаты. Вместо этого беспокойство о переводе всего остального в связи с этим.

Поскольку вы хотите, чтобы игрок всегда находился в центре, вы всегда должны рисовать игрока в центре холста (640/2 x 480/2 для вас)

Затем вам нужно сохранить смещение холста для X и Y и нарисовать все (фон и т. Д.), Используя это смещение, затем сбросить преобразование и нарисовать героя в старом центре.

Так что ваша функция рисования может выглядеть примерно так:

function draw() {
    ctx.clearRect(0,0,500,500);
    // Save the default transformation matrix
    ctx.save();
    // Translate by the background's offset
    ctx.translate(xoffset, yoffset);
    // Draw the background (and maybe other things) translated
    ctx.fillStyle = backgroundGradient; 
    ctx.fillRect(0,0,500,500);  
    // We restore to the default transformation
    // This will draw the hero not translated at all
    // That means we can always draw the hero in the center!
    ctx.restore();
    // hero is a black rectangle
    ctx.fillRect(240, 240, 20, 20);
}

Вот живой пример, который работает с мышью вниз и вверх. Для движущегося фона есть большое "солнце", в то время как прямоугольник "остается" остается неподвижным, потому что он буквально всегда рисуется в одном и том же месте:

http://jsfiddle.net/3CfFE/