javascriptspritephaser-frameworksprite-sheet

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

1health.png

1health.png


Solution

  • 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");
    

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