Cropping Multiple Texture Atlas Frames

Demonstrates how to apply individual crop rectangles to multiple images that are using different frames from the same texture atlas.

Cropping Multiple Texture Atlas Frames, running
800 × 600
GitHub
class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
        this.load.atlas('atlas', 'assets/atlas/megaset-0.png', 'assets/atlas/megaset-0.json');
    }

    create ()
    {
        const image1 = this.add.image(200, 300, 'atlas', 'phaser2');

        image1.setCrop(0, 0, 200, 100);

        const image2 = this.add.image(400, 300, 'atlas', 'cactuar');

        image2.setCrop(0, 0, 200, 50);
    }
}

const config = {
    scale: { mode: Phaser.Scale.FIT },
    type: Phaser.CANVAS,
    parent: 'game-container',
    width: 800,
    height: 600,
    backgroundColor: '#2d2d88',
    scene: Example
};

const game = new Phaser.Game(config);

More in Textures36 examples