javascript - 具有可变背景宽度的 PIXI tilingSprite

Question

我的 PIXI.js 遇到问题。有一个 tilingSprite 使用 1200x1200 图像作为纹理。然而，舞台几乎从来没有 1200 像素宽，而是响应屏幕宽度。 我很难弄清楚如何使 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。

Answer 1

我计算了纹理大小和背景大小之间的比率。需要注意的重要一点是，WebGL 渲染器要求背景纹理分辨率为 2 的幂。 2、4、8、16、256、512。此外，如果纹理大于屏幕尺寸(例如，纹理高度为 1024，但屏幕高度仅为 960)，则侧面会出现黑条。我猜它不擅长缩小纹理，只能放大它们。

下面的代码始终拉伸(stretch)纹理以适应屏幕的高度，并沿宽度拉伸(stretch)图 block :

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/