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.

can you provide a [MRE](https://stackoverflow.com/help/minimal-reproducible-example), its hard to say what the issue is with this code pieces. — winner_joiner, Aug 24 '23 at 07:58

winner_joiner · Accepted Answer · 2023-08-24T10:15:21.443

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>

Phaser Background loading trouble, is camera causing it

1 Answers1