HOWTO: Export Krita animation to texture atlas

Phaser 3
1

The free Krita tool has a great animation editor, and now you can export Krita animations directly to a texture atlas that Phaser 3 can read.

Plugin Installation instructions

  • Get the plugin by downloading https://github.com/EugenDueck/kritaSpritesheetManager/archive/refs/heads/master.zip
  • in Krita, go to Tools > Scripts > Import Python Plugin, then select the downloaded zip file
  • Restart Krita
  • Activate the plugin by going to Settings > Configure Krita > Python Plugin Manager and checking “Spritesheet Exporter”
  • Restart Krita (yes, again)
  • you can now use it in Tools > Scripts > Export As Spritesheet
    • be sure to tick the “write json texture atlas” checkbox

Loading the texture atlas

The filenames in the texture atlas are just the numeric indexes of the textures in the png, so it can be used something like this:

preload() {
  this.load.atlas("myatlas", "atlas.png", "atlas.json");
}

create() {
  var frameNames = this.anims.generateFrameNames("myatlas", { start: 0, end: 8, zeroPad: 1 });
  this.anims.create({ key: "walk", frames: frameNames, frameRate: 10, repeat: -1 });
  var sprite = this.add.sprite(x, y, "myatlas")
  sprite.play("walk");
}

Source repository

I have a PR open to get my changes merged into the repository I forked, but until then,
GitHub - EugenDueck/kritaSpritesheetManager: a Krita plugin to export animations as spritesheets is the place to go.

2

The texture atlas export feature PR has been merged, so the place to get this plugin now is