Spritesheets

Phaser 3
1

I created a spritesheet of a card with two frames-back and front.But browser is recognizing both as one frame and showing them simultaneously.I increased border and shape padding between the two frames but still it doesn’t solved the problem.

class Scene1 extends Phaser.Scene{

constructor(){

    super("bootGame");

}

preload(){

    this.load.image("background","assets/images/background.png");

    this.load.spritesheet("card","assets/spritesheets/Cards/new.png",{

        frameWidth:2000,

        frameHeight:1256

    });

}

create(){

    this.background = this.add.image(0, 0, "background");

    this.background.setOrigin(0, 0);

    Align.scaleToGameW(this.background,1);

    this.club3=this.add.sprite(config.width / 2 - 8, config.height / 2 -16,"card",0);

    this.club3.setScale(0.1);

}
}

2

What does new.png look like and how big is it? The frameWidth/frameHeight should be the size of a single frame, not the entire image.

3

Thanks for replying! I increased the padding between the spritesheets and the problem got fixed.