Phaser 3 固定宽高配置下场景全屏缩放实现方法咨询

嘿，我完全懂你这种新旧文档混淆的头疼——Phaser 2到3的API变化确实不小！针对你给出的基础配置，这里有几种实用的方式能快速把场景缩放到全屏，适配不同需求：

方法1：通过配置项直接设置（推荐） #

在你现有的config里添加scale配置块，这是Phaser 3专门用来处理缩放和自适应的核心模块，替代了Phaser 2里的ScaleManager：

var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scale: {
        mode: Phaser.Scale.FIT, // 保持原宽高比，缩放至填满屏幕（不会拉伸变形）
        autoCenter: Phaser.Scale.CENTER_BOTH, // 让游戏在屏幕中水平+垂直居中
        expandParent: true // 让游戏容器占满父元素（默认父元素是body，所以就是全屏）
    }
};

如果想要强制拉伸填满屏幕（不保留宽高比），可以把mode改成Phaser.Scale.STRETCH。

方法2：自适应父元素尺寸（动态调整） #

如果你的游戏需要嵌入到页面的某个容器里，或者要随窗口大小实时变化，用RESIZE模式更合适：

var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scale: {
        mode: Phaser.Scale.RESIZE,
        width: '100%',
        height: '100%'
        // 如果你有指定的父容器，可以加上parent: 'your-container-id'
    }
};

这种模式下，游戏会自动跟随父元素或窗口的尺寸变化，同时调整相机视口和元素布局，不过要注意游戏的实际分辨率会动态改变，后续开发中要做好元素的适配逻辑。

方法3：手动触发原生全屏模式 #

如果需要让用户手动切换全屏（比如按快捷键或点击按钮），可以在场景里添加交互逻辑：

// 在场景的create方法中添加
create() {
    // 按F键切换全屏
    this.input.keyboard.on('keydown-F', () => {
        if (this.scale.isFullscreen) {
            this.scale.stopFullscreen();
        } else {
            this.scale.startFullscreen();
        }
    });

    // 也可以给按钮加点击事件
    const fullscreenBtn = this.add.text(10, 10, '全屏', { fill: '#fff' }).setInteractive();
    fullscreenBtn.on('pointerdown', () => {
        this.scale.isFullscreen ? this.scale.stopFullscreen() : this.scale.startFullscreen();
    });
}

这种方式调用的是浏览器原生的全屏API，会让游戏占满整个屏幕，体验更沉浸。

要注意的是，Phaser 3的缩放逻辑都集中在scale对象里，别再用Phaser 2里的老方法啦！

内容的提问来源于stack exchange，提问作者user2810895