本文旨在提供一种在 Phaser 3 游戏中实现画布响应式适配的方案，核心思路是利用 `Phaser.Scale.HEIGHT_CONTROLS_WIDTH` 缩放模式，使画布高度适应父容器，宽度随之调整，并始终居中显示。这种方法适用于需要保持游戏核心内容在屏幕中央，允许左右裁剪的场景。
在 Phaser 3 中，Phaser.ScaleManager 提供了多种缩放模式，以适应不同的屏幕尺寸和设备。然而，默认的 Phaser.Scale.FIT 模式可能无法满足所有需求，特别是在需要画布居中显示，并允许裁剪左右内容的情况下。本文将介绍如何使用 Phaser.Scale.HEIGHT_CONTROLS_WIDTH 模式来实现这种响应式适配效果。
核心概念：HEIGHT_CONTROLS_WIDTH 模式
Phaser.Scale.HEIGHT_CONTROLS_WIDTH 模式的核心在于，画布的高度将决定其宽度。这意味着，当父容器的高度发生变化时，画布的高度将自动调整以适应父容器，而画布的宽度将根据高度的比例进行调整。
实现步骤
以下是一个具体的实现步骤，包括 HTML、CSS 和 JavaScript 代码：
-
HTML 结构:
首先，我们需要一个父容器来包含 Phaser 3 游戏画布。
<html> <body> <div id="parent"> </div> </body> </html> -
CSS 样式:
为了使父容器能够正确地缩放，我们需要设置一些 CSS 样式。
html, body { width: 100%; height: 100%; overflow: hidden; } #parent { display: flex; justify-content: center; align-items: center; width: 100vw; height: 80vh; }- html, body: 设置宽度和高度为 100%，并隐藏溢出内容，防止出现滚动条。
- #parent: 使用 flexbox 布局，使画布在父容器中居中显示。 width: 100vw; 确保父容器占据整个视口的宽度。height: 80vh;设置父容器的高度为视口高度的80%，您可以根据实际需求调整。
-
JavaScript 代码 (Phaser 3 配置):
在 Phaser 3 的配置中，我们需要设置 scale 属性。
const config = { type: Phaser.AUTO, // 或者 Phaser.WEBGL, Phaser.CANVAS scale: { mode: Phaser.Scale.HEIGHT_CONTROLS_WIDTH, parent: 'parent', width: '100%', //可以设置为任何值，因为会被高度控制 height: '100%', //可以设置为任何值，因为会被父容器高度控制 autoCenter: Phaser.Scale.CENTER_BOTH // 可选，使画布在父容器中居中 }, scene: [...] // 你的场景 }; const game = new Phaser.Game(config);- mode: Phaser.Scale.HEIGHT_CONTROLS_WIDTH: 设置缩放模式为高度控制宽度。
- parent: 'parent': 指定父容器的 ID。
- width: '100%': 将画布的宽度设置为父容器的 100%。这个值将被高度控制，所以可以设置为任何值。
- height: '100%': 将画布的高度设置为父容器的 100%。这个值将被父容器高度控制，所以可以设置为任何值。
- autoCenter: Phaser.Scale.CENTER_BOTH: 可选，使画布在父容器中水平和垂直居中。
注意事项
- 确保父容器的 CSS 样式正确设置，特别是 width、height 和 display 属性。
- Phaser.Scale.CENTER_BOTH 属性是可选的，但它可以确保画布在父容器中居中显示。
- 根据您的游戏设计，可能需要调整父容器的高度和宽度，以获得最佳的视觉效果。
总结
通过使用 Phaser.Scale.HEIGHT_CONTROLS_WIDTH 缩放模式，我们可以轻松地实现 Phaser 3 游戏画布的响应式适配，使游戏在不同的屏幕尺寸和设备上都能保持良好的视觉效果。这种方法特别适用于需要保持游戏核心内容在屏幕中央，允许左右裁剪的场景。希望本文能帮助您更好地理解和应用 Phaser 3 的缩放功能。
