Phaser 3 游戏画布响应式布局：以高度控制宽度，实现居中裁剪效果-js教程-PHP中文网

Phaser 3 游戏画布响应式布局：以高度控制宽度，实现居中裁剪效果

本教程深入探讨了phaser 3游戏中实现特定响应式布局的方法。当传统的`phaser.scale.fit`无法满足需求，特别是需要画布以高度为基准自适应宽度，并允许两侧内容被裁剪时，`phaser.scale.height_controls_width`结合适当的html和css配置，能够提供一个优雅且高效的解决方案，确保游戏内容始终居中显示。

在开发Phaser 3游戏时，实现画布的响应式布局是一个常见而关键的需求。Phaser 3内置的Scale Manager提供了多种缩放模式，例如Phaser.Scale.FIT，它能够确保游戏内容在保持原始宽高比的同时，完整地适应屏幕尺寸。然而，在某些特定的设计场景下，开发者可能需要更灵活的控制，例如，希望游戏画布的高度固定或按比例填充，而宽度则根据可用空间自适应，并允许裁剪掉超出画布两侧的内容，同时保持核心内容居中。本文将详细介绍如何通过Phaser.Scale.HEIGHT_CONTROLS_WIDTH模式，结合精妙的HTML和CSS布局，实现这种高度控制、宽度自适应且居中裁剪的响应式效果。

理解 Phaser 3 的缩放模式

Phaser 3的Scale Manager是处理游戏画布尺寸和缩放的核心。它提供了多种mode来适应不同的响应式需求：

Phaser.Scale.FIT: 这是最常用的模式之一，它会缩放游戏画布以适应父容器，同时保持游戏的原始宽高比。这意味着游戏内容将完整显示，但可能会在画布的顶部/底部或左侧/右侧留下空白（黑边）。
Phaser.Scale.NONE: 在此模式下，Phaser不会自动缩放画布。开发者需要完全手动管理画布的尺寸和位置，通常通过监听window的resize事件并手动调整画布或摄像机来完成。这种方式提供了最大的灵活性，但也增加了实现的复杂性。
Phaser.Scale.HEIGHT_CONTROLS_WIDTH: 这是本文重点介绍的模式。它根据画布的高度来控制宽度。具体来说，它会确保画布的高度填充父容器的可用高度，然后根据游戏的原始宽高比计算出相应的宽度。如果计算出的宽度超出父容器的宽度，超出部分将被裁剪；如果宽度小于父容器，则画布会居中显示。这种模式非常适合需要游戏内容垂直方向完全显示，而水平方向可以适度裁剪的设计。

实现高度控制宽度自适应布局

要实现高度控制宽度自适应，并允许两侧内容裁剪的效果，我们需要综合运用HTML、CSS和Phaser配置。

1. HTML 结构

首先，在HTML文件中为Phaser游戏画布准备一个父容器。这个容器将负责Phaser画布的定位和尺寸限制。

<!DOCTYPE html>
<html>
<head>
    <title>Phaser 3 Responsive Game</title>
    <style>
        /* CSS 将在这里 */
    </style>
</head>
<body>
    <div id="phaser-parent"></div>
    <script src="main.js"></script>
</body>
</html>

登录后复制

2. CSS 样式

CSS是实现居中和裁剪效果的关键。我们需要设置html和body元素以确保它们占据整个视口，并为Phaser的父容器设置display: flex来居中其内容。overflow: hidden将确保超出父容器的内容被裁剪。

html, body {
    width: 100%;
    height: 100%;
    margin: 0; /* 移除默认边距 */
    padding: 0; /* 移除默认内边距 */
    overflow: hidden; /* 防止滚动条出现 */
}

#phaser-parent {
    display: flex; /* 启用Flexbox布局 */
    justify-content: center; /* 水平居中内容 */
    align-items: center; /* 垂直居中内容 */
    width: 100vw; /* 宽度占据视口100% */
    height: 80vh; /* 高度占据视口80%，可根据需求调整 */
    /* background-color: #282c34; /* 可选：设置背景色以便观察 */
    overflow: hidden; /* 确保超出此容器的内容被裁剪 */
}

登录后复制

关键点解释：

