本文旨在提供一种在 Phaser 3 游戏中实现响应式 Canvas 的方法，重点介绍如何使用 `Phaser.Scale.HEIGHT_CONTROLS_WIDTH` 缩放模式，使 Canvas 能够根据父容器的高度自动调整宽度，并保持内容居中显示，即使在浏览器窗口大小调整时也能保证游戏画面的完整性和美观性。
在 Phaser 3 中创建响应式 Canvas，使其能够适应不同屏幕尺寸并保持游戏内容居中显示，是游戏开发中常见的需求。虽然 Phaser 3 提供了多种缩放模式，但并非所有模式都能满足特定的响应式设计。本文将重点介绍如何使用 Phaser.Scale.HEIGHT_CONTROLS_WIDTH 缩放模式，实现 Canvas 根据父容器高度自动调整宽度，并保持内容居中显示的效果。
准备工作
在开始之前，请确保已经安装了 Phaser 3，并且熟悉 Phaser 3 的基本配置和场景管理。
HTML 结构
首先，需要在 HTML 中创建一个父容器，用于容纳 Phaser 3 的 Canvas。这个父容器将决定 Canvas 的大小和位置。
<html>
<body>
<div id="parent"> </div>
</body>
</html>CSS 样式
为了使父容器能够占据整个屏幕或指定区域，并使 Canvas 居中显示，需要添加一些 CSS 样式。
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
#parent {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 80vh;
}这段 CSS 代码做了以下几件事：
- html, body: 设置 HTML 和 body 元素的宽度和高度为 100%，并隐藏溢出内容，防止出现滚动条。
- #parent: 设置父容器的显示方式为 flex 布局，使其子元素（即 Canvas）能够水平和垂直居中。同时，设置父容器的宽度为 100% 视口宽度，高度为 80% 视口高度。你可以根据自己的需求调整高度。
Phaser 3 配置
接下来，需要在 Phaser 3 的配置中设置缩放模式为 Phaser.Scale.HEIGHT_CONTROLS_WIDTH，并将父容器设置为 HTML 中创建的 parent 元素。
const config = {
type: Phaser.AUTO, // 或者 Phaser.WEBGL
scale: {
mode: Phaser.Scale.HEIGHT_CONTROLS_WIDTH,
parent: 'parent',
width: '100%',
height: '100%',
autoCenter: Phaser.Scale.CENTER_BOTH // 可选，使 Canvas 在父容器中居中
},
scene: [...] // 你的场景
};
const game = new Phaser.Game(config);这段代码的关键在于 scale 属性的配置：
- mode: Phaser.Scale.HEIGHT_CONTROLS_WIDTH: 设置缩放模式为高度控制宽度，这意味着 Canvas 的高度将根据父容器的高度自动调整，而 Canvas 的宽度将根据高度的比例进行调整。
- parent: 'parent': 指定 Canvas 的父容器为 ID 为 parent 的 HTML 元素。
- width: '100%': 设置Canvas的宽度为父容器的100%。
- height: '100%': 设置Canvas的高度为父容器的100%。
- autoCenter: Phaser.Scale.CENTER_BOTH: 可选属性，用于使 Canvas 在父容器中水平和垂直居中。
场景代码
在场景中，你可以使用 this.scale 对象来获取 Canvas 的实际大小，并根据需要调整游戏内容的位置和大小。
class MyScene extends Phaser.Scene {
constructor() {
super('MyScene');
}
create() {
// 获取 Canvas 的实际宽度和高度
const width = this.scale.width;
const height = this.scale.height;
// 在 Canvas 中心位置添加一个文本
this.add.text(width / 2, height / 2, 'Hello Phaser!', { fontSize: '32px', fill: '#fff' }).setOrigin(0.5);
// 监听 resize 事件，在窗口大小改变时更新游戏内容的位置和大小
this.scale.on('resize', this.resize, this);
}
resize(gameSize) {
const width = gameSize.width;
const height = gameSize.height;
// 重新定位相机
this.cameras.resize(width, height);
// 重新定位文本
this.children.list.forEach(item => {
if (item instanceof Phaser.GameObjects.Text) {
item.setPosition(width / 2, height / 2);
}
});
}
}这段代码演示了如何在场景中获取 Canvas 的实际大小，并在 Canvas 中心位置添加一个文本。同时，还监听了 resize 事件，在窗口大小改变时更新游戏内容的位置和大小，确保游戏内容始终居中显示。
总结
通过使用 Phaser.Scale.HEIGHT_CONTROLS_WIDTH 缩放模式，可以轻松实现 Phaser 3 游戏的响应式 Canvas。这种方法能够使 Canvas 根据父容器的高度自动调整宽度，并保持内容居中显示，从而保证游戏在不同屏幕尺寸下的良好显示效果。在实际开发中，可以根据需要调整父容器的 CSS 样式和场景代码，以实现更复杂的响应式设计。
