使用 PIXI.Assets 加载资源

在 PixiJS 的最新版中，已经不在支持（推荐使用）Loader，取而代之的是 Assets，下面来熟悉一下它的用法。

假设有四张图片，分成两组（分组的需求很真实，有可能一组是预加载资源，一组是正式资源）。

初始化 Application

const canvas = document.getElementById('my-canvas')

const app = new PIXI.Application({
    width: 800,
    height: 600,
    backgroundColor: '#666',
    view: canvas,
    hello: true
})

声明两组资源

const assets_part0 = {
    'cat': 'assets/cat.jpg',
    'cats': 'assets/cats.jpg',
}

const assets_part1 = {
    'lady': 'assets/lady.jpg',
    'park': 'assets/park.jpg'
}

PIXI.Assets.addBundle('assets-part0', assets_part0)
PIXI.Assets.addBundle('assets-part1', assets_part1)

PIXI.Assets.addBundle 其实就是告知我有一组的资源需要加载，详见文档

加载并显示一些元素

const init = async () => {
    await PIXI.Assets.loadBundle('assets-part0', (process) => {

    })

    await PIXI.Assets.loadBundle('assets-part1', (process) => {

    })

    const park = PIXI.Sprite.from(PIXI.Assets.get('park'))
    app.stage.addChild(park)

    park.interactive = true
    park.on('pointerdown', () => {
        park.interactive = false

        const cat = PIXI.Sprite.from(PIXI.Assets.get('cat'))
        cat.x = 100
        cat.y = 100

        app.stage.addChild(cat)
    })
}

init()

这里要注意全局获取资源（Texture）的方法：PIXI.Assets.get(‘id’)

上面这种写法很符合之前用 Loader 时的写法，其实 PIXI.Assets 还提供了另一种形式：

声明资源

const assets_manifest = {
    bundles: [
        {
            name: 'assets-part0',
            assets: [
                {
                    name: 'cat',
                    srcs: 'assets/cat.jpg'
                },
                {
                    name: 'cats',
                    srcs: 'assets/cats.jpg'
                }
            ]
        },
        {
            name: 'assets-part1',
            assets: [
                {
                    name: 'lady',
                    srcs: 'assets/lady.jpg'
                },
                {
                    name: 'park',
                    srcs: 'assets/park.jpg'
                }
            ]
        }
    ]
}

个人感觉，相较于 addBundle，这样声明资源似乎更麻烦了，尤其是资源非常多的情况下

加载并显示一些元素

const init = async () => {
    await PIXI.Assets.init({
        manifest: assets_manifest
    })

    const assets_part0 = await PIXI.Assets.loadBundle('assets-part0', (process) => {

    })

    const assets_part1 = await PIXI.Assets.loadBundle('assets-part1', (process) => {

    })

    const park = PIXI.Sprite.from(PIXI.Assets.get('park'))
    app.stage.addChild(park)

    park.interactive = true
    park.on('pointerdown', () => {
        park.interactive = false

        const cat = PIXI.Sprite.from(assets_part0['cat'])
        cat.x = 100
        cat.y = 100

        app.stage.addChild(cat)
    })
}

init()

区别并不是很大，第一个是 PIXI.Assets.init()，传入刚刚定义的那个 assets_manifest；第二个就是获取资源（Texture）的方式，还可以是 assets_part0[‘cat’]