PIXI.js网格重复纹理背景平移时出现纹理边缘闪烁伪影的问题求助

嘿，我遇到了一个PIXI.js的棘手问题，想请大家帮忙支支招！

当我平移/移动背景的时候，纹理的边缘总是会出现闪烁的情况，我完全不知道从哪里开始排查修复。我试过把所有精灵合并到一张图里再放回画布，但根本没起作用。

以下是我目前的代码：

// 全局变量假设已声明：app, frameCache
// 创建pixi canvas和app
async function initPixi(){
  app = new PIXI.Application();
  await app.init({ width: 1280, height:800 });
  document.body.appendChild(app.canvas);
};

// 缓存用于绘制的纹理
function cacheFrame(id,Col,Row) {
  const url ='https://static.koalabeast.com/textures/classic/tiles.png';
  const img = new Image();
  img.crossOrigin = 'anonymous';
  img.src = url;
  img.onload = () => {
    const source = new PIXI.ImageSource({ resource: img });
    const frame = new PIXI.Rectangle(
      Col * 40,
      Row * 40,
      40,
      40
    );
    frameCache[id] = new PIXI.Texture({ source, frame });
  };
};

// 在30x30网格中绘制纹理
function drawMap(){
  const tex = frameCache[0];
  for (let x = 0; x < 30; x++){
    for (let y = 0; y < 30; y++){
      const sprite = new PIXI.Sprite(tex);
      sprite.x = x * 40;
      sprite.y = y * 40;
      app.stage.addChild(sprite);
    }
  }
}

可能的解决方案和排查方向 #

结合这类问题的常见修复思路，给你几个可以尝试的方向：

• 调整纹理过滤模式
  这种边缘闪烁大多是纹理采样的问题，你可以给缓存的纹理设置更合适的过滤模式，关闭不必要的mipmap：

  // 在cacheFrame函数创建纹理后添加
  frameCache[id] = new PIXI.Texture({ source, frame });
  // 用最近邻过滤，适合像素风格纹理，避免边缘混合
  frameCache[id].filterMode = PIXI.FilterMode.NEAREST;
  // 关闭mipmap，减少采样误差
  frameCache[id].mipmap = PIXI.MIPMAP_MODES.OFF;
  

• 强制像素完美对齐
  亚像素渲染会让精灵的坐标出现小数，导致边缘半透明闪烁。你可以开启全局的像素对齐设置：

  // 在initPixi函数的最开头添加
  PIXI.settings.ROUND_PIXELS = true;
  

• 改用TilingSprite替代手动拼精灵
  你现在手动创建900个精灵来拼网格，不仅性能一般，还容易出现拼接边缘的采样问题。PIXI的TilingSprite是专门为重复纹理背景设计的，能自动处理纹理拼接：

  // 替换原有的drawMap函数
  function drawMap(){
    const tex = frameCache[0];
    // 创建覆盖30x30网格的TilingSprite
    const tilingSprite = new PIXI.TilingSprite(
      tex,
      30 * 40, // 总宽度
      30 * 40  // 总高度
    );
    app.stage.addChild(tilingSprite);
    // 后续平移背景时，直接修改tilePosition即可
    // 比如 tilingSprite.tilePosition.x -= 1;
  }
  

• 检查纹理裁剪的边缘
  有时候纹理裁剪时刚好卡到像素边界，导致采样到相邻纹理的像素。你可以尝试给裁剪的Rectangle稍微调整1像素的偏移，比如把Col * 40改成Col * 40 + 0.5，或者把宽度高度改成39？不过这个优先级可以靠后，先试试前面的方法。

内容来源于stack exchange