I'm struggling to find how to define a kind of axis in my frames, when my sprite punches it moves back. I want to define the head as a pivot for the other sprites with different sizes.
How can I accomplish that?
I have not come across a way to define the type of axis that you're talking about, however I can offer a method that I've used to overcome this issue.
The best method, and most easily explained to the artists on the project, is to make all the sprite frames for all animations for a particular character the exact same sizes.
For example, if your character walks and punches, of course the walking sprites will usually be narrower than your punching animation. If you crop your sprites without leaving any empty spaces, your character will appear to pop around since the anchor point for a sprite is usually it's center, and the center of a walking animation and a punching animation are different.
If you keep the sprite frames of all animations for the same character the same sizes and position the head in the same spot within the sprite frame each time (don't worry about the empty spaces within the PNG, since TexturePacker will strip those out for you) when the sprite is animated, the sprite will not shake around, of course, the bounding box for the character will be affected since your sprite's size will always be as large as your largest animation frame. This may or may not impact your collision detection code, so adjust accordingly.
What Jamornh suggests is a good solution, but might be problematic if you already have most of the content finished.
What I do in my game engine, is that I have a property
Vector2 Sprite.CenterPoint in my
Sprite class. This stores the location of the sprites rotation center, relative to the upper left corner of the sprite. A similar property could store the coordinates of the center of your character's head, or center-of-gravity. When switching between the character's sprites (during an animation, for example), you can translate the sprite by taking this point into consideration.