TileSprite for Parallax

[VincentB]

Hi guys,

I have been struggling for days on setting up a parallax background for the game I'm working on and I need guidance to understand "why?" 

Below is where I am, and I cannot get to properly size the TileSprite to later use it for the parallax.

'use strict';

class GameScene extends Phaser.Scene {

    constructor() {
        super('GameScene');
    }

    preload() {
        this.load.image('top-sky-background', 'assets/background/sky.png');
        this.load.image('top-rocks1-background', 'assets/background/rocks_1.png');
    }

    create() {

        // Get the window sizes
        let windowWidth = window.innerWidth;
        let windowHeight = window.innerHeight;

        // Find the center of the top space
        let topBackgroundXOrigin = windowWidth / 2;
        let topBackgroundYOrigin = (windowHeight / 5) * 1.5;
        let topBackgroundHeight = (windowHeight / 5) * 3;
        
        // Add the sky image at the right location and resize it to take all the space, no scaling needed
        let skyImage = this.add.image(topBackgroundXOrigin, topBackgroundYOrigin, 'top-sky-background');
        skyImage.setDisplaySize(windowWidth, topBackgroundHeight);

        // Base width and height of the images
        let imageBaseWidth = 1920;
        let imageBaseHeight = 1080;

        // --------------------
        // Add it as an image
        // --------------------
        
        // Apply ratio on the width
        //let newImageWidth = imageBaseWidth * (topBackgroundHeight / imageBaseHeight);

        //this.rocks1 = this.add.image(topBackgroundXOrigin, topBackgroundYOrigin, 'top-rocks1-background');
        //this.rocks1.setDisplaySize(newImageWidth, topBackgroundHeight);

        // --------------------
        // Add it as a TileSprite
        // --------------------

        this.rocks1 = this.add.tileSprite(topBackgroundXOrigin, topBackgroundYOrigin, imageBaseWidth, imageBaseHeight, 'top-rocks1-background');
        //this.rocks1.tilePositionX = topBackgroundXOrigin;
        //this.rocks1.tilePositionY = topBackgroundYOrigin;
        //this.rocks1.setSize(windowWidth, topBackgroundHeight);
        //this.rocks1.setDisplaySize(windowWidth, topBackgroundHeight);
        
        //this.rocks1.autoScroll(-0.5, 0); // not implemented in Phaser3 yet

        // alert('tilePositionX:' + this.rocks1.tilePositionX + '; tilePositionY:' + this.rocks1.tilePositionY + '\n' 
        // + 'position x:' + this.rocks1.x + '; postion y:' + this.rocks1.y + '\n' 
        // + 'width:' + this.rocks1.width + '; height:' + this.rocks1.height + '\n' 
        // + 'displayWidth:' + this.rocks1.displayWidth + '; displayHeight:' + this.rocks1.displayHeight);
    }

    update() {
        this.rocks1.x -= 0.05;
    }
}

module.exports = GameScene

 

What the TileSprite gives me is the attached result (ScreenShot1) with the mountain down below and very big.

The second result (ScreenShot2), with the mountains properly placed is achieved when using a simple "image" approach, and of course that's what I'd like to achieve with the TileSprite, so it can be repeated automatically from what I understood.

I played with everything I could find in the TileSprite object, width, displayWidth, position, etc. but I just don't grasp how it works.

Anything to help me continue would be appreciated, as you can imagine I would like to scale down the "rocks" so it can be adapted to any resolution (hopefully...)

 

 

[VincentB]

@rich Thanks for the fix !

Tried Phaser v3.3.0 and have now the TileSprite scaling working

Below is the working code for future readers.

'use strict';

class GameScene extends Phaser.Scene {

    constructor() {
        super('GameScene');
    }

    preload() {
        this.load.image('background1_clouds_1', 'assets/background/background1_clouds_1.png');
        this.load.image('background1_clouds_2', 'assets/background/background1_clouds_2.png');
        this.load.image('background1_clouds_3', 'assets/background/background1_clouds_3.png');
        this.load.image('background1_clouds_4', 'assets/background/background1_clouds_4.png');
        this.load.image('background1_rocks_1', 'assets/background/background1_rocks_1.png');
        this.load.image('background1_rocks_2', 'assets/background/background1_rocks_2.png');
        this.load.image('background1_sky', 'assets/background/background1_sky.png');
    }

    create() {

        // Get the window sizes
        let windowWidth = window.innerWidth;
        let windowHeight = window.innerHeight;

        // Find the center of the top space
        let topBackgroundXOrigin = windowWidth / 2;
        let topBackgroundYOrigin = (windowHeight / 5) * 1.5;
        let topBackgroundHeight = (windowHeight / 5) * 3;
        
        // Base width and height of the images
        let imageBaseWidth = 1920;
        let imageBaseHeight = 1080;
        let heightRatio = topBackgroundHeight / imageBaseHeight;

        // Add the sky image at the right location and resize it to take all the space, no scaling needed
        let skyImage = this.add.image(topBackgroundXOrigin, topBackgroundYOrigin, 'background1_sky');
        skyImage.setDisplaySize(windowWidth, topBackgroundHeight);

        // Add each layer one by one
        this.cloud1 = this.add.tileSprite(topBackgroundXOrigin, topBackgroundYOrigin, imageBaseWidth, imageBaseHeight, 'background1_clouds_1');
        this.cloud1.setScale(heightRatio);

        this.cloud2 = this.add.tileSprite(topBackgroundXOrigin, topBackgroundYOrigin, imageBaseWidth, imageBaseHeight, 'background1_clouds_2');
        this.cloud2.setScale(heightRatio);
        
        this.rocks1 = this.add.tileSprite(topBackgroundXOrigin, topBackgroundYOrigin, imageBaseWidth, imageBaseHeight, 'background1_rocks_1');
        this.rocks1.setScale(heightRatio);
        
        this.cloud3 = this.add.tileSprite(topBackgroundXOrigin, topBackgroundYOrigin, imageBaseWidth, imageBaseHeight, 'background1_clouds_3');
        this.cloud3.setScale(heightRatio);
        
        this.rocks2 = this.add.tileSprite(topBackgroundXOrigin, topBackgroundYOrigin, imageBaseWidth, imageBaseHeight, 'background1_rocks_2');
        this.rocks2.setScale(heightRatio);

        this.cloud4 = this.add.tileSprite(topBackgroundXOrigin, topBackgroundYOrigin, imageBaseWidth, imageBaseHeight, 'background1_clouds_4');
        this.cloud4.setScale(heightRatio);
    }

    update() {
        this.cloud1.tilePositionX += 0.05;
        this.cloud2.tilePositionX += 0.05;
        this.rocks1.tilePositionX += 0.10;
        this.cloud3.tilePositionX += 0.15;
        this.rocks2.tilePositionX += 0.20;
        this.cloud4.tilePositionX += 0.30;
    }
}

module.exports = GameScene

You can download the images for free from here https://craftpix.net/freebies/free-horizontal-2d-game-backgrounds/

 

[shimozurdo]

Great! thank you