Skip to content

Phaser 3: load spritesheet for animation with unequal dimensions

Im trying to work with the phaser 3 framework.

In order to load a spritesheet and create its animation I first load the spritesheet:

this.load.spritesheet('player', 'assets/spritesheets/player.png',{frameWidth:16,frameheight:16});

then I create the animation as follows:

    frames: this.anims.generateFrameNumbers("player"),

This works fine but if I have unequal dimensions such as

this.load.spritesheet('1health', 'assets/spritesheets/1health.png',{frameWidth:96,frameheight:32});

    frames: this.anims.generateFrameNumbers("1health"),

I receive the following error:

SpriteSheet frame dimensions will result in zero frames for texture: 1health

generateFrameNumbers: Frame 0 missing from texture: 1health
generateFrameNumbers: Frame 0 missing from texture: 1health

if i print console.log(this.anims.generateFrameNumbers("player"));

the output is:

        "key": "player",
        "frame": 0
        "key": "player",
        "frame": 1
        "key": "player",
        "frame": 2
        "key": "player",
        "frame": 3

however for the unequal dimension sprite I get an empty array.

In Phaser’s Documentation it seems to be okay to use different dimensions for a spritesheet.

Any help or pointers would be much appreciated.

Edit Here are thee images I tried using




I believe there is something wrong with your sprite sheet 1health.png Did you check the size of it?

Try different dimensions in this line: this.load.spritesheet(‘1health’, ‘assets/spritesheets/1health.png’,{frameWidth:94,frameheight:30});

And see does it work without any error? Maybe the image 1healt doesn’t have the correct size.

I can check your image in Phaser if you give me a link to it?


Everything works fine for me, here is how I display a sprite in a scene:

In loading.js:

this.load.spritesheet('6bQOE', 'img/6bQOE.png', {frameWidth: 96, frameHeight: 32});


let animConfig = {
    key: "gameAnim",
    frames: this.anims.generateFrameNumbers("6bQOE", { frames: [ 0,1,2 ] }),
    frameRate: 12,
    repeat: -1,
this.gameAnimation = this.anims.create(config);

// display the sprite
this.anim = this.add.sprite(width/2 + 400, height/2+5, '6bQOE');"gameAnim");

enter image description here

But you have two exactly same frames, so I don’t understand what you are trying to do? Switching between those frames does not make any difference, there is always one red and two black hearts.

Maybe you don’t need any animation, you can set frame using:

this.anim.setFrame(0); // 3 red hearths
this.anim.setFrame(1); // 2 red hearths