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

加载器 Loader

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

• Laya.Loader 负责资源的加载逻辑并被LoaderManager管理。
• Laya.Loader 由 Laya.LoaderManager 统一进行管理，一般情况下，开发人员并不需要自己创建Loader实例。
• Laya.Loader 会缓存已经被加载过的资源，以减少资源的重复加载次数。

加载资源类型

• Laya.Loader 支持多种类型资源的加载，也支持自定义类型的加载，不同类型的加载方式可能会不同。

加载管理器 LoaderManager

• LoaderManager类用于批量加载资源，此类是单列，无需手动实例化，只需要通过 Laya.loader 即可访问。
• Laya.loader 是 Laya.LoaderManager 的实例，是Laya对外的通用加载接口。

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

加载资源 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;

例如：加载资源

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;
    }
}