如何使用Phaser.js獲取與Slither.io相似的屏幕縮放比例？

我正在使用Phaser.js引擎作爲後端，在JavaScript中編寫一個小遊戲。但是，知道這是可能的，屏幕縮放問題已被證明是最難的一方。如何使用Phaser.js獲取與Slither.io相似的屏幕縮放比例？

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

來源

2016-12-15 Merlin

https://phaser.io/examples/v2/display/fullscreen https://phaser.io/examples/v2/display/fullscreen-buttons – Vlad

除非您爲不同的屏幕比例提供自己的圖像，否則我不會認爲你可以保持你當前圖像的規模。 – Vlad

但檢查文檔的規模經理，我認爲有4個選項縮放，SHOW_ALL，EXACT_FIT，調整大小和NO_SCALE我認爲。 – Vlad

我終於解開了它的一些事情

一的方式，將您的遊戲規模的模式：

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

這確有影響，特別是對全窗口大小。而不是依靠的jQuery的縮放，我則可以用這個：

game.scale.setResizeCallback(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的分割比例完全是個人偏好。我幾乎忘了它的最大部分 - 讓你的相機專注於你正在觀看的中心物體。

來源

2016-12-18 11:36:53 Merlin

如何使用Phaser.js獲取與Slither.io相似的屏幕縮放比例？

回答

相關問題