{"id":15179,"date":"2026-10-01T03:37:22","date_gmt":"2026-10-01T03:37:22","guid":{"rendered":"https:\/\/playgama.com\/blog\/?p=15179"},"modified":"2026-10-01T03:37:22","modified_gmt":"2026-10-01T03:37:22","slug":"how-to-structure-sprite-sheet-json-metadata-for-web-game-eng","status":"publish","type":"post","link":"https:\/\/playgama.com\/blog\/business-faqs\/how-to-structure-sprite-sheet-json-metadata-for-web-game-eng\/","title":{"rendered":"How to structure sprite sheet JSON metadata for web game engines?"},"content":{"rendered":"

A sprite sheet JSON needs one PNG plus a data file listing, per frame, its x\/y\/width\/height in the sheet, and usually a name or tag. Export this directly from Aseprite or an AI sprite tool rather than hand-writing it, and load it with your engine’s own frame\/atlas loader.<\/strong><\/p>\n

At a glance<\/h2>\n\n\n\n\n\n\n\n
Fact<\/th>\nValue<\/th>\nSource<\/th>\n<\/tr>\n<\/thead>\n
Aseprite CLI flag for metadata file<\/td>\n–data <\/td>\naseprite.org<\/a><\/td>\n<\/tr>\n
Phaser sprite sheet frame rule<\/td>\nall frames same size<\/td>\ndocs.phaser.io<\/a><\/td>\n<\/tr>\n
Recommended format for sprite sheets<\/td>\nPNG (alpha preserved)<\/td>\nimage.rustwindy.com<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

A sprite sheet’s JSON needs to describe two things for every frame: where it sits in the packed PNG (x, y, width, height), and some identifier the engine or your code can look up by name or index. Most tools that export sprite sheets also export this JSON automatically, so the structure to aim for is whatever your packer already produces – don’t hand-roll a custom schema unless you have to parse it yourself.<\/p>\n

For testing web builds, the Playgama MCP server lets an AI coding agent publish a sandbox link directly from your IDE.<\/p>\n

Aseprite’s CLI exports both files together: the image with --sheet <file.png><\/code> and the metadata with --data <file.json><\/code>, which “saves information about the exported sprite sheet in a JSON” (aseprite.org\/docs\/cli<\/a>). AI sprite generators follow the same pattern – a sheet PNG plus an optional JSON descriptor you load straight into the engine (ludo.ai\/docs<\/a>).<\/p>\n

What goes wrong when loading the JSON<\/h2>\n