Phaser Sprite Sheet Generator
Create sprite sheets optimized for Phaser 3.
Features
Phaser JSON Format
Export metadata matching Phaser's atlas and spritesheet loaders.
Frame Durations
Metadata includes per-frame duration for Phaser animations.
Anchor Points
Set pivot/anchor coordinates for each sprite.
Trim Support
Trimmed frames restore original bounds via sourceSize at render time.
Efficient Packing
MaxRects algorithm minimizes texture size.
Browser-Based
No Node.js build step needed — works directly in the browser.
How It Works
Upload Assets
Drop video, GIF, or sprite images.
Configure for Phaser
Set packing options and choose Phaser export format.
Load in Phaser
Download PNG + JSON and load with this.load.atlas().
Why Use I Love Sprites?
Phaser is the leading HTML5 game framework, and its texture atlas loader is the natural target for packed sprite sheets. I Love Sprites generates sprite sheets with Phaser's expected JSON format — frame coordinates, trimmed source sizes, anchor points, and durations — so the output loads directly with this.load.atlas() with no conversion step.
The Phaser export uses the JSON Hash atlas format, which Phaser 3 and Phaser CE both understand. Trimmed frames are fully supported: Phaser reads the spriteSourceSize and sourceSize fields and restores each frame's original bounds at render time, so you get the memory savings of trimming without positioning bugs. Frame durations from your chosen FPS are included, and the frameRate you pass to anims.create can simply match it.
For crisp pixel art in Phaser, load the atlas normally and set pixelArt: true in your game config (or texture.setFilter(Phaser.Textures.NEAREST)); combined with 1-2px extrusion at pack time this eliminates both blur and edge bleeding when the camera zooms.
Load and animate the atlas in Phaser 3
Loads the exported PNG + JSON pair, builds an animation from the frame names, and plays it.
class DemoScene extends Phaser.Scene {
preload() {
// PNG + JSON exported from I Love Sprites (Phaser format)
this.load.atlas("player", "assets/player.png", "assets/player.json");
}
create() {
this.anims.create({
key: "run",
frames: this.anims.generateFrameNames("player", {
prefix: "run_", start: 1, end: 12, zeroPad: 2,
}),
frameRate: 12, // match the FPS you exported at
repeat: -1,
});
this.add.sprite(400, 300, "player").play("run");
}
}Frequently Asked Questions
Common questions about sprite sheet generator for phaser.
The output format works with Phaser 3 and Phaser CE (Community Edition). It uses the JSON Hash atlas structure both understand.
Yes. Frame durations are calculated from your configured FPS and included in the metadata — pass the same value as frameRate in anims.create.
Yes. Phaser reads spriteSourceSize and sourceSize from the JSON and restores each frame's original bounds at render time.
Set pixelArt: true in the game config (or use NEAREST filtering on the texture), and pack with 1-2px extrusion to prevent edge bleeding at zoom.
Related Tools
Sprite Sheet Generator
Generate sprite sheets from videos and GIFs directly in your browser. Free, private, and fast. Export for Unity, Godot, Phaser, and more.
Sprite Sheet Generator for Unity
Generate Unity-compatible sprite sheets and texture atlases from videos, GIFs, or images. Export Unity metadata and auto-slice with an editor script. Free browser tool.
Sprite Sheet Generator for Godot
Generate Godot-compatible sprite sheets and texture atlases. Works with AtlasTexture, SpriteFrames, and AnimatedSprite2D in Godot 3 and 4. Free browser tool.
PNG to Sprite Sheet
Pack multiple PNG images into an optimized sprite sheet. Upload your sprites, configure packing, and export for any game engine. Free browser tool.
Stay Updated
Get notified about new features and tool updates.