Animation Player Sprite Sheets

SunsetCreation

Hi, everyone! I'm making a game that requires the use of a big sprite sheet, and I'm using the animation player to set up anims. The problem is, the animations don't come out smoothly when set. They sorta just move around and shift differently. How many pixels apart do each of the sprites need to be separated so that the animation becomes smoother?

Megalomaniak

each animation frame in the sprite sheet should be the same width and height. And ideally power of 2 though that's not as important these days/for modern gpus and APIs.

SunsetCreation

@Megalomaniak said: each animation frame in the sprite sheet should be the same width and height. And ideally power of 2 though that's not as important these days/for modern gpus and APIs.

Thank you!

SunsetCreation

@Megalomaniak said: each animation frame in the sprite sheet should be the same width and height. And ideally power of 2 though that's not as important these days/for modern gpus and APIs. So I tried it out, but the sprites i'm using are of different shapes and sizes. Is there any way to get around this?

Megalomaniak

Try spacing them out by the largest sprite frames width?

SunsetCreation

@Megalomaniak said: Try spacing them out by the largest sprite frames width?

What is the largest width?

TwistedTwigleg

@SunsetCreation said:

@Megalomaniak said: Try spacing them out by the largest sprite frames width?

What is the largest width?

You'll need to figure that out. The best way is to go through each frame and make a rectangle selection around, then read the width/height. Note the size and move on to the next one, until you have gone through all the frames in the sprite sheet. Then you can look at your nodes and find the biggest width and height values, and this will be the size you want to make each of the sprite frames.

Then you need to make a new texture with a size that will fit all the frames at the biggest values, and then copy-paste each frame into the new size in the grid.

Also, just as a reminder: sprites ripped from other games is a legally gray area and I would advise caution using them in your own projects for legal reasons.

SunsetCreation

@TwistedTwigleg said:

@SunsetCreation said:

@Megalomaniak said: Try spacing them out by the largest sprite frames width?

What is the largest width?

You'll need to figure that out. The best way is to go through each frame and make a rectangle selection around, then read the width/height. Note the size and move on to the next one, until you have gone through all the frames in the sprite sheet. Then you can look at your nodes and find the biggest width and height values, and this will be the size you want to make each of the sprite frames.

Then you need to make a new texture with a size that will fit all the frames at the biggest values, and then copy-paste each frame into the new size in the grid.

Also, just as a reminder: sprites ripped from other games is a legally gray area and I would advise caution using them in your own projects for legal reasons.

Okay, I'll try it out and see what happens. Also, this is just a fangame to practice making a fighting game. SO the sprites won't matter as much. Capcom and SNK are cool with people using their sprites as long as there's credit.

TwistedTwigleg

Ah okay, cool :)

SunsetCreation

@TwistedTwigleg said:

@SunsetCreation said:

@Megalomaniak said: Try spacing them out by the largest sprite frames width?

What is the largest width?

You'll need to figure that out. The best way is to go through each frame and make a rectangle selection around, then read the width/height. Note the size and move on to the next one, until you have gone through all the frames in the sprite sheet. Then you can look at your nodes and find the biggest width and height values, and this will be the size you want to make each of the sprite frames.

Then you need to make a new texture with a size that will fit all the frames at the biggest values, and then copy-paste each frame into the new size in the grid.

Also, just as a reminder: sprites ripped from other games is a legally gray area and I would advise caution using them in your own projects for legal reasons.

So I tried it out, but it's still not clean because some frames end up moving away from the original spot.

Megalomaniak

That's likely an issue with how you've placed the individual sprites in the sprite map.

TwistedTwigleg

So I tried it out, but it's still not clean because some frames end up moving away from the original spot.

As @Megalomaniak said above, its likely due to how you've placed the frames. If each frame is positioned differently relative to each other, then the animation will not look smooth. What I like to do in this case is try to find something that mostly stays in the same position throughout an animation, like the eyes in a running animation for example, and position all the frames relative to that.

So for example, if the first frame of the running animation has the eye at position (20, 10), then for every frame in the run animation I'll try to place the eye at the same (20, 10) position, which should line the animation up (assuming the eye doesn't really move throughout the animation of course).

Looking at the sprite sheet, what I would recommend doing as your reference pixel(s) is the center of the character's body, like around the hip area. That way, kicks will stay roughly in the right position, as well as jumps, punches, etc.

SunsetCreation

@TwistedTwigleg said:

So I tried it out, but it's still not clean because some frames end up moving away from the original spot.

As @Megalomaniak said above, its likely due to how you've placed the frames. If each frame is positioned differently relative to each other, then the animation will not look smooth. What I like to do in this case is try to find something that mostly stays in the same position throughout an animation, like the eyes in a running animation for example, and position all the frames relative to that.

So for example, if the first frame of the running animation has the eye at position (20, 10), then for every frame in the run animation I'll try to place the eye at the same (20, 10) position, which should line the animation up (assuming the eye doesn't really move throughout the animation of course).

Looking at the sprite sheet, what I would recommend doing as your reference pixel(s) is the center of the character's body, like around the hip area. That way, kicks will stay roughly in the right position, as well as jumps, punches, etc.

I wanna thank you guys for the help! It worked like a charm! @Megalomaniak @TwistedTwigleg

supermonster

@SunsetCreation how did it end up? i am also curious on this topic do you have a gif on it running in Godot?

SunsetCreation

@supermonster said: @SunsetCreation how did it end up? i am also curious on this topic do you have a gif on it running in Godot?

So I tried this, and it works, but there were times where my animations would just break at points. I didn't know why so I let it go and tried a new method of animating: Layers. I used layers to make it look like the animation was cycling through frames. It works really well, but the downside is that if you want to add a new animation, you may have to go back and work on the other sprites.