Javascript 自动缩放Phaser 3游戏动态执行中

我想知道是否有一种方法可以用设定的分辨率开发我的游戏，例如：

width: 1000,
height: 600,

然后让HTML或Phaser在窗口大小改变时自动缩放画布元素

我试过使用这个：

width: window.innerWidth / 2,
height: window.innerHeight / 2,

但这不会保留纵横比，不能正确缩放精灵/图像，需要重新加载页面进行调整，这意味着我无法使用特定的x/y坐标

我已经研究了Phaser 3的缩放管理器和弹性盒，但它们似乎没有改变画布的大小

试试这个：

---

它允许您将css调整到视口。

我能找到的最简单的解决方案是：

首先，添加以下CSS样式规则： html，正文{ 身高：100%； } 身体{ 保证金：0； 填充：0； 背景：111人； 颜色：eee； 字体：标题； } 帆布{ /*请参阅JS中的postBoot*/ 宽度：100%； 身高：100%； 对象匹配：包含； /* */ } 版本{ 位置：绝对位置； 左：5px； 顶部：605px； } 其次，在config对象中添加回调函数以覆盖Phaser的默认样式，如下所示： 我找到了代码示例

编辑：

如果希望在执行过程中更改窗口时调整游戏大小，可以在更新循环中执行类似的功能，如下所示：

function update(){
    (function() {
        const gameId = document.getElementById("game"); // Target div that wraps the phaser game
        gameId.style.width = '100%'; // set width to 100%
        gameId.style.height = '100%'; // set height to 100%
    })(); // run function
}

---

你能为它生成一个虚拟和工作小提琴吗？你是如何尝试使用ScaleManager的？它应该调整画布的大小。这个解决方案的问题是，我所有的精灵都不会被缩放，只有画布。我正在寻找一种可以根据屏幕大小来缩放整个游戏的东西，比如一个灵活的盒子，它不会改变Phaser对游戏宽度和高度的解释。你能把它添加到你的html头上，看看它能做什么吗？页面加载时，屏幕处于正常大小。当我缩小页面时，它仍保持正常大小。现在扩展图像会使其吞噬整个页面宽度。对不起，我不知道任何可以帮助您的方法。没问题，谢谢您的尝试。谢谢Manuel，这与我要找的非常接近。通过将你的函数添加到我的更新循环中，我做了一点修改。这样，即使在执行期间，只要更改窗口，它也会调整大小。

function update(){
    (function() {
        const gameId = document.getElementById("game"); // Target div that wraps the phaser game
        gameId.style.width = '100%'; // set width to 100%
        gameId.style.height = '100%'; // set height to 100%
    })(); // run function
}