html, body { width: 100%; height: 100%; overflow: hidden; }: 确保html和body元素填充整个浏览器视口，并隐藏可能出现的滚动条。
#phaser-parent { display: flex; justify-content: center; align-items: center; }: 这段CSS使用Flexbox将Phaser画布在其父容器中水平和垂直居中。
width: 100vw; height: 80vh;: vw (viewport width) 和 vh (viewport height) 单位确保了父容器的尺寸是相对于浏览器视口动态调整的。你可以根据设计需求调整height的值，例如100vh让游戏占据整个视口高度。
overflow: hidden;: 这是实现裁剪效果的关键。当Phaser画布的宽度超出#phaser-parent容器时，超出部分将被隐藏。

3. Phaser 游戏配置

最后，在Phaser游戏配置中，我们需要指定正确的缩放模式和父容器。

百度·度咔剪辑

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

查看详情

import Phaser from 'phaser';

const config = {
    type: Phaser.AUTO, // 或 Phaser.WEBGL, Phaser.CANVAS
    backgroundColor: '#282c34', // 游戏背景色
    parent: 'phaser-parent', // 指定HTML中的父容器ID
    scale: {
        mode: Phaser.Scale.HEIGHT_CONTROLS_WIDTH, // 核心：高度控制宽度模式
        autoCenter: Phaser.Scale.CENTER_BOTH, // 可选：确保画布在父容器中居中，但CSS已处理
        width: '100%', // 画布宽度将根据父容器宽度自适应
        height: '100%' // 画布高度将填充父容器高度
    },
    scene: [ /* 你的场景列表 */ ],
    // ... 其他游戏配置
};

const game = new Phaser.Game(config);

export default game;

登录后复制

关键点解释：

parent: 'phaser-parent': 告知Phaser将游戏画布渲染到ID为phaser-parent的HTML元素内部。
mode: Phaser.Scale.HEIGHT_CONTROLS_WIDTH: 明确指定缩放模式。Phaser会根据父容器的高度来调整画布的高度，并相应地计算宽度，以保持游戏的原始宽高比。
width: '100%', height: '100%': 这些值是相对于parent容器的。在HEIGHT_CONTROLS_WIDTH模式下，height: '100%'意味着画布将尝试填充父容器的整个高度。然后，Phaser会根据游戏的内部尺寸和这个高度来计算出画布的实际宽度。
autoCenter: Phaser.Scale.CENTER_BOTH: 尽管CSS已经处理了父容器的居中，但Phaser的这个设置可以进一步确保画布本身在父容器中居中（如果画布尺寸小于父容器）。

完整示例代码

结合上述HTML、CSS和JavaScript，一个完整的实现如下：

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>Phaser 3 Height Controls Width Responsive</title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #1a1a1a; /* 全局背景色 */
        }

        #phaser-parent {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100vw;
            height: 80vh; /* 示例：游戏区域占据视口高度的80% */
            /* background-color: #333; /* 调试用，显示父容器区域 */
            overflow: hidden; /* 裁剪超出部分 */
        }
    </style>
</head>
<body>
    <div id="phaser-parent"></div>
    <script src="main.js"></script> <!-- 你的Phaser游戏入口文件 -->
</body>
</html>

登录后复制

main.js

import Phaser from 'phaser';

// 假设你有两个场景
class SplashScreen extends Phaser.Scene {
    constructor() {
        super('SplashScreen');
    }

    preload() {
        this.load.image('logo', 'assets/phaser-logo.png'); // 示例加载一个图片
    }

    create() {
        const { width, height } = this.scale;
        this.add.text(width / 2, height / 2 - 50, 'Phaser 3 Responsive Demo', {
            fontSize: '32px',
            fill: '#fff'
        }).setOrigin(0.5);
        this.add.image(width / 2, height / 2 + 50, 'logo').setOrigin(0.5);

        // 监听缩放事件，但在此模式下，Phaser Scale Manager 会自动处理
        // 如果需要基于缩放后的实际尺寸做特殊布局，可以在这里处理
        this.scale.on('resize', this.handleResize, this);
    }

