Exporting Sprites & Sheets for Phaser

Phaser is a popular JavaScript framework for HTML5 games, and it loads AI-generated pixel art directly — everything is wired up in code. The key is one config flag that keeps pixels crisp, then loading sheets with the right frame size. Here's the setup for Phaser 3.

Export from Voidless

Export your sprite or sprite sheet as a PNG with transparency. For animated sheets, keep a uniform cell grid and note the frame width and height — Phaser slices by exact pixel size.

Keep pixels crisp (one flag)

Turn on pixel-art mode in your game config so Phaser uses nearest-neighbour filtering instead of blurring:

const config = {
  type: Phaser.AUTO,
  pixelArt: true,      // crisp pixels — the important one
  roundPixels: true,   // avoids sub-pixel shimmer
  scale: { zoom: 3 },  // integer zoom keeps it sharp
  scene: { preload, create },
};

pixelArt: true is the single most important setting — it's Phaser's equivalent of Point/Nearest filtering.

Load a single sprite

function preload() { this.load.image('chest', 'assets/chest.png'); }
function create() { this.add.image(100, 100, 'chest'); }

Load an animated sheet

Load it as a spritesheet with your exact frame size, then define animations from frame indices:

function preload() {
  this.load.spritesheet('player', 'assets/player.png', {
    frameWidth: 16, frameHeight: 16,
  });
}
function create() {
  this.anims.create({
    key: 'run',
    frames: this.anims.generateFrameNumbers('player', { start: 0, end: 7 }),
    frameRate: 10,
    repeat: -1,        // loop for idle/run; omit for one-shot attacks
  });
  this.add.sprite(100, 100, 'player').play('run');
}

Tilemaps for levels

Phaser builds tilemaps from a tileset image plus map data (a Tiled JSON export works well):

this.load.image('tiles', 'assets/tileset.png');
this.load.tilemapTiledJSON('map', 'assets/map.json');
// in create():
const map = this.make.tilemap({ key: 'map' });
const tileset = map.addTilesetImage('tileset', 'tiles');
const ground = map.createLayer('Ground', tileset, 0, 0);
ground.setCollisionByProperty({ collides: true });

Quick checklist

• pixelArt: true in the game config ✅
• Spritesheet loaded with the exact frameWidth/frameHeight ✅
• Animations built with generateFrameNumbers + frameRate ✅
• Integer zoom for a sharp, stable display ✅