PixiJS @2x Spritesheet Too Big — meta.scale per Variant
If an @2x spritesheet draws twice as large as the @1x one in PixiJS 8, its JSON most likely says meta.scale "1". PixiJS takes the texture resolution from meta.scale, not from the "@2x" in the file name, so the extra pixels are read as extra size. With "2" the @2x sheet draws at the @1x size, only denser.
- 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 it does
- Scale variants @0.5x, @1x, @2x, @3x and @4x from one pack, each its own atlas with @2x-style names: hero.png, hero@2x.png, hero@0.5x.png.
- Every variant gets its own JSON whose meta.scale matches it, "2" in hero@2x.json, so nothing has to be edited by hand.
- Nearest-neighbour scaling only: integer upscales are exact pixel doubles, so @2x pixel art stays crisp; @0.5x samples pixels instead of blending them.
- The animations map and per-frame anchors come with every variant; multi-page variants link their pages through related_multi_packs.
- Checked in PixiJS 8.21 with a plain Assets.load of the @1x and @2x export: resolution 1 and 2 read from meta.scale, every @2x texture the same size, anchor and bounds as @1x in PixiJS units, and each @2x frame an exact 2× nearest copy of its source.
How to do it
- Drop your frames, a sheet (then Apply), a GIF or an .aseprite file.
- Open Pack & Export, pick PixiJS 8 and tick the scale variants you ship, for example @1x and @2x.
- Export for PixiJS 8: each variant arrives as its own PNG and JSON pair.
- Set TextureSource.defaultOptions.scaleMode to 'nearest' for pixel art, load the variant for the screen with Assets.load, and check that the sprite's width equals the @1x frame width.
Scale variants and what PixiJS should report
For a 40×29 px frame. PixiJS units are what sprite.width and sprite.height return.
| Variant | Files | meta.scale | In PixiJS 8 |
|---|---|---|---|
| @0.5x | hero@0.5x.png, hero@0.5x.json | "0.5" | Expected about the @1x size with half the texels (not run) |
| @1x | hero.png, hero.json | "1" | 40×29: loaded and drawn by PixiJS 8.21 |
| @2x | hero@2x.png, hero@2x.json | "2" | 40×29 with 2× the texels: checked in PixiJS 8.21 |
| @2x with a wrong "1" | any @2x JSON that says "1" | "1" | 80×58, drawn twice as large (negative control) |
| @3x, @4x | hero@3x.png, hero@4x.png and their JSON | "3", "4" | Expected 40×29 (not run) |
| Several pages at @2x | hero-0@2x.png, hero-1@2x.png and their JSON | "2" on each page | Pages linked by related_multi_packs |
Linear filtering is PixiJS's default; nearest is your choice in the loader, as in step 4.
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
- 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.
Questions
Why does my old @2x sheet draw at double size?
Its JSON probably says meta.scale "1", often because the packer copied the @1x value. The negative control showed the effect: with meta.scale edited to "1" in an @2x JSON, PixiJS reported an 80×58 texture for a 40×29 frame and drew it twice as large. Set it to "2", or export the variants here.
Can I scale the sprite by 0.5 instead?
It works for one sprite, but then every sprite needs it and the choice between @1x and @2x leaks into game code. With the right meta.scale both files draw at the same size and the code stays the same.
Which variants were run in PixiJS?
Only @2x beside @1x: one 6-frame CC0 pack, WebGL, rotated frames included. @0.5x, @3x and @4x are written the same way but were not loaded in PixiJS.
Why is the @2x page not exactly twice the @1x page?
Padding stays 2 px in every variant, so the page layout differs slightly. Each frame is still an exact 2× double of the @1x frame.
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).