在Phaser 3游戏开发中，响应式布局是适配不同设备屏幕的核心需求，尤其是当我们需要让游戏画布高度完全适配屏幕，同时超出屏幕宽度的部分自动裁剪时，需要合理配置引擎参数并编写对应的调整逻辑。
Phaser 3画布响应式布局的核心思路
要实现高度适配与宽度裁剪的效果，核心逻辑是让画布的高度始终等于屏幕可视区域的高度，宽度则按照游戏设计的固定宽高比计算，当计算出的宽度超过屏幕宽度时，通过CSS属性隐藏超出部分，从而实现宽度裁剪的效果。
基础配置参数说明
Phaser 3的游戏配置中有一个scale属性，它是控制画布缩放和布局的核心配置项，我们需要重点关注以下几个参数：
- mode：缩放模式，这里我们使用
Phaser.Scale.NONE，关闭引擎自带的自动缩放，后续手动控制画布尺寸 - width：游戏设计的基础宽度，比如我们设定为1920
- height：游戏设计的基础高度，比如我们设定为1080
- parent：画布挂载的父容器，方便后续控制父容器的样式实现裁剪
完整实现步骤
1. 初始化游戏配置
首先我们创建基础的Phaser 3游戏实例，配置好基础的设计尺寸和缩放模式：
// 游戏设计的基础宽高，按照16:9的比例设定
const GAME_DESIGN_WIDTH = 1920;
const GAME_DESIGN_HEIGHT = 1080;
const config = {
type: Phaser.AUTO,
scale: {
mode: Phaser.Scale.NONE, // 关闭自动缩放
width: GAME_DESIGN_WIDTH,
height: GAME_DESIGN_HEIGHT,
parent: 'game-container' // 画布挂载的父容器id
},
scene: {
preload: function() {
// 预加载资源
},
create: function() {
// 创建游戏内容
this.add.text(100, 100, 'Phaser 3响应式布局示例', { fontSize: '48px', color: '#ffffff' });
},
update: function() {
// 游戏更新逻辑
}
}
};
// 创建游戏实例
const game = new Phaser.Game(config);
2. 编写响应式调整函数
接下来我们需要编写一个函数，用来根据当前屏幕的尺寸动态调整画布的大小，实现高度适配和宽度裁剪：
function adjustGameCanvas() {
// 获取屏幕可视区域的高度
const windowHeight = window.innerHeight;
// 获取游戏设计宽高比
const designRatio = GAME_DESIGN_WIDTH / GAME_DESIGN_HEIGHT;
// 按照高度适配计算画布应有的宽度
const canvasWidth = Math.floor(windowHeight * designRatio);
// 获取画布元素
const canvas = document.querySelector('canvas');
// 获取画布父容器
const container = document.getElementById('game-container');
if (canvas && container) {
// 设置画布高度等于屏幕高度
canvas.style.height = windowHeight + 'px';
// 设置画布宽度按照比例计算的值
canvas.style.width = canvasWidth + 'px';
// 设置父容器样式，实现宽度裁剪
container.style.width = windowHeight * designRatio + 'px';
container.style.height = windowHeight + 'px';
container.style.overflow = 'hidden';
container.style.margin = '0 auto';
// 父容器宽度如果超过屏幕宽度，设置最大宽度为屏幕宽度
if (container.offsetWidth > window.innerWidth) {
container.style.width = window.innerWidth + 'px';
// 此时画布宽度需要同步调整，保证内容不被压缩
canvas.style.width = window.innerWidth + 'px';
}
}
}
3. 监听窗口尺寸变化
为了让窗口尺寸变化时也能自动调整布局，我们需要监听resize事件，并在页面加载完成后首次执行调整函数：
// 页面加载完成后首次执行调整
window.addEventListener('load', adjustGameCanvas);
// 监听窗口尺寸变化事件
window.addEventListener('resize', adjustGameCanvas);
4. 添加HTML容器结构
对应的HTML页面中需要添加画布的挂载容器，样式可以简单设置：
<!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>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #000;
}
#game-container {
position: relative;
}
</style>
</head>
<body>
<div id="game-container"></div>
<script src="https://cdn.jsdelivr.net/npm/phaser@3/dist/phaser.min.js"></script>
<script src="game.js"></script>
</body>
</html>
效果验证与注意事项
完成以上配置后，你可以尝试调整浏览器窗口的尺寸，会发现游戏画布的高度始终占满整个窗口高度，当窗口宽度变小时，超出窗口的部分会被父容器裁剪，不会出现横向滚动条，游戏内容也不会被拉伸变形。
注意：如果你的游戏中有需要跟随屏幕宽度变化的UI元素，可以在adjustGameCanvas函数中添加对应的调整逻辑，根据当前的画布实际尺寸重新计算UI元素的位置。这种方案的优势在于完全手动控制画布尺寸，适配逻辑清晰，不会出现Phaser自带缩放模式可能导致的显示异常问题，适合大多数需要固定宽高比同时做宽度裁剪的游戏场景。