Skip to the guide
Pixx Suite

Create · Game UI & icon designer · Advanced

Pixxico — Advanced

Pixxico in depth: the export files and atlas JSON, Godot StyleBox and CSS border-image output, button states, nine-slice rules, SVG export and the UI-frame hand-off.

Open Pixxico

#What you'll learn

  • What the export ZIP contains and how files are named at each scale.
  • How to read the atlas JSON, the Godot StyleBoxTexture files and the CSS snippets.
  • Exactly how button states are made, so you can match them in code.
  • The nine-slice rules Pixxico follows, so engine results match the preview.
  • When SVG export works, and what a UI frame carries to other apps.

#Before you start

  • Work through Pixxico — Intermediate: generators, themes, layers, nine-slice and text.
  • Know how your game draws UI: an atlas with a loader, Godot Control nodes, web CSS, or a packager like Pixxizi.

#How-tos

#How to choose what goes in the export

  1. Click Export (Ctrl+S) to open Export the kit.
  2. Tick the Scale presets you need (1×, 2×, 3×, 4×). Every file is made once per scale; files above 1× get an @2x-style suffix.
  3. Tick the Files:
    • One PNG per asset: png/<asset>.png, plus png/<asset>_hover.png, _pressed and _disabled for buttons.
    • UI-kit atlas PNG + JSON: <kit>.png and <kit>.json with every image packed together.
    • Godot StyleBoxTexture JSON: godot/<asset>.json for each nine-slice asset.
    • CSS border-image: <kit>.css with one class per nine-slice asset.
    • SVG where the art is vector content: svg/<asset>.svg for assets that qualify (see below).
  4. Click Download ZIP, or This asset as PNG for just the selected asset.

#How to read the atlas JSON

The atlas JSON has a meta block and a frames map.

  1. meta holds app, version, the kit name, the image file name, the atlas size (w, h), the scale and the full theme (all six colour tokens).
  2. frames is keyed by image name (for example play_button, play_button_hover). Each entry has:
    • frame: x, y, w, h in the atlas.
    • asset and kind: the asset's name and kind (button, panel, bar, frame, tooltip, cursor, icon).
    • state: normal, hover, pressed or disabled.
    • nine: the slice insets l, t, r, b (already multiplied by the scale), or null.
    • nineMode: stretch or tile (or null).
  3. Images are packed with 1 pixel of padding. If two images would get the same name, the second gets a _2 suffix.

#How to use the Godot and CSS files

  1. Godot: each godot/<asset>.json describes a StyleBoxTexture: texture (pointing at res://ui/<asset>.png), region_rect, the four texture_margin_* values, axis_stretch_horizontal / axis_stretch_vertical (stretch or tile) and draw_center: true. Copy the PNG to res://ui/, create a StyleBoxTexture in Godot and enter these values (or set them from a small import script).
  2. CSS: each class sets border-style, border-width and a border-image with the slice values and fill, using stretch (or round for tiled assets), plus image-rendering: pixelated. Point the URLs at your png/ folder and add the class to a button or panel.

#How to match button states in code

Pixxico draws only the normal state; the other three are derived the same way every time:

  1. hover: the normal image, 14% lighter.
  2. pressed: moved down 1 pixel and 14% darker.
  3. disabled: mostly desaturated (85%) and 18% darker.

If your engine tints buttons itself, export only the normal state and apply the same adjustments in code so hand-drawn and engine buttons match.

#How to get nine-slice results that match the preview

  1. Corners are copied pixel-exact and never scale.
  2. Edges and the centre stretch or tile with nearest-neighbour scaling (no blur), following the asset's Stretch / Tile choice.
  3. If a target size is smaller than the corners, the asset is simply scaled instead of sliced. Keep minimum UI sizes larger than left + right and top + bottom insets.
  4. Make sure your engine uses the same insets (from the JSON) and turns off texture filtering, and you'll get exactly what HUD shows.

#How to export clean SVG

  1. Tick SVG where the art is vector content.
  2. An image qualifies only if every pixel is fully opaque or fully transparent, and its pixels merge into a small number of rectangles (at most a third of its visible pixels, or six). Flat cursors, simple icons and plain bars usually qualify; shaded panels don't.
  3. The export window tells you how many images qualified. The others are still in the ZIP as PNG.

#How to understand a UI frame hand-off

When you send This frame (nine-slice UI frame):

  1. The frame image is the asset in the state you're previewing (normal unless you picked another).
  2. The slice insets become both slice and padding (the content area); centre and edges use the asset's Stretch / Tile mode.
  3. When a UI frame comes into Pixxico (from the library or another app), it becomes a panel asset with the same guides, in Tile mode if either part tiles.

#Workflows

#UI for a game built with Pixxizi

  1. Finish the kit and send each nine-slice asset to Pixxizi as a UI frame, or send the button states as a sheet.
  2. Pixxizi exports them per engine with their margins, so you don't write StyleBox or slicing code yourself.

#Retina-ready web UI

  1. Export at 1× and 2× with One PNG per asset and CSS border-image.
  2. Use the 1× CSS for normal screens and the @2x CSS in a high-density media query.
  3. Keep image-rendering: pixelated so the art stays sharp.

#Hand-painted kit, generated foundations

  1. Generate every asset from the theme and tune the generators.
  2. Lock in the shapes by painting a highlight layer on each (it becomes edited).
  3. Change the theme later only by Recolour… per layer, or redraw selected assets from the generator and repaint their highlight layer.

#Tips and shortcuts

  • Cloud saves the whole kit: kit.json plus one PNG per asset layer. Your kit also autosaves on this device.
  • Redraw from the generator throws away hand edits on that asset; duplicate the asset first if you might want them back.
  • The # button toggles the pixel grid; 0 fits the canvas; hold Space to pan.
  • A received image becomes a hand-edited asset, so a later theme change never redraws over it.
  • Bars use the Fill % only for the preview art; in your game, crop or scale the fill yourself for live values.

#Troubleshooting

  • If Godot draws the panel blurry, turn off filtering on the texture import (Filter: Nearest) and check the margins match the JSON.
  • If the CSS border looks doubled, remove other borders on the element; the snippet sets border-style and border-width itself.
  • If no SVG files appear, the art has soft edges or too many shapes. Use PNG for those assets.
  • If a UI frame looks wrong in another app, check the guides in Pixxico first: the other app uses the same slices.
  • If two exported images have unexpected _2 names, two assets share a name. Rename one with ⋯ → Rename….