正確縮放pixi.js中的渲染器

縮放pixi.js渲染器的正確方法是什麼？
我目前使用：正確縮放pixi.js中的渲染器

function resize(container){ 
    ratio = Math.min(window.innerWidth/GAME_WIDTH, window.innerHeight/GAME_HEIGHT); 
    stage.scale.x = stage.scale.y = ratio; 
    var newWidth = Math.ceil(GAME_WIDTH * ratio); 
    var newHeight = Math.ceil(GAME_HEIGHT * ratio); 
    renderer.resize(newWidth, newHeight); 

    container.style.top = (window.innerHeight-newHeight)/2 + 'px'; 
    container.style.left = (window.innerWidth-newWidth)/2 + 'px'; 
}

這個CSS

#game { position: absolute;} 
html,body { 
    padding:0; 
    margin:0; 
    height:100%; 
    width:100%; 
    background-color: #000000; 
}

所以遊戲應該始終保持其高寬比，但它也應該儘可能地大，不超過窗口大小（我不想滾動條出現）。

但是，我的代碼使遊戲窗口稍大，所以滾動條出現，當我向舞臺添加新的孩子時，渲染器底部的某些元素被切斷似乎被切斷。

任何想法我可能做錯了。
是否有任何基本的縮放例子？

每當分辨率發生顯着變化時，替換舊的渲染器是否有意義（性能方面）？目前，我只創建一個具有用戶屏幕寬度/高度的渲染器。
我也有點擔心智能手機/平板電腦改變他們的屏幕方向。

來源

2016-07-26 Forivin

我無法回購您的問題：無論我如何調整窗口大小，我都沒有滾動條，我什麼也沒有被切斷。我在OSX和Safari瀏覽器中使用Chrome。在Firefox中，如果我嘗試滾動但如果添加'canvas {display：block; 「那個問題消失了。 http://fiddle.jshell.net/greggman/s4p5rwqf/show/ – gman

如果我理解正確的比例，聽起來這是我在我的項目，所以： https://github.com/Hachitus/FlaTWorld/blob/master/src/components/map/core/utils/utils.js#L227 和 https://github.com/Hachitus/FlaTWorld/blob/master/src/components/map/core/utils/utils.js#L288 的伎倆在我的遊戲。如果我記得我的功能正確，並且不要忘記之間的任何事情：D。但你至少需要特定的css和PIXI調整功能。

結果應該在自述文件中的plunkr鏈接中看到：https://github.com/Hachitus/FlaTWorld，但我無法在此發佈，因爲它不會被允許沒有代碼（並且它沒有用於發佈）。

性能方面，我不相信你應該創建一個新的渲染器，它可能只是更重的那種方式，但這只是一個預感。

來源

2016-07-28 17:57:40 Hachi

正確縮放pixi.js中的渲染器

回答

相關問題