Differently sized sprites in spritesheet causing animation to jump around?

Questions about the LÖVE API, installing LÖVE and other support related questions go here.
Forum rules
Before you make a thread asking for help, read this.
Post Reply
User avatar
rougan
Citizen
Posts: 51
Joined: Wed Aug 12, 2015 10:30 am

Differently sized sprites in spritesheet causing animation to jump around?

Post by rougan » 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:
bees-1.png
bees-1.png (76.06 KiB) Viewed 422 times
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:
bees-2.png
bees-2.png (154.74 KiB) Viewed 422 times
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!

User avatar
Stifu
Citizen
Posts: 57
Joined: Mon Mar 14, 2016 9:53 am
Contact:

Re: Differently sized sprites in spritesheet causing animation to jump around?

Post by Stifu » Wed Oct 17, 2018 9:30 am

There are multiple ways to fix this, like having fixed-size frames (some games do that, like River City Ransom Underground), or manually setting the position for each frame. For our game, we went with the second option.

Here's what our animation definitions look like:

Code: Select all

        stand = {
            { q = q(2,3,43,63), ox = 20, oy = 62 }, --stand 1
            { q = q(47,2,42,64), ox = 20, oy = 63 }, --stand 2
            { q = q(91,3,42,63), ox = 19, oy = 62, delay = 0.117 }, --stand 3
            { q = q(135,4,43,62), ox = 19, oy = 61, delay = 0.25 }, --stand 4
            loop = true,
            delay = 0.183
        },
The whole source code is here: https://github.com/thomasgoldstein/zabuyaki

Hope that helps.
Zabuyaki, our upcoming beat 'em up: https://www.zabuyaki.com

MrFariator
Citizen
Posts: 86
Joined: Wed Oct 05, 2016 11:53 am

Re: Differently sized sprites in spritesheet causing animation to jump around?

Post by MrFariator » Wed Oct 17, 2018 9:38 am

This is indeed a problem with how you are setting up the quads to be drawn. You can fix this by defining offsets at which to draw the quads (eq. draw frame 2 at offsetY = 5, or so forth) as modifiers for the draw position, though this can be a lot of work to do manually when you have a whole bunch of animations to define.

I use a semi-automated approach, where I would animate a sprite as I normally would, and then export that to a series of PNG files. I then load those PNGs to TexturePacker, which has an option to cut off excess empty space around a given frame, and then store the offsets for what was cut off. I then load the generated spritesheet and lua file (using a custom exporter I wrote for the program), and that's that.

Image
-- Run once in a blue moon
if math.random() > 0.99 then
  local account = Twitter:getProfile ( https://twitter.com/GravityCircuit )
  account:post ( currentProgress:getGIF() )
end

Post Reply

Who is online

Users browsing this forum: MrFariator and 6 guests