Анімація спрайтів в 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 мілісекунд.

Це все! Збережіть свій документ і запустіть його на підтримуваному браузері!