Phaser3游戏画布响应式需求：适配父容器并允许裁剪左右内容

你需要的是保持内容原始比例、以中心内容为核心、适配父容器且允许裁剪左右区域的效果，Phaser 3的ScaleManager其实内置了对应的模式，不需要手动监听resize做复杂处理，以下是优化方案：

核心思路 #

放弃Phaser.Scale.NONE的手动控制，改用Phaser.Scale.HEIGHT_CONTROLS_WIDTH模式：

• 该模式会让游戏高度自动适配父容器高度，宽度按原始比例计算
• 当父容器宽度小于计算后的游戏宽度时，左右超出部分会被裁剪，中心内容始终保持可见
• 配合autoCenter: CENTER_BOTH确保画布在父容器中居中

优化后的配置代码 #

const config: Phaser.Types.Core.GameConfig = {
    type: Phaser.AUTO,
    backgroundColor: '#282c34',
    parent: 'phaser-container',
    // 设置游戏的原始基准宽高（根据你的实际内容调整，示例为1920x1080）
    width: 1920,
    height: 1080,
    scale: {
        // 高度适配父容器，宽度按比例缩放，超出部分裁剪
        mode: Phaser.Scale.HEIGHT_CONTROLS_WIDTH,
        // 始终保持画布在父容器中居中
        autoCenter: Phaser.Scale.CENTER_BOTH,
        // 禁止父容器被游戏尺寸撑开，保持父容器自身的布局
        expandParent: false
    },
    scene: [SplashScreen, GameScreen],
}
  
const game = new Phaser.Game(config);
export default game;

为什么不需要手动监听resize？ #

ScaleManager会自动处理窗口/父容器尺寸变化：

• 自动调整画布缩放比例
• 自动保持相机视口与画布匹配，中心内容不会偏移
• 无需手动调用this.cameras.resize，避免不必要的自定义逻辑冲突

补充说明 #

如果你的需求是优先适配宽度、允许裁剪上下区域，只需将mode改为Phaser.Scale.WIDTH_CONTROLS_HEIGHT即可。

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