2D вид камеры с боковой прокруткой в ​​​​html5

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

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

Вот пример:

http://jsfiddle.net/hKrrY/

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

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

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

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

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