Sign in to follow this  
VincentB

TileSprite for Parallax

Recommended Posts

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

 

 

rocks_1.png

ScreenShot1.png

ScreenShot2.png

sky.png

Share this post


Link to post
Share on other sites

@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/

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.