Я хочу создать область просмотра для игры на холсте

Итак, у меня есть игра (это скорее карта), которая загружает кучу тайлов и складывает их вместе. Плитки загружаются нормально, но я бы хотел переместить область просмотра. Я изучил эту тему, и у меня есть функция, которая проверяет клавиатуру. Если нажимается 'd', я бы хотел переместить холст, чтобы область просмотра увидела что-то другое.

Пока что функция перемещения холста вправо выглядит так:

function moveRight() {
ctx.translate(3000, 0);
imageSearch();
};

Где функция imageSearch обновляет холст. Обновление, загрузка и т. Д. Работает нормально, я просто не могу понять, как переместить холст. Помощь будет оценена, заранее спасибо.

РЕДАКТИРОВАТЬ:

Вот JSFiddle, который исправил для меня 1j01: jsfiddle.net/jujhp0yv/1

Хотя холст по-прежнему не двигается, я все еще жду ваших ответов :)


javascript canvas html viewport
person Xelipho    schedule 19.06.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Попробуйте сохранить порт просмотра в переменной.

var view = {x: 0, y: 0};

Затем, в начале вашей функции цикла рисования / рендеринга, сохраните состояние холста и преобразуйте его в порт просмотра.

ctx.save();
ctx.translate(view.x, view.y);

Если вы хотите, чтобы view.x и view.y представляли центр представления, вместо этого переводите следующим образом:

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

В конце цикла отрисовки / функции рендеринга восстановите состояние, чтобы переводы не складывались.

ctx.restore();

Теперь вы можете изменить view.x и view.y, чтобы переместить представление. (например, view.x += 5)

person 1j01    schedule 19.06.2015
comment
Я добавил ваши предложения, и холст переместился в правый верхний угол. Я удалил ваши предложения, и это не изменилось. Вы знаете, что могло только что случиться? - person Xelipho; 19.06.2015
comment
Извините, моя беда, я случайно что-то стер в файле CSS. Я попробую внести изменения еще раз, а если не сработает, дам вам jsfiddle. - person Xelipho; 20.06.2015
comment
Ах, видите, вы загружаете плитки как новые изображения при каждой перерисовке, и это не происходит синхронно, поэтому, пока изображения только начинают загружаться, вызывается ctx.restore(), и поэтому он все равно сбрасывается при рисовании изображений. Теперь вы можете решить непосредственную проблему, переместив сохранение / перевод / восстановление туда, где изображение нарисовано (onload), но вы все равно не хотите загружать изображения при каждой перерисовке. Что вы хотите, так это сохранить изображения в структуре данных, например в 2-мерном массиве. - person 1j01; 20.06.2015
comment
Я не могу это проверить, потому что ничего не загружается, но jsfiddle.net/jujhp0yv/1 - person 1j01; 20.06.2015
comment
Все плитки загружаются нормально, ваш метод довольно умен (большое спасибо), но я все еще не могу заставить холст двигаться. - person Xelipho; 20.06.2015
comment
Теперь это работает! Спасибо! Я переключил способ перевода на другое ваше предложение: ctx.translate (view.x - canvas.width / 2, view.y - canvas.height / 2); - person Xelipho; 21.06.2015