Sprite animation missing cells

Questions
1

I am using a sprite png with 6 poses (3 in one row). Height and width units are not same. So, I added width and height in SpriteManager.

And, the animation is running fine for the first 3 cells. Second row cells are not taken correctly. Because of that, animation is missing steps.

How do I fix this animation?

Playground: https://playground.babylonjs.com/#DG9MVV#4
Repo: GitHub - jintoppy/babylonjs-character-walking

Sidenote: What exactly is capacity when creating a SpriteManager? I gave 6 assuming that, it is the total number of cells in the sprite.

Thanks.

2

Looks like the width of your image does not match your cells. Image size is 559px X 447px.
Your declared cells size is 180 x 223 px. And then, you should avoid half-pixels.
So, if your cell size really is 180 x 223, then your image should be 540 x 446 px.

Edit: Oh and btw, a warm welcome to the Community. :smiley:

Fixed version:

Note: if you start with 0 and have 6 cells in total, then your end cell number is 5 (not 6).
Also, the alignment in this twisted version of your image is not accurate. You will have to edit the spritesheet image.

3 Likes
3

…and you are right. It is the number of cells, in case of an animation. But it’s also the number of single sprites that can be generated by the manager. Up to several thousands.

4

Thank you so much for the detailed reply. :slightly_smiling_face:

And, thank you for the welcome. I thought to check back BabylonJS ( I tried few times earlier and couldn’t really do much ), and absolutely loved the ACE editor. :heart_eyes: :heart_eyes:

1 Like