Pixi.js中PIXI.Texture.from()与new PIXI.Texture()区别及报错问题

问题根因 #

该问题是PIXI.AnimatedSprite.from()的入参校验逻辑，与PIXI.Texture.from()的缓存复用机制共同作用导致的：

1. 两种纹理实例化方式的核心差异
   • new PIXI.Texture(texture_base)：直接基于传入的BaseTexture生成全新的独立Texture实例，不会触发全局缓存查询，生成的实例也不会关联任何缓存ID。
   • PIXI.Texture.from(texture_base)：调用时会优先查询Pixi的全局纹理缓存。由于你已经通过loader预加载了对应图片，预加载完成阶段Pixi会自动为该资源生成BaseTexture和对应的Texture实例并存入缓存，所以此时Texture.from()返回的是缓存中已有Texture实例的引用，该实例绑定了对应的资源ID（即你加载时传入的路径img/tile_spritesheet.png）。
2. AnimatedSprite.from()的校验逻辑缺陷
   该方法对入参的解析优先级为：「判断是否为字符串/可解析的资源ID」>「判断是否为纹理数组/单个纹理」。部分版本的Pixi存在类型校验漏洞，当传入绑定了资源ID的缓存纹理实例时，会误将其识别为资源ID字符串，尝试解析不存在的路径，最终抛出unrecognized source错误。

可行解决方案 #

你可以任选以下一种方式规避该问题：

• 继续使用new PIXI.Texture(baseTexture)的方式生成独立纹理实例，无需修改其他逻辑。
• 如果需要使用Texture.from()，调用AnimatedSprite.from()时主动将纹理包装为数组，绕开校验漏洞：

  const component = PIXI.AnimatedSprite.from([texture_1]);
  

• 直接取用loader预加载返回的现成纹理，不需要手动创建BaseTexture，效率更高也不会触发问题：

  const texture_1 = APP.loader.resources["tile_sheet"].texture;
  const component = new PIXI.AnimatedSprite([texture_1]);
  

内容的提问来源于stack exchange，提问作者Occam