https://github.com/decker-dev/sprite-cutter
Free online tool for cutting sprites from images. Upload, mark areas, and download individual sprites - perfect for game developers and pixel artists.
https://github.com/decker-dev/sprite-cutter
canvas-api image-processing nextjs pixel-art react sprite-cutter sprite-sheet typescript vercel web-tool
Last synced: 27 days ago
JSON representation
Free online tool for cutting sprites from images. Upload, mark areas, and download individual sprites - perfect for game developers and pixel artists.
- Host: GitHub
- URL: https://github.com/decker-dev/sprite-cutter
- Owner: decker-dev
- Created: 2025-06-01T21:02:25.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-06-10T22:31:44.000Z (12 months ago)
- Last Synced: 2025-06-10T23:28:55.456Z (12 months ago)
- Topics: canvas-api, image-processing, nextjs, pixel-art, react, sprite-cutter, sprite-sheet, typescript, vercel, web-tool
- Language: TypeScript
- Homepage: https://sprite-cutter.vercel.app
- Size: 425 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Sprite Cutter
[](https://sprite-cutter.vercel.app)
[](https://nextjs.org)
[](https://www.typescriptlang.org/)
## 🎮 Overview
**Sprite Cutter** is a free, web-based tool designed for game developers and digital artists to easily extract individual sprites from sprite sheets. Upload your image, mark the areas you want to cut, preview your selections, and download all sprites as separate files.
Perfect for:
- Game developers working with sprite sheets
- Digital artists organizing their artwork
- Pixel art enthusiasts
- Anyone needing to split images into smaller components
## ✨ Features
- **🖼️ Image Upload**: Support for PNG, JPG, JPEG, and GIF formats
- **✂️ Interactive Cutting**: Click and drag to select sprite areas
- **👁️ Live Preview**: See your selected areas in real-time
- **📦 Batch Download**: Download all sprites as a ZIP file
- **🎨 Visual Feedback**: Clear visual indicators for selected areas
- **📱 Responsive Design**: Works on desktop and mobile devices
- **🚀 Fast Performance**: Client-side processing for instant results
- **🔒 Privacy First**: All processing happens in your browser
## 🚀 Live Demo
Visit the live application: **[https://sprite-cutter.vercel.app](https://sprite-cutter.vercel.app)**
## 🛠️ Technology Stack
- **Framework**: Next.js 15.2.4
- **Language**: TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: Custom React components
- **Image Processing**: HTML5 Canvas API
- **File Handling**: Browser File API
- **Deployment**: Vercel
- **Analytics**: Vercel Analytics
## 🏃♂️ Getting Started
### Prerequisites
- Node.js 18+ or Bun
- npm, yarn, pnpm, or bun
### Installation
1. Clone the repository:
```bash
git clone https://github.com/yourusername/sprite-cutter.git
cd sprite-cutter
```
2. Install dependencies:
```bash
# Using bun (recommended)
bun install
# Or using npm
npm install
# Or using yarn
yarn install
# Or using pnpm
pnpm install
```
3. Run the development server:
```bash
# Using bun
bun dev
# Or using npm
npm run dev
# Or using yarn
yarn dev
# Or using pnpm
pnpm dev
```
4. Open [http://localhost:3000](http://localhost:3000) in your browser.
## 📖 How to Use
1. **Upload an Image**: Click the upload area or drag and drop your sprite sheet
2. **Select Areas**: Click and drag on the image to mark sprite boundaries
3. **Preview Sprites**: View your selected areas in the preview section
4. **Download**: Click "Download All Sprites" to get a ZIP file with all your sprites
## 🏗️ Project Structure
```
sprite-cutter/
├── app/
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout with metadata
│ └── page.tsx # Main application page
├── public/ # Static assets
├── package.json # Dependencies and scripts
└── README.md # Project documentation
```
## 🔧 Available Scripts
- `bun dev` - Start development server
- `bun build` - Build for production
- `bun start` - Start production server
- `bun lint` - Run ESLint
## 🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
1. Fork the project
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## 📝 License
This project is open source and available under the [MIT License](LICENSE).
## 🙏 Acknowledgments
- Built with [v0.dev](https://v0.dev) for rapid prototyping
- Deployed on [Vercel](https://vercel.com) for seamless hosting
- Icons and UI inspiration from modern design systems
## 📞 Support
If you have any questions or need help, please:
- Open an issue on GitHub
- Visit the [live demo](https://sprite-cutter.vercel.app)
- Check the documentation above
---
Made with ❤️ for the game development community