PixiJS教程（005）：加载多个资源以及显示加载进度条

1.7 Pixi资源管理

1.7.1 加载多个资源

方式一：

1️⃣实现代码：

<template>
<div>

</div>
</template>

<script setup>
// 导入pixi.js
import * as PIXI from 'pixi.js';
// 创建应用
const app = new PIXI.Application({
    width: window.innerWidth,
    height: window.innerHeight,
    backgroundColor: 0x1099bb,
    resolution: window.devicePixelRatio || 1,
    // 设置抗锯齿
    antialias: true
})
// 将应用画布添加到DOM中
document.body.appendChild(app.view);

// 添加资源
PIXI.Assets.add("jian", "./textures/jian.png");
PIXI.Assets.add("man", "./textures/man.png");
PIXI.Assets.add("mujian", "./textures/mujian.png");

// 异步加载资源
const texturesPromise = PIXI.Assets.load(["jian", "man", "mujian"],(progress) => {
    console.log(`资源加载进度: ${progress * 100}%`);
}).catch((error) => {
    console.error("资源加载失败", error);   
});

// 加载完成 创建精灵
texturesPromise.then((textures) => {
    // 创建容器
    const container = new PIXI.Container();
    
    // 创建精灵1
    const sprite = new PIXI.Sprite(textures.jian);
    // 设置精灵位置
    sprite.x = app.screen.width / 2;
    sprite.y = app.screen.height / 2;
    // 设置锚点
    sprite.anchor.set(0.5);
    // ticker实现动画
    app.ticker.add((delta) => {
        // 每帧旋转精灵
        sprite.rotation += 0.01 * delta;
    });
    container.addChild(sprite);

    // 创建精灵2
    const sprite2 = new PIXI.Sprite(textures.man);
    sprite2.scale.set(0.1);
    container.addChild(sprite2);

    // 添加容器到舞台
    app.stage.addChild(container);
});

</script>

<style>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
canvas{
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
}
</style>

2️⃣实现效果：

方式二：

<template>
<div>
    
</div>
</template>

<script setup>
// 导入pixi.js
import * as PIXI from 'pixi.js';
// 创建应用
const app = new PIXI.Application({
    width: window.innerWidth,
    height: window.innerHeight,
    backgroundColor: 0x1099bb,
    resolution: window.devicePixelRatio || 1,
    // 设置抗锯齿
    antialias: true
})
// 将应用画布添加到DOM中
document.body.appendChild(app.view);

// 添加场景1的资源
PIXI.Assets.addBundle("scene1", {
    'jian': "/textures/jian.png",
    'man': "/textures/man.png",
    'mujian': "/textures/mujian.png"
})

const texturesPromise = PIXI.Assets.loadBundle("scene1", (progress)=>{
    console.log(`资源加载进度: ${progress * 100}%`);
}).catch((error) => {
    console.error("资源加载失败", error);   
});

// 加载完成 创建精灵
texturesPromise.then((textures) => {
    // 创建容器
    const container = new PIXI.Container();

    // 创建精灵1
    const sprite = new PIXI.Sprite(textures.jian);
    // 设置精灵位置
    sprite.x = app.screen.width / 2;
    sprite.y = app.screen.height / 2;
    // 设置锚点
    sprite.anchor.set(0.5);
    container.addChild(sprite);

    // 创建精灵2
    const sprite2 = new PIXI.Sprite(textures.man);
    sprite2.scale.set(0.1);
    container.addChild(sprite2);

    // 添加容器到舞台
    app.stage.addChild(container);
});

</script>

<style>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
canvas{
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
}
</style>

1.7.2 实现加载进度条的显示

1️⃣安装elemetui plus：

npm install element-plus --save

2️⃣导入：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

3️⃣添加进度条UI：

<div style="position: fixed;z-index: 2;right: 10px;top:10px;">
    <el-card style="max-width: 480px">
    <template #header>
      <div class="card-header">
        <span>资源加载进度</span>
      </div>
    </template>
    <el-progress type="circle" :percentage="percent" :status="percent === 100 ? 'success' : ''" />
  </el-card>
</div>

4️⃣设置当前进度：

import { ref } from 'vue';
const percent = ref(0);

const texturesPromise = PIXI.Assets.loadBundle("scene1", (progress)=>{
    percent.value = progress * 100;
    console.log(`资源加载进度: ${progress * 100}%`);
}).catch((error) => {
    console.error("资源加载失败", error);   
});

5️⃣实现效果：