本文深入探讨phaser 3游戏画布在特定响应式场景下的布局策略，尤其是在需要画布高度适配父容器并允许左右内容裁剪时。通过结合phaser的scalemanager中的`height_controls_width`模式与精细的css布局，本教程将展示如何实现一个既能保持游戏画面比例，又能完美融入不同屏幕尺寸环境的响应式游戏体验。
在开发Phaser 3游戏时，实现画布的响应式布局是一个常见的需求。Phaser 3内置的ScaleManager提供了多种缩放模式，例如Phaser.Scale.FIT，它会将游戏内容缩放以完全适应父容器，同时保持宽高比，但可能会在某些方向上留下空白区域（信箱效果）。然而，在某些设计场景下，我们可能希望游戏画布的高度始终填充其父容器，而宽度则按比例调整，并允许超出父容器的部分被裁剪掉，同时保持游戏内容在屏幕中央。这对于那些核心玩法集中在屏幕中央，而边缘内容可以被裁剪的游戏尤为适用。
理解Phaser 3 ScaleManager的局限性与需求
默认的Phaser.Scale.NONE模式需要开发者手动处理画布尺寸和相机调整，而Phaser.Scale.FIT模式虽然自动化程度高，但其“信箱”效果可能不符合我们“高度适配，宽度裁剪”的需求。我们需要一种模式，它能以高度为基准进行缩放，并允许宽度溢出。
解决方案：HEIGHT_CONTROLS_WIDTH模式与css协同
Phaser 3的ScaleManager提供了一个名为Phaser.Scale.HEIGHT_CONTROLS_WIDTH的模式，它正是为解决这类问题而设计的。该模式会根据父容器的高度来调整游戏画布的高度，并按比例计算宽度。结合适当的css样式，我们可以实现将超出父容器宽度的部分隐藏，并使游戏内容居中显示。
1. html结构准备
首先，我们需要一个容器元素来承载Phaser游戏画布。这个容器将作为Phaser的parent，并负责定义游戏可见区域的尺寸和裁剪行为。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Phaser 3 响应式游戏</title> <style> /* 样式将在此处添加 */ </style> </head> <body> <div id="game-container"></div> <script src="main.JS"></script> <!-- 你的Phaser游戏代码 --> </body> </html>
2. CSS样式配置
CSS在实现“高度适配，宽度裁剪”中扮演着关键角色。我们需要设置HTML和Body元素以确保全屏显示，并为游戏容器定义尺寸、居中和溢出处理。
html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; /* 防止页面滚动 */ } #game-container { display: flex; /* 使用Flexbox进行内容居中 */ justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ width: 100vw; /* 容器宽度占视口宽度 */ height: 80vh; /* 容器高度占视口高度，可根据需求调整 */ overflow: hidden; /* 裁剪超出容器边界的内容 */ background-color: #282c34; /* 可选：背景色，用于调试或填充 */ }
关键CSS解释：
- html, body { width: 100%; height: 100%; overflow: hidden; }: 确保整个页面没有滚动条，并让#game-container能正确地使用vw和vh单位。
- #game-container { display: flex; justify-content: center; align-items: center; }: 这三行组合起来，能够确保Phaser画布（它会成为#game-container的子元素）在其内部水平和垂直居中。
- width: 100vw; height: 80vh;: 定义了游戏容器的实际可视区域。你可以根据设计需求调整height的值，例如100vh表示全屏高度。
- overflow: hidden;: 这是实现“裁剪”效果的核心。当Phaser画布的宽度超出#game-container时，超出部分将被隐藏。
3. Phaser游戏配置
最后，我们需要在Phaser的GameConfig中正确设置ScaleManager。
import Phaser from 'phaser'; // 假设你有SplashScreen和GameScreen场景 // import SplashScreen from './scenes/SplashScreen'; // import GameScreen from './scenes/GameScreen'; const config: Phaser.Types.Core.GameConfig = { type: Phaser.AUTO, backgroundColor: '#282c34', // 与CSS中的背景色一致，或根据需要调整 parent: 'game-container', // 指定Phaser画布将渲染到的父容器ID scale: { mode: Phaser.Scale.HEIGHT_CONTROLS_WIDTH, // 关键：高度控制宽度模式 autoCenter: Phaser.Scale.CENTER_BOTH, // 自动将游戏内容居中，即使画布被裁剪 width: '100%', // 这里的100%指代父容器的宽度 height: '100%' // 这里的100%指代父容器的高度 }, scene: [ /* SplashScreen, GameScreen */ ], // 你的游戏场景 }; const game = new Phaser.Game(config); export default game;
关键Phaser配置解释：
- parent: ‘game-container’: 告诉Phaser将画布插入到ID为game-container的html元素中。
- mode: Phaser.Scale.HEIGHT_CONTROLS_WIDTH: 这是实现所需响应式行为的核心。Phaser会确保游戏画布的高度与父容器的高度（或配置中指定的height值）匹配，然后根据游戏原始宽高比调整宽度。
- autoCenter: Phaser.Scale.CENTER_BOTH: 尽管CSS已经处理了画布在父容器内的居中，但此设置确保了Phaser内部的游戏世界（如相机）也尝试在画布内居中，这在画布被裁剪时尤为重要，确保了核心内容始终可见。
- width: ‘100%’, height: ‘100%’: 当parent属性被设置时，width和height可以设置为百分比字符串，它们会相对于父容器的尺寸来计算。
工作原理总结
当浏览器窗口大小改变时：
- #game-container的CSS（width: 100vw; height: 80vh;）会调整其自身的尺寸以适应新的视口大小。
- Phaser的ScaleManager检测到父容器尺寸变化，并根据HEIGHT_CONTROLS_WIDTH模式，将游戏画布的高度调整为#game-container的高度。
- 游戏画布的宽度会根据其原始宽高比进行等比例缩放。
- 如果缩放后的画布宽度超出了#game-container的宽度，CSS的overflow: hidden会裁剪掉超出部分。
- CSS的display: flex, justify-content: center, align-items: center确保了Phaser画布始终在#game-container内部水平和垂直居中，从而保证游戏的核心内容始终位于屏幕中央。
注意事项
- 设计考量： 采用这种模式意味着游戏左右两侧的内容可能会被裁剪。在设计游戏时，应将关键信息和交互元素放置在屏幕中央区域，避免在边缘放置重要内容。
- 相机调整： 尽管autoCenter有助于居中游戏世界，但如果游戏中有需要精确控制相机视口的逻辑，仍然可能需要监听Phaser的scale.on(‘resize’, …)事件来微调相机或特定ui元素的位置。然而，对于本教程描述的基础裁剪需求，通常无需在场景中手动调用this.cameras.resize()。
- WIDTH_CONTROLS_HEIGHT： 如果你的需求是宽度适配父容器，高度按比例裁剪，则可以尝试使用Phaser.Scale.WIDTH_CONTROLS_HEIGHT模式，并相应调整CSS以裁剪垂直方向的溢出。
通过上述配置，你可以创建一个Phaser 3游戏，它能优雅地适应不同屏幕尺寸，保持高度填充，同时通过裁剪宽度来提供一种独特的响应式体验。