Spritesheet Frame Overlay Tool

A web-based tool to overlay a grid on a spritesheet image, helping you visualize and identify individual frames.

Usage

1. Select a spritesheet image by clicking the "Browse" button.
2. Enter the width and height of each frame in the spritesheet.
3. Click the "Generate Overlay" button to see the grid and frame numbers overlaid on the image.
4. Hover over the canvas to see the frame number at the current mouse position.

Requirements

This tool runs in any modern web browser. No additional software or dependencies are needed.

Features

• Upload any spritesheet image
• Specify frame width and height
• Generate a grid overlay with frame numbers
• Hover to see frame numbers
• Dark theme for easy viewing

Running Locally

1. Clone this repository
2. Open the index.html file in a web browser

Contributing

If you'd like to contribute to this project, please fork the repository and submit a pull request with your changes.

Issues

If you encounter any bugs or have feature requests, please open an issue on this repository.