Pixi.js 5+中Tiling Sprite在XY轴重复显示异常问题求助

如果你的需求是让图片片段铺满窗口但不重复，直接换普通Sprite就行——TilingSprite本身的设计目的就是重复纹理填充区域，代码改成这样：

createSprite(){
  const texture = Texture.from(this.spriteName);
  const sprite = new Sprite(texture);
  // 直接设置尺寸铺满窗口，无需重复纹理
  sprite.width = window.innerWidth;
  sprite.height = window.innerHeight;
  sprite.position.set(0, 0);
  return sprite;
}

要是必须用TilingSprite，那就调整tileScale让纹理刚好缩放一次填满整个区域，避免重复：

createTilingSprite(){
  const texture = Texture.from(this.spriteName);
  const tilingSprite = new TilingSprite(
    texture,
    window.innerWidth,
    window.innerHeight
  );
  // 计算缩放比例，让纹理刚好覆盖一次TilingSprite的范围
  tilingSprite.tileScale.x = window.innerWidth / texture.width;
  tilingSprite.tileScale.y = window.innerHeight / texture.height;
  tilingSprite.position.set(0, 0);
  return tilingSprite;
}

如果是想让超出纹理的部分拉伸边缘而不是重复，还可以修改纹理的wrap模式（适合需要边缘过渡的场景）：

import { WRAP_MODES } from 'pixi.js';

createTilingSprite(){
  const texture = Texture.from(this.spriteName);
  // 修改基础纹理的wrap模式为clamp，阻止重复
  texture.baseTexture.wrapMode = WRAP_MODES.CLAMP;
  const tilingSprite = new TilingSprite(
    texture,
    window.innerWidth,
    window.innerHeight
  );
  tilingSprite.position.set(0, 0);
  return tilingSprite;
}

内容的提问来源于stack exchange，提问作者Peka