Stretch Background Image to Cover Entire Area in Phaser 3

Category: Game DevelopmentTags:

If you have a background image and want to stretch it so that entire canvas area is covered, here is a sample code written in Typescript.

export class LoaderScene extends Phaser.Scene {

    private background: Phaser.GameObjects.Image;
    constructor() {
        super({
            key: "LoaderScene"
        });
    }
    init() {
        // background
        this.background = this.add.image(0, 0, "bg")
        .setOrigin(.5, .5);
        // Based on your game size, it may "stretch" and distort.
        this.background.displayWidth = this.sys.canvas.width;
        this.background.displayHeight = this.sys.canvas.height;
        
    }
}

Please note that I am just stretching the image and not necessarily keeping the aspect ratio. If you need to keep aspect ratio and stretch the background image, you need to use your own calculated width and height.

Share

1 comment

Your email address will not be published. Required fields are marked *

  1. Altamish Mahomed says:

    Thank you so much 🙂
    Been struggling to find a method that simply works.