Phaser3移动端游戏横屏启动及横竖屏检测警告实现咨询

一、尝试请求横屏锁定 #

由于浏览器安全限制，无法直接强制移动端以横屏模式启动，但可以通过Screen Orientation API请求横屏锁定。需要注意的是，该操作必须由用户交互触发（比如点击屏幕），否则浏览器会拒绝执行。

修改BootScene代码 #

在你的BootScene的create方法中添加以下逻辑：

create() {
    // 尝试请求横屏锁定
    const requestLandscape = () => {
        if (screen.orientation && screen.orientation.lock) {
            screen.orientation.lock('landscape-primary')
                .then(() => {
                    console.log('横屏锁定成功');
                    this.hideOrientationWarning();
                })
                .catch(err => {
                    console.warn('横屏锁定失败:', err);
                    this.showOrientationWarning();
                });
        } else {
            this.showOrientationWarning();
        }
    };

    // 通过用户首次点击触发横屏请求
    this.input.once('pointerdown', requestLandscape);

    // 监听屏幕方向变化
    window.addEventListener('orientationchange', () => {
        this.checkOrientation();
    });

    // 初始方向检查
    this.checkOrientation();
}

二、检测横竖屏状态并显示警告 #

当无法锁定横屏时，需要实时检测屏幕方向，在竖屏状态下显示提示引导用户切换。

添加检测与提示逻辑 #

在BootScene中新增以下方法：

// 声明属性用于保存提示元素引用
private orientationWarning?: { overlay: Phaser.GameObjects.Graphics, text: Phaser.GameObjects.Text };

checkOrientation() {
    // 判断当前是否为竖屏（高度大于宽度）
    const isPortrait = window.innerHeight > window.innerWidth;
    isPortrait ? this.showOrientationWarning() : this.hideOrientationWarning();
}

showOrientationWarning() {
    // 避免重复创建
    if (this.orientationWarning) return;

    // 创建半透明遮罩层
    const overlay = this.add.graphics();
    overlay.fillStyle(0x000000, 0.8);
    overlay.fillRect(0, 0, this.game.config.width as number, this.game.config.height as number);
    overlay.setDepth(9999);

    // 添加提示文本
    const text = this.add.text(
        this.game.config.width as number / 2,
        this.game.config.height as number / 2,
        '请切换至横屏模式',
        { fontSize: '32px', fill: '#ffffff', align: 'center' }
    );
    text.setOrigin(0.5);
    text.setDepth(10000);

    this.orientationWarning = { overlay, text };
}

hideOrientationWarning() {
    if (this.orientationWarning) {
        this.orientationWarning.overlay.destroy();
        this.orientationWarning.text.destroy();
        this.orientationWarning = null;
    }
}

三、优化游戏缩放配置 #

为了让游戏在横屏时更好适配屏幕，调整你的gameConfig中的scale配置：

scale: {
    mode: Phaser.Scale.FIT, // 使用FIT模式自动适配屏幕
    autoCenter: Phaser.Scale.CENTER_BOTH,
    width: DEFAULT_WIDTH,
    height: DEFAULT_HEIGHT,
    minWidth: DEFAULT_WIDTH,
    minHeight: DEFAULT_HEIGHT,
    maxWidth: MAX_WIDTH,
    maxHeight: MAX_HEIGHT,
    // 监听窗口 resize 事件
    resizeCallback: (gameSize: Phaser.Structs.Size) => {
        const bootScene = this.scene.getScene('BootScene');
        if (bootScene && typeof bootScene.checkOrientation === 'function') {
            bootScene.checkOrientation();
        }
    }
}

关键注意事项 #

• 横屏锁定必须由用户交互触发，否则浏览器会直接阻止该操作。
• 部分老旧设备或浏览器可能不支持Screen Orientation API，需做好降级处理。
• 提示层需设置足够高的深度值，确保在所有游戏元素上方显示。

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