本文旨在提供一种在phaser 3中实现游戏画布响应式布局的实用方法。通过调整缩放模式和css样式，使游戏画布能够自适应父容器的大小，并保持内容居中显示，即使在浏览器窗口大小调整时也能保证最佳的视觉效果。本文将提供详细的代码示例，帮助开发者轻松实现这一功能。
在Phaser 3中，实现游戏画布的响应式布局，使其能够根据父容器的大小自动调整，并保持内容居中显示，是一个常见的需求。以下提供一种基于`Phaser.Scale.HEIGHT_CONTROLS_WIDTH`缩放模式的实现方法，结合CSS样式，可以达到较好的效果。 ### HTML结构 首先，需要在HTML中创建一个父容器，用于承载Phaser 3游戏画布。 ```htmlCSS样式
接下来，使用CSS样式来控制父容器的布局和大小。以下示例代码展示了如何使父容器居中显示，并占据浏览器窗口的大部分高度。
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
#parent {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 80vh;
}说明:
- html, body: 将html和body的高度和宽度设置为100%，并隐藏溢出内容，防止出现滚动条。
- #parent: 使用Flexbox布局，使内容在水平和垂直方向上居中。width: 100vw表示宽度为视窗宽度，height: 80vh表示高度为视窗高度的80%。可以根据实际需求调整高度值。
Phaser 3配置
在Phaser 3的配置中，需要设置缩放模式为Phaser.Scale.HEIGHT_CONTROLS_WIDTH，并将parent属性设置为父容器的ID。
const config = {
type: Phaser.AUTO,
backgroundColor: '#282c34',
scale: {
mode: Phaser.Scale.HEIGHT_CONTROLS_WIDTH,
parent: 'parent',
width: '100%',
height: '100%',
autoCenter: Phaser.Scale.CENTER_BOTH
},
scene: {
preload: preload,
create: create
}
};
const game = new Phaser.Game(config);
function preload ()
{
this.load.setBaseURL('http://labs.phaser.io');
this.load.image('sky', 'assets/skies/space3.png');
this.load.image('logo', 'assets/sprites/phaser3-logo.png');
this.load.image('red', 'assets/particles/red.png');
}
function create ()
{
this.add.image(400, 300, 'sky');
var particles = this.add.particles('red');
var emitter = particles.createEmitter({
speed: 100,
scale: { start: 1, end: 0 },
blendMode: 'ADD'
});
var logo = this.physics.add.image(400, 100, 'logo');
logo.setVelocity(100, 200);
logo.setBounce(1, 1);
logo.setCollideWorldBounds(true);
emitter.startFollow(logo);
}说明:
- mode: Phaser.Scale.HEIGHT_CONTROLS_WIDTH: 此模式下，高度将控制宽度。这意味着游戏画布的高度将始终适应父容器的高度，而宽度将根据游戏内容的宽高比进行调整。
- parent: 'parent': 指定Phaser 3游戏画布的父容器为ID为parent的DOM元素。
- width: '100%', height: '100%': 设置画布的宽高为父容器的100%。
- autoCenter: Phaser.Scale.CENTER_BOTH: 将画布在父容器中水平和垂直居中。
场景中的调整（可选）
如果需要在场景中对画布大小进行进一步调整，可以使用resize事件。
// Game Screen
create(){
this.scale.on('resize', this.resize, this);
}
resize (gameSize: { width: any; height: any; }, baseSize: any, displaySize: any, resolution: any){
this.cameras.resize(displaySize._parent._width, displaySize._parent._height);
}总结:
通过结合Phaser.Scale.HEIGHT_CONTROLS_WIDTH缩放模式和CSS样式，可以实现Phaser 3游戏画布的响应式布局。这种方法能够使游戏画布自适应父容器的大小，并保持内容居中显示，从而提供更好的用户体验。开发者可以根据实际需求调整CSS样式和Phaser 3配置，以达到最佳的视觉效果。
