Pixi.js 资源管理

• PIXI.Assets用于加载资源
• 使用PIXI.Container创建容器，对多个资源分组，设置容器属性即可应用到容器内的精灵

单次添加资源

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, // 抗锯齿
})

document.documentElement.appendChild(app.view as any)

// 添加资源 名称 地址
PIXI.Assets.add(
  "tom",
  "https://p7.itc.cn/images01/20210825/6dae02ab52594d13805694ab6c4921cb.jpeg"
)
PIXI.Assets.add(
  "jian",
  "https://img.zcool.cn/community/01349256546b796ac7251c948550fd.jpg@1280w_1l_2o_100sh.jpg"
)

// 异步加载资源 返回 Promise 对象
const texturePromise = PIXI.Assets.load(["tom", "jian"], (progress) => {
  console.log("加载完成", progress);
})

// 所有资源加载完成后
texturePromise.then(texture => {
  // 创建一个容器, 用与分组管理
  const container = new PIXI.Container()

  // 创建精灵
  const sprite = new PIXI.Sprite(texture.tom)

  // 锚点
  sprite.anchor.set(0.5)

  sprite.x = app.screen.width / 2
  sprite.y = app.screen.height / 2

  sprite.scale.set(0.2)

  // 设置精灵的混合模式
  sprite.blendMode = PIXI.BLEND_MODES.ADD

  app.stage.addChild(sprite)

  // 添加事件前设置为 true, 开启交互
  sprite.interactive = true
  // 精灵添加点击事件
  sprite.on("pointerdown", e => {
    console.log("sprite pointerdown!")
  })

  // 将精灵添加到容器
  container.addChild(sprite)

  const sprite1 = new PIXI.Sprite(texture.jian)

  sprite1.x = 100
  sprite1.y = 100

  sprite1.scale.set(0.3)

  // 将精灵添加到容器
  container.addChild(sprite1)

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

  // 对容器设置透明度即可对容器内对所有精灵生效
  container.alpha = 0.5
})

一次添加多个资源

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, // 抗锯齿
});

document.documentElement.appendChild(app.view as any);

// 添加场景 1 的资源
PIXI.Assets.addBundle("scene1", {
  tom: "https://p7.itc.cn/images01/20210825/6dae02ab52594d13805694ab6c4921cb.jpeg",
  jian: "https://img.zcool.cn/community/01349256546b796ac7251c948550fd.jpg@1280w_1l_2o_100sh.jpg",
});

// 异步加载资源 返回 Promise 对象
const assets = PIXI.Assets.loadBundle("scene1", (progress) => {
  console.log("加载完成", progress);
});

// 所有资源加载完成后
assets.then((texture) => {
  // 创建一个容器, 用与分组管理
  const container = new PIXI.Container();

  // 创建精灵
  const sprite = new PIXI.Sprite(texture.tom);

  // 锚点
  sprite.anchor.set(0.5);

  sprite.x = app.screen.width / 2;
  sprite.y = app.screen.height / 2;

  sprite.scale.set(0.2);

  // 设置精灵的混合模式
  sprite.blendMode = PIXI.BLEND_MODES.ADD;

  app.stage.addChild(sprite);

  // 添加事件前设置为 true, 开启交互
  sprite.interactive = true;
  // 精灵添加点击事件
  sprite.on("pointerdown", (e) => {
    console.log("sprite pointerdown!");
  });

  // 将精灵添加到容器
  container.addChild(sprite);

  const sprite1 = new PIXI.Sprite(texture.jian);

  sprite1.x = 100;
  sprite1.y = 100;

  sprite1.scale.set(0.3);

  // 将精灵添加到容器
  container.addChild(sprite1);

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

  // 对容器设置透明度即可对容器内对所有精灵生效
  container.alpha = 0.5;
});