Works with Phaser 3

SpriteDock for Phaser

Every animation you make arrives in Phaser as an atlas and an animations file: load them in preload, build the animations in create, and play a clip by name.

Make a Phaser character

Free sign-up, 100 credits, no card. Your prompt comes with you: “A knight with a sword, side view, platformer”

A swordswoman with a red scarf idling, looping — Swordswoman · idle · 4 frames

The swordswoman running, her red scarf streaming, looping — Swordswoman · run · 5 frames

Why getting sprites into Phaser takes so long

A sprite sheet alone is only a picture. In Phaser you still need an atlas that names every frame, then an animation for each clip with its frame rate and repeat, and a game config that keeps the pixels sharp.

SpriteDock writes both files for you. The atlas has one frame per cell with a bottom-centre pivot, and the animations file has one animation per clip, keyed by the clip's name, at its frame rate, repeating when the clip loops.

How it works

Make the characterDescribe it, then generate idle, walk, run, jump and attack as one Platformer set.
Export with Phaser onTurn on Phaser 3 under For your engine in the export dialog. You get the sheet, the atlas, the animations file and a short readme.
Drop it inCopy the files into your project with the PNG, load the atlas and the animations in preload, build them in create, and set pixelArt: true in the game config.

What you download

<name>_sheet.pngThe uniform-cell sprite sheet the atlas points at.
<name>_phaser_atlas.jsonA Phaser 3 JSON Hash atlas: one frame per cell, with a bottom-centre pivot.
<name>_phaser_anims.jsonOne animation per clip, keyed by the clip's name, at its frame rate, repeating when the clip loops. For this.anims.fromJSON.
README-phaser.txtThe import steps, with the load calls to paste.
Aseprite fileAn .aseprite with your palette embedded and one tagged clip per animation.

Keep going

FAQ

Questions

Which Phaser version does the export target?

Phaser 3.

How do I load it?

In preload, call this.load.atlas with the name, the sheet and the atlas JSON, and this.load.json with the animations file. In create, call this.anims.fromJSON on the loaded JSON. The readme in the export has the lines to copy.

How do I play an animation?

Add a sprite with this.add.sprite and call play with the clip's name.

What if my sprite has no animations yet?

The animations file then holds one animation, default, with the sprite's still, so the export still loads.

Why do my pixels look blurry in Phaser?

Set pixelArt: true in the game config. The readme in the export says the same.

Your next Phaser character, already in an atlas.

100 free credits, no card.

Make a Phaser character