2D-камера с боковой прокруткой в ​​формате HTML5

Question

Мне было интересно, как я могу сделать вид, похожий на камеру, где я мог бы прокручивать уровень в элементе canvas так:

http://playbiolab.com/

Answer 1

Итак, вы хотите, чтобы холст 500x500 отображал что-то (игровой уровень) действительно 9000x500 или около того.

Это хорошо. То, что вы делаете, думаете о холсте как о «окне просмотра» для большой сцены. Вы переводите холст (или все остальное) в соответствующее место и рисуете все соответствующие вещи в этом месте.

Вот пример:

http://jsfiddle.net/hKrrY/

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

Когда вы прокручиваете холст 100x100, вы видите объекты, которые рисуются в таких местах, как (330,50). Перевод холста приводит их в поле зрения.

---

Полагаю, стоит упомянуть, что именно здесь оптимизация на холсте начинает действительно иметь значение. Пример, который я привел выше, является очень упрощенным способом создания области просмотра, и по мере развития вашего кода вам захочется все больше и больше думать о том, что вы рисуете и сколько вы рисуете. Например, вам следует избегать рисования объектов, которые находятся за пределами экрана, и если ваша игра или приложение имеет фоновый рисунок 9000x500, вы, вероятно, не захотите рисовать все это целиком каждый раз!

Таким образом, концепция здесь на вынос, но вам захочется очень серьезно подумать о том, как вы ее реализуете и какую работу вы выполняете для canvas. Если в приложении с боковой прокруткой возникают проблемы с производительностью, обязательно сообщите нам:)

Answer 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 или что-то в этом роде, если хотите переместиться туда, а не просто прыгнуть туда.