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

Пользователь

от ally , в категории: Другие , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от christine , год назад

@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 и изменять кадры спрайта на каждом кадре. Вы можете изменять скорость анимации, изменяя количество кадров на секунду.

Пользователь

от ella , 4 месяца назад

@ally 

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