资源加载是指游戏进入时都会有一个给资源载入界面,载入界面中用到的资源最好是放在游戏包中,进行首次加载。首次加载完会加载游戏所需的大部分资源,加载的资源可能是在本地,也可能从网络中下载,这里一般需要一个资源加载类。

加载器 Loader

Laya.Loader 类可用来加载文本、JSON、XML、二进制、图像等资源。

项目
Package laya.net.Loader
Class Laya.Loader
Hierarchy Loader / EventDispatcher
  • Laya.Loader 负责资源的加载逻辑并被LoaderManager管理。
  • Laya.Loader 由 Laya.LoaderManager 统一进行管理,一般情况下,开发人员并不需要自己创建Loader实例。
  • Laya.Loader 会缓存已经被加载过的资源,以减少资源的重复加载次数。
方法 返回值 描述
getRes(url: string) any 加载资源,获取指定资源地址的资源或纹理。
clearRes(url: string) void 卸载资源,清理指定资源地址的缓存。
cacheRes(url: string, data: any) void 缓存资源
load() 加载资源,加载错误会派发 Event.ERROR 事件,参数为错误信息。

加载资源类型

  • Laya.Loader 支持多种类型资源的加载,也支持自定义类型的加载,不同类型的加载方式可能会不同。
类型 描述
Laya.Loader.ANIMATIONCLIP AnimationClip资源
Laya.Loader.ATLAS 图集类型,加载完成后返回图集json信息(并创建图集内小图Texture)。
Laya.Loader.AVATAR Avatar资源
Laya.Loader.BUFFER 二进制类型,加载完成后返回arraybuffer二进制数据。
Laya.Loader.FONT 位图字体类型,加载完成后返回BitmapFont,加载后,会根据文件名自动注册为位图字体。
Laya.Loader.HIERARCHY Hierarchy资源
Laya.Loader.IMAGE 纹理类型,加载完成后返回Texture。
Laya.Loader.JSON JSON 类型,加载完成后返回json数据。
Laya.Loader.MATERIAL Material资源
Laya.Loader.MESH Mesh资源
Laya.Loader.PLF 预加载文件类型,加载完成后自动解析到preLoadedMap。
Laya.Loader.PLFB 二进制预加载文件类型,加载完成后自动解析到preLoadedMap。
Laya.Loader.PREFAB prefab 类型,加载完成后返回Prefab实例。
Laya.Loader.SOUND 声音类型,加载完成后返回sound。
Laya.Loader.TERRAINHEIGHTDATA Terrain资源
Laya.Loader.TERRAINRES Terrain资源
Laya.Loader.TEXT 文本类型,加载完成后返回文本。
Laya.Loader.TEXTURE2D Texture2D资源
Laya.Loader.TEXTURECUBE TextureCube资源
Laya.Loader.TTF TTF字体类型,加载完成后返回null。
Laya.Loader.XML XML 类型,加载完成后返回domXML。

加载管理器 LoaderManager

结构 描述
Package laya.net.LoaderManager
Singleton Laya.loader
Inheritance LoaderManager / EventDispatcher / Object
  • LoaderManager类用于批量加载资源,此类是单列,无需手动实例化,只需要通过 Laya.loader 即可访问。
  • Laya.loader 是 Laya.LoaderManager 的实例,是Laya对外的通用加载接口。
属性 描述
Laya.loader.maxLoader 最大下载线程,默认为5个。
Laya.loader.retryDelay 延迟时间多久再进行错误重试,默认立即重试。
Laya.loader.retryNum 加载出错后的重试次数,默认重试一次。

LoaderManager 类用于批量加载资源时,通过 Laya.loader 加载器访问。当全部队列加载完成后会派发 Laya.Event.COMPLETE 事件,如果队列中任意一个加载失败,则会派发 Laya.Event.ERROR 事件,事件回调参数值则是加载出错的资源地址。

方法 描述
Laya.loader.cacheRes(url, data) 缓存资源
Laya.loader.cancelLoadByUrl(url) 根据URL地址清理未加载的内容
Laya.loader.cancelLoadByUrls(urls) 根据URLs地址集合清理未加载的内容
Laya.loader.clearRes(url) 清理指定URL资源地址的缓存
Laya.loader.clearResByGroup(group) 根据分组清理资源
Laya.loader.clearTextureRes(url) 销毁纹理使用的图片资源
Laya.loader.clearUnLoaded() 清理当前未完成的加载
Laya.loader.create() 根据指定类型创建未初始化的资源对象
Laya.loader.getRes(url) 获取指定资源地址的资源
Laya.loader.load() 加载资源
Laya.loader.setGroup(url, group) 设置资源分组

加载资源 load

