PIXI.Loader不是构造函数报错问题求助

API 探路者

2026-7-8

解决"Uncaught TypeError: PIXI.Loader is not a constructor"问题

问题原因

该错误由PixiJS版本的API变更导致：

PixiJS v7及以上版本已移除全局PIXI.Loader构造函数，官方推荐使用PIXI.Assets API加载资源。
若使用v5及更早版本，Loader的正确引用路径是PIXI.loaders.Loader（小写loaders命名空间），而非顶层的PIXI.Loader。

解决方案

根据你的PixiJS版本选择对应方案：

方案1：使用官方推荐的`PIXI.Assets`（适配v7+）

修改imageLoader.js代码，改用异步的资源加载方式：

export async function addImageToCanvas(imagePath, spriteX, spriteY) {
  const texture = await PIXI.Assets.load(imagePath);
  createSprite(texture, spriteX, spriteY);

  function createSprite(texture, x, y) {
    const sprite = new PIXI.Sprite(texture);
    sprite.x = x;
    sprite.y = y;
    app.stage.addChild(sprite);
  }
}

同时更新game.js中的调用逻辑（异步函数需配合await使用）：

async function drawCloud() {
    if (!cloudExists) {
        await addImageToCanvas("images/cloud.png", 200, 200);
        cloudExists = true;
    }
}

方案2：适配旧版本Loader路径（适配v5及更早）

如果教程使用旧版PixiJS，将imageLoader.js中的PIXI.Loader替换为PIXI.loaders.Loader：

export function addImageToCanvas(imagePath, spriteX, spriteY) {
  const loader = new PIXI.loaders.Loader();
  loader.add('image', imagePath);
  loader.load((loader, resources) => {
    createSprite(resources.image.texture, spriteX, spriteY);
  });

  function createSprite(texture, x, y) {
    const sprite = new PIXI.Sprite(texture);
    sprite.x = x;
    sprite.y = y;
    app.stage.addChild(sprite);
  }
}