Spritix Export Formats: Sprite Sheet, GIF, Atlas JSON, and PNG Frames

Spritix can download the same animation in four forms. A Sprite Sheet puts all frames in one PNG, a GIF plays a quick preview, Atlas JSON records frame positions and timing, and PNG Frames ZIP keeps every frame as a separate image. The right choice depends on how your game or editor loads animation files.

The four formats at a glance

Why a Sprite Sheet cannot play by itself

The W3C PNG specification defines a lossless image format with color and optional transparency. In a Spritix Sprite Sheet, the frames sit in separate rectangles inside one static PNG. The image itself does not say that frame_006 follows frame_005, how long either frame should appear, or whether the sheet contains Walk or Run.

A Sprite Sheet is also different from APNG. APNG stores animation control and frame data inside the PNG, while a Spritix Sprite Sheet is a regular static PNG. Its frame positions and timing come from the grid settings or Atlas JSON. See the W3C APNG structure.

Current selectable frame counts are 4, 16, 25, 49, and 64. They form 2×2, 4×4, 5×5, 7×7, and 8×8 square grids. Every exported cell has the same resolved width and height.

Atlas JSON stores frame positions and timing

The current Atlas format uses version 1. Every frame entry includes a zero-padded filename, its rectangle in the Sprite Sheet, and its duration in milliseconds. The meta block records the action, companion image, full texture size, frame size, and effective frames per second.

{
  "frames": [
    {
      "filename": "frame_000.png",
      "frame": { "x": 0, "y": 0, "w": 256, "h": 256 },
      "durationMs": 40
    },
    {
      "filename": "frame_001.png",
      "frame": { "x": 256, "y": 0, "w": 256, "h": 256 },
      "durationMs": 40
    }
  ],
  "meta": {
    "app": "Spritix",
    "version": 1,
    "action": "walk",
    "image": "character-walk.png",
    "size": { "w": 1280, "h": 1280 },
    "frameWidth": 256,
    "frameHeight": 256,
    "fps": 25
  }
}

This shortened example comes from a 25-frame export with 256-pixel cells at 1× scale; the downloaded file contains all 25 entries. Coordinates run left to right, then top to bottom.

Atlas JSON is not a universal format. The PixiJS Spritesheet API, for example, also uses frame rectangles and animation lists, but it expects its own JSON shape. The Sprite Sheet PNG imports directly into Godot, Unity, Phaser, and PixiJS by slicing its equal-size grid. Atlas JSON uses the Spritix shape above, so code that reads it may need a small conversion step.

GIF is for previews, not source artwork

GIF89a stores multiple images and a delay for each graphic block in hundredths of a second. It uses one transparent palette index instead of PNG-style alpha for every pixel, and each active color table is limited to 256 entries. These details come from the original GIF89a specification.

Use GIF to check motion quickly in a browser, issue, or message. Do not expect its edge pixels, colors, or transparency to match the PNG files exactly. If another tool depends on a precise loop count, inspect the GIF after export instead of assuming every player handles it the same way.

PNG Frames ZIP is useful for frame-by-frame editing

Frames ZIP contains frame_000.png, frame_001.png, and so on in the same order used by the Sprite Sheet and GIF. It is useful when an editor or importer needs separate images. The ZIP does not include durationMs, so keep the Atlas JSON with it if your project needs exact timing.

Which format should you use?

• Choose Sprite Sheet + Atlas JSON when your game loads one texture and needs exact frame positions and timing.
• Choose PNG Frames ZIP + Atlas JSON when you want to edit or repack individual frames without losing their order and timing.
• Choose GIF for review and sharing, not as the source for transparent game artwork.
• Keep files from the same export together. If you change the frame count, frame size, crop range, background processing, speed, or start frame, download the related files again.

When checking the artwork, open the PNG files. When your code needs frame positions and timing, read the Atlas JSON or use importer settings you have already tested.