SpriteCutter

Extracting Sprites for Unity 2D Games

Unity's sprite system allows you to slice sprite sheets automatically, but sometimes you need precise control over individual sprites. Here's how to use SpriteCutter with Unity:

Step 1: Prepare Your Sprite Sheet

Make sure your sprite sheet uses a consistent grid layout. For best results, use power-of-two dimensions (256x256, 512x512, etc.) and ensure all sprites are the same size.

Step 2: Get Coordinates in SpriteCutter

Load your sprite sheet and configure the sprite dimensions. Click on each sprite you need and copy the coordinates using the "Copy AI Prompt" button.

Step 3: Import into Unity

In Unity, import your sprite sheet and set the Sprite Mode to "Multiple". Use the Sprite Editor to define each sprite region using the coordinates from SpriteCutter.

// Example: Creating a sprite rect in Unity
Rect spriteRect = new Rect(64, 32, 32, 32); // x, y, width, height
Sprite sprite = Sprite.Create(texture, spriteRect, new Vector2(0.5f, 0.5f));

Using Sprite Coordinates in Godot Engine

Godot makes it easy to work with sprite sheets through its AtlasTexture and Sprite2D nodes. Here's how to integrate SpriteCutter coordinates:

Setting Up AtlasTexture

Create an AtlasTexture resource and set the region property using the coordinates from SpriteCutter:

# GDScript example
var atlas = AtlasTexture.new()
atlas.atlas = preload("res://sprites/characters.png")
atlas.region = Rect2(64, 32, 32, 32)  # x, y, width, height
$Sprite2D.texture = atlas

Animation with AnimatedSprite2D

For animations, use the SpriteFrames resource and add each frame using the coordinates extracted from SpriteCutter.

Batch Processing Sprites with Python

Use SpriteCutter coordinates with Python's PIL/Pillow library to automate sprite extraction:

from PIL import Image

# Load the sprite sheet
sheet = Image.open("spritesheet.png")

# Coordinates from SpriteCutter
sprites = [
    {"name": "idle_1", "x": 0, "y": 0, "w": 32, "h": 32},
    {"name": "idle_2", "x": 32, "y": 0, "w": 32, "h": 32},
    {"name": "walk_1", "x": 0, "y": 32, "w": 32, "h": 32},
]

# Extract and save each sprite
for sprite in sprites:
    box = (sprite["x"], sprite["y"], 
           sprite["x"] + sprite["w"], 
           sprite["y"] + sprite["h"])
    cropped = sheet.crop(box)
    cropped.save(f"{sprite['name']}.png")

Using Sprites in HTML5 Canvas Games

For web-based games using HTML5 Canvas, use the coordinates from SpriteCutter with the drawImage() method:

// Load sprite sheet
const spriteSheet = new Image();
spriteSheet.src = 'spritesheet.png';

// Draw a specific sprite using coordinates from SpriteCutter
// drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
ctx.drawImage(
    spriteSheet,
    64, 32,    // Source x, y (from SpriteCutter)
    32, 32,    // Source width, height
    100, 100,  // Destination x, y on canvas
    32, 32     // Destination width, height
);

This technique works with popular game frameworks like Phaser, PixiJS, and Kontra.js.

Using AI Prompts for Sprite Generation

SpriteCutter's AI prompt feature generates formatted text that's perfect for AI image generation and editing tools. Here's how to use it effectively:

Extracting Specific Sprites

The generated prompt includes the exact coordinates, dimensions, and file name, making it easy to instruct AI tools to extract or modify specific sprites:

Extract the sprite at x=64 y=32 width=32 height=32 from "characters.png" (mapping location: row 2, column 3)

Creating Variations

Use the prompt as a reference when asking AI to create variations of existing sprites, ensuring consistent dimensions and positioning.