Aseprite JSON to PixiJS — Tags Become Animations

Load an Aseprite JSON into PixiJS and you get textures but no animations: its Spritesheet reads the frames and leaves meta.frameTags and each frame's duration unused. Drop the JSON with its PNG here and re-export for PixiJS 8: the tags become an animations map in playback order, slice pivots become anchors, and the milliseconds are kept for AnimatedSprite.

PixiJS 8 loads an Aseprite JSON as a spritesheet, but it reads only the frames: meta.frameTags and each frame's duration are ignored, so sheet.animations stays empty. Drop the JSON with its PNG into Nerulio and export PixiJS 8: the file gets an animations map (one entry per tag, frames in playback order), an anchor per frame, and the milliseconds in meta.nerulio.animations, which you pass to AnimatedSprite as {texture, time}. Verified with PixiJS 8.21.

Drop frame images, a GIF or an .aseprite file to pack

Open the empty Studio

Runs in your browser. Files are not uploaded.

Studio Pack & Export: CC0 ninja frames packed on one page and the list of all 18 export formats, each with its own Export button — The real Studio with a CC0 asset (OpenGameArt).

Exports to

PixiJS 8Verified· PixiJS 8.21
Godot 4Verified· Godot 4.7.2
Unity 6Verified· Unity 6000.5.3f1
Phaser 3 / 4Verified· Phaser 3.90 + 4.2
Aseprite JSONVerified· Phaser load.aseprite · PixiJS 8.21
.asepriteVerified· Aseprite 1.3.18
Spine / libGDXVerified· spine-canvas 4.2
Starling / Sparrow XMLVerified· Phaser 4.2
LÖVEVerified· LÖVE 11.5
DefoldBuilt· Defold bob.jar 1.13.1
GameMakerUNVERIFIED
CSS spritesVerified· Chromium
GIF / APNGDecoded· Pillow

What PixiJS reads from a spritesheet JSON

PixiJS's Spritesheet takes the TexturePacker layout: frames (each with frame, spriteSourceSize, sourceSize and an optional anchor), an optional animations object that maps a name to a list of frame names, and meta with the image and scale. The PixiJS docs say default anchors and animation groups are only supported in TexturePacker-style data; Aseprite's frameTags are not part of that format, and the verification runs confirm that PixiJS builds no animations from them.

AnimatedSprite plays a list of textures at one speed, or a list of {texture, time} objects where time is in milliseconds. It has loop, updateAnchor and callbacks such as onComplete, but no ping-pong and no repeat count, so the direction has to be written into the frame order.

Nerulio's PixiJS 8 export does both. animations[tag] lists the frame keys in the order one cycle plays (reverse and ping-pong written out), and meta.nerulio.animations[tag] holds fps, loop, direction and durationsMs, one number per step, ready to pair with the textures.

Spritesheet: The PixiJS class that turns the JSON into textures and animations.
FrameObject: {texture, time}: one step of an AnimatedSprite, time in milliseconds.
anchor: A frame texture's default anchor, 0–1 of its size; Nerulio writes the frame pivot.
related_multi_packs: The other JSON pages that load together with this one.

Example: a ping-pong walk tag from Aseprite JSON to PixiJS

Aseprite JSON  frames "4" … "9", "duration": 100 each
               { "name": "walk", "from": 4, "to": 9, "direction": "pingpong" }

PixiJS 8 JSON  "animations": { "walk": ["4","5","6","7","8","9","8","7","6","5"] }
               meta.nerulio.animations.walk.durationsMs = [100, 100, … 10 values]
               one cycle: 6 + 4 = 10 steps × 100 ms = 1.0 s

const { durationsMs, loop } = sheet.data.meta.nerulio.animations.walk;
const walk = new AnimatedSprite(sheet.animations.walk.map((texture, i) => ({ texture, time: durationsMs[i] })));
walk.loop = loop; walk.play();

Frame keys come from the frame names in your JSON: with Aseprite's default names such as hero 4.aseprite they become hero_4.

What maps to what

In the exported JSON	PixiJS API	What to do
`animations[tag]`	`sheet.animations[tag]`: an array of textures	Map it to `{texture, time}` objects
`meta.nerulio.animations[tag].durationsMs`	`FrameObject.time`	One value per step, same order
`meta.nerulio.animations[tag].loop`	`AnimatedSprite.loop`	Set it; a finite repeat count has no PixiJS equivalent
`frames[key].anchor` (the pivot)	The texture's default anchor	Set `updateAnchor = true` when pivots differ per frame
`meta.scale`	`sheet.resolution`	An @2x sheet draws at the @1x size
`meta.related_multi_packs`	Loaded with the first page (`linkedSheets`)	Textures of other pages come from the cache

