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

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

Демонстрация

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

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

HTML5 структура

<!DOCTYPE html> 
    <head> 
        <meta charset="UTF-8" /> 
        <title>Animating Sprites In HTML5 Canvas | onlyWebPro.com</title> 
    </head> 
    <body> 
        <canvas id="myCanvas" width="100" height="100"> 
            <!-- Insert fallback content here -->
            Sorry, your browser doesn't support canvas technology 
        </canvas> 
        <script> 
            //Script goes here 
        </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"); 
        ctx = canvas.getContext("2d"); 
        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 мы определяем переменные:

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

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

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


Параметр — Описание
img — определяет используемое изображение, canvas или видео
sx — необязательный параметр. X начальная координата вырезания
sy — необязательный параметр. Y начальная координата вырезания
swidth — необязательный параметр. Ширина вырезаемого изображения
sheight — необязательный параметр. Высота вырезаемого изображения.
x — Х координата размещаемого изображения на canvas
y — Y координата размещаемого изображения на canvas
width — необязательный параметр. Ширина используемого изображения (растянуть или уменьшить изображение)
height — необязательный параметр. Высота используемого изображения (растянуть или уменьшить изображение)

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

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

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

Источник

0 комментариев

Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.