pixi.js 速记其一

发表于 | 分类于

pixi.js 速记其一

CfTiBq.png

最近在研（xue）究（xi）pixi.js 。既然是研（xue）究（xi）既然会有许多一时踩坑的地方，所以想要开一个系列记录一下，当然，希望我不要鸽了

资源加载

pixijs 加载游戏资源要通过他们自己的 loader 函数，比如

1
2
3
PIXI.loader
  .add("images/anyImage.png")
  .load(setup)

这样它就会找到 images/anyImage.png 并加载进来，问题在于我们再工程化的项目中，会使用例如 webpack，parcel 等打包工具。我们为了让打包工具一并处理图片文件，所以直接 .add("images/anyImage.png") 是无法正确找到打包后的文件的。

因此，我们需要先把资源文件引入 js 再放到 loader

1
2
3
4
import catUrl from './images/cat.png';
// 这样就可以正确找到打包后的文件
loader
  .add('cat', catUrl)

另外一个官方推荐的小 tip 是在 add 函数的首参数中传入字符串作为这个资源的别名，这样我们就可直接通过别名找到这个资源。

1
2
3
4
// 正常情况下需要通过资源路径标识资源	
const cat = resoureces[catUrl].textrure
// 加了别名以后可以直接通过别名寻找资源
const cat = resources.cat.texture

加载纹理贴图集

和加载一般资源一样，当你加载纹理贴图集的时候也会遇到同样的问题。再说这个问题以前，我们先简单了解一下什么是加载纹理贴图集。

简单来说，一个纹理贴图集就是一个JSON数据文件，它包含了匹配的PNG雪碧图的子图像的大小和位置。如果你使用了纹理贴图集，那么想要显示一个子图像只需要知道它的名字就行了。

使用一个纹理图有很多好处，比如可以通过 gui 工具便捷的批量处理你所需要的雪碧图资源，而不需要逐一去处理。

回到我们的问题，本质上加载纹理贴图集是加载一个 json 文件，然后我们的 pixijs 的 loder 函数，就可加载其中的设定信息，以及根据其中的信息将对应的雪碧图加载进来。

前面说到同样的问题也会出现在这里，而且他是加载 json 而非直接传递 json， 因此也不好直接动态修改雪碧图资源路径，再传入 json ，所以我们无法直接通过 add 函数去加载纹理贴图。

实际上这也是一个语法糖，那么我们只要不加载 json 而是直接加载雪碧图文件，然后在根据 json 来构建纹理贴图就好了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import image from './images/image.png';
import imageJson from './images/treasureHunter.json';
loader
// .add(imageJson)
  .add('image', image) // 直接加载雪碧图
  .load(setup)
function setup() {
  // 通过向 Spritesheet 传入雪碧图的 texture.baseTexture 以及对应的 imageJson 对象，构建纹理贴图集
  const sheet = new Spritesheet(resources.image.texture.baseTexture, imageJson);
  // 需要注意这里是异步执行的
  sheet.parse(() => {
  	// done	      
  })
}

总结

本文简单记录了当我们在 pixijs 项目中使用打包工具时，会遇到的两个关于资源加载的问题