Spritesheet Frames

If you’ve ever wrestled with spritesheets, trying to figure out which frame is which, or if you’re building layered characters and need a way to keep everything in sync, check out Spritesheet Frame Overlay. I built it to take the guesswork out of managing spritesheets, and in this post, I’ll walk you through how it works.

How to Use the Tool

Using the Spritesheet Frame Overlay is simple and straightforward.

  1. Upload Your Spritesheet
    Browse your files and upload your spritesheet image. For example, in my demo video, I used my player body spritesheet, which is 16x32 pixels. The tool automatically detects the size of the spritesheet.

  2. Generate the Overlay
    Press the “Generate Overlay” button and you’ll see a grid breaking your spritesheet into individual frames based on the sprite size you set.

  3. Find Frame Numbers
    Hover over any frame to see the frame number.

📄 Spritesheets often have empty or transparent frames, and using the wrong one can cause bugs—like loading an invisible texture in your game.

Examples of Usage

I built this tool to avoid the guesswork involved in managing frame numbers, especially when working with layered sprites. Let me give you a real example from my own project.

I’m working on a game with a character that has separate spritesheets for the body, eyes, accessories, and outfits. Each layer needs to animate in sync, but manually tracking frame numbers across multiple sheets was a nightmare. With the Frame Overlay Tool, I can hover over any frame and see its number. For instance, in my player body sheet, frame 887 is transparent—using it by mistake would make the player invisible. The tool helps me dodge mistakes like that and keeps my workflow smooth.

Using Spritesheets for Layered Sprites

Layered sprites allow you to build customizable characters where you can swap out assets like outfits without loading an entire spritesheet that has the character in that specific outfit.

I’ve got separate spritesheets for:

  • Body
  • Eyes
  • Outfits
  • Hairstyles
  • Accessories
//Setup the layers:

Player.prototype.setupLayerAnimations = function () {
    this.layerAnimations = {
        body: {
            idle: [69, 70, 71, 72, 73, 74],
            idleUp: [75, 76, 77, 78, 79, 80],
            idleDown: [63, 64, 65, 66, 67, 68],
            walk: [126, 127, 128, 129, 130, 131],
            walkUp: [120, 121, 122, 123, 124, 125],
            walkDown: [132, 133, 134, 135, 136, 137],
        },
        eyes: {
            idle: [68, 69, 70, 71, 72, 73],
            idleUp: [62, 63, 64, 65, 66, 67],
            idleDown: [74, 75, 76, 77, 78, 79],
            walk: [124, 125, 126, 127, 128, 129],
            walkUp: [118, 119, 120, 121, 122, 123],
            walkDown: [130, 131, 132, 133, 134, 135],
        },
        outfit: {
            idle: [68, 69, 70, 71, 72, 73],
            idleUp: [62, 63, 64, 65, 66, 67],
            idleDown: [74, 75, 76, 77, 78, 79],
            walk: [124, 125, 126, 127, 128, 129],
            walkUp: [118, 119, 120, 121, 122, 123],
            walkDown: [130, 131, 132, 133, 134, 135],
        },
        hairstyle: {
            idle: [68, 69, 70, 71, 72, 73],
            idleUp: [62, 63, 64, 65, 66, 67],
            idleDown: [74, 75, 76, 77, 78, 79],
            walk: [124, 125, 126, 127, 128, 129],
            walkUp: [118, 119, 120, 121, 122, 123],
            walkDown: [130, 131, 132, 133, 134, 135],
        }
    };
}

Since all my body spritesheets have the same layout, the frame numbers stay consistent across different colors. So, frames 0-3 are always idle animations, 4-7 are walking, and so on. This setup lets me reuse the same frame references in my code, no matter which body color the player picks. The Frame Overlay Tool makes it dead simple to identify these frames, saving me tons of time.


//Play the specific animations
Player.prototype.playLayerAnimation = function (animKey, fps = 5, loop = true) {
    for (let layer in this.layerSprites) {
        let sprite = this.layerSprites[layer];

        if (sprite && this.layerAnimations[layer] && this.layerAnimations[layer][animKey]) {
            let frames = this.layerAnimations[layer][animKey];
            if (!sprite.animations.getAnimation(animKey)) {
                sprite.animations.add(animKey, frames, fps, loop);
            }
            sprite.animations.play(animKey);
        }
    }
}

//Usage:
this.playLayerAnimation('walk');

Spritesheet vs. Sprite Atlas

I use sprite atlases all the time—they’re awesome for animations where you can reference frames by name, like idle_1 or walk_2. In fact, I use them all the time.

But for my character creator, layered spritesheets provided a better path that allows me to maintain all the elements together. Since all layers have identical frame layouts, using numerical indices keeps everything in sync without needing complex mapping. If I used a sprite atlas, I’d have to name and map frames for each layer separately, which would be a pain to maintain — especially if I made changes later on. By sticking with layered spritesheets and the Frame Overlay Tool, I streamlined both the character creator and the player loading process.

🔗 Resources: