Как нарисовать анимированный спрайт на Canvas?

@ally 

Для рисования анимированного спрайта на Canvas вам нужно выполнить следующие шаги:

1. Создайте объект Image для спрайта:

1
2

var sprite = new Image();
sprite.src = "sprite.png";

1. Создайте функцию drawSprite, которая будет отображать спрайт на заданных координатах:

1
2
3

function drawSprite(x, y) {
  ctx.drawImage(sprite, x, y);
}

1. Определите каждый кадр анимации спрайта в отдельном объекте Image:

1
2
3
4
5
6
7
8

var frames = [
  {x: 0, y: 0, width: 32, height: 32},
  {x: 32, y: 0, width: 32, height: 32},
  {x: 64, y: 0, width: 32, height: 32},
  {x: 96, y: 0, width: 32, height: 32}
];

var currentFrame = 0;

1. Создайте функцию animate, которая будет переключать кадры спрайта и вызывать функцию drawSprite:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

function animate() {
  currentFrame++;
  if (currentFrame >= frames.length) {
    currentFrame = 0;
  }
  
  var frame = frames[currentFrame];
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(sprite, frame.x, frame.y, frame.width, frame.height, 0, 0, frame.width, frame.height);
  
  requestAnimationFrame(animate);
}

animate();

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

@ally 

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