# Selecting portion of spritesheet

**URL:** <https://phaser.discourse.group/t/selecting-portion-of-spritesheet/9895>\
**Category:** Phaser 3\
**Created:** [July 4, 2021, 4:31pm UTC](https://phaser.discourse.group/t/selecting-portion-of-spritesheet/9895 "2021-07-04T16:31:02Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![jfirestorm44](https://avatars.discourse-cdn.com/v4/letter/j/a9a28c/32.png) [@jfirestorm44](https://phaser.discourse.group/u/jfirestorm44)\
**Post date:** [July 4, 2021, 4:31pm UTC](https://phaser.discourse.group/t/selecting-portion-of-spritesheet/9895/1 "2021-07-04T16:31:02Z")

</div>

I decided to give Phaser a try but am a bit confused at how to go about selecting specific portions of a spritesheet.

All of the sprite animation tutorials I find only show how it is done from a sprite sheet that contains just the character sprite and iterates on the x-axis. If I have a large sheet with all of the sprites how can I use just a few frames for my character?

What I need is to select frames 1001 to 1006 (at least I hope thats how they are calculated) and tried the following:

```javascript
this.anims.create({
        key: 'left',
        frames: this.anims.generateFrameNumbers('tilemap', { start: 1001, end: 1006 }),
        frameRate: 100,
        repeat: 0 //also tried -1
    });

```

I also tried adding a start and end to my player declaration

```javascript
player = this.physics.add.sprite(32, 32, 'tilemap', { start: 1001, end: 1006 });

```

What happens though is the whole sheet appears on the screen and flickers.

Here’s an image of the sheet

 ![dungeon_sheet](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/9/95c165b9d8599aa5a9bd6ed00f47a2b65b57dfcd.png)

And here is my `create()`:

```javascript
function create () {
    let map = this.make.tilemap({ key: 'map' });
    let tiles = map.addTilesetImage('kingdom_crawl_tileset', 'tilemap');
    let groundLayer = map.createLayer('Ground', tiles, 0, 0);
    let wallLayer = map.createLayer('Walls', tiles, 0, 0);

    player = this.physics.add.sprite(32, 32, 'tilemap');
    player.setCollideWorldBounds(true);
    
    this.anims.create({
        key: 'left',
        frames: this.anims.generateFrameNumbers('tilemap', { start: 5, end: 10 }),
        frameRate: 100,
        repeat: 0 //also tried -1
    });

    keyboard = this.input.keyboard.createCursorKeys();
}

```

thanks in advance

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [July 4, 2021, 4:51pm UTC](https://phaser.discourse.group/t/selecting-portion-of-spritesheet/9895/2 "2021-07-04T16:51:03Z")

</div>

👋

You need to assign texture frames correctly before you can create animations.

In Phaser terms, _dungeon\_sheet_ looks like an atlas, not a spritesheet. An atlas needs metadata to identify all the frames (names, positions, dimensions). If you don’t have that, then you probably need to cut up _dungeon\_sheet_ into separate spritesheets of different cell sizes (8 × 8 etc.).

---

<div class="post-metadata">

**Author:** ![jfirestorm44](https://avatars.discourse-cdn.com/v4/letter/j/a9a28c/32.png) [@jfirestorm44](https://phaser.discourse.group/u/jfirestorm44)\
**Post date:** [July 4, 2021, 8:51pm UTC](https://phaser.discourse.group/t/selecting-portion-of-spritesheet/9895/3 "2021-07-04T20:51:42Z")

</div>

Ok so if I understand you right for a sheet like this where I want different objects to have different frames from it, I would need to create an atlas? Which appears to me to be a JSON from looking at some examples.

Without using an atlas I need to pass in all spritesheets individually with only the frames that are required for the specific object in which they will be associated to.

Is that right?

---

<div class="post-metadata">

**Author:** ![Puccini](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/puccini/32/4984_2.png) [@Puccini](https://phaser.discourse.group/u/Puccini)\
**Post date:** [July 5, 2021, 10:44am UTC](https://phaser.discourse.group/t/selecting-portion-of-spritesheet/9895/4 "2021-07-05T10:44:05Z")

</div>

how do u load the image?

i do it this way:

```javascript
this.load.spritesheet( asset.img, 'images/assets/' + asset.img + '.png', { frameWidth: asset.framewidth, frameHeight: asset.frameheight });

```

So if you pass here your big image and the “8x8” config, you should be fine by selecting the correct frames. as i can see, phaser will extract from top-left to bottom-right the frame numbers.

🙂

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [July 5, 2021, 1:57pm UTC](https://phaser.discourse.group/t/selecting-portion-of-spritesheet/9895/5 "2021-07-05T13:57:11Z")

</div>

Did you find _dungeon\_sheet_ or make it (from separate images)?