Phaser 后台加载问题，是相机造成的吗

Question

我正在制作一款游戏，其中摄像机会跟随玩家穿过关卡。但我在背景方面遇到了麻烦。

游戏窗口为1600 x 900，而背景图像为3400 x 900，均为像素。玩家从关卡左侧开始，当他们向右移动时摄像机会跟随他们。

这是我创建背景的代码：

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

这是控制相机的代码：

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

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

虽然代码可以让相机跟随玩家，但当相机滚动到游戏首次加载时显示的范围之外时，我就会变黑。我该如何解决这个问题？

如果有帮助，我正在 VSCode 中使用 Phaser 3，采用街机物理。

Answer 1

问题是您将

tilesprite

的大小设置为画布宽度。您需要将其设置为您想要显示的图像或游戏世界的大小。

这是一个小演示：
（您可以使用光标键移动玩家）

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>