Selecting portion of spritesheet

Phaser 3
1

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:

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

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
dungeon_sheet768×748 172 KB

And here is my create():

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

2

:wave:

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

3

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?

4

how do u load the image?

i do it this way:

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.

:slight_smile:

5

Did you find dungeon_sheet or make it (from separate images)?