如何获得与Slither.io使用Phaser.js类似的屏幕缩放？

Question

我正在使用Phaser.js引擎作为后端，用Javascript编写一个小游戏。然而，知道这是可能的，屏幕缩放问题已被证明是最困难的方面之一。

Slither.io扩展到填充整个屏幕，并保持该比率。我也想用它作为我自己的缩放方法，但是例子似乎比较少。我遇到的那些还不是很清楚。

这两个函数是我到目前为止想出来的，但它们似乎使精灵与窗口的比例相匹配--而不是保持一个比率和比例。

function resizeWindow()
{
    game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
    game.width = window.innerWidth * window.devicePixelRatio;
    game.height = window.innerHeight * window.devicePixelRatioz;    

    gameScale = game.width / game.height;

if (game.height > game.width){
    gameScale = (game.height / 300);
} else {
    gameScale = (game.width / 480);
}   

    //game.scale.pageAlignVertically = true;
    game.scale.pageAlignHorizontally = true;    
    game.scale.refresh();   
    gameScaleManager();
}

function gameScaleManager()
{

    for(var i = 0; i < spriteList.length; i++)
    {
        spriteList[i].scale.setTo(gameScale, gameScale);
    }
}

Answer 1

我最终解决了许多问题

首先，将游戏规模模式设置为：

game.scale.scaleMode = Phaser.ScaleManager.RESIZE;
and then apply
game.scale.pageAlignVertically = true;

这确实很重要，特别是对于整个窗口大小。然后，我不再依赖jQuery进行重新标度，而是设置如下：

game.scale.setResizeCallback(rescale);

rescale方法处理屏幕缩放。

最后，该方法考虑实际工作以及“调整大小”缩放模式，这将影响它的工作方式。从我所做的实验来看，EXACT_FIT和其他人倾向于强迫分辨率与窗口相同。

function rescale()
{
    var windowHeight = window.innerHeight;
    var windowWidth = window.innerWidth;    

    baseWidth = windowWidth * (gameHeight / windowHeight);
    baseHeight = gameHeight;

    if (windowHeight > windowWidth)
    {
        systemScale = (windowHeight / baseHeight) / 1.8;
    } else {
        systemScale = (windowWidth / baseWidth) / 1.8;
    }

    skyBackgroundGroup.scale.setTo(systemScale * (window.innerWidth - DPR / window.innerWidth - DPR) / 100 * 1, systemScale * 2.1);
    MasterControlGroup.scale.setTo(systemScale / 0.98, systemScale / 0.98);
}

除以1.8和0.98的比例，完全是个人喜好。我几乎忘了其中最大的部分--让你的相机聚焦在你正在观看的中心物体上。