← All guides

Using StudioSprite assets in Phaser 3

Loading sprites and spritesheets in Phaser 3, plus the JSON atlas pattern.

Spritesheet

preload() {
  this.load.spritesheet('hero', 'assets/hero.png', { frameWidth: 64, frameHeight: 64 });
}
create() {
  this.anims.create({
    key: 'walk',
    frames: this.anims.generateFrameNumbers('hero', { start: 0, end: 7 }),
    frameRate: 10, repeat: -1,
  });
  this.add.sprite(160, 90, 'hero').play('walk');
}

Crisp pixels

In your game config set pixelArt: true and roundPixels: true — Phaser smooths textures by default and kills pixel art.

Ready to try it?

Open the generator →