Animating game body with with different sized sprites

Phaser 3
1

Well, i’ve googled it and had quite a time figuring out how to.

I’ve got idle-animation with all the frames with frameHeight 54, so on the init hero.body is 54 high.

Next I’ve got an attack-animation with frames of different heights. It starts with frameHeight 70, next frameHeight 64, next 68 and so on. It ends with frameHeight 68.

If i do
update() {

  •  this.player.body.setSize(this.player.frame.width, this.player.frame.height, true);*

}

then at the end of attack-anim, when anims transit to “idle” state I get a hero’s body at (68-54)/2= 7px up high from earth and the body falls down 7px

If I make body.setOffset - it works well only for the first sprites with frameHeight 70, next attack-anim frames with different frameHeight look poor.

By now the only solution I can see is to make all the frames in one particular animation the same frameHeight. And it is so very long because basically all of my sprites have slightly different frameHeight.

Please give me an idea how to code a lot of different sized sprites in one animation into a good looking animation and animation-transition. Or give me a hint how to automatize the process of bringing all the sprites to an equal frameHeight.

2

Hi,
Same problem here, i use a lot of free assets from different artists.
I started, like you, to change body size dynamically. But it’s tedious…
I finally use your last solution, tedious too, but with Aseprite or LibreSprite, once you know the offset to apply, all the frames are resized at the same time. I usually center the character too on the x axis, so flipX works well.
I hope someone else have a better solution…

1 Like
3

hi! thank you for an Aseprite! it’s really way more cooler and powerful than texPacker, that i’ve been using. drawing in Aseprite is cool too :grinning:

1 Like