# Spritesheets

**URL:** <https://phaser.discourse.group/t/spritesheets/6588>\
**Category:** Phaser 3\
**Created:** [June 8, 2020, 1:31pm UTC](https://phaser.discourse.group/t/spritesheets/6588 "2020-06-08T13:31:51Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sayantan\_Panda](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/sayantan_panda/32/3540_2.png) [@Sayantan\_Panda](https://phaser.discourse.group/u/Sayantan_Panda)\
**Post date:** [June 8, 2020, 1:31pm UTC](https://phaser.discourse.group/t/spritesheets/6588/1 "2020-06-08T13:31:51Z")

</div>

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

```

}  
}

---

<div class="post-metadata">

**Author:** ![Telinc1](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/telinc1/32/60_2.png) [@Telinc1](https://phaser.discourse.group/u/Telinc1)\
**Post date:** [June 8, 2020, 3:16pm UTC](https://phaser.discourse.group/t/spritesheets/6588/2 "2020-06-08T15:16:02Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Sayantan\_Panda](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/sayantan_panda/32/3540_2.png) [@Sayantan\_Panda](https://phaser.discourse.group/u/Sayantan_Panda)\
**Post date:** [June 8, 2020, 3:50pm UTC](https://phaser.discourse.group/t/spritesheets/6588/3 "2020-06-08T15:50:22Z")

</div>

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