学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查看暂存区的信息,不过官方文件上找不到这个属性,不确定之后会不会被弃用。
那么今天就先到这边,一样如果有错误及来源未附上欢迎留言指正,我们明天见!
转载于:https://www.cnblogs.com/lannyQ-Q/p/10181868.html
学JS的心路历程Day28 - PixiJS -基础(二)相关推荐
- 学JS的心路历程 -函式(三)this
this是什么,取决于被呼叫的呼叫地点. 昨天有提到说,呼叫函式时候会传递隐含参数:arguments和this并讲解了arguments,今天我们就来探讨this吧! 什么是this 我们都会呼叫函 ...
- 学JS的心路历程 -物件与原型(二)
昨天有提到说Object.setPrototypeOf可以指定一个物件为另一个物件的原型,但有想过到底这个原型,也就是[[Prototype]]最终会到何处吗? 答案是Object.prototype ...
- 学JS的心路历程 -非同步执行
JS是单线程的语言,也就是说同一时间只会执行一行程序,所以如果一段程序执行过久就会造成阻塞(blocking)的现象,必须等到它结束后才能执行下一段程序. 举个例子来说,如果我们今天要买便当,但是老板 ...
- 学JS的心路历程 -数组常见处理方法
昨天我们有提到说for-of和forEach可以用来处理数组,但其实还有很多方法可以更快速及精简代码的达到你要的效果. 话不多说,我们赶紧来看吧! Array.prototype.map() 会回传一 ...
- 学JS的心路历程-Promise(一)
今天在进入Promise代码之前,我们先来用个例子来解释Promise是什么. 未来值 假设我们今天来到快餐店,点了一个汉堡,付钱给店员. 点了餐点并付费,可以理解为我们发送了一个请求,希望得到一个回 ...
- 学JS的心路历程-函式(五)箭头函式
箭头函式arrow function 为了能够以更简短的方式建立函式,ES6变推出了箭头函式. 用说明的可能会不太懂,我们先拿之前的数组排序例子来看: var arr = [2,1,6,12,3,77 ...
- 学习JS的心路历程-参数传递方式(上)
很多人认为JS的传递方式是值是Call by value, 物件及数组是Call by Reference.甚至还有人宣称其实JS是Call by sharing,那到底是哪一个呢? 这两天我们一一来 ...
- 学习JS的心路历程-函式(一)
前几天有间单提到该如何声明函式及在Hositing中会发生什么事,但是函式的奥妙不仅于此. 身为一个使用JS的工程师,我们一定要熟悉函式到比恋人还熟! 这几天将会把函式逐一扒开跟各位一起探讨其中的奥妙 ...
- 尤雨溪创立 Vue.js 的心路历程纪录片
Show More 本文分享自微信公众号 - 生信科技爱好者(bioitee). 如有侵权,请联系 support@oschina.cn 删除. 本文参与"OSC源创计划",欢迎正 ...
最新文章
- 聚类分析案例:探究用户对物品类别的喜好细分降维
- 12、HTML <form>标签(表单)
- hdu5126stars
- boost::hana::not_用法的测试程序
- PLSQL_day01
- MySQL源码学习——DBUG调试
- java中.of,java中的sizeof
- 蓝桥杯2017初赛-打印大X-找规律
- python 爬虫002-http与urllib2
- Win11将沿用Win10升级模式 并会有LTSC版本
- SharePoint 2010遍历文档库中所有的文件,文件夹
- 让Microsoft Office2010 新建 Microsoft Office 97-2003 文档
- Excel,遗忘密码后如何撤销工作表保护密码
- PHP工具箱无法启动Mysql问题
- JSON_EXTRACT JSON_UNQUOTE以及json数组下标选择
- 干货丨面向新基建,安全厂商都准备了哪些前瞻性的“武器”?
- python opencv图像笔记
- Docker Swarm secrets
- Incapsula专业提供后门特洛伊保护
- Android上的Dalvik虚拟机
热门文章
- C++反汇编第五讲,认识C++中的Try catch语法,以及在反汇编中还原
- php根据修改时间删除指定目录下文件
- 二、通过工厂方法来配置bean
- [刷题]算法竞赛入门经典 3-10/UVa1587 3-11/UVa1588
- [学习笔记]Silverlight4 RIA 开发全程解析[项目全程记录]----第二章--为站点流行而准备:提供一个可扩展的体系结构(写作中)...
- Corona按钮只能让点击一次
- xml操作之创建xml节点
- MATLAB的imtransform()函数作图像线性平移时如果要体现效果要加上目标Size限制
- C++中拼接一个包含整型等类型字符串的方法
- leetcode算法题--二叉搜索树迭代器