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），那么你的两侧会出现黑条。我认为它不擅长缩小纹理，只是增大纹理。

这里的代码总是拉伸纹理以适应屏幕的高度，以及沿宽度的瓷砖：

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

1 个答案: