Pixi.js v8.6.6 透明精灵绘制异常问题求助

我用以下代码将一张瓦片图分割为40×40的区块并绘制到Pixi画布，但透明瓦片无法正确显示，查阅官方文档后仍未找到原因：

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/8.6.6/pixi.min.js"></script>

const tiles = 'https://static.koalabeast.com/textures/musclescupgradients/tiles.png';

(async () => {
  const app = new PIXI.Application();
  await app.init({ width: 640, height: 440 });
  document.body.appendChild(app.view);

  const sheetTexture = await PIXI.Assets.load(tiles);
  const w = 40;
  const sheetBase = sheetTexture.baseTexture;

  const cols = Math.floor(sheetBase.width / w);
  const rows = Math.floor(sheetBase.height / w);

  const tileTextures = [];

  for (let row = 0; row < rows; row++) {
    for (let col = 0; col < cols; col++) {
      const x = col * w;
      const y = row * w;
      const frame = new PIXI.Rectangle(x, y, w, w);

      const tileTex = new PIXI.Texture({ source: sheetBase, frame });
      tileTextures.push(tileTex);

      const sprite = new PIXI.Sprite(tileTex);
      sprite.x = col * w;
      sprite.y = row * w;
      app.stage.addChild(sprite);
    }
  }
})();

相关图片 #

• 绘制结果图：[Pixi绘制结果]
• 原图：[瓦片原图]

问题根源 #

你在创建子纹理时使用了错误的参数名：在Pixi.js 8.x版本中，Texture构造函数的配置项里，指定基础纹理应该用baseTexture而非source。source参数用于传入图片元素、Canvas等原始资源，而不是BaseTexture对象，错误的参数导致透明通道没有被正确识别，所以透明瓦片显示异常。

修复后的代码 #

将创建子纹理的代码行修改为：

const tileTex = new PIXI.Texture({ baseTexture: sheetBase, frame });

额外优化（可选） #

如果希望画布背景透明（让透明瓦片透出页面背景），可以在初始化Application时添加backgroundAlpha: 0配置：

await app.init({ width: 640, height: 440, backgroundAlpha: 0 });

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