PixiJS学习（8）预加载

幻蝶Love

已于 2023-04-04 14:48:57 修改

阅读量3.2k

点赞数

分类专栏： PixiJs 文章标签： html5 canvas

于 2020-06-16 15:51:28 首次发布

本文链接：https://blog.csdn.net/xiechao_5800/article/details/106788736

版权

PixiJs 专栏收录该内容

14 篇文章 8 订阅

订阅专栏

简介

预加载是什么？

提前加载图片，当用户需要查看或使用时可直接从本地缓存中渲染。

在 pIxiJs 中，一般情况下我们也需要进行预加载，这样就可以保证素材和资源在使用时可以直接应用，不需要等待较长的时间。一般来说可以进行预加载的内容包括：纹理图片，位图文本，字体包……

其中预加载频率最多的应该就是纹理，在PixiJs 中预加载也是有对应的类： PIXI.Loader()

使用URL预加载

一般情况下我们会使用图片的地址对位图纹理进行预加载。在加载时可以对纹理起一个别名，便于更好的进行区分。否则的话，加载后纹理的名称就是图片的名称。

// pixi 资源加载的类
const loader = new PIXI.Loader();

// 设置请求资源的参数，防止缓存的出现
loader.defaultQueryString = 'v=' + Math.random();

// 添加需要加载的资源，别名 + 资源地址
loader.add("A00000", "../images/3/A00000.png");
loader.add("A00001", "../images/3/A00001.png");
loader.add("A00002", "../images/3/A000020.png"); // 没有这张图片，会加载错误
loader.add("A00003", "../images/3/A00003.png");

// 开始加载
loader.onProgress.add(res => {
  console.log("开始加载一个资源")
});
// 加载出错
loader.onError.add(res => {
  console.log("加载出错")
});
// 加载完成
loader.onLoad.add(res => {
  console.log("加载完成一个资源")
});
// 完成所有加载
loader.onComplete.add(res => {
  console.log("完成所有资源加载")
});
// 输出纹理
loader.load((loader, resources) => {
  console.log("输出加载完的资源纹理");
  // 纹理
  let A00000Texture = resources.A00000.texture;
  let A00001Texture = resources.A00001.texture;
  let A00003Texture = resources.A00003.texture;
});

雪碧图

雪碧图是什么？通俗的讲，将多张小图合并在一起之后的一整张图片称作雪碧图。

使用雪碧图的优点有以下几点：

将图片进行合并之后，可以适当减少图片大小
加载雪碧图时，只需一次请求，就能拿到所有资源，可以减小资源请求时“建立连接”的消耗

在 PixiJs 中经常也会使用到雪碧图，例如需要优化性能或者使用序列帧动画时。而且它的预加载机制，也能之间处理和加载这些雪碧图。

使用JSON文件进行预加载

上面我们说了雪碧图可以在 PixiJs 进行使用，可以优化性能，减少请求。但是我们在 PixiJs 中使用雪碧图不能像 CSS 中一样使用绝对定位的方式，一般还是需要使用纹理，因此需要一个 JSON 文件来定义每个小图片的名称和位置。

Pixi 官方推荐的雪碧图生成工具是：TexturePacker - Create Sprite Sheets for your game!

这个工具最终生成的文件就是一个 JSON 文件，以及对应的雪碧图。

这个文件中会解释每个纹理对应的大小和位置。

// pixi 资源加载的类
const loader = new PIXI.Loader();

// 设置请求资源的参数，防止缓存的出现
loader.defaultQueryString = 'v=' + Math.random();

// 添加需要加载的资源
loader.add("cat", "../../images/3/cat.json");

// 开始加载
loader.onProgress.add(res => {
  console.log("开始加载一个资源")
});
// 加载出错
loader.onError.add(res => {
  console.log("加载出错")
});
// 加载完成
loader.onLoad.add(res => {
  console.log("加载完成一个资源")
});
// 完成所有加载
loader.onComplete.add(res => {
  console.log("完成所有资源加载")
});
// 输出纹理
loader.load((loader, resources) => {
  console.log("输出加载完的资源纹理");
  console.log(resources);
  let A00000Texture = resources.cat.textures["A00000.png"];
  let A00001Texture = resources.cat.textures["A00001.png"];
  let A00002Texture = resources.cat.textures["A00002.png"];
  console.log(A00000Texture)
  // this.pixiSpriteModule(A00002Texture, this.frameStage.stage, 0, 0, 0.5, 0);
});