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

【问题标题】：How can I obtain screen scaling similar to Slither.io's using Phaser.js?如何使用 Phaser.js 获得类似于 Slither.io 的屏幕缩放？
【发布时间】：2016-12-19 02:58:04
【问题描述】：

我正在使用 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);
    }
}

【问题讨论】：

phaser.io/examples/v2/display/fullscreen phaser.io/examples/v2/display/fullscreen-buttons
除非您为不同的屏幕比例提供自己的图像，否则我认为您无法保持当前图像的比例。
但是查看 Scale manager 的文档，我认为有 4 个缩放选项，SHOW_ALL、EXACT_FIT、RESIZE 和 NO_SCALE。
考虑到您可以操纵组和对象的比例，这应该是可能的。我主要是想适应屏幕的比例。
试试我之前提到的常量。但是为了适应不同的屏幕尺寸，您应该加载游戏代码将使用的不同精灵表。您可以更改以编程方式加载的图形。但你的游戏也应该足够聪明，当屏幕尺寸发生变化时如何处理不同的视觉对象。

标签： javascript phaser-framework

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

【讨论】：