Skip to the guide
Pixx Suite

Animate · Spell & pixel VFX animator · Advanced

Pixxani — Advanced

Power use of Pixxani: masks, sprite layers and references, surface and transform passes, layer-by-layer sheets, icons and the sheet JSON.

Open Pixxani

#What you'll learn

  • Combine layers precisely with masks, blend targets and "mask only" layers.
  • Remix an existing sprite sheet as a layer, and trace or time-match a reference.
  • Shape the look of every layer with the surface pass (texture, volume, ragged edges, dark rim) and transforms (skew, perspective, distort).
  • Export one aligned sheet per layer, icons from an animation, and read the sheet JSON in your engine.
  • Keep sheets inside a game's texture budget.

#Before you start

  • Work through Pixxani — Intermediate first: keyframes, motion paths, intros and outros, loops and colour control.
  • For the engine sections, know how your engine loads a sprite sheet and its frame size.

#How-tos

#How to use masks

  1. In Layers, pick the layer you want to shape, choose another layer as its mask, and show it inside the mask or outside the mask.
  2. To use a shape only as a cut-out, mark that layer this layer is a mask only (not drawn).
  3. Combine with a blend mode: a soft-light glow clipped to an orb recolours just the orb, not what's behind it.
  4. Masks still apply when you export layers as separate sheets.

#How to remix or trace a sprite sheet

  1. To remix a sheet, use ⬒ import sheet as base in Layers and pick a PNG. It becomes the bottom layer and the canvas matches its cell size. Keep its own colours or choose recolour to the layer palette.
  2. To trace or copy timing instead, open the Ref tab and import a PNG sheet. Show it under or over the canvas.
  3. Click match canvas to copy the reference's cell size, frame count and FPS, then build your effect over it.

#How to shape layers with the surface pass

Open Layers → Surface for the selected layer:

  • texture inside shapes: billow, flow, swirl, facet or grain (auto picks one per structure and element).
  • volume lights the layer like a height map for cel-shaded form.
  • ragged edges / dissolve cuts soft edges into wisps and specks. Key it up over time to dissolve a layer away.
  • dark rim outlines the layer in its own colour ramp.
  • lit: whether the Light tab lights this layer. Turn it off for glows and beams.

The surface pass follows detail: it is off at about 4 colours and full at 256.

#How to transform and distort

  1. In Layers → Transform, use skew, perspective (top/bottom and left/right keystone), or lay flat on the ground for effects on the floor.
  2. Add a distort: wave, flag, ripple, twirl, bulge, pinch, noise or heat shimmer, each with amount, frequency and an animated speed. Most of these can be keyframed.
  3. Use Rotate to turn the whole layer (fixed or spinning over time) and each element (fixed or random). Whole turns loop seamlessly; fractions jump at the loop point.
  4. mirror horizontally (and its mirror axis offset) makes symmetric effects without building both halves.

#How to give missiles a tail

  1. Pick a missile-type structure (projectile, missile, meteor, barrage, homing, lance, lob, motion trail and others).
  2. In Layers, set tail element to a different element or a mix, for example a frost bolt that trails sparks. "same as head" is the default.
  3. Add Ground collision in Motion so particles bounce, slide, splash or stop at the ground guide.

#How to export one sheet per layer

  1. Open the Export tab and find Layers as separate sheets.
  2. Choose the options: same colours as the full sprite, also include the combined sheet, include hidden layers, and trimming each sheet.
  3. Download the ZIP. Every layer is rendered on its own at the same frame size and timing, so the sheets stack back into the full effect; layers.json lists them in order with their blend modes. Composite them in your engine to tint or time layers separately.

#How to make an icon from an animation

  1. In Export → Icon, choose the frame: the current frame or the hit frame (else 40%).
  2. Pick a size, padding and a backdrop: none (transparent), orb (family tint), spellbook frame (gold) or dark tile, plus an optional dark outline.
  3. Download icon PNG, or make an Animated icon sheet with every frame as an icon cell.

#How to read the sheet JSON

Export Sheet (or Download sheet PNG + JSON in the Export tab, with columns and scale) writes <name>_sheet_<cols>x<rows>.png and <name>_sheet.json:

FieldMeaning
cols, rowsthe grid of the sheet
framesnumber of frames (read left to right, top to bottom)
cw, chone cell's width and height in pixels (after scale)
fpsplayback speed
hit / hitsthe first hit frame, and all of them when there are several
loopthe playback direction: forward, reverse or pingpong
W, Hthe full sheet size
sheet, generatora key name for the sheet, and "Pixxani"

Fire your damage, sound or screen shake on the hit frame.

#Workflows

#A layered effect for an engine

  1. Build the effect with separate layers for the core, the particles and the glow.
  2. Export Layers as separate sheets with same colours as the full sprite on.
  3. In the engine, draw the glow layer with additive blending and the others normally, using layers.json for order.

#Keep sheets inside the texture budget

  1. In Export, watch the budget meter: memory against 16 MB and the longest side against 4096 px (2048 is ideal).
  2. If you're over, use "half the frames at half the fps" (same duration, half the sheet), lower the scale, or use more columns to make the sheet squarer.
  3. Pack several effects into one atlas with Pixxula, then export for your engine with Pixxizi.

#Grow a whole set from one effect

  1. Open Blend, pick ingredient elements and structures as chips (or none, to be surprised), and generate 12 compositions.
  2. 🧬 breed your favourite to make it the parent of the next 12, then save the keepers with My Presets.
  3. ⇪ render all (ZIP) in My Presets re-renders every saved preset as a sheet, a GIF and JSON in one go.

#Tips and shortcuts

  • H (or right-click a frame in the strip) marks a hit frame; it is written to the sheet JSON and frames data.
  • Detail and colours are linked by default; unlink them in the Color tab to set each separately.
  • Palette lock in the Canvas tab gives every new layer the same family's colours; a button applies it to existing layers too.
  • Element colours let particles use a different palette from their structure.
  • A frames ZIP (Download frames ZIP (PNG per frame)) is the safest hand-off to tools that want single images.

#Troubleshooting

  • Layer sheets don't line up when stacked. Don't trim them, or apply the same trim offset to every layer; they all share one frame size.
  • A clipped layer disappears. Its mask layer may be hidden or empty on that frame; check the mask layer's own animation.
  • The budget meter says "still over budget". Halve the frames, lower the scale, or split the effect across two sheets.
  • Rotation jumps at the loop point. Use whole turns per loop.
  • The GIF looks harsher than the preview. GIFs only have hard transparency; use the PNG sheet for soft glows.