How to Use a Texture Atlas in Phaser 3 (Free Texture Packer)

If your Phaser game loads dozens of individual PNG files, you are leaving performance on the table. A texture atlas (also called a sprite sheet) packs all those images into a single texture plus a JSON map of where each frame lives. The result: fewer HTTP requests, fewer GPU draw calls, and smoother games — especially on mobile.

This guide shows you how to pack your sprites into a Phaser-ready atlas with a free, browser-based texture packer, then load and use it in Phaser 3.

Why a texture atlas makes Phaser faster

Every separate image you load is its own network request and, more importantly, its own texture the GPU may need to bind. When many sprites share one atlas, Phaser can batch them into a single draw call instead of switching textures for each one.

Fewer draw calls: sprites on the same atlas batch together — the biggest win for 2D performance.
Fewer requests: one image + one JSON instead of 50 PNGs.
Tidier code: reference frames by name from a single key.
Built-in animations: generate animation frames straight from frame names.

Step 1 — Pack your sprites into an atlas

Open the free EazyStudio Texture Packer and drag in your individual sprite PNGs. It runs entirely in your browser — nothing is uploaded to a server. Then:

Drop all your frames onto the packer.
Set the export format to a Phaser-compatible JSON (Hash) layout.
Add a couple of pixels of padding to avoid texture bleeding between frames.
Export. You get two files: sprites.png (the atlas image) and sprites.json (the frame map).

Tip: Keep the atlas dimensions to a power of two (512, 1024, 2048) for the widest GPU compatibility, and enable trimming to remove transparent padding around each sprite.

Step 2 — Load the atlas in Phaser 3

Place both exported files in your assets folder, then load them in your scene's preload() using this.load.atlas():

function preload() {
  this.load.atlas(
    'game',                 // texture key
    'assets/sprites.png',   // atlas image
    'assets/sprites.json'   // frame data
  );
}

Step 3 — Create sprites from atlas frames

Once loaded, reference any packed image by its frame name (usually the original filename):

function create() {
  // add.sprite(x, y, textureKey, frameName)
  this.add.sprite(400, 300, 'game', 'player-idle.png');
  this.add.sprite(120, 80,  'game', 'coin.png');
}

Step 4 — Build animations from the atlas

If your frames are named consistently (for example run-0.png, run-1.png, run-2.png), Phaser can generate the animation for you:

this.anims.create({
  key: 'run',
  frames: this.anims.generateFrameNames('game', {
    prefix: 'run-', start: 0, end: 5, suffix: '.png'
  }),
  frameRate: 12,
  repeat: -1
});

const hero = this.add.sprite(400, 300, 'game', 'run-0.png');
hero.play('run');

Common pitfalls

Symptom	Cause & fix
Thin lines/seams between sprites	Add 1–2px padding (extrude) when packing to prevent texture bleeding.
"Frame not found" error	The frame name must match exactly, including the `.png` suffix as exported.
Blurry pixel art	Set `pixelArt: true` in your Phaser game config to use nearest-neighbour filtering.
Atlas too large to load on mobile	Split into multiple atlases or reduce sprite resolution; keep under 2048×2048.

Summary

A texture atlas is the single easiest performance upgrade for a Phaser 3 game: pack your sprites into one image + JSON, load it with this.load.atlas(), and reference frames by name. You get fewer draw calls, faster loads, and free animation support. You do not need a paid desktop app to make one — a free browser packer handles it in seconds.

Pack a Phaser texture atlas — free

No install, no account. Runs entirely in your browser.

Open Texture Packer