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.
At a glance
| Fact | Value | Source |
|---|---|---|
| Phaser sprite sheet requires equal frame size | no trim/rotate | docs.phaser.io |
| Phaser texture atlas needs image plus JSON | Array or Hash format | docs.phaser.io |
| Safe max texture dimension across devices | 2048px mobile, 4096px desktop | docs.phaser.io |
Use two different loader calls depending on whether your frames are uniform or packed. In Phaser, a sprite sheet 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 }) inside a Scene’s preload. A texture atlas 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). Both end up in the Texture Manager (this.textures), 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.
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.
PixiJS is simpler: one loader for both
PixiJS has no separate spritesheet/atlas call – Assets.load(url) 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.
- Keep frame size consistent for spritesheet mode – Phaser’s spritesheet frames “cannot be trimmed or rotated.”
- Check
renderer.getMaxTextureSize()before shipping a huge atlas; 2048px is the safe ceiling for mobile browsers. - Use TexturePacker to pack irregular sprites; it exports Phaser 3 and Unity atlas formats.
Sources
- Loader | Phaser Help
- TextureManager | Phaser Help
- Textures | Phaser Help
- Assets | PixiJS
- Phaser.Textures | Phaser Help
- TexturePacker Documentation
- Playgama MCP
Related questions
What’s the difference between a sprite sheet and a texture atlas in Phaser?
A sprite sheet has every frame the same fixed size, loaded with frameWidth/frameHeight. A texture atlas packs frames of different sizes and needs an image plus a JSON data file describing each frame.
Can PixiJS load a Phaser-format atlas JSON?
Yes – PixiJS’s Assets.load() just needs the atlas JSON URL and reads the linked image itself, so a standard TexturePacker export works without a separate image load call.
How big can my atlas texture be for mobile browsers?
Check renderer.getMaxTextureSize() at runtime; Phaser’s docs say 2048px is safe for mobile and 4096px for desktop, since the real limit depends on the device.
Last updated: 30 September 2026