Задать вопрос
@h88p
Pre-Junior HTML Developer

Анимация в canvas на JS с помощью нескольких спрайтов?

Везде примеры с одной картинкой, где ее разделяют на части и вытаскивают друг за другом кадры.
Мне же нужно сделать анимацию из нескольких картинок.
Вот пример
Как лучше реализовать на канвасе? Не присваивая каждую картинку к переменной и дальнейшей ее отрисовкой, а циклом пройдясь по массиву из путей к каждой картинке
P.S Без использования сторонних библиотек
  • Вопрос задан
  • 1254 просмотра
Подписаться Простой 3 комментария
Решения вопроса 2
Vlad_IT
@Vlad_IT Куратор тега JavaScript
Front-end разработчик
Ну, отличие способа со спрайтом от способа с картинками лишь в том, что вместо перемещения координат спрайта в функции drawImage, вы должны менять передаваемый объект Image, предварительно загруженный в массив.
Ответ написан
Комментировать
hzzzzl
@hzzzzl
начальный код я стырил отсюда, то есть по идее он делает не то что нам надо (вернее, не только то, что надо)
https://developer.mozilla.org/en-US/docs/Web/API/C...

добавляешь урлы на картинки в массив, по таймеру меняешь image.src у рисуемой картинки
https://codepen.io/anon/pen/vPMVGr
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 3
Sanasol
@Sanasol Куратор тега JavaScript
нельзя просто так взять и загуглить ошибку
Проще и лучше объединить картинки в одну. Это и будет называться спрайт.

Это общепринятая практика, не считая того что не будет возможных лагов с загрузкой кучи картинок вместо одной со всеми фреймами сразу.

И тогда любой гайд по анимации вам поможет.
Ответ написан
Комментировать
profesor08
@profesor08 Куратор тега JavaScript
Вот загружаешь свои 17 картинок в 17 объектов и рисуешь по очереди.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы