Sprite Editor

Pyxen includes a full sprite editor for creating and editing pixel art directly inside your project on iPad and Mac. No external tools needed — design your sprites and see changes applied instantly to your running game.

Opening the sprite editor

Tap any image asset in the sidebar, then tap the Edit button to switch from the image viewer to the sprite editor.

Drawing tools

The toolbar along the top provides:

• Pencil — draw individual pixels
• Eraser — remove pixels
• Fill — flood-fill a connected area with the selected color
• Line — draw straight lines between two points
• Rectangle — draw rectangles (outline or filled)
• Ellipse — draw ellipses (outline or filled)

Select a tool, choose a color from the palette, and draw on the canvas. Zoom in with pinch (iPad) or scroll (Mac) for pixel-precise work.

Color palette

The palette sits at the bottom of the editor. Tap any color to select it. Use the eyedropper to pick a color from the canvas.

The palette is per-image — each sprite sheet can have its own set of colors.

Selection tools

• Rectangular selection — drag to select a rectangular region
• Magic Wand — tap to select a connected region of similar color. Hold Shift to add to the selection, or Shift+Option to subtract.
• Move — drag the selection to reposition it

Selected regions show marching ants (animated dashed outline). With an active selection, you can:

• Cut (Cmd+X) — remove the selection and copy it to the clipboard
• Copy (Cmd+C) — copy the selection to the clipboard
• Paste (Cmd+V) — paste the clipboard as a new floating selection
• Delete — clear the selected region

Layers

The layers panel on the right shows all layers in the current image. You can:

• Add layers — create new layers above or below
• Reorder layers — drag to change the stacking order
• Toggle visibility — hide layers temporarily while working
• Merge layers — combine layers into one

Each layer is drawn independently. This lets you separate backgrounds, characters, and effects into different layers and edit them without affecting each other.

Resize and canvas

• Resize — change the image dimensions (scales existing content)
• Canvas size — change the canvas size without scaling (adds or removes space around the edges)

Animation timeline

The sprite editor includes a built-in animation timeline for creating frame-by-frame sprite animations.

Opening the timeline

Tap the film stack button (bottom-right of the canvas) to toggle animation mode. The timeline strip appears below the canvas.

Creating animations

1. Open the animation picker (left side of the timeline) and tap New Animation
2. Give it a name (e.g., “walk”, “idle”, “attack”)
3. Select tiles on your sprite sheet using the tile select tool, then tap Add to Animation
4. Or tap the + button in the timeline to add the next tile in reading order

Editing frames

• Tap a frame to select it — the canvas zooms to that tile for editing
• Right-click a frame to remove it or reorder it
• Playback controls — play/stop, FPS stepper (1-60), frame counter

Onion skin

Toggle the onion skin button to see a ghost overlay of the previous frame while editing. This helps maintain consistency between animation frames.

Tile isolation

When editing a frame, toggle the isolation button to hide or dim surrounding tiles, letting you focus on the current frame.

Using animations in code

Animations are saved in the sprite’s metadata. Play them in your game with the animation parameter:

player.sprite = Sprite("hero", animation="walk")

See Sprites and Rendering and the Sprite reference for the full API.

Undo and redo

Every operation in the sprite editor supports undo (Cmd+Z) and redo (Cmd+Shift+Z). The undo stack is per-image and persists while the project is open.

Live preview

When your game is running, any changes you make in the sprite editor are applied instantly — paint a pixel and see it appear in the game preview. This makes it easy to iterate on your art while testing gameplay.

Tips

• Use the grid overlay to align tiles precisely on a tile sheet
• Work zoomed in for pixel-level detail, zoom out to see the full image
• Layers are great for separating animation frames on the same sheet
• The sprite editor saves automatically — changes are written to the project file as you work
• On iPad with Apple Pencil, enable Pencil Only Drawing in Preferences to draw with the pencil and pan with your finger