What it does

Reads Aseprite JSON in hash or array layout with its frameTags (direction, repeat) and per-frame durations, together with the sheet PNG.
An animations map with one entry per tag, frame keys in playback order, so reverse and ping-pong play right with no extra code.
An anchor per frame from its pivot: the one you place with P, else the bottom centre (meta.slices in the JSON are not read).
meta.nerulio.animations keeps fps, loop, direction and durationsMs for every tag; the README shows how to build an AnimatedSprite with those times.
Several pages are linked with related_multi_packs and load together; scale variants get their own meta.scale.

How to do it

Drop the Aseprite JSON and its PNG together.
Check the tags on the Timeline and move pivots with P where the anchors should differ.
Open Pack & Export and choose PixiJS 8; rotation is allowed for this target.
Export, load the JSON with Assets.load and build an AnimatedSprite from sheet.animations with the times in meta.nerulio.

Files you get

File	What it is for
`hero.json`	PixiJS 8 spritesheet: `frames` with `anchor`, `animations`, `meta.nerulio.animations`; several pages give `hero-0.json`, `hero-1.json` … linked by `related_multi_packs`.
`hero.png`	The packed page (rotation is allowed for this target).
`README-PIXI.md`	The loading and AnimatedSprite code for this bundle.

Play it in PixiJS 8

Put hero.json and hero.png next to each other where your app serves assets.
For pixel art, before loading: TextureSource.defaultOptions.scaleMode = 'nearest'.
const sheet = await Assets.load('hero.json') loads the page(s) and builds sheet.textures and sheet.animations.
Build each animation from sheet.animations[tag] and durationsMs as in the example, set loop, then play() and add it to the stage.
If the pivot moves between frames, set updateAnchor = true on the AnimatedSprite so each frame uses its own anchor.

Check the result

Object.keys(sheet.animations) lists every Aseprite tag name.
A 10-step ping-pong walk at 100 ms per step loops once per second; onLoop fires at that rhythm.
Zoom the canvas: with nearest scaling the pixel edges stay square.

Aseprite JSON fields and their PixiJS 8 counterparts

Aseprite JSON	PixiJS 8 spritesheet JSON	What PixiJS does with it
frames[…].frame	frames[key].frame on the new page	texture region
spriteSourceSize, sourceSize	the same fields	trim offset respected
frames[…].duration	meta.nerulio.animations[tag].durationsMs	nothing on its own; pass as AnimatedSprite times
meta.frameTags from, to, direction	animations[tag] in playback order	sheet.animations[tag] gives the textures
frameTags repeat	meta.nerulio.animations[tag].loop	set loop on the sprite yourself
meta.slices pivot (not read; pivot set with P, default bottom centre)	frames[key].anchor	the texture's default anchor
meta.image, one page	meta.image per page plus related_multi_packs	the other pages load with the first

Troubleshooting

Symptom	Likely cause	How to check	Fix
`sheet.animations` is empty	The original Aseprite JSON was loaded instead of the exported one; PixiJS ignores `frameTags`	Check which JSON `Assets.load` receives	Load Nerulio's PixiJS 8 export
Every frame plays at the same speed	The textures were passed without times, so `animationSpeed` applies	Look at the AnimatedSprite constructor call	Pass `{texture, time}` objects built from `durationsMs`
The sprite jumps or slides between frames	Pivots differ per frame but the sprite keeps the first frame's anchor	Compare `frames[key].anchor` values	Set `updateAnchor = true`, or give the tag one pivot in Nerulio (P)
Anchors are all bottom centre	The Aseprite JSON's `meta.slices` are not read on import, so frames start with the default pivot	Look at `anchor` in the export	Place the pivot with P in Nerulio, or import the `.aseprite` file itself, whose pivot slice is read
The @2x sheet draws at double size	`meta.scale` says 1, so PixiJS treats it as resolution 1	`sheet.resolution`	Export the @2x variant from Nerulio; it writes `meta.scale` "2"

Other ways to do it

Option	When it is the better choice
Write your own loader for `frameTags` and `duration`	You must keep the Aseprite JSON unchanged in your pipeline; read `meta.frameTags` and the durations and build FrameObjects yourself.
Export from the .aseprite file	You have the `.aseprite` source: its slices (pivot, boxes) are read too, which an Aseprite JSON import does not do.
A PixiJS spritesheet from loose frames	Your frames are separate PNGs rather than an Aseprite export.

Engine exports and how each was checked

