Анимация спрайтов в HTML5 Canvas

Если Вы захотите создать свою собственную web-игру, используя элемент Canvas в HTML5, вам нужно будет найти способ управления анимацией спрайтов. В этой статье мы познакомим Вас с HTML5 Canvas анимацией и проведем Вас через процесс создания анимации движущегося персонажа.

Если HTML5 элемент Canvas является для Вас новинкой, предлагаем, для начала, прочесть статью HTML5 Canvas для новичков.

Мы собираемся использовать следующий PNG файл в качестве спрайта — источника последовательности фреймов:

HTML5 структура

<!DOCTYPE html>
<html>
  <head> 
    <meta charset="UTF-8"> 
    <title>Анимация спрайтов в HTML5 Canvas | joompress.biz</title> 
  </head> 
  <body> 
    <canvas id="myCanvas" width="100" height="100"> 
      <!-- Вставьте fallback содержимое здесь -->
      К сожалению, ваш браузер не поддерживает технологию canvas
    </canvas> 
    <script> 
      // Скрипт будет здесь
    </script> 
  </body> 
</html>

Мы создадим canvas для того, чтобы отобразить наши спрайты, и установим ширину и высоту canvas в 100 px. Помните, что, ширина и высота каждого фрейма PNG спрайта равняется 100 пикселям:

Кроме того, не забудьте присвоить нашему canvas элементу id. Для этого мы назвали его «myCanvas».

И это все, что касается структуры HTML! А теперь, давайте посмотрим на код JavaScript.

JavaScript

<script>
  var width = 100,
      height = 100,
      frames = 4,

      currentFrame = 0,
      canvas = document.getElementById("myCanvas");
 
  var ctx = canvas.getContext("2d");
  var image = new Image();
      image.src = 'sprite.png';
 
  var draw = function() {
      ctx.clearRect(0, 0, width, height);
      ctx.drawImage(image, 0, height * currentFrame, width, height, 0, 0, width, height);
 
      if (currentFrame == frames) {
        currentFrame = 0;
      } else {
        currentFrame++;
      }
  }
 
  setInterval(draw, 100);
</script>

Как видите, в первую очередь в JavaScript мы определяем переменные:

width: ширина элемента canvas
height: высота элемента canvas
frames: всего количество фреймов в спрайте
currentFrame: текущий фрейм в спрайте
canvas: для доступа к контекстному элементу визуализации
ctx: визуализация контекста canvas в 2D формате
image: переменная, содержит PNG файл

Чтобы анимировать спрайт, мы должны просто отобразить на экране каждый его фрейм, используя метод drawImage(). DrawImage() — это метод, позволяющий нарисовать изображение или видео в canvas. Ниже показаны синтаксис drawImage():

context.drawImage(img, sx, sy, swidth, sheight, x, y, width, height);

Параметры метода drawImage().

Затем, мы пишем проверочное условие, если currentFrame меньше, чем общее количество фреймов, то делаем инкремент (увеличиваем на один) currentFrame. СurrentFrame используется для определения, какой фрейм спрайта должен быть показан на canvas, используя метод drawImage().

Наконец, мы используем «setInterval()» для выполнения функции рисования каждые 100 миллисекунд.

Это все! Сохраните свой документ и запустите его на поддерживаемом браузере!