PixiJs ———— 精灵加载去缓存

2023-09-11 11:45:07

Pixi.js v5.2.0 加载精灵的时候会有缓存相关的 warning，每次都两百多条 warning，实在让人头疼。不过功夫不负有心人，花了点时间，各种调试，终于把它们给去掉了，真是太舒服了。可能有人会问，直接 google cv 一条龙不就解决了，但是网上关于 pixi.js 的文档是很少的，官方文档也是一知半解，要想解决问题，只能靠自己动手，丰衣足食。

那么，接下来就分享一下我是如何解决这个问题的。

首先，我们需要了解一下 Pixi.js 的精灵加载机制。

Pixi.js 的精灵加载分为两步：

加载精灵的纹理。
创建精灵对象。

加载精灵的纹理是通过 PIXI.loader.add() 方法实现的。这个方法可以接受一个 URL 或一个 PIXI.Texture 对象。如果传入的是一个 URL，Pixi.js 会自动加载该 URL 的图片，并将其转换成一个 PIXI.Texture 对象。

创建精灵对象是通过 PIXI.Sprite() 方法实现的。这个方法可以接受一个 PIXI.Texture 对象或一个精灵对象。如果传入的是一个 PIXI.Texture 对象，Pixi.js 会自动创建一个精灵对象，并将其纹理设置为传入的 PIXI.Texture 对象。

知道了 Pixi.js 的精灵加载机制之后，我们就可以对精灵加载进行优化了。

优化精灵加载的办法有很多，这里只介绍一种最简单的方法：

在加载精灵的纹理时，我们可以设置 PIXI.loader.crossOrigin 属性为 anonymous。这样，Pixi.js 就会在加载图片时添加一个 crossorigin 属性，从而避免跨域请求的警告。

PIXI.loader.crossOrigin = 'anonymous';

设置了 PIXI.loader.crossOrigin 属性之后，Pixi.js 就会在加载图片时添加一个 crossorigin 属性，从而避免跨域请求的警告。

PIXI.loader.add('myImage.png')
    .load((loader, resources) => {
        // 创建精灵对象
        const sprite = new PIXI.Sprite(resources['myImage.png'].texture);

        // 添加精灵对象到舞台
        stage.addChild(sprite);
    });

这样，Pixi.js 就不会在加载精灵的纹理时发出跨域请求的警告了。

当然，除了这种方法之外，还有很多其他方法可以优化精灵加载。这里只是介绍了一种最简单的方法，大家可以根据自己的需要选择合适的方法进行优化。

好了，关于 Pixi.js 精灵加载去缓存就介绍到这里了。希望对大家有所帮助。

最后，再给大家分享一个关于 Pixi.js 的小技巧。

如果我们在加载精灵的纹理时，发现图片的尺寸不正确，我们可以通过设置 PIXI.loader.resize 属性为 true 来让 Pixi.js 自动调整图片的尺寸。

PIXI.loader.resize = true;

设置了 PIXI.loader.resize 属性之后，Pixi.js 就会在加载图片时自动调整图片的尺寸，从而避免图片变形的问题。

PIXI.loader.add('myImage.png')
    .load((loader, resources) => {
        // 创建精灵对象
        const sprite = new PIXI.Sprite(resources['myImage.png'].texture);

        // 添加精灵对象到舞台
        stage.addChild(sprite);
    });