Phaser framework 如何使用Phaser 3使画布具有响应性？

以前我在做相位器2，但现在我需要切换到相位器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;  
}

---

Phaser 3还没有规模管理器，但正在开发中。现在我建议如下。它基本上使用一些CSS将画布居中，然后调用一个resize函数，当窗口发出resize事件时，该函数处理保持游戏比率的操作

以下是上面链接的教程中使用的代码： css：

调整大小功能：

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";
    }
}

---

尝试将最大宽度添加到画布css，然后根据纵横比添加最大高度。例如：

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

。简言之：

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);

---

这是完整的代码，是一些使用缩放管理器处理资源（图像、精灵等）的有用示例有时位置和大小？

可能重复未捕获类型错误：无法读取未定义的属性“FIT”-我做错了什么？@Jess似乎应该将其重命名为

Phaser.Scale.ScaleModes.FIT

或仅将其编码为

3

@Vlad你确定吗？我看到当前版本的Phase 3.23正在使用中，它使用的是

Phaser.Scale.FIT

@Jess我使用的是Kotlin，不知道如何使用typescript

enum

外部定义。所以我只是简单地用magic numberrit硬编码，如果你描述得更多，会更好。这对我来说很有用。我必须从游戏中删除var，并在onload之外声明config以使其正常工作。新代码是

window.onload=function（）{//Game config here Game=new Phaser.Game（config）；resize（）；window.addEventListener（“resize”，resize，false）；}

。现在可以完美工作了：）

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

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);