Skip to the guide
Pixx Suite

Create · Pixel illustration & sprite animation · Beginner

Pixxivi — getting started and how-tos

A full pixel-art studio in your browser: draw with pixel-perfect tools, animate with onion skin and tags, add lighting, and export GIFs, sprite sheets and Aseprite files.

Open Pixxivi

#What Pixxivi is for

Pixxivi is the pixel-art editor and sprite animator of the Pixx Suite. You draw sprites, tiles and scenes pixel by pixel, build animations frame by frame, and export them for your game or to share. It has layers, onion skin, animation tags, tilemaps, palettes, lighting and effect generators, and it works with a mouse, a pen or your fingers on a tablet or phone.

Pixxivi with an animated flame: tools on the left, the canvas in the middle, colours on the right and the timeline at the bottom
Pixxivi with an animated flame: tools on the left, the canvas in the middle, colours on the right and the timeline at the bottom

#Your first animation in 5 minutes

  1. Open Pixxivi. If the welcome tour appears, follow it or click Skip.
  2. Click + (New sprite) at the top, choose a preset such as 32×32, set Frames to 4 and click Create.
  3. Pick the pencil (B) and a colour from the Palette on the right, and draw on frame 1.
  4. In the timeline at the bottom, click + frame to add a frame that copies the current one, then change the drawing a little. Repeat for each frame.
  5. Turn on onion in the timeline to see the neighbouring frames faintly while you draw.
  6. Press Enter (or the play button) to watch the animation.
  7. Click Export, choose GIF, and save it.

#How-tos

#How to start a new sprite

  1. Click + at the top or press Ctrl+N.
  2. Type a Width and Height (each from 1 to 480 pixels), or click a preset such as 16×16, 64×64 or 320×180. lock ratio keeps the shape when you change one side.
  3. Choose a Background (transparent, white, black or primary colour), the number of Frames, the FPS and a starting Palette.
  4. Click Create. You can also choose Start from a template… to begin from an animation template.
The New sprite window
The New sprite window

#How to draw and erase

  • Pencil (B) draws single pixels. pixel-perfect in the bar above the canvas removes the extra corner pixels on curved strokes.
  • Eraser (E), shading (R, lightens or darkens with palette colours), fill (G) and picker (I, or hold Alt).
  • Line, rectangle and ellipse tools draw shapes; hold Shift to keep them straight or round, Alt to draw from the centre.
  • Set the brush size, its shape and opacity in the bar at the top. dither paints a pattern, alpha lock paints only on existing pixels.
  • Undo with Ctrl+Z, redo with Ctrl+Y.

#How to select, move and transform

  1. Use the rectangle, ellipse, lasso (Q) or magic wand (W) selection tools.
  2. Switch to the move tool (V) to drag the selection, use its handles to scale, or rotate and flip it from the Edit menu.
  3. Rotation keeps pixels crisp (RotSprite), so rotated pixel art still looks clean.

#How to use layers

  1. The Layers panel is on the left of the timeline. Click + to add a layer.
  2. Click the eye to hide a layer, the lock to protect it, and drag layers to reorder them.
  3. Use ⋯ on a layer for its properties: opacity, blend mode, colour label, or making it a reference or static layer.
  4. Press Ctrl+G to group layers, and Ctrl+E to merge a layer down.

#How to animate with the timeline

  • Each column in the timeline is a frame. Click + frame to add a copy of the current frame; use the arrow next to it for an empty or linked frame.
  • Click a frame number to select it; drag to reorder; set its duration in the ms box.
  • onion shows the frames before and after the current one; the arrow next to it sets how many and how strong.
  • Choose loop: all frames or a tag in the loop menu, and the play speed (1×) next to it.

#How to organise animations with tags

  1. Select a range of frames in the timeline.
  2. Click the tag button (or press Alt+T) and name the tag, for example walk or attack.
  3. Choose the direction: forward, reverse or ping-pong.
  4. Tags are kept when you export sprite sheets and Aseprite files, so your game knows where each animation starts.

