Sprite Editor

What is it? #

The Sprite Editor is a tool that allows you to add metadata to a spritesheet to define the regions it contains. It does not modify original images or generate new files; its function is purely to describe how the images should be interpreted.

What is it for? #

The Sprite Editor is used to:

• Work with spritesheets where frames have different sizes.
• Avoid relying on rigid grids when assets are irregular.
• Add structured information to existing graphic assets.

It is particularly useful for projects starting without dedicated artists, where assets often come from various sources.

When should you use it? #

You will need the Sprite Editor when:

• You have a pre-existing spritesheet.
• The frames do not share a uniform size.
• You cannot use the traditional fixed-region method.

What metadata is generated? #

For each region within the spritesheet, the following is defined:

• X position and Y position
• Width and Height
• Region name

This information is exported as metadata and can be consumed directly by the game engine.

---

Spritesheet Editing Methods #

The Sprite Editor offers two algorithms to define regions.

1. Automatic Detection #

This method analyzes the image and generates regions separated by transparent areas (alpha channel).

Useful when:

• Frames are visually separated.
• No regular grid exists.

2. Grid #

The Grid method is more manual and is designed for tile-based spritesheets. It allows you to divide the image into regions based on a defined width and height.

• Example: A 480×480 image can be divided into 32×32 regions. or any other user-configured size.

---

Advanced Adjustments (Bonus) #

In many spritesheets, frames for an animation might have different sizes, or parts of the same frame may be separated by transparent zones. To solve this, the Sprite Editor includes:

• Size Auto-Adjustment: Resizes all regions to match the largest detected width or height, ensuring frames have consistent dimensions.
• Auto-Detection Tolerance: Allows merging regions separated by small transparent areas, preventing a single frame from being incorrectly cut into pieces.

---

Workflow: Creating Spritesheets #

This workflow describes the process of converting a raw image into a spritesheet with associated metadata.

1. Go to the Palette and select the raw image you wish to convert.
2. Right-click the image and select Convert to Spritesheet from the context menu.
3. The Sprite Editor will open in the main section.
4. In the top toolbar, choose your preferred algorithm: Automatic Detection or Grid.
5. Define the areas corresponding to each region of the spritesheet.
6. Once the regions are defined, click Confirm Spritesheet.
7. A confirmation window will appear. Upon acceptance, the system will generate the spritesheet and its metadata.

Result:

• The original image will no longer be available in the Sprites sub-section.
• The new sheet will appear in the Spritesheets sub-section within the Palette.