生成Phaser 3游戏画布响应式布局的实现方法

林译川

2026-11-03 • 👁 0人浏览过

本文旨在提供一种在Phaser 3中实现游戏画布响应式布局的实用方法。通过调整缩放模式和CSS样式，使游戏画布能够自适应父容器的大小，并保持内容居中显示，即使在浏览器窗口大小调整时也能保证最佳的视觉效果。本文将提供详细的代码示例，帮助开发者轻松实现这一功能。

在Phaser 3中，实现游戏画布的响应式布局，使其能够根据父容器的大小自动调整，并保持内容居中显示，是一个常见的需求。以下提供一种基于`Phaser.Scale.HEIGHT_CONTROLS_WIDTH`缩放模式的实现方法，结合CSS样式，可以达到较好的效果。 ### HTML结构首先，需要在HTML中创建一个父容器，用于承载Phaser 3游戏画布。 ``` 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: 将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事件。 Comet AI 浏览器下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。下载

// 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配置，以达到最佳的视觉效果。

相关文章