Sprite Map Maker

A web-based tile map editor for creating 2D game levels and scenes using sprite sheets. Built with vanilla HTML5, CSS3, and JavaScript - no dependencies required!

✨ Features

• 📁 Sprite Sheet Loading: Load any image file as a sprite sheet
• 🎨 Visual Palette: Automatically generates a clickable sprite palette from your sprite sheet
• ⚡ Real-time Editing: Click to place sprites, with instant visual feedback
• 🔧 Flexible Tile Sizes: Support for common sizes (16x16, 32x32, 64x64) plus custom dimensions
• 📏 Resizable Maps: Create maps from 5x5 up to 50x50 tiles
• 🧽 Eraser Tool: Remove sprites with dedicated eraser mode
• 💾 PNG Export: Save your finished maps as clean PNG images
• 📱 Responsive Design: Works on desktop and tablet devices
• 🎯 Pixel Perfect: Maintains crisp pixel art rendering

🚀 Getting Started

Quick Start

1. Download or clone this repository
2. Open sprite_maps.html in your web browser
3. Load a sprite sheet image using the file input
4. Start creating your map by clicking sprites in the palette and placing them on the canvas!

No Installation Required

This is a pure client-side application - no server setup, build process, or dependencies needed. Just open the HTML file and start creating!

📖 How to Use

Loading a Sprite Sheet

1. Click "Load Sprite Sheet" and select an image file (PNG, JPG, GIF supported)
2. The tool will automatically slice your image into tiles based on the current tile size
3. All available sprites will appear in the palette on the left

Creating Your Map

1. Select a Sprite: Click any sprite in the palette to select it
2. Place Sprites: Click anywhere on the map canvas to place the selected sprite
3. Use Eraser: Check "Eraser Mode" to remove placed sprites
4. Resize Map: Adjust map dimensions using the width/height inputs

Customizing Settings

• Tile Size: Choose from preset sizes or enter custom dimensions
• Map Size: Set your map dimensions (5-50 tiles in each direction)
• Clear Map: Remove all placed sprites to start over

Saving Your Work

• Click "Save to PNG" to download your map as a clean image file
• The exported image excludes grid lines for a professional result

🛠️ Technical Details

Browser Compatibility

• Modern Browsers: Chrome, Firefox, Safari, Edge (recent versions)
• Minimum Requirements: HTML5 Canvas support, ES6 classes
• Mobile: Works on tablets, limited phone support due to screen size

File Format Support

• Input: Any web-supported image format (PNG, JPG, JPEG, GIF, WebP)
• Output: PNG format for maximum compatibility and quality