Спрайт Анимация: Босс Китти

Предварительная визуализация

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

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

Вот пример функции, которая представляет котенка как перевернутое изображение.

  var reverseCanvas = null;

 function prerender () {
     reverseCanvas = document.createElement ('canvas');
     reverseCanvas.width = img.width;
     reverseCanvas.height = img.height;
     var rctx = reverseCanvas.getContext ("2d");
     rctx.save ();
     rctx.translate (img.width, 0);
     rctx.scale (-1, 1);
     rctx.drawImage (img, 0, 0);
     rctx.restore ();
 } 

Обратите внимание, что объект Canvas создан, но не добавлен в DOM, поэтому он не будет отображаться. Высота и ширина устанавливаются на исходную таблицу спрайтов, а затем исходное изображение рисуется с использованием 2D-контекста буфера рендеринга.

Для настройки prerender вы можете вызвать его из загруженной функции.

  функция загружена () {
     imageReady = true;
     PreRender ();
     requestAnimFrame (обновление);
 } 

Затем, когда вы делаете обычный вызов перерисовки, используйте reverseCanvas вместо оригинального:

  function redraw () {
     ctx.fillStyle = '# 000000';
     ctx.fillRect (0, 0, canvas.width, canvas.height);
     if (imageReady) {
         ctx.save ();
         ctx.drawImage (reverseCanvas, frame * 96, 0, 96, 96, 
                       (canvas.width / 2 - 48), (canvas.height / 2 - 48), 96, 96);
         ctx.restore ();
     }
 } 

К сожалению, когда мы перевернули изображение, анимация теперь также воспроизводится в обратном направлении, поэтому вам также необходимо изменить последовательность анимации:

  функция update () {
     requestAnimFrame (обновление);
     var delta = Date.now () - lastUpdateTime;
     if (acDelta> msPerFrame) {
         acDelta = 0;
         перерисовывать ();
         Рамка--;
         if (frame <0) frame = 5;
     } еще {
         acDelta + = delta;
     }
     lastUpdateTime = Date.now ();
 } 

Если вам нужно, вы можете преобразовать холст в изображение, установив его источник для использования URL-адреса данных, содержащего закодированные данные изображения. У Canvas есть способ сделать это, так что это просто:

  newImage = новое изображение ();

 newImage.src = reverseCanvas.toDataURL ("image / png"); 

Еще одна приятная манипуляция с изображениями — играть с фактическими данными пикселей. Элементы HTML5 canvas отображают данные изображения в виде массива пикселей в формате RGBA. Вы можете получить доступ к массиву данных из контекста, используя:

  var imageData = ctx.getImageData (0, 0, ширина, высота); 

Который будет возвращать структуру ImageData, содержащую ширину, высоту и элементы данных. Элемент данных — это массив пикселей, которые мы ищем.

Массив данных состоит из всех пикселей, причем каждый пиксель представлен 4 записями, красным, зеленым, синим и альфа-уровнем, все в диапазоне от 0 до 255. Таким образом, изображение шириной 512 и высотой 512 приведет к массив, содержащий 1048576 элементов — 512 × 512 равен 262 144 пикселям, умноженный на 4 записи на пиксель.

Используя этот массив данных, вот пример, где конкретный красный компонент изображения увеличен, в то время как красный и синий компоненты уменьшены, создав таким образом нашего монстра 2-го уровня, hell-spawn-demon-kitty.

  function prerender () {
     reverseCanvas = document.createElement ('canvas');
     reverseCanvas.width = img.width;
     reverseCanvas.height = img.height;
     var rctx = reverseCanvas.getContext ("2d");
     rctx.save ();
     rctx.translate (img.width, 0);
     rctx.scale (-1, 1);
     rctx.drawImage (img, 0, 0);
     // изменить цвета
     var imageData = rctx.getImageData (0, 0, reverseCanvas.width, reverseCanvas.height);
     для (var i = 0, il = imageData.data.length; i <il; i + = 4) {
         if (imageData.data [i]! = 0) imageData.data [i] = imageData.data [i] + 100;  // красный
         if (imageData.data [i + 1]! = 0) imageData.data [i + 1] = imageData.data [i + 1] - 50;  // зеленый
         if (imageData.data [i + 1]! = 0) imageData.data [i + 2] = imageData.data [i + 2] - 50;  // синий
     }
     rctx.putImageData (imageData, 0, 0);
     rctx.restore ();
 } 

Цикл for выполняет итерацию массива данных по четыре шага, каждый раз изменяя три основных цвета. Четвертый канал, альфа, оставлен как есть, но, если хотите, вы можете использовать его для изменения прозрачности определенных пикселей. (Примечание: в приведенном ниже примере JSFiddle мы используем dataURL для данных изображения, особенно во избежание междоменных проблем с прямыми манипуляциями с пикселями. Вам не нужно делать это на вашем собственном сервере.)

Вот наш котенок 2 уровня:

Поскольку манипулирование изображением с использованием массива пикселей требует итерации по всем элементам — в случае с Hell Kitty, это более миллиона раз — вы должны держать вещи довольно оптимизированными: делать предварительные расчеты, насколько это возможно, не создавать переменные / объекты и пропускать пикселей как можно больше.

Вывод

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

В качестве примера, я недавно использовал эти приемы в одной из демонстрационных игр Playcraft , 2D-шутере с 4-сторонней прокруткой. Художники создавали только один кадр каждого корабля (игрока и вражеского истребителя), который я затем поворачивал и делал в зависимости от того, сколько градусов, и, следовательно, насколько плавно мы хотели, чтобы корабли поворачивались. Я мог бы настроить количество углов в зависимости от типа корабля во время выполнения — по умолчанию корабли игрока отображаются с 36 углами поворота (очень плавно), в то время как вражеский и противник — только под 16 углами (прерывистый). Я также добавил опцию, позволяющую игрокам на более мощных компьютерах выбирать увеличение углов сглаживания до 72 по всему кругу (супер плавное). Кроме того, я динамически перекрашиваю эмблемы и маркировку на кораблях (крутые большие полосы вдоль крыльев) в соответствии с командой, в которой вы находитесь. Это опять-таки экономит на рендеринге и ресурсах, но также позволяет динамически настраивать цвета корабля на основе выбранного пользователем цвета команды.

Для получения дополнительной информации о том, что вы можете сделать с canvas, обратитесь к API Canvas Element .

Эта статья первоначально появилась на BuildNewGames.com , совместная работа команд в Bocoup и Internet Explorer.