/** 加载资源。* 资源加载错误时,本对象会派发 Event.ERROR 事件,事件回调参数值为加载出错的资源地址。* 因为返回值为 LoaderManager 对象本身,所以可以使用如下语法:loaderManager.load(...).load(...);* @param url 要加载的单个资源地址或资源信息数组。比如:
简单数组:["a.png","b.png"];
复杂数组[{url:"a.png",type:Loader.IMAGE,size:100,priority:1},{url:"b.json",type:Loader.JSON,size:50,priority:1}]。* @param complete 加载结束回调。根据url类型不同分为2种情况:
1. url为String类型,也就是单个资源地址,如果加载成功,则回调参数值为加载完成的资源,否则为null;
2. url为数组类型,指定了一组要加载的资源,如果全部加载成功,则回调参数值为true,否则为false。* @param progress 加载进度回调。回调参数值为当前资源的加载进度信息(0-1)。* @param type 资源类型。比如:Loader.IMAGE。* @param priority (default = 1)加载的优先级,优先级高的优先加载。有0-4共5个优先级,0最高,4最低。* @param cache 是否缓存加载结果。* @param group 分组,方便对资源进行管理。* @param ignoreCache 是否忽略缓存,强制重新加载。* @param useWorkerLoader (default = false)是否使用worker加载(只针对IMAGE类型和ATLAS类型,并且浏览器支持的情况下生效)* @return 此 LoaderManager 对象本身。*/
Laya.loader.load(url:any,complete?:laya.utils.Handler,progress?:laya.utils.Handler,type?:string,priority?:number,cache?:boolean,group?:string,ignoreCache?:boolean,useWorkerLoader?:boolean
):LoaderManager;
参数 描述
url 要加载的单个资源地址或资源信息数组
complete 加载结束回调
progress 加载进度回调
type 资源类型
priority 加载的优先级,优先级高的优先加载。由高到低有0-4共5个优先级。
cache 是否缓存加载结果
group 分组方便对资源进行管理
ignoreCache 是否忽略缓存,强制重新加载。
useWorkerLoader 是否使用worker加载

例如:加载资源

class Test {constructor() {Laya.init(Laya.Browser.width, Laya.Browser.height, Laya.WebGL);this.initStage();this.load();}initStage(){Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;Laya.stage.bgColor = "#000000";}// 加载资源load(){// 资源let assets = [];// 纹理资源this.IMAGE_MAGIC_PATH = "res/atlas/magic.png";assets.push({type:Laya.Loader.IMAGE, url:this.IMAGE_MAGIC_PATH});// 关闭并发加载Laya.loader.maxLoader = 1;// 无加载失败重试Laya.loader.retryNum = 0;//加载出错后的重试次数// 资源加载Laya.loader.load(assets, //加载完成时触发的回调Laya.Handler.create(this, this.onLoadComplete),//加载过程中触发的回调,返回数字0到100。Laya.Handler.create(this, this.onLoadProgress),//加载类型Laya.Loader.IMAGE);//监听加载失败Laya.loader.on(Laya.Event.ERROR, this, this.onLoadError);}//加载完成时触发的回调onLoadComplete(isSuccess){if(isSuccess){//获取图片纹理let texture = Laya.loader.getRes(this.IMAGE_MAGIC_PATH);console.log("onLoadComplete",texture);//绘制图形let sprite = new Laya.Sprite();sprite.graphics.drawTexture(texture, 0, 0);Laya.stage.addChild(sprite);}}//加载过程中触发的回调onLoadProgress(number){const percent = (number * 100) + "%";console.log("onLoadProgress", number, percent);}//加载失败时触发onLoadError(error){console.log("onLoadError", error);}
}
//启动
new Test();

资源地址 url

资源地址 url 的格式是数组,数组内有两种方式

  • 简单数组:
["a.png","b.png"]
  • 复杂数组
[{url:"a.png", type:Loader.IMAGE, size:100, priority:1},{url:"b.json", type:Loader.JSON, size:50, priority:1}
]

常见加载资源地址的方式

  • 加载单一类型资源
const assets = "res/atlas/comp.png";
  • 批量加载图集资源

批量加载加载完毕后才能使用图集资源中的图片。对于公共资源,是默认加载项,可以直接调用Laya.loader.getRes()来加载资源。

const assets = ["res/atlas/comp.png","res/atlas/card.png","res/atlas/magic.png",
];

由于Laya设置图片的skin使用的是异步操作,因此需要先获取图片资源尺寸后再执行后续操作。也就是说先要使用Laya.loader.load进行加载,然后从回调函数中执行获取资源尺寸。

  • 批量加载多种类型资源
 // 资源let assets = [];// 纹理资源
