学JS的心路历程Day28 - PixiJS -基础（二）

材质暂存（texture cache）

昨天有说到，图片要放入stage前，需要先把图片转成Sprite的特殊图片物件。

但是我们也可以先将图片放进材质暂存（texture cache）。

什么是「材质」（texture）？

PIXI用WebGL的GPU渲染图片，所以图片需转成GPU可用版本，可被WebGL处理图片称为「材质」（texture）。

而在放进sprite片前，将原始图片转成WebGL texture形式，可以提高效率。

PIXI使用材质暂存（texture cache）来储存和参考所有sprite需要的材质。

let texture = PIXI.utils.TextureCache[“images/anySpriteImage.png”]；

let sprite = new PIXI.Sprite（texture）；

在官网教学连接中有贴出这段代码，利用PIXI.utils.TextureCache将图片加入暂存中，但我在实际使用后发现没有任何效果，搜寻了一下之后发现官方文件并没有公开提供这个方法。

且在github issue找到了官方开发者的说明(vmwork)

也许是被弃用，官方开发者建议使用PIXI.loader

原文连接

那我们就来看一下PIXI.loader的示例吧！

let imageURL =“./image/bunny.png”；

PIXI.loader

.add（'bunny'，imageURL）

.load（init）；

function init（loader，resources）{

var bunny = new PIXI.Sprite（

resources['bunny'].texture // get Texture Cache

）；

app.stage.addChild（bunny）；

}

把图片放入loader中转成材质暂存后在放入Sprite中。

add（'bunny'，imageURL）的'bunny'可以选择不写，resources的key值就会是url。

let imageURL =“./image/bunny.png”；

PIXI.loader

.add（imageURL）

.load（init）；

function init（loader，resources）{

var bunny = new PIXI.Sprite（

resources[imageURL].texture // get Texture Cache

）；

app.stage.addChild（bunny）；

}

但是千万别这样写：

let imageURL =“./image/bunny.png”；

PIXI.loader

.add（'bunny'，imageURL）

.load（init）；

function init（loader，resources）{

var bunny = PIXI.Sprite.fromImage（imageURL）；

app.stage.addChild（bunny）；

}

PIXI.Sprite.fromImage与PIXI.loader是两种不同的API，同时使用会造成破坏或重复存入內存暂存区。

PIXI.Sprite.fromImage是比较方便的作法，直接传入图片的url，会判断是否已经在材质暂存中，如果没有就自动加载。

PIXI.loader我觉得好用的地方在于，可以用数组传入参数(leafor)：

PIXI.loader

.add（[

“images/imageOne.png”，

“images/imageTwo.png”，

“images/imageThree.png”

]）

.load（setup）；

那要如何查看暂存区的信息呢？我们可以透过PIXI.TextureCache查看暂存区的信息，不过官方文件上找不到这个属性，不确定之后会不会被弃用。

那么今天就先到这边，一样如果有错误及来源未附上欢迎留言指正，我们明天见！