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

Question

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

Slither.io 扩展以填满整个屏幕，并保持比例。我也想将其用作我自己的缩放方法，但示例似乎相当稀少。我遇到的都不是很清楚

这两个函数是我到目前为止想出的，但它们似乎会使精灵匹配 window 比例 - 不保持比例和比例。

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;

这很重要，尤其是对于完整的 window 尺寸。我不再依赖 jQuery 进行重新缩放，而是设置为：

game.scale.setResizeCallback(rescale);

rescale 方法处理屏幕缩放。

最后，此方法与 "RESIZE" 缩放模式一起处理实际工作，这将影响它的工作方式。根据我所做的实验，EXACT_FIT 和其他人倾向于强制分辨率与 window 相同。

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完全是个人喜好。我几乎忘记了其中最重要的部分——让你的相机聚焦在你正在观看的中心物体上。

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

How can I obtain screen scaling similar to Slither.io's using Phaser.js?

javascript

phaser-framework