如何使用Phaser 3使画布响应式？

Question

之前我一直在使用Phaser 2，但现在需要转换到Phaser 3。

我尝试使用ScaleManager使画布响应式，但它没有起作用。

我认为一些方法已经改变了，但我没有找到任何帮助来将舞台全屏重新缩放。

var bSize = {
  bWidth: window.innerWidth ||
    root.clientWidth ||
    body.clientWidth,
  bHeight: window.innerHeight ||
    root.clientHeight ||
    body.clientHeight,
};

var game;

var canvas = document.getElementById("canvas");

function create() {

    // Scaling options
    game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;

    // Have the game centered horizontally
    game.scale.pageAlignHorizontally = true;

    // And vertically
    game.scale.pageAlignVertically = true;

    // Screen size will be set automatically
    game.scale.setScreenSize(true);
}

window.onload = function() {

    // Create game canvas and run some blocks
    game = new Phaser.Game(
        bSize.bWidth, //is the width of your canvas i guess
        bSize.bHeight, //is the height of your canvas i guess
        Phaser.AUTO, 
        'frame', { create: create });

    canvas.style.position = "fixed";
    canvas.style.left = 0;
    canvas.style.top = 0;  
}

- Kothari Ankit

---

可能是[如何将Phaser 3游戏及其资源缩放以在智能手机和平板电脑上运行？]的重复问题(https://dev59.com/jqvka4cB1Zd3GeqP1v7a)。 - James Skemp

Answer 1

自 v3.16.0 起，请使用比例管理器。简而言之：

var config = {
    type: Phaser.AUTO,
    scale: {
        mode: Phaser.Scale.FIT,
        parent: 'phaser-example',
        autoCenter: Phaser.Scale.CENTER_BOTH,
        width: 800,
        height: 600
    },
    //... other settings
    scene: GameScene
};

var game = new Phaser.Game(config);

这里是完整的代码，这里有一些使用缩放管理器的有用示例。

- user6338195

---

“Uncaught TypeError: Cannot read property 'FIT' of undefined” - 我做错了什么？ - Jess

@Jess 看起来应该将其重命名为 Phaser.Scale.ScaleModes.FIT 或者直接硬编码为 3 源代码。 - Vlad

@Vlad 你确定吗？我看到这个示例中使用的是当前版本为3.23的Phase，并且它正在使用Phaser.Scale.FIT。 - Jess

@Jess 我正在使用 Kotlin，不知道如何在其中使用 TypeScript 的“枚举”外部定义。因此，我只是用魔术数字硬编码了。 - Vlad

Answer 2

目前Phaser 3还没有比例管理器，但正在开发中。现在我建议按照这个教程进行操作。它基本上通过一些CSS居中画布，然后调用一个调整大小的函数来处理窗口发出的调整大小事件时维护游戏比例。

以下是上述教程中使用的代码： CSS部分：

canvas {
    display: block;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

调整大小功能：

function resize() {
    var canvas = document.querySelector("canvas");
    var windowWidth = window.innerWidth;
    var windowHeight = window.innerHeight;
    var windowRatio = windowWidth / windowHeight;
    var gameRatio = game.config.width / game.config.height;

    if(windowRatio < gameRatio){
        canvas.style.width = windowWidth + "px";
        canvas.style.height = (windowWidth / gameRatio) + "px";
    }
    else {
        canvas.style.width = (windowHeight * gameRatio) + "px";
        canvas.style.height = windowHeight + "px";
    }
}

然后：

window.onload = function() {
    //Game config here
    var config = {...};
    var game = new Phaser.Game(config);
    resize();
    window.addEventListener("resize", resize, false);
}

- Fabadiculous

---

这对我有用。我必须从游戏中删除var并在onload之外声明config才能使其正常工作。新代码是window.onload = function () { //Game config here game = new Phaser.Game(config); resize(); window.addEventListener("resize", resize, false); }。现在完美运行 :) - Daniel Black

Answer 3

尝试在canvas的CSS中添加max-width，然后根据宽高比添加max-height。例如：

canvas {
 display: block;
 margin: 0;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 max-width: 100%;
 max-height: 50vw;
}

- theBigBadBacon

Answer 4

规模管理器会处理资产（图像，精灵等）的位置和尺寸吗？

- Sebastián Mahuzier

---

最好能够更详细地描述。 - Er. Amit Joshi