Создание панорам и прокрутка фона с использованием элемента canvas

Создание панорам и прокрутка фона с использованием элемента canvas

От автора: Я собираюсь создать простую 2D игру на чистом JavaScript. Для первого шага я хочу показать, как анимировать (панорамировать или прокручивать) фоновое изображение, используя элемент canvas. Я также собираюсь показать основной код, необходимый для создания цикла, в котором мы сможем прорисовывать кадры.

Существуют два распространенных сценария для простых 2D игр:

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

Используется небольшое изображение, которое постоянно прокручивается (обычно справа налево) во время того как игрок продвигается

Панорамирование окна просмотра внутри фонового изображения

Демо

Нажмите на кнопку, чтобы запустить анимацию

Как это работает

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

Бесконечная прокрутка фонового изображения

Во втором случае фоновое изображение прокручивается непрерывно по мере того как проходит время и продвигается игрок. Это похоже на игру Марио, только камера направлена на Марио все время.

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

Демо

Нажмите на кнопку, чтобы запустить анимацию. Вертикальные черные линии обозначают границы каждого изображения. В этом примере я использую одно и то же изображение, при этом скорость прокрутки постоянная – 100 пикселей в секунду.

Как это работает

Положение фона также основывается на прошедшем времени (постоянная скорость)

Мы вычисляем количество изображений, необходимых для заполнения окна просмотра: Math.ceil(canvas.width / img.width) + 1

Мы вычисляем текущее положение по горизонтали: totalSeconds * vx % img.width. Обратите внимание на оператор %

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

Мы прорисовываем изображения одно за другим

Мы восстанавливаем значение контекста

Весь код, вызываемый функцией draw()

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

Я использовал базовое полизаполнение requestAnimationFrame polyfill

Анимация начинается только если изображение успешно загружено (onload)

Логика запуска/остановки и кнопка

И функция цикла loop(), которая вызывается в каждом кадре во время анимации. Здесь нам нужна функция requestAnimationFrame().

Чтобы увидеть полный исходный код, перейдите на следующие страницы

Автор: Adam Beres-Deak

Источник: //bdadam.com/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: