首页 > 文章 > 前端

Phaser3画布响应式适配技巧

时间：2025-11-17 10:57:37 165浏览收藏

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《Phaser 3 画布响应式适配：控宽保高技巧》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

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 和 JavaScript 代码：

HTML 结构:
首先，我们需要一个父容器来包含 Phaser 3 游戏画布。
```
<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%，您可以根据实际需求调整。
JavaScript 代码 (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 的缩放功能。

理论要掌握，实操不能落！以上关于《Phaser3画布响应式适配技巧》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！