#How to use palettes

  1. In the Palette panel, use Load preset palette… to load a classic palette (PICO-8, DawnBringer, Endesga and many more).
  2. Click a swatch to paint with it; click + to add your own colour.
  3. ⋯ in the Palette panel imports and exports palettes, makes a palette from the sprite's colours, and generates colour ramps.

#How to import a GIF, picture or sprite sheet

Open the Import menu at the top:

  • Import GIF / animation… brings in every frame of a GIF, APNG or WebP.
  • Import Image & Convert to Pixel Art… turns a photo into pixel art at the size and colours you choose.
  • Import sprite sheet… cuts a sheet into frames (it guesses the grid for you).
  • Import images as frames (new layer)…, Import Aseprite file (.aseprite)…, Import reference image…, palettes, templates and an audio track for timing.
  • From your Pixx library… opens something you sent from another Pixx app.
The Import menu
The Import menu

#How to add generated effects

  1. Open Effects → Generators & FX… (or press Shift+N).
  2. Choose an effect: Noise texture, Pattern fill, Starfield, Flame, Spark burst, Explosion, Pulse rings, Rain / snow, Water surface or Palette cycle.
  3. Adjust its sliders and colours, then click Generate. The result is ordinary pixels on a new layer that you can edit like any drawing. Looping effects loop seamlessly.
The Generators & FX window
The Generators & FX window

#How to light your pixel art

  1. Choose the light tool (the sun icon in the toolbox, or Shift+L).
  2. Click the canvas to place a light; drag it to move it and Alt-drag to change its radius.
  3. Set each light's colour, strength and glow, and make it flicker or pulse over the animation.
  4. Lighting is a live preview. When you like it, Bake it into real pixels.

#How to find any command

Press Ctrl+K (or /) to open the command palette, type what you want ("flip", "onion", "export") and press Enter. Press ? to see every keyboard shortcut.

#Exporting and sharing

Click Export (or press Ctrl+Shift+E) and choose a tab:

  • Image — a PNG of the current frame.
  • GIF and APNG — animated images.
  • Sprite sheet — all frames in one image: grid, one row, one column, row per tag or packed, with scale, padding, trim and JSON data (Aseprite-compatible) for game engines.
  • Frames ZIP — every frame as its own PNG.
  • Project — a .pxvi file that keeps everything (layers, tags, lights) for later editing.
  • Aseprite — an .aseprite file.
The Export window with sprite sheet options
The Export window with sprite sheet options

Also:

  • The Send to App button (paper plane) sends your animation, a frame, a sprite sheet or the palette to another Pixx app, such as Pixxula for atlases or Pixxifo for GIF loops.
  • The Library button opens things saved in your Pixx library; the Cloud button shows sync status and your projects.

#Tips and shortcuts

  • Tools: B pencil, E eraser, R shading, G fill, I picker, Q lasso, W magic wand, V move, T tile stamp, H hand, Z zoom.
  • Ctrl+Z / Ctrl+Y undo and redo, Ctrl+S saves, Ctrl+Shift+S downloads the project, Enter plays.
  • Hold Space and drag to pan; scroll to zoom.
  • On a tablet: draw with the pen, pan and pinch-zoom with two fingers, two-finger tap to undo, three-finger tap to redo, long-press for the colour picker.
  • Mirror drawing (Shift+X / Shift+Y) draws symmetric sprites.
  • On iPhone and iPad, add Pixxivi to your Home Screen for a full-screen app that keeps your projects safely.

#Troubleshooting

  • If you can't draw, check that the current layer isn't locked or hidden, and that alpha lock is off.
  • If an exported GIF looks different, remember lighting is a preview until you Bake it, and reference layers are never exported.
  • If a project is missing on another device, sign in on both devices; synced projects appear after a moment.
  • If the app feels slow on a huge animation, lower the onion skin count or hide layers you aren't working on.