具有可变背景宽度的 PIXI tilingSprite答案

【问题标题】：PIXI tilingSprite with variable Background width具有可变背景宽度的 PIXI tilingSprite
【发布时间】：2016-09-29 09:06:53
【问题描述】：

我对 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。

【问题讨论】：

我从来没有真正做到这一点，所以我不能给你一个直接明确的答案，但你没有成功通过缩放来做到这一点？先计算你需要的比例大小，设置比例并重新渲染？我不知道 tilingSprites 如果它们是否自动随渲染器缩放（我会假设是这样），它们是如何工作的，所以只需在此处设置背景图像并更改渲染器/画布的大小并重新渲染就可以了。当屏幕为 1200 像素或更少时，您也可以使用普通 Sprite。如果 tilingSprite 是导致问题的原因

标签： javascript pixi.js

【解决方案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/

【讨论】：