PIXI tilingSprite可變背景寬度

我有PIXI.js的問題。有一個tilingSprite使用1200x1200圖像作爲紋理。然而，舞臺幾乎從來沒有1200像素寬，但對屏幕寬度有反應。我很難弄清楚如何使tilingSprite始終是舞臺的寬度。PIXI tilingSprite可變背景寬度

這是我的代碼來生成tilingSprite。

var background, 
    backgroundTexture = new PIXI.Texture.fromImage('modules/foo/bar/texture.jpg'); 

    //backgroundTexture.baseTexture.width = stageWidth; 
    //backgroundTexture.update(); 

    background = new PIXI.extras.TilingSprite(backgroundTexture, stageWidth, stageHeight); 

    return background;

我已經嘗試運用scale.x和scale.y，設置紋理和tilingSprite的寬度，與baseTexture擺弄周圍。

我將不勝感激任何提示。使用的PIXI版本是3.0.10。

來源

2016-09-29 Kyoss

我從來沒有真正做到這一點，所以我不能給你一個明確的答案，但你沒有成功地通過縮放來實現？首先計算您需要的比例量，設置比例並重新渲染？我不知道tilingSprites是如何自動按照渲染器進行縮放的（我會這麼認爲），所以只需在那裏設置背景圖像並更改渲染器/畫布的大小並重新渲染即可。當屏幕爲1200px或更少時，您也可以使用普通的Sprite。如果tilingSprite是造成問題的那個 – Hachi

我計算了我的紋理的大小和背景大小之間的比率。重要的是要注意的是，WebGL渲染器需要你的背景紋理分辨率是2的冪。如果紋理大於屏幕尺寸（例如1024高度紋理但屏幕僅爲960高度），那麼你將在側面得到黑條。我認爲它不善於縮小紋理，只是增加它們。

這裏的代碼，總是拉伸紋理，以適應屏幕的高度，並沿寬度瓦：

var bg, WIDTH, HEIGHT, 
    preload = function() { 
     bg = game.add.tileSprite(0, 0, WIDTH, HEIGHT, 'background'); 
    }, 

    resizeBg = function() { 
     // Determine which screen dimension is most constrained 
     //var ratio = Math.max(WIDTH/bg.texture.width, HEIGHT/bg.texture.height); 

     // always favor height, tile width 
     var ratio = HEIGHT/bg.texture.height; 

     // Scale the view appropriately to fill that dimension 
     bg.scale.x = bg.scale.y = ratio; 

     bg.scale.setTo(ratio, ratio); 
    }, 

    resize = function (width, height) { 

     // If the game container is resized this function will be called automatically. 
     // You can use it to align sprites that should be fixed in place and other responsive display things. 

     WIDTH = game.width || 540; 
     HEIGHT = game.height || 960; 

     if (bg) { 
      resizeBg(); 
     } 
    };

從http://www.rocketshipgames.com/blogs/tjkopena/2015/09/basic-scaling-animation-and-parallax-in-pixi-js-v3/

來源

2016-12-05 00:11:18 phreakhead

PIXI tilingSprite可變背景寬度

回答

相關問題