    handleResize(gameSize, baseSize, displaySize, resolution) {
        // 在 HEIGHT_CONTROLS_WIDTH 模式下，Phaser 会自动调整画布和摄像机
        // 这里的回调更多用于通知场景尺寸变化，以便调整UI元素等
        console.log('Canvas resized:', displaySize.width, displaySize.height);
        // 如果有固定位置的UI元素，可能需要根据新的displaySize重新定位
    }
}

class GameScreen extends Phaser.Scene {
    constructor() {
        super('GameScreen');
    }

    create() {
        const { width, height } = this.scale;
        this.add.text(width / 2, height / 2, 'Game Content Here', {
            fontSize: '48px',
            fill: '#0f0'
        }).setOrigin(0.5);

        // 创建一个可观察的矩形，模拟游戏区域边界
        const graphics = this.add.graphics({ lineStyle: { width: 4, color: 0xff0000 } });
        graphics.strokeRect(0, 0, width, height);

        // 监听缩放事件
        this.scale.on('resize', this.handleResize, this);
    }

    handleResize(gameSize, baseSize, displaySize, resolution) {
        // 更新场景内的元素布局
        const { width, height } = this.scale; // 获取当前场景的尺寸
        this.children.list.forEach(child => {
            if (child.type === 'Text') {
                child.setPosition(width / 2, height / 2);
            }
            if (child.type === 'Graphics') {
                child.clear();
                child.strokeRect(0, 0, width, height);
            }
        });
        console.log('GameScreen resized:', width, height);
    }
}

const gameConfig = {
    type: Phaser.AUTO,
    backgroundColor: '#282c34',
    parent: 'phaser-parent',
    scale: {
        mode: Phaser.Scale.HEIGHT_CONTROLS_WIDTH,
        autoCenter: Phaser.Scale.CENTER_BOTH,
        width: 1920, // 游戏内部的逻辑宽度，用于计算宽高比
        height: 1080 // 游戏内部的逻辑高度，用于计算宽高比
    },
    scene: [SplashScreen, GameScreen],
};

const game = new Phaser.Game(gameConfig);

登录后复制

在上面的gameConfig中，width: 1920, height: 1080定义了游戏的“设计分辨率”或“原始宽高比”。Phaser.Scale.HEIGHT_CONTROLS_WIDTH模式会尝试将游戏的高度匹配到phaser-parent的高度，然后根据1920/1080这个宽高比来计算出画布的实际宽度。如果这个计算出的宽度大于phaser-parent的宽度，那么画布的两侧就会被裁剪。

注意事项与最佳实践

设计内容安全区: 由于宽度可能会被裁剪，因此在设计游戏UI和放置关键游戏元素时，应将它们集中在屏幕的中央区域，以确保它们在不同屏幕比例下都能被看到。
宽高比的影响: HEIGHT_CONTROLS_WIDTH模式会根据游戏内部定义的宽高比来缩放。如果你的游戏设计没有固定的宽高比，或者需要非常复杂的响应式行为，可能需要结合Phaser.Scale.NONE和手动计算来达到目的。
UI 元素定位: 虽然Phaser的Scale Manager会自动调整画布尺寸，但场景内的UI元素可能需要根据新的this.scale.width和this.scale.height进行重新定位，尤其是在resize事件发生时。在create或handleResize方法中使用this.scale.width和this.scale.height来获取当前画布的实际尺寸。
性能考量: 频繁的浏览器窗口大小调整可能会触发多次缩放事件。Phaser的Scale Manager通常优化了这些操作，但在复杂的场景中仍需注意性能。
测试: 在不同尺寸的浏览器窗口、设备和屏幕方向上测试游戏，确保响应式布局按预期工作。

总结

通过结合使用Phaser.Scale.HEIGHT_CONTROLS_WIDTH模式与精心设计的HTML和CSS布局，我们可以有效地实现Phaser 3游戏画布的高度控制、宽度自适应并允许两侧内容裁剪的响应式需求。这种方法提供了一种优雅的解决方案，特别适用于那些优先保证游戏内容垂直方向完整显示，并允许水平方向进行适度裁剪的设计，从而在各种设备和屏幕尺寸上提供一致且引人入胜的用户体验。

以上就是Phaser 3 游戏画布响应式布局：以高度控制宽度，实现居中裁剪效果的详细内容，更多请关注php中文网其它相关文章！