this.IMAGE_MAGIC_PATH = "res/atlas/magic.png";
assets.push({type:Laya.Loader.IMAGE, url:this.IMAGE_MAGIC_PATH});

进度事件 Progress

Progress 进度事件的Handler事件处理器的参数once必须设置为false,即使出现错误也会触发COMPLETE事件或其对应回调。

加载序列 proiority

资源序列的加载,按照加载优先级加载资源。

// 关闭并发加载
Laya.loader.maxLoader = 1;

获取资源 getRes

getRes()用于获取指定地址下的资源,比如加载单张图集。对于公共资源,特别是默认加载的公共资源图集,可以直接调用getRes()来加载资源。

Laya.loader.getRes(url:string):*

卸载资源

摧毁纹理使用的图片资源

  • Laya.loader.clearTextureRes()

Laya.loader.clearTextureRes()方法用于销毁纹理使用的图片资源并保留纹理的壳,如果下次渲染的时候发现纹理使用的图片资源不存在则会自动恢复。简单来说,只是清理纹理里面使用的图片资源,并不会销毁纹理,再次使用到的时候会自动恢复图片资源。

  • Laya.loader.clearRes()

Laya.loader.clearRes()方法会彻底销毁纹理,导致不能再使用。Laya.loader.clearTextureRes()方法能确保立即销毁图片资源,并且不用担心销毁错误,Laya.loader.clearRes()方法则采用引用计数方式进行销毁。

如果图片本身在自动合集里面(默认图片小于 512 x 512),内存是不能被销毁的,图片被大图合集管理器管理。

class Test {constructor() {Laya.init(Laya.Browser.width, Laya.Browser.height, Laya.WebGL);this.initStage();this.init();}initStage(){Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;Laya.stage.bgColor = "#000000";}init(){//创建背景this.IMAGE_PATH = "res/atlas/avatar.png";this.bg = Laya.Sprite.fromImage(this.IMAGE_PATH);this.bg.pos(0, 0);Laya.stage.addChild(this.bg);//创建动画this.ATLAS_PATH = "res/atlas/avatar.atlas";this.anim = new Laya.Animation();this.anim.loadAtlas(this.ATLAS_PATH);this.anim.pos(200, 100);this.anim.play();Laya.stage.addChild(this.anim);//创建按钮const width = 205;const height = 55;this.btn = new Laya.Sprite().size(width, height);let x = (Laya.stage.width - this.btn.width)/2;let y = (Laya.stage.height - this.btn.height)/2;this.btn.pos(x, y);this.btn.graphics.drawRect(0, 0, this.btn.width, this.btn.height, "#FF0000");//按钮文字this.txt = new Laya.Text();this.txt.text = "销毁";this.txt.color = "#FFFFFF";this.txt.fontSize = 25;x = (this.btn.width - this.txt.width)/2;y = (this.btn.height - this.txt.height)/2;this.txt.pos(x, y);this.btn.addChild(this.txt);Laya.stage.addChild(this.btn);this.btn.on(Laya.Event.MOUSE_UP, this, this.onMouseUp);}onMouseUp(evt){console.log(evt);if(this.isDestroyed){this.txt.text = "销毁";this.isDestroyed = false;//恢复渲染对象this.bg.visible = true;this.anim.visible = true;}else{this.txt.text = "恢复";this.isDestroyed = true;//停止渲染对象this.bg.visible = false;this.anim.visible = false;//销毁 Texture 使用的图片资源Laya.loader.clearTextureRes(this.IMAGE_PATH);Laya.loader.clearTextureRes(this.ATLAS_PATH);}}
}
//启动
new Test();

封装

TypeScript 加载资源

/**资源工具类 */
export default class Resource{/*** 单例模式*/private static _instance:Resource;public static getInstance():Resource{if(!this._instance){this._instance = new Resource();}return this._instance;}constructor(){}/*** 加载资源* @param url {Array} 资源地址 [{type:string, url:string}]* @param onLoadComplete {Function} 资源加载完毕执行* @param onLoadProgress {Function} 资源加载过程执行* @param caller {any} 资源加载目标对象*/load(url, onLoadComplete, onLoadProgress, caller){Laya.loader.load(url, Laya.Handler.create(caller, onLoadComplete),Laya.Handler.create(caller, onLoadProgress, null, false));}/*** 获取资源加载地址* @param host {string} 类型资源放置位置* @param name {string} 资源名称* @param type {string} 资源类型 png|jpg|sk|fnt|txt|json|mp3|mp4|wav*/getUrl(host, name, type){return host + "/" + name + "." + type;}
}

Laya Loader相关推荐

  1. 使用Laya引擎开发微信小游戏(下)

