Spritesheet with unstable width

Question

I'm working on my 2d game engine using HTML5 and Canvas. I have a sprite sheet, and each frame of this sprite sheet has its own size.

Considering that the Viewport is following this sprite sheet (in the sense that it is translated relative to the position and dimension of this spritesheet), the centering process of the object undergoes some changes due to the recalculation that takes into account the size of the aforementioned sprite sheet, which in some frames is larger, and in other frames smaller.

For instance, this is an excerpt of the code that manages part of the translation of the viewport based on the position of the target sprite sheet

this._Edge = this.mLocation.X + this.Target.Width - this.Deadzone.Location.X - this.Deadzone.Width;

    if (this.View.Location.X < this._Edge)
    {
        this.View.Location.X = this._Edge;
    }

The problem is that "Target.Width" is nothing more than the width of the current frame, so if the frame is much larger than the previous ones the viewport has a "jump", because it tries to reposition itself based on the current frame size.

From the gif you can see that when I activate the sword sequence, the spritesheet is wider, and consequently the viewport is forced to reposition itself.

To avoid these problems, should I give the sprite sheet a fixed size? Or, for example, would it be more appropriate to consider a fictitious dimension that is an average of the dimensions of the individual frames? As a solution I thought to consider only the center of the sprite sheet, which is always 1x1 pixel. What do you think?

I am ready to consider all suggested solutions.

Answer 1

When you want to use a spritesheet with non-uniform frame size, then you need to introduce the concept of a separate "pivot point" for each animation frame. The pivot point is the "zero-point" of the frame. When you draw a frame at coordinates x:y, then the pivot is the pixel coordinate within that frame where that x:y point is supposed to be on that frame.

Where to place the pivot is a matter of taste. But for a platformer it's a good choice IMO to place the pivot at the bottom of the sprite between the feet.

For example, let's say that your sprite above is 32x64 in the idle pose and 64x64 in the attack poses. In that case, the pivot of both the right-facing idle and attack frames would be 16:64 - the center of the idle and the left quarter of the attack pose. However, for the left-facing attack pose, you would want to draw the whole frame further left. So the pivot of that frame would be 48:64 - three-quarters to the right.

When you draw a frame, you would calculate the coordinates somehow like this:

function drawFrameAtScreenPosition(pos, frame) {
    x = pos.x - frame.pivot.x;
    y = pos.y - frame.pivot.y;
    YourFavoriteGraphicsApi.drawImage(frame.image, x, y, frame.width, frame.height);
}