Animation with non-uniform frame sizes

Question

How do you know when to draw the next frame if its bounding box is larger/smaller than the current? For example, in KOF, some characters have elastic arms and things of the like..How are these handled in a game?

Answer 1

You know those paper dolls with moving arms? The arms are attached to the doll using tacks or something similar. What you're looking for is basically the virtual counterpart to this.

To have complete freedom between the sprite frames and their sizes, each part has to have a reference points (both from and to).

Answer 2

You would want to set up a definition of a Frame class which describes the position and dimensions of a single frame (independent of an actual image), a FrameSet class which has a name and a series of Frames to iterate over (again, independent of an catual image), and a Animation class that has a name, a FrameSet, the ability to iterate through the FrameSets, and a target spritesheet. When an Animation is called by name it blits from the spritesheet at the location described by the current frame in the current frameset with dimensions equal to the current frame.

Answer 3

Lets take Dhalsim for example, classic and answers your category of stretchy limbs. This is how it is done: http://sfgalleries.wikia.com/wiki/Sprite_Sheets#Dhalsim

The artists, draws the sprite frames and places them on a sheet with enough room so that each frame has it's own rectangle. In another layer, the artist marks the center of mass of the character in each frame (so that the frames are in-synch during animation)

Another person, usually not an artist, uses a tool to save the positions of these rectangles mentioned above and their width and height.

If you require more detail on how to implement the tool that helps extract the rectangles and save them to xml or text format ask and I could elaborate.

How to write a tool to collect data for a sprite sheet:

1. Display the sprite-sheet(I assume you have that covered)
2. Allow moving(arrow keys or wasd) the image on (x,y) while retaining the offset -> offset.x, offset.y (the offset is the (x,y) of top left corner pixel currently displayed)
3. Allow zooming in and out (+, -) 2x / 4x / 8x/ with two keys -> zoom

point is (x,y)

rect is (x,y,width,height,label,index);

pseudo code main loop:

If(userClickedMouse()) {
    if(point1 == null)
        point1 = new Point();
        point1.x = offset.x + mouse.x/zoom;
        point1.y = offset.y + mouse.y/zoom;
    else
    {
        point2 = new Point();
        point2.x = offset.x + mouse.x/zoom;
        point2.y = offset.y + mouse.y/zoom;
        //prompt user to enter frame label and number//
        rects.push( Math.min(point1.x, point2.x),
                    Math.min(point1.y, point2.y),
                    Math.abs(point1.x - point2.x),
                    Math.abs(point1.y - point2.y)
                    label, index));
        //The rect is just an array a struct (x,y,width,height) values over and over - you can also use a struct (but I would just use integers)
        point1 = null;
        point2 = null;
    }
}

if (point1 != null) //display a rectangle describing the currently selected area.

If this makes sense let me know or please feel welcome to ask for elaboration.

To pick the frames 'character centering point' use a similar loop, that only asks the user to input one point.

Alternative:

Have the artist add this one pixel points in a new layer in Gimp/Photoshop and write a tool that opens the point layer and extracts their coordinates by iterating on all pixels and saves the results into your the format your prefer.

If you do it that way, you could easily calculate which point belongs in each rectangle and then pair them automatically.