Free UI assets for Phaser 3

1. Load the atlas

The pack's sheet/ folder contains a texture atlas PNG plus a JSON in the format Phaser loads natively — one call, every frame available.

function preload () {
  this.load.atlas('ui', 'assets/sheet/ui.png', 'assets/sheet/ui.json');
}

2. Place a 9-sliced panel

Pass the manifest margins as the last four arguments. Phaser wants them in the order left, right, top, bottom — note that this differs from the manifest's [top, right, bottom, left].

const panel = this.add.nineslice(
  400, 300,          // x, y
  'ui', 'panel_main', // atlas key, frame
  320, 200,           // desired width, height
  24, 24, 24, 24      // left, right, top, bottom
);

3. Buttons with states

Create an Image from the normal frame, make it interactive, and swap the frame on pointer events. The pack ships all four states as separate frames in the same atlas, so swapping costs nothing.

const btn = this.add.image(400, 480, 'ui', 'button_primary_normal')
  .setInteractive({ useHandCursor: true })
  .on('pointerover', () => btn.setFrame('button_primary_hover'))
  .on('pointerout',  () => btn.setFrame('button_primary_normal'))
  .on('pointerdown', () => btn.setFrame('button_primary_pressed'))
  .on('pointerup',   () => btn.setFrame('button_primary_hover'));

4. Crisp pixel art

For pixel packs set pixelArt: true in the game config. It switches texture filtering to nearest-neighbour globally, which is what keeps the edges hard at integer zoom levels.

FAQ

Can I use the individual PNGs instead of the atlas?

Yes — this.load.image per file works fine. The atlas exists to cut HTTP requests and draw calls, which matters more on mobile web than in a desktop prototype.

Does the atlas JSON work with other frameworks?

It is TexturePacker JSON Hash format, which PixiJS, Melon.js and several others read directly.

Can I use these in a commercial HTML5 game?

Yes. Free for commercial use, no attribution required. See the license page.