学JS的心路历程Day28 - PixiJS -基础(二)

时间:2023-03-09 19:59:53
学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查看暂存区的信息,不过官方文件上找不到这个属性,不确定之后会不会被弃用。

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