2D Sprite Animation on a Box's face

[royibernthal]

@Wingnut Sorry for the late response I was on a vacation, just got back.

Good job! 2D animation support should definitely become a part of bjs core.

I wasn't even aware that a bjs sprite can have frames. Why doesn't your sprite go through the full string of images? Does it only support images ordered in 1 line?

 

[Wingnut]

Hi, welcome back, hope you had fun, and thanks.

Let's put it this way.  It is EASIER if the sprites are ordered in one line.  But there's ways around it.

Let's look at the sprite sheet. 

If I said that the top row of sprites... it's bottom edge... is 128 pixels up the Y axis, would you buy that?  Sure ya will. 
If I said that the middle row of sprites... it's bottom edge... is 64 pixels up the Y axis, would you buy that?  I'll loan ya the money so you can say "yes". 
And you can predict the rest. Our lone standing sprite on the bottom row... is 0 pixels up the Y axis.  Let's leave him out of the equation for now.

http://www.babylonjs-playground.com/#20MSFF#43

There ya go.  Lines 31 - 50 got some serious adjustings.

See line 11?  We start at 0, 128.  Top row... (128 up the Y axis)... leftmost edge (0 amount of X axis).  In other words, we start at the lower left corner of the zeroeth sprite in the top row (22 frames in the top row... 0 to 21).

Now let's look at line 36.  It checks if the animation is on the 21st sprite of the 128-high row (top row).  If so... guess what?  We need to move to the 2nd row of sprites... and you can see how it is done.

Line 42... it checks if we are on the 21st sprite of the 2nd row (64-high row).  If so, yep, head back up to the first row, 0th sprite.  Cool, huh?

And I imagine you could figure out how to get to the 3rd row, but we don't care about him right now.  Your animation speed is that value seen in line 50.

Hope this helps.

[royibernthal]

Yeah I got the concept of going over a sprite I was just wondering if there's something in bjs sprite preventing you from achieving that  I see in your updated PG that you used spriteLocation to address that issue.

Anyway, I got my (our) own solution to compete with yours  Changing uv after creating the box was a piece of cake using getVerticesData and setVerticesData like you suggested.

I don't usually (never actually) go open source but since you helped me so nicely, here you go:

https://github.com/royibernthal/BabylonJS-2D-Animation

[royibernthal]

and obviously thank you very much for the help and long explanations, as always