本文旨在提供一种在 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 样式和场景代码，以实现更复杂的响应式设计。