Phaser 3 响应式 Canvas 实现：以高度控制宽度-js教程-PHP中文网

Phaser 3 响应式 Canvas 实现：以高度控制宽度

心靈之曲

发布： 2025-10-25 15:44:01

原创

337人浏览过

phaser 3 响应式 canvas 实现：以高度控制宽度

本文旨在提供一种在 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 代码做了以下几件事：

百度·度咔剪辑

度咔剪辑，百度旗下独立视频剪辑App

查看详情

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 样式和场景代码，以实现更复杂的响应式设计。

以上就是Phaser 3 响应式 Canvas 实现：以高度控制宽度的详细内容，更多请关注php中文网其它相关文章！