具有可变背景宽度的 PIXI tilingSprite

Question

我对 PIXI.js 有疑问。有一个使用 1200x1200 图像作为纹理的 tilingSprite。然而，舞台几乎从来没有 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 高度），那么两侧会出现黑条。我猜它不擅长缩小纹理，只能放大它们。

以下代码始终拉伸纹理以适应屏幕高度，并沿宽度拉伸图块：

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/

具有可变背景宽度的 PIXI tilingSprite

PIXI tilingSprite with variable Background width

javascript

pixi.js