本教程深入探讨了phaser 3游戏中实现特定响应式布局的方法。当传统的`phaser.scale.fit`无法满足需求，特别是需要画布以高度为基准自适应宽度，并允许两侧内容被裁剪时，`phaser.scale.height_controls_width`结合适当的html和css配置，能够提供一个优雅且高效的解决方案，确保游戏内容始终居中显示。
在开发Phaser 3游戏时，实现画布的响应式布局是一个常见而关键的需求。Phaser 3内置的Scale Manager提供了多种缩放模式，例如Phaser.Scale.FIT，它能够确保游戏内容在保持原始宽高比的同时，完整地适应屏幕尺寸。然而，在某些特定的设计场景下，开发者可能需要更灵活的控制，例如，希望游戏画布的高度固定或按比例填充，而宽度则根据可用空间自适应，并允许裁剪掉超出画布两侧的内容，同时保持核心内容居中。本文将详细介绍如何通过Phaser.Scale.HEIGHT_CONTROLS_WIDTH模式，结合精妙的HTML和CSS布局，实现这种高度控制、宽度自适应且居中裁剪的响应式效果。
理解 Phaser 3 的缩放模式
Phaser 3的Scale Manager是处理游戏画布尺寸和缩放的核心。它提供了多种mode来适应不同的响应式需求：
- Phaser.Scale.FIT: 这是最常用的模式之一，它会缩放游戏画布以适应父容器，同时保持游戏的原始宽高比。这意味着游戏内容将完整显示，但可能会在画布的顶部/底部或左侧/右侧留下空白（黑边）。
- Phaser.Scale.NONE: 在此模式下，Phaser不会自动缩放画布。开发者需要完全手动管理画布的尺寸和位置，通常通过监听window的resize事件并手动调整画布或摄像机来完成。这种方式提供了最大的灵活性，但也增加了实现的复杂性。
- Phaser.Scale.HEIGHT_CONTROLS_WIDTH: 这是本文重点介绍的模式。它根据画布的高度来控制宽度。具体来说，它会确保画布的高度填充父容器的可用高度，然后根据游戏的原始宽高比计算出相应的宽度。如果计算出的宽度超出父容器的宽度，超出部分将被裁剪；如果宽度小于父容器，则画布会居中显示。这种模式非常适合需要游戏内容垂直方向完全显示，而水平方向可以适度裁剪的设计。
实现高度控制宽度自适应布局
要实现高度控制宽度自适应，并允许两侧内容裁剪的效果，我们需要综合运用HTML、CSS和Phaser配置。
1. HTML 结构
首先，在HTML文件中为Phaser游戏画布准备一个父容器。这个容器将负责Phaser画布的定位和尺寸限制。
Phaser 3 Responsive Game
2. CSS 样式
CSS是实现居中和裁剪效果的关键。我们需要设置html和body元素以确保它们占据整个视口，并为Phaser的父容器设置display: flex来居中其内容。overflow: hidden将确保超出父容器的内容被裁剪。
html, body {
width: 100%;
height: 100%;
margin: 0; /* 移除默认边距 */
padding: 0; /* 移除默认内边距 */
overflow: hidden; /* 防止滚动条出现 */
}
#phaser-parent {
display: flex; /* 启用Flexbox布局 */
justify-content: center; /* 水平居中内容 */
align-items: center; /* 垂直居中内容 */
width: 100vw; /* 宽度占据视口100% */
height: 80vh; /* 高度占据视口80%，可根据需求调整 */
/* background-color: #282c34; /* 可选：设置背景色以便观察 */
overflow: hidden; /* 确保超出此容器的内容被裁剪 */
}关键点解释：
- html, body { width: 100%; height: 100%; overflow: hidden; }: 确保html和body元素填充整个浏览器视口，并隐藏可能出现的滚动条。
- #phaser-parent { display: flex; justify-content: center; align-items: center; }: 这段CSS使用Flexbox将Phaser画布在其父容器中水平和垂直居中。
- width: 100vw; height: 80vh;: vw (viewport width) 和 vh (viewport height) 单位确保了父容器的尺寸是相对于浏览器视口动态调整的。你可以根据设计需求调整height的值，例如100vh让游戏占据整个视口高度。
- overflow: hidden;: 这是实现裁剪效果的关键。当Phaser画布的宽度超出#phaser-parent容器时，超出部分将被隐藏。
3. Phaser 游戏配置
最后，在Phaser游戏配置中，我们需要指定正确的缩放模式和父容器。
import Phaser from 'phaser';
const config = {
type: Phaser.AUTO, // 或 Phaser.WEBGL, Phaser.CANVAS
backgroundColor: '#282c34', // 游戏背景色
parent: 'phaser-parent', // 指定HTML中的父容器ID
scale: {
mode: Phaser.Scale.HEIGHT_CONTROLS_WIDTH, // 核心：高度控制宽度模式
autoCenter: Phaser.Scale.CENTER_BOTH, // 可选：确保画布在父容器中居中，但CSS已处理
width: '100%', // 画布宽度将根据父容器宽度自适应
height: '100%' // 画布高度将填充父容器高度
},
scene: [ /* 你的场景列表 */ ],
// ... 其他游戏配置
};
const game = new Phaser.Game(config);
export default game;关键点解释：
- parent: 'phaser-parent': 告知Phaser将游戏画布渲染到ID为phaser-parent的HTML元素内部。
- mode: Phaser.Scale.HEIGHT_CONTROLS_WIDTH: 明确指定缩放模式。Phaser会根据父容器的高度来调整画布的高度，并相应地计算宽度，以保持游戏的原始宽高比。
- width: '100%', height: '100%': 这些值是相对于parent容器的。在HEIGHT_CONTROLS_WIDTH模式下，height: '100%'意味着画布将尝试填充父容器的整个高度。然后，Phaser会根据游戏的内部尺寸和这个高度来计算出画布的实际宽度。
- autoCenter: Phaser.Scale.CENTER_BOTH: 尽管CSS已经处理了父容器的居中，但Phaser的这个设置可以进一步确保画布本身在父容器中居中（如果画布尺寸小于父容器）。
完整示例代码
结合上述HTML、CSS和JavaScript，一个完整的实现如下：
index.html
Phaser 3 Height Controls Width Responsive
import Phaser from 'phaser';
// 假设你有两个场景
class SplashScreen extends Phaser.Scene {
constructor() {
super('SplashScreen');
}
preload() {
this.load.image('logo', 'assets/phaser-logo.png'); // 示例加载一个图片
}
create() {
const { width, height } = this.scale;
this.add.text(width / 2, height / 2 - 50, 'Phaser 3 Responsive Demo', {
fontSize: '32px',
fill: '#fff'
}).setOrigin(0.5);
this.add.image(width / 2, height / 2 + 50, 'logo').setOrigin(0.5);
// 监听缩放事件，但在此模式下，Phaser Scale Manager 会自动处理
// 如果需要基于缩放后的实际尺寸做特殊布局，可以在这里处理
this.scale.on('resize', this.handleResize, this);
}
handleResize(gameSize, baseSize, displaySize, resolution) {
// 在 HEIGHT_CONTROLS_WIDTH 模式下，Phaser 会自动调整画布和摄像机
// 这里的回调更多用于通知场景尺寸变化，以便调整UI元素等
console.log('Canvas resized:', displaySize.width, displaySize.height);
// 如果有固定位置的UI元素，可能需要根据新的displaySize重新定位
}
}
class GameScreen extends Phaser.Scene {
constructor() {
super('GameScreen');
}
create() {
const { width, height } = this.scale;
this.add.text(width / 2, height / 2, 'Game Content Here', {
fontSize: '48px',
fill: '#0f0'
}).setOrigin(0.5);
// 创建一个可观察的矩形，模拟游戏区域边界
const graphics = this.add.graphics({ lineStyle: { width: 4, color: 0xff0000 } });
graphics.strokeRect(0, 0, width, height);
// 监听缩放事件
this.scale.on('resize', this.handleResize, this);
}
handleResize(gameSize, baseSize, displaySize, resolution) {
// 更新场景内的元素布局
const { width, height } = this.scale; // 获取当前场景的尺寸
this.children.list.forEach(child => {
if (child.type === 'Text') {
child.setPosition(width / 2, height / 2);
}
if (child.type === 'Graphics') {
child.clear();
child.strokeRect(0, 0, width, height);
}
});
console.log('GameScreen resized:', width, height);
}
}
const gameConfig = {
type: Phaser.AUTO,
backgroundColor: '#282c34',
parent: 'phaser-parent',
scale: {
mode: Phaser.Scale.HEIGHT_CONTROLS_WIDTH,
autoCenter: Phaser.Scale.CENTER_BOTH,
width: 1920, // 游戏内部的逻辑宽度，用于计算宽高比
height: 1080 // 游戏内部的逻辑高度，用于计算宽高比
},
scene: [SplashScreen, GameScreen],
};
const game = new Phaser.Game(gameConfig);在上面的gameConfig中，width: 1920, height: 1080定义了游戏的“设计分辨率”或“原始宽高比”。Phaser.Scale.HEIGHT_CONTROLS_WIDTH模式会尝试将游戏的高度匹配到phaser-parent的高度，然后根据1920/1080这个宽高比来计算出画布的实际宽度。如果这个计算出的宽度大于phaser-parent的宽度，那么画布的两侧就会被裁剪。
注意事项与最佳实践
- 设计内容安全区: 由于宽度可能会被裁剪，因此在设计游戏UI和放置关键游戏元素时，应将它们集中在屏幕的中央区域，以确保它们在不同屏幕比例下都能被看到。
- 宽高比的影响: HEIGHT_CONTROLS_WIDTH模式会根据游戏内部定义的宽高比来缩放。如果你的游戏设计没有固定的宽高比，或者需要非常复杂的响应式行为，可能需要结合Phaser.Scale.NONE和手动计算来达到目的。
- UI 元素定位: 虽然Phaser的Scale Manager会自动调整画布尺寸，但场景内的UI元素可能需要根据新的this.scale.width和this.scale.height进行重新定位，尤其是在resize事件发生时。在create或handleResize方法中使用this.scale.width和this.scale.height来获取当前画布的实际尺寸。
- 性能考量: 频繁的浏览器窗口大小调整可能会触发多次缩放事件。Phaser的Scale Manager通常优化了这些操作，但在复杂的场景中仍需注意性能。
- 测试: 在不同尺寸的浏览器窗口、设备和屏幕方向上测试游戏，确保响应式布局按预期工作。
总结
通过结合使用Phaser.Scale.HEIGHT_CONTROLS_WIDTH模式与精心设计的HTML和CSS布局，我们可以有效地实现Phaser 3游戏画布的高度控制、宽度自适应并允许两侧内容裁剪的响应式需求。这种方法提供了一种优雅的解决方案，特别适用于那些优先保证游戏内容垂直方向完整显示，并允许水平方向进行适度裁剪的设计，从而在各种设备和屏幕尺寸上提供一致且引人入胜的用户体验。
