Differently sized sprites in spritesheet causing animation to jump around?
Posted: Tue Oct 16, 2018 10:18 pm
Hi there,
I'm sorry if this is about to be a really convoluted explanation of a straightforward problem lol.
So I have a vector spritesheet, containing sprites of different sizes, where each row is set up like this: So the height of the row is defined by the height of the largest sprite, and the rest of the smaller sprites in the row vertically center themselves inside the height of the row.
There's no trouble generating the quads for these; but using the quads in Löve gives the illusion that the animation is jumping around- even when being drawn in the same place. As far as I can tell, this is due to the body of the bee not being at the same location within the quad, despite the quad being of the same size. Illustrated in the screenshot below, when overlapping the sprites: I can't really think of any way to rectify this in Löve itself, and feel like it's more of a problem of spritesheet structure. I guess I need to set a reference point which is independent from the sprite dimensions (such as the center of the bee's body), and then vertically allign the sprites according to this. However, I'm just working with an .ai spritesheet from a game asset pack I purchased, and I haven't been able to find a way to automatically do this- there are loaaads of spritesheets with many rows to do.
Any suggestions on solving this would be greatly appreciated, as it's driving me crazy and I'm out of ideas. The creator of the spritesheets managed to export them to .pngs avoiding this problem, so I must be missing something.
Thanks!
I'm sorry if this is about to be a really convoluted explanation of a straightforward problem lol.
So I have a vector spritesheet, containing sprites of different sizes, where each row is set up like this: So the height of the row is defined by the height of the largest sprite, and the rest of the smaller sprites in the row vertically center themselves inside the height of the row.
There's no trouble generating the quads for these; but using the quads in Löve gives the illusion that the animation is jumping around- even when being drawn in the same place. As far as I can tell, this is due to the body of the bee not being at the same location within the quad, despite the quad being of the same size. Illustrated in the screenshot below, when overlapping the sprites: I can't really think of any way to rectify this in Löve itself, and feel like it's more of a problem of spritesheet structure. I guess I need to set a reference point which is independent from the sprite dimensions (such as the center of the bee's body), and then vertically allign the sprites according to this. However, I'm just working with an .ai spritesheet from a game asset pack I purchased, and I haven't been able to find a way to automatically do this- there are loaaads of spritesheets with many rows to do.
Any suggestions on solving this would be greatly appreciated, as it's driving me crazy and I'm out of ideas. The creator of the spritesheets managed to export them to .pngs avoiding this problem, so I must be missing something.
Thanks!