Sprite Editor User Manual

Version: Latest Update

Features

• Import and edit images as pixel-based sprites
• Draw directly on a grid canvas
• Animation frame management
• Collection of reusable frames
• Background removal
• Exporting and loading sprite data
• Save and load sprite code files

1. Getting Started

1.1 Interface Overview

The application is divided into two main sections:

1. Left Column: Contains the drawing grid, image importer, animation controls, and frame collection.
2. Right Column: Provides options for exporting and importing sprite code.

2. Working with Sprites

2.1 Importing an Image

1. Click "Upload Any Image" and select an image from your device.
2. The image will appear in the General Image Importer section.
3. Adjust the Image Scale and Background Removal Threshold using sliders.

2.2 Selecting a Region from an Image

1. Click on the image to create a selection box.
2. Drag the selection box to position it.
3. Use the Arrow Keys (while selection is active) to fine-tune positioning.
4. Use the Mouse Scroll to resize the selection.
5. Press R to remove the background within the selected region.
6. Press X to scale and apply the selection to the grid without background removal.

3. Drawing on the Grid

3.1 Adjusting the Grid

• Change the Grid Size using the number input box.
• Click "Set Grid" to update the canvas.

3.2 Drawing and Erasing

• Select a color from the color picker.
• Click and drag to draw.
• Use the Eraser Button to switch between drawing mode and eraser mode.
• Adjust the eraser size by scrolling while erasing.

3.3 Clearing the Grid

• Click "Clear" to reset the grid.

4. Animation Features

4.1 Adding and Managing Frames

• Click "Add Frame" to save the current grid as an animation frame.
• Click "Replace Frame" to overwrite the selected animation frame.
• Click "Clear Frames" to remove all animation frames.

4.2 Previewing Animations

• Click "Preview Animation" to start a looped playback.
• Adjust the Animation Speed (ms) to change playback speed.
• Click "Stop Preview" to stop the animation.

5. Frame Collection

The Frame Collection allows storing reusable frames separately from animation frames.

5.1 Storing Frames

• Click "Store in Collection" to add the current frame to the collection.

5.2 Managing Collection Frames

• Click a stored frame to select it.
• Click "Add" to move the selected collection frame to the animation.
• Click "Swap" to exchange the selected collection frame with the currently selected animation frame.

6. Exporting and Saving

6.1 Exporting Sprite Code

1. Click "Export Sprite Code" to generate a sprite code format.
2. The exported sprite code includes:
   • Grid size
   • Animation speed
   • Main sprite pixel data
   • Animation frames (if any)
   • Collection frames (if any)

6.2 Saving as a File

1. Enter a file name (e.g., sprite.txt).
2. Click "Save" to download the sprite code as a text file.

7. Importing and Loading Sprite Code

7.1 Importing from the Textbox

1. Paste sprite code into the "Import Sprite Code" box.
2. Click "Import Sprite" to apply it to the editor.

7.2 Loading from a File

1. Click "Load Sprite Code" to select a .txt file.
2. The file content is automatically imported.

8. Understanding the Sprite Code Format

The sprite code format uses:

<GridSize> <AnimationSpeed> (Main sprite pixel data) FRAMES: (Animation frames) === COLLECTION: (Collection frames) === 

Example:

20 200 000000 111111 000000 111111 000000 111111 FRAMES: 000000 111111 000000 === 111111 000000 111111 === COLLECTION: 222222 333333 222222 === 

9. Keyboard Shortcuts

Add the current frame to animation
Add the current frame to the collection
Scale the selection to the grid without background removal
Remove the background from selection
Move selection (pixel-precise mode)
Resize selection or eraser

Action
A
S
X
R
Arrow Keys
Scroll

10. Notes & Troubleshooting

• If an imported sprite does not appear, ensure the format follows the correct structure.
• Animation playback depends on the animation speed set in milliseconds.
• Use the "Clear Frames" button if the animation appears corrupted.

Solution
one frame is added to animation.
threshold slider in the image importer.
animation frame and a collection frame are selected before clicking Swap.
scroll wheel while erasing to adjust eraser size.