Мне было интересно, как я могу сделать просмотр в виде камеры, где я мог бы прокручивать уровень внутри элемента canvas, как это:
2D-просмотр прокрутки камеры в html5
Ответ 1
Итак, вы хотите, чтобы холст размером 500x500 отображал что-то (уровень игры), который действительно составляет 9000x500 или около того.
Это нормально. То, что вы делаете, - это представление о холсте как "видовой области" для более крупной сцены. Вы переводите холст (или все остальное) в соответствующее место и рисуете все соответствующие вещи в этом месте.
Вот пример:
Нажмите на холст и удерживайте клавишу со стрелкой влево, чтобы увидеть сцену, пока точка красного игрока остается "неподвижной".
Когда вы прокручиваете холст 100x100, вы видите объекты, которые рисуются в однократных окнах, например (330,50). Перевод холста приводит их в поле зрения.
Я предполагаю, что стоит упомянуть, что именно здесь делается действительно важна оптимизация в холсте. Пример, который я привел выше, является очень упрощенным способом создания видового экрана, и по мере продвижения вашего кода вы захотите больше думать о том, что вы рисуете, и сколько вы рисуете. Например, вы захотите не рисовать объекты, которые полностью вне экрана, и если ваша игра или приложение имеют фон, который составляет 9000x500, вы, вероятно, не хотите каждый раз рисовать всю вещь!
Итак, концепция - это вынос здесь, но вам будет очень интересно думать о том, как вы его реализуете, и о том, какую работу вы делаете на холсте. Если у вас возникли проблемы с производительностью в приложении с боковой прокруткой, обязательно сообщите нам:)
Ответ 2
Я всегда считаю более эффективным обернуть ваш холст в div с шириной и высотой вашего окна просмотра, а переполнение - скрытым, а затем просто нарисовать весь холст и прокрутить div до того места, где вы хотите посмотреть,
Итак, html будет:
<div id='wrapper' style='width: 200px; height: 200px; overflow: hidden;'>
<canvas width='1000' height='1000'></canvas>
</div>
и javascript будет что-то вроде
function scrollWrapper(x, y){
var wrapper = document.getElementById('wrapper');
wrapper.scrollTop = x;
wrapper.scrollLeft = y;
}
Затем просто вызовите функцию с x и y, которые вы хотите просмотреть. вы можете обернуть его в setTimeout или что-то в этом случае, если вы хотите переехать туда, а не просто прыгать туда.