前言

上一节我们已经基本了解了 PixiJS 的一些常用 api，本节就带大家开始正式开发游戏相关的一些模块，废话不多，马上开始

资源管理

作为一个游戏应用，图片资源的加载必然是少不了的，而且由于图片加载速度，和渲染性能方面的原因，一般都会在游戏初始化的时候把这些图片资源加载好或者部分加载好后台继续加载，放在缓存中，方便随时调用

而 PixiJS 也提供了相应的 Assets 模块，里面有各种方法来 （backgroundLoadBundle，loadBundle等） 对我们应用中所用到的资源进行管理，接下来我就带着大家一起了解这些方法

资源清单 manifest

manifest 这个单词大家应该都不陌生，它描述了应用程序相关的信息，这里我们定义一个 manifest 对象来记录相关资源的信息

const manifest = {
    bundles: [{
        name: 'game-screen',
        assets: [
            {
                name: 'monster',
                srcs: 'https://pixijs.io/examples/examples/assets/flowerTop.png',
            }
        ]
    }]
}

初始化信息 init

await PIXI.Assets.init({ manifest: manifest })

注意这里使用了 await ，资源管理的大部分方法都是异步执行的，包括后面的 backgroundLoadBundle与loadBundle

后台加载 backgroundLoadBundle

PIXI.Assets.backgroundLoadBundle(['game-screen'])

backgroundLoadBundle 方法可以通过指定 manifest.bundles 中的对象名称进行资源加载，加载成功后，就可以在我们的应用中以纹理的形式传进精灵 Sprite 中进行使用

资源包的加载与使用 loadBundle

const gameScreen = await PIXI.Assets.loadBundle('game-screen')
const monster = new PIXI.Sprite(gameScreen.monster)

app.stage.addChild(monster)

通过使用 loadBundle 加包名获取资源对象，让后通过访问属性名称加载对应的图片纹理，在添加给精灵 Sprite，最后显示到舞台上即可

2022-11-27 23 03 03

普通加载 addBundle

一般小应用我们也可以使用普通加载的方式，我们修改下 manifest 的结构，并且在添加一张图片，使用 addBundle 来试下加载效果

const manifest = {
    monster: 'https://pixijs.io/examples/examples/assets/flowerTop.png',
    monster2: 'https://pixijs.io/examples/examples/assets/flowerTop.png',
}
PIXI.Assets.addBundle('game-screen', manifest)
const gameScreen = await PIXI.Assets.loadBundle('game-screen', (res) => {
    console.log(res);
})
const monster = new PIXI.Sprite(gameScreen.monster)
app.stage.addChild(monster)

2022-11-27 23 17 51

我们可以看到， addBundle 提供了一个回调方法让我们可以实时的打印出加载情况，后续我们的加载进度条，就可以利用这一特性进行开发

好了，关于加载资源这方面的 api 用法到这就基本完成了，下一节我们来一起实现一个资源加载的类，完成后可以直接用于各个项目，敬请关注~谢谢

用 Pixi.js 仿一个 Brotato (三 加载资源)

前言