Canvas viewport

Question

Создание клона агара, и это в значительной степени работает сейчас, но я хочу улучшить его, сделав его так, чтобы игрок вышел из экрана, а экран следует за ним, что делается с окном просмотра. Единственная проблема - я понятия не имею, как это сделать. Я попробовал ctx.translate(), но это только привело к некоторым странным вещам. (предоставляется, я использую обычный фон, и я слышал, что для его работы требуется фактическое изображение, но я не знаю, как это сделать, так что ...) Вот мой jsFiddle. Инициализация переменных, связанных с холстом:

var canvas = document.createElement("canvas"); 
canvas.width = innerWidth; 
canvas.height = innerHeight; 
canvas.style.display = "none"; 
document.body.appendChild(canvas); 
var ctx = canvas.getContext("2d"); 

Answer 1

Вы используете translate для установки источника. Где на холсте или вне, координаты X = 0, y = 0.

Ваш персонаж бродит по игровому миру, который во много раз больше холста. У вас также есть много других предметов и игроков, каждый со своими координатами в игровом мире.

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

Так что пусть оборудование сделает это с преобразованием. Преобразование содержит шкалы (x, y) вращения (ang) и сдвиг (смещение начала). Каждый раз, когда объект нарисован на холсте, к нему применяются матрицы преобразования, вы не можете избежать этого, это должно произойти. Поэтому, если вы не используете его в своих интересах, его просто потратили впустую.

Как его использовать. Ваше игровое поле в левом верхнем углу -10 000, -10 000 пикселей до нижнего правого 10 000, 10 000 пикселей. У каждого есть расположение на карте между этими числами, включая ваш плеер, который может составлять 5000, 6 000 пикселей. Если вы ctx.drawImage(playerImage,5000,6000), изображение не появится, его путь внизу справа от холста, но вы хотите, чтобы он находился в центре экрана.

Для этого переместите начало координат (в настоящее время в верхнем левом углу холста (0,0)), чтобы вы в 5000-6000 появлялись в центре.

var playerX = 5000; // your position 
var playerY = 6000; 
var screenWidth = 1920; // size of the screen 
var screenHeight = 1080; 
var originX = 0; // where the origin is 
ver originY = 0 

Чтобы центрировать себя, переместите начало координат так, чтобы оно вычитало ваше положение.

originX -= playerX; 
originY -= playerY; 

Теперь вы находитесь в верхнем левом углу холста, но хотите центра. Поэтому переместите его немного на половину размера экрана.

originX += screenWidth/2; 
originY += screenHeight/2; 

Объедините все это в одном. Предположим, что происхождение непрестанно 0,0 и вы получите

originX = -(playerX-screenWidth/2); 
originY = -(playerY-screenHeight/2); 

Теперь у вас есть цифры, которые вы можете поместить в перевод.

Но его гораздо лучше, если вы поместите его прямо в матрицу преобразования, и вам действительно не нужны переменные происхождения.

Таким образом, одним шагом.

ctx.setTransform(1,0,0,1,-(playerX-screenWidth/2),-(playerY-screenHeight/2)); 

Теперь, когда вы рисуете плеер на

ctx.drawImage(payerImage,5000,6000); 

Вы появляетесь в центре холста.Плохой парень в 5500,6200 рисовать

ctx.drawImage(enemyImage,5500,6200); 

появится на холсте, а также 500 пикселей правой и 200 вниз от вас.

Теперь вам не нужно возиться с любыми координатами и просто визуализировать их там, где они есть, вы переместили все в игре только с одной строкой кода. Это вовсе не замедлило вашу игру, потому что преобразование всегда применяется, вы просто убедились, что делаете то, что хотите.

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