"Verified" means the exported files were loaded by the real engine or tool on real CC0 assets and the result was compared with the source. Anything that was not loaded is labelled as such.

Target	Files	Check
Godot 4	`.tres SpriteFrames · .tscn AnimatedSprite2D · .png.import`	Verified Godot 4.7.2Loaded by Godot; every animation frame drawn and compared with the source file. The scene uses Nearest filtering; rotation is never used.
Unity 6	`.unity.json · Editor/NerulioSpriteImporter.cs · AnimationClip`	Verified Unity 6000.5.3f1Batch mode: sprite rects, pivots, pixels, clip keys and durations checked.
Phaser 3 / 4	`atlas JSON (multiatlas) · .anims.json`	Verified Phaser 3.90 + 4.2Frames and animations drawn by both versions.
PixiJS 8	`spritesheet JSON · animations · anchor · meta.scale`	Verified PixiJS 8.21Rotated and multi-page atlases included.
Aseprite JSON	`hash / array · frameTags · slices`	Verified Phaser load.aseprite · PixiJS 8.21Tags keep their direction and repeat count.
.aseprite	`layers · tags · durations · slices`	Verified Aseprite 1.3.18Opened and rendered by the Aseprite command line.
Spine / libGDX	`.atlas`	Verified spine-canvas 4.2Every region drawn by the Spine runtime, rotated and trimmed; libGDX itself was not run.
Starling / Sparrow XML	`XML per page`	Verified Phaser 4.2Phaser 3.90 draws trimmed XML frames wrongly (its own bug); the "Sparrow XML (Phaser 3)" preset turns trim off and passes in 3.90 and 4.2.
LÖVE	`Lua quads · nerulio_atlas.lua · main.lua`	Verified LÖVE 11.5Every frame drawn and every animation stepped through the shipped helper.
Defold	`.atlas · .tilesource`	Built Defold bob.jar 1.13.1Built by Defold's command-line builder; the built texture's UVs were read back.
GameMaker	`spr_<name>_stripN.png · gamemaker.json`	UNVERIFIEDNot loaded in GameMaker (no headless GameMaker). The strips are cut the way its strip importer cuts them.
CSS sprites	`.css · preview .html`	Verified ChromiumEvery class drawn from the shipped stylesheet.
GIF / APNG	`one file per animation`	Decoded PillowEvery frame and delay decoded again after export; APNG is exact.

Evidence

Exports: 49 runs in the real engines on real CC0 assets, 47 pass — the 2 failures are Phaser 3.90's trimmed-XML bug, which the Phaser 3 preset avoids. Packer head-to-head on 5 real frame sets (CodeAndWeb free web packer, GAPTools, free-tex-packer): smallest sheet on all 5 with rotation allowed, 4 of 5 without; every frame restored pixel-exact.

Limits

meta.slices in an Aseprite JSON are not read; pivots from slices need the .aseprite file.
PixiJS has no repeat count: an animation either loops or plays once.
Polygon (mesh) packing is not offered: none of the verified engines draws a mesh atlas from exported data.
GameMaker strips are UNVERIFIED in GameMaker itself.
Scale variants (@0.5x–@4x) use nearest-neighbour only.
Trimmed Starling XML is drawn wrongly by Phaser 3.90; use the "Sparrow XML (Phaser 3)" preset there.

Versions and sources

The PixiJS 8 target was loaded and drawn by PixiJS 8.21, rotated and multi-page atlases included, and an @2x variant drew at the @1x size from meta.scale. The PixiJS behaviour described here follows the PixiJS 8 API documentation.

Official documentation used

Questions

Does PixiJS read Aseprite's frameTags?

No. Its Spritesheet makes textures from the frames only, so an Aseprite JSON gives you no animations in PixiJS. This export writes the animations map that PixiJS does read.

How do I play the frames at their own durations?

Read durationsMs from meta.nerulio.animations[name] and pass {texture, time} pairs to new AnimatedSprite, as the README in the export shows. Set TextureSource.defaultOptions.scaleMode to 'nearest' for pixel art.

Was the PixiJS output checked?

Yes: PixiJS 8.21 loaded and drew this target's files, rotated and multi-page atlases included.

Is it free, and do I need an account?

Everything on these pages is free and works without an account. There is no watermark and no export that is held back.

Are my sprites uploaded?

No. The Studio decodes, packs and exports in this browser tab. Projects are autosaved in the browser (IndexedDB) and can be saved as a .nerulio file.

Does it need Aseprite or an engine plugin installed?

No. .aseprite files are read and written in the browser, and each engine bundle carries what that engine needs (for Godot, the import settings and scene; for Unity and the Godot TileSet, a small editor script).