Phaser Background loading trouble, is camera causing it

Question

I'm making a game in which the camera follows the player as they move across the level. But I'm having trouble with the background.

The game window is 1600 x 900, while the background image is 3400 x 900, all in pixels. The player starts at on the left of the level and the camera follows them as they move to the right.

This is the code in which I create the background:

this.bg = this.add.tileSprite(0,0, game.config.width, game.config.height, 'meadowZone').setOrigin(0,0);

And this is the code that controls the camera:

his.cameras.main.setBounds(0, 0, 3400, 900);

this.cameras.main.startFollow(this.p1, true, 0.05, 0.05);

While the code is working in letting the camera follow the player, when the camera scrolls beyond what is shown when the game first loads, I just get black. How can I fix this?

If it helps, I'm using Phaser 3 in VSCode, employing arcade physics.

Answer 1

Well the issue is that you set the size of the tilesprite to the canvas width. You need to set it to the size of the image or the game-world you want to display.

Here is a small Demo:
(you can use the cursor-key to move the player)

document.body.style = 'margin:0;';

class Example extends Phaser.Scene
{
    constructor () {
        super();
    }

    preload () {
        this.load.image('ship', 'https://placehold.co/50x50/0000ff/FFFFFF.png?text=player&font=montserrat');
        this.load.image('bg-right', 'https://placehold.co/400x82/cdcdcd/FFFFFF.png?text=tilesprite-right-width&font=montserrat');
        this.load.image('bg-wrong', 'https://placehold.co/400x82/afafaf/FFFFFF.png?text=tilesprite-wrong-width&font=montserrat');
    }

    create () {
    
        let width = 1200;
        this.cameras.main.setBounds(0, 0, width, 100);
        this.physics.world.setBounds(0, 0, width, 240);
    
        this.add.tileSprite(0, 0, width, 82, 'bg-right').setOrigin(0,0);
        
        this.add.tileSprite(0, 82, config.width, 82, 'bg-wrong').setOrigin(0,0);
    
        this.ship = this.physics.add.image(400, 100, 'ship').setCollideWorldBounds(true);
    
        this.cameras.main.startFollow(this.ship, true, 0.08, 0.08);
        this.cursors = this.input.keyboard.createCursorKeys();

    }

    update () {
        this.ship.setVelocity(0);

        if (this.cursors.left.isDown) {
            this.ship.setVelocityX(-200);
        } else if (this.cursors.right.isDown) {
            this.ship.setVelocityX(200);
        }
    
        if (this.cursors.up.isDown) {
            this.ship.setVelocityY(-200);
        } else if (this.cursors.down.isDown) {
            this.ship.setVelocityY(200);
        }
    }
}

var config = {
    width: 536,
    height: 163,
    physics: { default: 'arcade' },
    scene: Example
};

new Phaser.Game(config);
console.clear();

<script src="https://cdn.jsdelivr.net/npm/phaser/dist/phaser.min.js"></script>