Phaser 3 游戏画布响应式适配：保持高度控制宽度

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

Phaser 3 游戏画布响应式适配：保持高度控制宽度

2025-10-25

浏览次数：次

返回列表

phaser 3 游戏画布响应式适配：保持高度控制宽度

本文旨在提供一种在 Phaser 3 游戏中实现画布响应式适配的方案，核心思路是利用 `Phaser.Scale.HEIGHT_CONTROLS_WIDTH` 缩放模式，使画布高度适应父容器，宽度随之调整，并始终居中显示。这种方法适用于需要保持游戏核心内容在屏幕中央，允许左右裁剪的场景。

在 Phaser 3 中，Phaser.ScaleManager 提供了多种缩放模式，以适应不同的屏幕尺寸和设备。然而，默认的 Phaser.Scale.FIT 模式可能无法满足所有需求，特别是在需要画布居中显示，并允许裁剪左右内容的情况下。本文将介绍如何使用 Phaser.Scale.HEIGHT_CONTROLS_WIDTH 模式来实现这种响应式适配效果。

核心概念：HEIGHT_CONTROLS_WIDTH 模式

Phaser.Scale.HEIGHT_CONTROLS_WIDTH 模式的核心在于，画布的高度将决定其宽度。这意味着，当父容器的高度发生变化时，画布的高度将自动调整以适应父容器，而画布的宽度将根据高度的比例进行调整。

实现步骤

以下是一个具体的实现步骤，包括 HTML、CSS 和 J*aScript 代码：

HTML 结构:

首先，我们需要一个父容器来包含 Phaser 3 游戏画布。
小爱开放平台
小米旗下小爱开放平台
291 查看详情
```
<html>
    <body>
        <div id="parent"> </div>
    </body>
</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: 设置宽度和高度为 100%，并隐藏溢出内容，防止出现滚动条。
- #parent: 使用 flexbox 布局，使画布在父容器中居中显示。 width: 100vw; 确保父容器占据整个视口的宽度。height: 80vh;设置父容器的高度为视口高度的80%，您可以根据实际需求调整。
J*aScript 代码 (Phaser 3 配置):

在 Phaser 3 的配置中，我们需要设置 scale 属性。
```
const config = {
    type: Phaser.AUTO, // 或者 Phaser.WEBGL, Phaser.CANVAS
    scale: {
        mode: Phaser.Scale.HEIGHT_CONTROLS_WIDTH,
        parent: 'parent',
        width: '100%', //可以设置为任何值，因为会被高度控制
        height: '100%', //可以设置为任何值，因为会被父容器高度控制
        autoCenter: Phaser.Scale.CENTER_BOTH // 可选，使画布在父容器中居中
    },
    scene: [...] // 你的场景
};

const game = new Phaser.Game(config);
```
- mode: Phaser.Scale.HEIGHT_CONTROLS_WIDTH: 设置缩放模式为高度控制宽度。
- parent: 'parent': 指定父容器的 ID。
- width: '100%': 将画布的宽度设置为父容器的 100%。这个值将被高度控制，所以可以设置为任何值。
- height: '100%': 将画布的高度设置为父容器的 100%。这个值将被父容器高度控制，所以可以设置为任何值。
- autoCenter: Phaser.Scale.CENTER_BOTH: 可选，使画布在父容器中水平和垂直居中。

注意事项

确保父容器的 CSS 样式正确设置，特别是 width、height 和 display 属性。
Phaser.Scale.CENTER_BOTH 属性是可选的，但它可以确保画布在父容器中居中显示。
根据您的游戏设计，可能需要调整父容器的高度和宽度，以获得最佳的视觉效果。

总结

通过使用 Phaser.Scale.HEIGHT_CONTROLS_WIDTH 缩放模式，我们可以轻松地实现 Phaser 3 游戏画布的响应式适配，使游戏在不同的屏幕尺寸和设备上都能保持良好的视觉效果。这种方法特别适用于需要保持游戏核心内容在屏幕中央，允许左右裁剪的场景。希望本文能帮助您更好地理解和应用 Phaser 3 的缩放功能。

以上就是Phaser 3 游戏画布响应式适配：保持高度控制宽度的详细内容，更多请关注其它相关文章！