    本文由云+社区发表 6. 动画 6.1 创建伞兵对象 在src目录下创建一个新目录role,用来存放游戏中角色. 在role里创建一个伞兵Soldier.ts对象文件. module role{exp ...

  2. Laya自动图集原理

    关于Laya自动图集 Laya会把size小于512*512的图片打入自动大图集中.如果图片被打入自动图集中,图片的内存就交由Laya自动处理,开发者不能手动删除. Laya最多生成6张2048*20 ...

  3. Laya微信排行榜基于TypeScript脚本 详细步骤

    Laya 微信排行榜功能实现(ts脚本) Demo在最下面 Laya的微信排行榜分为主域和子域两个部分,主域就是游戏的包,子域是排行榜. 主域 新建view场景,命名Ranking(命名随意)添加WX ...

  4. Laya中贴图实时合并

    策划同学想在游戏内增加投显子弹数量的功能,看了下Laya中并没有提供3d文本相关的组件,所以先去百度下看了下并没有相关的轮子可以直接使用,只能自己写下了 首先分析下需求 子弹数量投显 只需要显示0-9 ...

  5. 基于Laya游戏引擎实现微信小游戏排行榜

    我们都知道,微信小游戏和小程序目前风头十足,很多公司都逐渐增加了相关业务线来迅速推广自己的产品和抢占用户群.说到微信小游戏,就不得不提到排行榜这个功能,就目前游戏行业,似乎都离不开排行榜这个重要功能, ...

  6. Laya Shader消融特效

    说明&使用 项目仅用于测试交流, 如有侵权, 请联系我删除. 引擎版本: LayaAir2.10.0 Github地址: LayaEffect clone LayaEffect项目 → 打开 ...

  7. vue + laya+二次贝赛尔曲线 实现含有动画背景的登录页面

    1.在layabox上下载demo源码  修改得到自己想要的背景动画(也可以自己开发) https://github.com/layabox/layaair-demo/tree/master/h5/2 ...

  8. laya龙骨换装_分享:Dragonbones/Spine的换肤操作

    目前LayaAir下支持龙骨的局部换肤(根据插槽索引换肤.根据插槽name换肤.纹理换肤.网格换肤).全局换肤 需注意: 1.Dragonbones不支持全局换肤,Spine支持全局换肤 2.使用到I ...

  9. Laya FairyGui系列一 FairyGui接入

    [公开课 | Unity进阶 | FGUI]国内强大的UI编辑器-FairyGUI 一,什么是FairyGui FairyGUI(下面简称FGUI)提供了一个强大的UI编辑器,使用习惯与Adobe系列 ...

最新文章

  1. css新闻列表优化-突破思维新方法更利于搜索引擎
  2. Java 7 Concurrency Cookbook – Javier Fernández González -前言
  3. Windows 任务栏缩略图自定义程序[更新 Build20100830]
  4. Atitit.业务系统的新特性 开发平台 新特性的来源总结
  5. 妙盈科技:ESG数据提供商获融资
  6. 【数据库原理及应用】经典题库附答案(14章全)——第一章:数据库基础知识
  7. php input type='button' 颜色,HTML5 input新增type属性color颜色拾取器的实例代码
  8. android安装svn,Android StudioSVN安装和使用
  9. running_mean和running_var
  10. SQL Server数据库技术期末大作业 机票预定信息系统
  11. Web Workers API
  12. 雷神笔记本做java,八代酷睿+144Hz电竞屏 雷神迎来新911黑幽灵游戏本评测
  13. STEP 7 Micro/WIN V4.0 SP9 for s7-200
  14. android adc,Android配置ADC接口
  15. 搜狗拼音Lunix系統-乱码及繁体解决
  16. 2022 GIS保研面试:武大国重、资环、中科院空天院;地信GIS专业/遥感专业保研夏令营面试、预推免面试
  17. 机器学习(周志华) 第九章聚类
  18. python的idel下添加清屏功能
  19. Angular4 失焦与点击冲突处理
  20. dbeaver——sql编辑区字体设置@baiyun

热门文章

  1. Kotlin 异常处理(try...catch,finally)
  2. MVC+VUE.JS+MUSEUI
  3. 【Web技术】1517- 你知道前端水印功能是怎么实现的吗?
  4. 算法复杂度-渐进分析
  5. 自由软件之父Richard Stallman 中国行圆满结束
  6. 花栗鼠很喜欢偷吃生产队的大萝卜,因此花栗鼠科技大学正在研究一种新型的数据库,叫做萝卜数据库...(Python代码)
  7. Unity3D基础:1、窗口界面
  8. 图像处理matlab基础操作
  9. Navicat:Access violation at address xxxxxxxxx
  10. Navicat:Access violation at address xxxxxxxxx in module ‘navicat.exe‘.Read of address xxxxxx