Virtual Centering for Sprites? Animations look like crap

[Garo]

Hey, looking for a way to set the centers for each frame of my sprite atlas. The centers are currently automatically calculated based on the image size.

My images are cropped to have no transparency, which might make no difference, but my animations look awful since the sprites jitter so much between frames.

As my knowledge goes, this is handled on a framework basis. Is there a Phaser program to help me make/decide the real virtual centers/offsets for my sprites? And then how are they loaded into Phaser?

[rich]

How are you cropping your frames? If you're doing it by hand that is why it jitters all over the place. If you're doing it with a package like Texture Packer then the correct offsets will be handled automatically.

[Garo]

The sprites all are cropped to maximum with no extra transparency on any side. Then they are packed with TexturePacker for an atlas, but TexturePacker isn't the problem. It's because one frame of a run sprite will be 15px wider because of say hair flowing, and cause a 7.5px push forward for that frame.

It seems like I have to set the body sizes or offsets for each frame due to the images being different sizes. Is the only solution to add transparency to frames to ensure they're of equal size?

[rich]

The frames shouldn't be cropped at all. They should all be the same size so the frames align and play properly. Then let texture packer do it's job and remove all the excess transparency, it will retain the correct size data in the json.

[Garo]

Yeah that's definitely the lamest option that would cost the most time... From what I hear from the Phaser discord and other game devs is that this is usually handled by the framework or an animation editor provided by the framework.

Is there any such editor or program you know of that I can use to pad and center these sprites to match their intended animations? Having to do it in MS Paint or Photoshop would suck

[rich]

That's how they're supposed to have been animated in the first place. You don't create an animation by making loads of tiny little frames and hoping for the best. If you animate something in Aseprite or Flash and export the frames they'll all be the same size, correctly aligned, and then the atlas software will take care of the offsets and trimming.

The only time this doesn't work is if you're just using some sprite sheets found on a web site, like those you usually see ripped from old arcade/console games where they just dump all the frames in a row and don't care about actually playing it back.

What package did you use to make the animations in the first place?

[Garo]

Ha, yeah, that's actually exactly what I did. I used a janky electron app to rip the sprites out of sheets from the web. Each frame is just an imagine file named like walk0, walk1, walk2, etc.

So can I recreate the animations with a tool like Aseprite? Do you know of a better program or solution for this?

[rich]

Think of it like this - imagine you were taking those ripped frames and trying to create an animated gif from them. The exact same steps you'd go through to do that are what you'd need to use them in a game too. And yeah, Aesprite should be perfect for it tbh.

[Garo]

Yeah thanks a lot dude, I looked up Aseprite based on your first mention and found it to be super useful for this. It takes TIME to get everything aligned, and was a pain to compile, but definitely works.

And I don't know how to make GIFs, so Aseprite it is

[rich]

Fair enough, I just meant it's the same process (when creating a gif from frames) of having to meticulously place every frame by hand, and keep testing to make sure the animation plays back smoothly. It's a pain in the arse  but there's really not any other option if the source frames aren't set-up correctly in the first place.