JS canvas анимации спрайт лист. Как создать или анимировать?

Question

[Anonymous_toaster]

Как сделать анимацию персонажа в канвасе на js? разумеется сделать спрайт лист? а вот как его сделать? и как по нему потом сделать анимацию?
есть несколько подобных картинок, но как сделать из них спрайт лист, чтобы он был нормальный? я пытался делать с помощью онлайн генераторов либо самому, и так и так не получается. Кодить на них я не пробовал, но видно, что оно ровно не обрежет. Как сделать правильно?

(сделано генератором)

(картинки положены в случайном месте_

(сделано генератором 2, деформированы и разные)

Answer 1

[от это да]

вручную в фтотошопе сделай файл с вертикальными направляющими
потом загрузи спрайт в js и тестируй покадрово
если надо то возвращаешься в фотошоп и двигаешь нужный кадр

для анимации спрайта используй например pixi.js

Comments

[Anonymous_toaster]

А какое расстояние должно быть между каждым спрайтом? не могу нигде найти

[от это да]

никакого

это просто набор изображений

переход к нужному происходит через указание координат по х и у - это сдвиг
картинка сдвигается на нужное количество пикселей с шагом в размер кадра

[от это да]

например в matter.js 'это выглядит так:

тело.render.sprite.xOffset = 145

в pixi.js похожим образом

Answer 2

[Anonymous_toaster]

.

Comments

[от это да]

,