Skip to the guide
Pixx Suite

Build · Sprite sheet & texture atlas maker · Intermediate

Pixxula — Intermediate

Build production sprite sheets in Pixxula: tight atlases, clean edges, names, pivots and tags your engine reads, sliced sheets, and smaller PNGs with the reducer.

Open Pixxula

#What you'll learn

  • Pick a pack mode and spacing for your engine, and keep sheets under the sizes graphics cards can load.
  • Name frames, time them and set pivots so animations line up in the game.
  • Group frames into animations with tags that survive reordering.
  • Re-slice old sheets, merge frames from several sources and send results to other apps.
  • Shrink every PNG you ship with the PNG reducer and check the result up close.

#Before you start

  • Read the Pixxula beginner guide first: adding frames, pack modes and a first export.
  • Know which data format your engine reads (Phaser and PixiJS read TexturePacker JSON; Aseprite JSON works in many engines; Starling reads Sparrow XML).

#How-tos

#How to choose spacing that never bleeds

  1. Set Padding (px) to 1 or 2. Padding is added between frames and around the edge of the sheet.
  2. If your engine scales or filters textures and you still see edge lines, set Extrude to 1. Pixxula repeats each frame's edge pixels outward; the data still points at the frame itself, not the extruded border.
  3. Turn on Trim transparent edges to save space. The data file remembers each frame's original size and offset.
  4. Leave Merge identical frames on: duplicates are stored once and show an =N badge, but every frame still gets its own entry in the data.

#How to get the smallest sheet

  1. Choose Best fit. Pixxula tries several sheet widths and keeps the smallest result.
  2. Tick Allow rotation only if your engine supports rotated frames (TexturePacker-style: stored turned 90° clockwise). Many simple engines don't.
  3. Check the estimate at the bottom left after each change. In Export, Reduce turns the sheet into a true indexed PNG8.
  4. Under Options, set Max width / Max height, and Power-of-two size or Square if your engine needs them. Above 4096 pixels Pixxula warns you, because many graphics cards can't load bigger textures.

#How to set pivots for consistent placement

  1. Select a frame and choose a pivot from the 9 positions, or type exact values (0 to 1 across the original frame; 0.5, 1 is the bottom centre).
  2. Use Pivot → all to copy the pivot to every frame.
  3. Turn on Show pivots on the sheet to check them all at once.
  4. Engines that read pivots from TexturePacker JSON place every frame on that point, so trimmed frames of different sizes still line up.

#How to tag animations

  1. In Animation tags, click +, name the tag and set from, to, the direction and a colour.
  2. Preview it in Animation preview.
  3. Reorder frames with Alt+↑ / Alt+↓: tags follow their frames.
  4. Tags are exported in JSON (hash) (as animations lists of frame names and in meta.frameTags), JSON (array) and Aseprite JSON.

#How to slice an existing sheet

  1. Click Slice a sheet and choose the image.
  2. Set the cell size or rows × columns, with offset and spacing for sheets that have borders, or let Pixxula detect frames separated by transparent gaps.
  3. Check the overlay, then Add frames. Sliced frames join the frames you already have, so you can combine sheets.

#How to reduce PNG files

  1. Switch to PNG reducer. Click Add files (up to 50 PNGs) or drop them.
  2. Pick Auto quality: High, Balanced or Smallest, and tick Dither only for gradients (pixel art usually looks best without).
  3. Click COMPRESS. Pixxula picks the fewest colours that keep the picture looking the same.
  4. Select a file on the left. Its preview fills the right side: Before, Split or After, with zoom (Fit, 1:1, 2× to 16×, the mouse wheel or a pinch).
  5. Change the colours of one file under the preview and Compress again, then Save it or SAVE ALL as a ZIP.

#Workflows

#Animation from Pixxivi to the engine

  1. In Pixxivi, Send to App → The animation to Pixxula. Frames arrive with their timing.
  2. Name the frames, add tags per animation, set pivots and choose Best fit with padding and trimming.
  3. Export → ZIP (PNG + data) in your engine's format, or send it on to Pixxizi to package it per engine.

#One atlas for a whole character set

  1. Drop several characters' frames, or send them in from other apps one after another.
  2. Tag each character's animations so the engine can find them.
  3. Export one sheet; turn on Reduce in the export to make it a smaller PNG8.

#Shrink a folder of art before shipping

Add every PNG of your game to the PNG reducer, use Balanced, zoom into a few at 8× to check, and SAVE ALL.

#Tips and shortcuts

  • Ctrl+Z / Ctrl+Y undo and redo every change; Alt+↑ / Alt+↓ move a frame; Ctrl + scroll zooms the sheet.
  • In the reducer preview: + / − zoom, 0 fit, 1 actual pixels; hold Space or use the middle mouse button to pan.
  • Dropping a GIF adds all its frames, their timing and a tag.
  • Frame durations default to 100 ms; GIF delays carry over.
  • Background can stay transparent or be a colour baked into the PNG.

#Troubleshooting

  • Frames are rotated in the engine. Turn off Allow rotation, or use a format and engine that read the rotated flag.
  • Animations play in the wrong order. Check the frame order and each tag's from / to; frame names sort naturally (walk_2 before walk_10) only when you drop them in.
  • The engine says the sheet is too big. Use Best fit, trimming, a lower Max width, or split the frames over two sheets.
  • A reduced PNG shows banding. Use High quality, tick Dither, or pick more colours for that file.
  • A frame moved after trimming. Your engine must use the trim offsets (spriteSourceSize) and source size from the data.