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?
4
-
\$\begingroup\$ There are special tools for having 'elastic arms', like Flash Bone Tool, but final quality of animations using these tools are never as good as animations based on manually drawn frames or on a 2D/3D character using a skeleton. \$\endgroup\$– Markus von BroadySep 28, 2012 at 11:13
-
\$\begingroup\$ @MarkusvonBroady Is it possible to incorporate skeleton animation in a 2D game? \$\endgroup\$– mrkSep 28, 2012 at 12:40
-
\$\begingroup\$ That's exactly what Jari Komppa suggested. In Flash you would simply create a "backbone" Movieclip, and place two arm-bones and two leg-bones there. All bones except backbone would have their registration point (x:0, y:0) set on one side, and another bone(s) added on another side. Now, if you rotate arm-bone, all bones belonging to it will move together with it. \$\endgroup\$– Markus von BroadySep 28, 2012 at 12:47
-
\$\begingroup\$ My suggestion doesn't require rotation of limbs as such; each frame of the animation of each limb just needs offsets to be in the correct position.. but yes, naturally rotation and even scaling would work with the pivot points. \$\endgroup\$– Jari KomppaSep 28, 2012 at 12:50
Add a comment
|
3 Answers
\$\begingroup\$
\$\endgroup\$
2
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).
answered Sep 28, 2012 at 11:04
-
\$\begingroup\$ Can you elaborate please? A link to an existing implementation if one exists would be awesome :=) \$\endgroup\$– mrkSep 28, 2012 at 12:42
-
\$\begingroup\$ No ready code, but basically, for each piece you need offsets per frame. These probably need to be set by the artist. Most probably the easiest way would be to write a tool for this. If this starts to sound like too much effort for the end result, you may want to reconsider the way you design your animation system =) \$\endgroup\$ Sep 28, 2012 at 12:55
\$\begingroup\$
\$\endgroup\$
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.
-
\$\begingroup\$ Thanks! Who gets to specify where to draw the individual frames? Is it the graphics artist? \$\endgroup\$– mrkSep 28, 2012 at 12:41
-
\$\begingroup\$ @saadtaame The frames on the sheet are designated by the artist, who then tells you their pixel locations and dimensions. The target where to draw the result is determined by the graphics library and the logic used in your game. \$\endgroup\$– CaseySep 28, 2012 at 20:50
\$\begingroup\$
\$\endgroup\$
2
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:
- Display the sprite-sheet(I assume you have that covered)
- 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)
- 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.
