使用PIXI.js 7.1.1调用PIXI.Loader.shared报TypeError错误求助

问题原因 #

PIXI.js 从v5版本开始就移除了内置的Loader类，v7.1.1版本里完全不存在PIXI.Loader这个全局对象，所以你访问PIXI.Loader.shared会抛出"Cannot read properties of undefined"的错误。当前PIXI的资源加载功能由@pixi/assets模块提供，这是官方指定的替代方案。

修复方案 #

直接使用PIXI.Assets替代原有的Loader逻辑，它提供了Promise和事件监听两种加载回调方式，以下是两种可行的代码修改示例：

方式一：使用Promise异步加载

import * as PIXI from 'pixi.js';

export default class Symbols {
    constructor(onAssetsLoaded) {
        this.symbolHeight = 40;
        this.symbolSpacing = 120;
        this.symbols = [];
        this.symbolPaths = [];
        this.rngMap = {};

        this.loadAssets(onAssetsLoaded);
    }

    async loadAssets(onAssetsLoaded) {
        try {
            // 添加资源到加载队列并执行加载
            await PIXI.Assets.add('symbols', 'assets/symbol_0_base.png');
            await PIXI.Assets.load('symbols');
            // 加载完成触发回调
            onAssetsLoaded();
        } catch (error) {
            console.error('资源加载失败:', error);
        }
    }
}

方式二：使用事件监听（贴近原Loader用法）

import * as PIXI from 'pixi.js';

export default class Symbols {
    constructor(onAssetsLoaded) {
        this.symbolHeight = 40;
        this.symbolSpacing = 120;
        this.symbols = [];
        this.symbolPaths = [];
        this.rngMap = {};

        this.loadAssets(onAssetsLoaded);
    }

    loadAssets(onAssetsLoaded) {
        // 注册资源
        PIXI.Assets.add('symbols', 'assets/symbol_0_base.png');
        // 监听加载完成事件
        const completeHandler = (assetKey) => {
            if (assetKey === 'symbols') {
                onAssetsLoaded();
                // 移除监听避免重复触发
                PIXI.Assets.off('complete', completeHandler);
            }
        };
        PIXI.Assets.on('complete', completeHandler);
        // 启动加载
        PIXI.Assets.load('symbols');
    }
}

补充说明 #

• @pixi/assets是PIXI.js v7的核心资源管理模块，默认已包含在pixi.js包内，无需额外安装。
• 若需加载多个资源，可直接传入资源键名数组，比如PIXI.Assets.load(['symbols', 'bgImage', 'soundFile'])。

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