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:

this.anims.create({
    key:"player_anim",
    frames: this.anims.generateFrameNumbers("player"),
    frameRate:8,
    repeat:-1,
});

This works fine but if I have unequal dimensions such as

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

this.anims.create({
    key:"1health_anim",
    frames: this.anims.generateFrameNumbers("1health"),
    frameRate:4,
    repeat:-1,
});

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

Answer

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});

Gameplay:

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

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

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 hearts
this.anim.setFrame(1); // 2 red hearts