Different widths and heights in a spritesheet

Question

I am currently writing a game engine which generates Javascript and HTML5 code. I am working with CreateJS to achieve this.

I do not know how efficient it is to make a spritesheet with varying widths and heights of sprites. I cannot see why it would be inefficient. But the way my program currently works by drawing a spritesheet to a file with all of the images side-by-side. The user simply imports the sprites and for each sprite it generates the spritesheets for you using the different frames of animation.

How can I load an image into a spritesheets with varying widths and heights. There is always 1 row and multiple collumns. How is this achieved?

Thanks

Answer 1

EaselJS SpriteSheet class supports two formats. The simple version supports a single width/height for all images in the spritesheet

frames: {width:64, height:64, count:20, regX: 32, regY:64}

The complex version defines rectangles for each image

// The 5th value is the image index per the list defined in "images" (defaults to 0).
    frames: [
        // x, y, width, height, imageIndex, regX, regY
        [0,0,64,64,0,32,64],
        [64,0,96,64,0]
    ]

You can read more about the SpriteSheet format at http://createjs.com/Docs/EaselJS/classes/SpriteSheet.html

Answer 2

Fixed Width

When creating a spritesheet with only one row and fixed widths you are normally going to have some variable representing the amount of frames in the animation. Then you divide the total width of the spritesheet by the amount of frames and you get the width for each frame. You can then use something like the following to access a specific frame from the spritesheet:

frame = frame%frame_amount; //limit the frame to the frames available in the animation
frame_width = spritesheet.width/frame_amount;
ctx.drawImage(spritesheet, frame*frame_width, 0, frame_width, spritesheet.height, target_x, target_y, frame_width, spritesheet.height);

Note: The first frame is actually frame = 0, and the last one is frame = frame_amount-1

Now if you have frames of variable widths this is obviously not going to work because you don't have a uniform frame_width to multiply by. In order to figure out what to do we need to look at what we are really doing with frame*frame_width: We are essentially adding up the widths of all previous frames in order to figure out where to clip the frame from our spritesheet. For the width and height of our clipping area we are using the same frame_width for the width and spritesheet.height for the height.

Flexible Width

For frames with varying widths we don't really need to do anything new, we do the same things we do for fixed width. However due to the more complex nature of spritesheets with variable frame widths/heights these things become a little more complex.

First: "Adding up the widths of all previous frames": In order to add up all the widths of the previous frames we need to know these widths, meaning we simply store these widths in array frame_widths of length frame_amount, containing the frame_width for each specific frame. Then we create a function like:

function add_up_array (arr, position) {
    var accumulator = 0;
    for (var i = 0;i <= position; i++) {
         accumulator += arr[i];
    }
    return accumulator;
}

We simply pass our frame_widths array and our current frame to this function and we get the equivalent of frame*frame_width in our example for fixed frame widths.

Second: "The width and heights of our clipping area": Same as above, simply keep track of the height of each individual frame. For example with an array. With our 2 arrays frame_widths and frame_heights we can then do something like frame_heights[frame] to get the height of the respective frame.

In practice you will have to come up with your own sprite management system that saves these 2 arrays with the sprite in some way, maybe using javascript classes or a simple object like:

animation = {
    spritesheet: spritesheet_image,
    frame_amount: number_of_frames_in_the_animation,
    frame_widths: array,
    frame_heights: array
};