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.