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.

Opening the sprite editor

Choose an image in Files: it opens straight in the sprite editor. To make a new one, choose File › New Asset… and pick Image.

On a narrow iPad window, the canvas takes the pane’s width and its panels are the tray’s tools at the window’s foot: Tools, Colour, Layers and Frames. A tilemap’s are Tools and Tiles.

Drawing tools

The tools run down the edge of the canvas, each with its key:

Choose a colour and draw on the canvas. Zoom in with a pinch or by scrolling for pixel-precise work; Zoom to Fit (Cmd+0) shows the whole image. Symmetry, in the editor’s bar, mirrors what you draw horizontally, vertically, or both.

Colours

The side column holds the colour you draw with and the background colour (X swaps them), the colour as hex, the palette, and the colours you used last. Choose another palette in the ⋯ menu.

Selection tools

With a selection, the canvas’s menu (right-click, or touch and hold) can:

On the iPad, the edit buttons over the canvas undo, redo, cut, copy and paste.

Layers

The layers sit under the palette. Add Layer adds one; each layer has a Visible and a Locked switch. A layer’s menu renames it, moves it up or down, sets its Opacity, Merge Down combines it with the one below, Flatten makes one layer of them all, and Delete Layer removes it.

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

Resize, flip and rotate

Resize Image… changes the image’s size:

The canvas’s menu also has Trim to Content, Flip Horizontal, Flip Vertical, and rotations by 90° and 180°.

The grid (Grid in the bar) helps align tiles on a sheet; its size, its major lines and its colour are in the ⋯ menu.

Animation

The foot of the editor holds the image’s animations, for frame-by-frame sprite animations.

Creating animations

  1. Choose New Animation and give it a name (e.g., “walk”, “idle”, “attack”)
  2. Select tiles on your sprite sheet with the Tile Select tool (T), then choose Add to Animation
  3. Or choose Add Frame to add the next tile in reading order

Whole Sheet shows the whole image again; an animation’s menu renames or deletes it.

Editing frames

Onion skin

Turn on Onion Skin to see a ghost of the previous frame while you edit. This helps keep frames consistent.

Isolate frame

Turn on Isolate Frame to hide the tiles around the frame you edit, so you can focus on it.

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.

Used in Code in the pane’s bar says how many lines of your scripts name this image; choose one to go to it. In the code, Cmd+Click an image’s name to come back here, on the animation or the tile the call names.

Exporting a sprite

Export… at the end of the ⋯ menu, an animation’s Export Animation…, or File › Export Sprite… (Option+Cmd+E) opens Export Sprite. Choose what to make:

Choose the Animation and, for Frame, the frame. Scale makes the file 1×, 2×, 4× or 8× as large, each pixel a sharp square. The preview is the file, with its name and size under it: hero-walk@4x.gif, hero-walk-2.png for frame 2, hero-walk-strip.png, hero.png for the sheet.

Save… saves the file where you choose; on iPad, Share… opens the share sheet (Save to Files, Save Image, AirDrop); on the web, Download downloads it. Copy puts a PNG on the clipboard. On Mac and iPad, drag the preview to drop the file where you want it.

A GIF has no half-transparent pixels: a pixel at least half opaque is drawn solid, the rest is clear. A GIF frame lasts a whole number of hundredths of a second, so 8 fps plays at 0.13 s a frame, and nothing plays faster than 50 fps.

Undo and redo

Every change in the sprite editor can be undone (Cmd+Z) and redone (Cmd+Shift+Z) while the project is open.

Seeing your art in the game

Your game reads its images each time it starts: after you paint, run the game again to see the new pixels in the game preview. A running game keeps the images it started with.

Tips