{"id":15132,"date":"2026-10-01T03:37:02","date_gmt":"2026-10-01T03:37:02","guid":{"rendered":"https:\/\/playgama.com\/blog\/?p=15132"},"modified":"2026-10-01T03:37:02","modified_gmt":"2026-10-01T03:37:02","slug":"how-to-load-uniform-sprite-sheets-and-texture-atlases-in-pha","status":"publish","type":"post","link":"https:\/\/playgama.com\/blog\/business-faqs\/how-to-load-uniform-sprite-sheets-and-texture-atlases-in-pha\/","title":{"rendered":"How to load uniform sprite sheets and texture atlases in Phaser and PixiJS?"},"content":{"rendered":"

In Phaser, use this.load.spritesheet() for a grid of equal-size frames, and this.load.atlas() (or atlasXML) for a TexturePacker JSON\/image pair with frames of different sizes. In PixiJS, call Assets.load() with the atlas JSON URL; PixiJS reads the linked image automatically.<\/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
Phaser sprite sheet requires equal frame size<\/td>\nno trim\/rotate<\/td>\ndocs.phaser.io<\/a><\/td>\n<\/tr>\n
Phaser texture atlas needs image plus JSON<\/td>\nArray or Hash format<\/td>\ndocs.phaser.io<\/a><\/td>\n<\/tr>\n
Safe max texture dimension across devices<\/td>\n2048px mobile, 4096px desktop<\/td>\ndocs.phaser.io<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Use two different loader calls depending on whether your frames are uniform or packed. In Phaser, a sprite sheet<\/b> is one image where every frame is the same fixed width and height and cannot be trimmed or rotated; load it with this.load.spritesheet(key, url, { frameWidth, frameHeight })<\/code> inside a Scene’s preload<\/code>. A texture atlas<\/b> is a combination of an image plus a JSON file (Array or Hash format, as exported by TexturePacker) that packs frames of different sizes tightly; load it with this.load.atlas(key, textureURL, atlasURL)<\/code>. Both end up in the Texture Manager (this.textures<\/code>), and each becomes a single Texture containing multiple Frame instances. If you’re generating art with an AI tool and it hands you a TexturePacker JSON, load that JSON directly rather than re-slicing the sheet by hand.<\/p>\n

If you build your web game using an AI coding agent in Cursor, Claude Code, or VS Code, Playgama MCP lets the agent upload builds and publish a playable sandbox link directly from the editor.<\/p>\n

PixiJS is simpler: one loader for both<\/h2>\n

PixiJS has no separate spritesheet\/atlas call – Assets.load(url)<\/code> takes the atlas JSON URL and returns a Promise resolving to the loaded resource; PixiJS reads the linked image from the JSON automatically. For a plain uniform grid with no JSON, load the single image and slice frames yourself with rectangles.<\/p>\n