tile background does not seem to be repeating

Phaser 3
1

Im learning phaser 3 (with typescript) by converting a phaser 2 tutorial I found to phaser 3.

gametile
gametile1012×610 21.2 KB

As you can see from the screenshot Im only showing the bottom half of the tile. And its not repeating to the right.
Below is my code.

create(): void {
        //this.physics.world.setBounds(0,0,5000,600)
        //Sky
        this.sky = this.add.tileSprite(0,0,1000,600,"sky").setOrigin(0)//.setScrollFactor(0)
        //Mountains
        // this.mountains = this.add.tileSprite(0,0,1000,600,"mountains").setOrigin(0).setScrollFactor(0)
        //City
        // this.city = this.add.tileSprite(0,0,1000,600,"city").setOrigin(0).setScrollFactor(0)

        this.player = this.physics.add.sprite(500,600,'dude');
        this.player.setOrigin(0.5,0.5);
        this.player.body.gravity.y=450;
        this.player.setCollideWorldBounds(true,0.0,0.0);

        this.cameras.main.startFollow(this.player,false,1,0)
        this.cameras.main.setBounds(0,0,Number.MAX_SAFE_INTEGER,window.innerHeight - 100);

        this.add.text(1000, 300, '1000px', { font: '24px Arial Bold', color: '#FBFBAC' });    
        this.add.text(2000, 300, '2000px', { font: '24px Arial Bold', color: '#FBFBAC' });    
        this.add.text(3000, 300, '3000px', { font: '24px Arial Bold', color: '#FBFBAC' });    
        let t= this.add.text(4000, 300, '4000px', { font: '24px Arial Bold', color: '#FBFBAC' });

        this.arrowKey = this.input.keyboard.createCursorKeys();

        this.anims.create({
            key: 'left',
            frames: this.anims.generateFrameNumbers('dude', {frames:[0,1,2,3]}),
            frameRate: 16
        });
         this.anims.create({
            key: 'right',
            frames: this.anims.generateFrameNumbers('dude', {frames:[5,6,7,8]}),
            frameRate: 16
        });
    }
    update(time: number): void {
        if (this.arrowKey.left.isDown) {
            debugger;
            this.player.setVelocityX(-200);
            
            if (!this.buttonPressed) {
                this.buttonPressed=true;
                this.player.play({key:'left', repeat:-1})
            }
        }
        else if (this.arrowKey.right.isDown) {
            this.player.setVelocityX(200);
            if (!this.buttonPressed) {
                this.buttonPressed=true;
                this.player.play({key:'right', repeat:-1})
            }
        }

        else {
            this.player.setVelocityX(0);
            this.player.stop();
            this.player.setFrame(4);
            this.buttonPressed=false;
        }
        if (this.arrowKey.up.isDown) {
            this.player.setVelocityY(-100);
        }
        this.sky.tilePositionX=this.cameras.main.x* -2;
        // this.mountains.tilePositionX=this.cameras.main.x* -0.3;
        // this.city.tilePositionX=this.cameras.main.x* -0.4;
    }
2

:wave:

The tile sprites need scroll factor 0.

The game dimensions should probably be 1000 × 600.

I’d guess camera bounds should be

this.cameras.main.setBounds(0, 0, Number.MAX_SAFE_INTEGER, this.scale.height - 100);

In update() it should be

this.sky.tilePositionX = this.cameras.main.scrollX;

etc.