温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Egret之RES资源加载

发布时间:2020-09-10 06:07:01 来源:网络 阅读:15331 作者:Aonaufly 栏目:开发技术

一 , 获取资源的3种方式:

①:RES.getRes(name:string):any

同步获取资源 这种方式只能获取已经缓存过的资源


②:RES.getResAsync(name:string,compFunc:Function,thisObject:any):void

异步获取资源,这种方式可以获取配置中含有的所有资源项。如果缓存中存在,直接调用回调函数返回,若不存在,就启动网络加载文件并解析后回调。


③:RES.getResByUrl(url:string,compFunc:Function,thisObject:any,type:string=””):void

通过url获取不在配置中的资源,通常不建议使用这个接口,只有那些不合适填写在配置中,比如获取网络上其他服务器的资源时,才采用这种方式。

    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
    }

    private onAddToStage(event:egret.Event) {
        RES.getResByUrl('/resource/assets/bg.jpg',this.onComplete,this,RES.ResourceItem.TYPE_IMAGE);
    }

    private onComplete(event:any):void {
        var img: egret.Texture = <egret.Texture>event;
        var bitmap: egret.Bitmap = new egret.Bitmap(img);
        this.addChild(bitmap);
    }



二 , 加载资源组的步骤

1 : 加载资源配置json文件,如resouce.res.json.

RES.addEventListener( RES.ResourceEvent.CONFIG_COMPLETE, this.onConfigComplete, this ); 
RES.addEventListener( RES.ResourceEvent.CONFIG_LOAD_ERROR, this.onConfigLoadErr, this ); 
RES.loadConfig("resources/resource.res.json","resources/");

解析 :

①:RES.loadConfig

                    参数1:json配置文件的路径 。 参数2 : 子资源的位置


2: 加载json配置中的某一个资源组 , 比如加载preload资源组

private onConfigComplete(event: RES.ResourceEvent): void {
    RES.removeEventListener(RES.ResourceEvent.CONFIG_COMPLETE, this.onConfigComplete, this);
    RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE, this.onResourceLoadComplete, this);
    RES.addEventListener(RES.ResourceEvent.GROUP_LOAD_ERROR, this.onResourceLoadError, this);
    RES.addEventListener(RES.ResourceEvent.GROUP_PROGRESS, this.onResourceProgress, this);
    RES.addEventListener(RES.ResourceEvent.ITEM_LOAD_ERROR, this.onItemLoadError, this);
    RES.loadGroup("preload");
}

3:侦听加载事件:

/**
 * preload资源组加载完成
 */
private onResourceLoadComplete(event: RES.ResourceEvent) {
    if (event.groupName == "preload") {
        this.stage.removeChild(this.loadingView);
        RES.removeEventListener(RES.ResourceEvent.GROUP_COMPLETE, this.onResourceLoadComplete, this);
        RES.removeEventListener(RES.ResourceEvent.GROUP_LOAD_ERROR, this.onResourceLoadError, this);
        RES.removeEventListener(RES.ResourceEvent.GROUP_PROGRESS, this.onResourceProgress, this);
        RES.removeEventListener(RES.ResourceEvent.ITEM_LOAD_ERROR, this.onItemLoadError, this);
    }
}

/**
 * 资源组加载出错
 */
private onItemLoadError(event: RES.ResourceEvent) {
    console.warn("Url:" + event.resItem.url + " has failed to load");
}

/**
 * 资源组加载出错
 */
private onResourceLoadError(event: RES.ResourceEvent) {
    console.warn("Group:" + event.groupName + " has failed to load");
    //忽略加载失败的项目
    this.onResourceLoadComplete(event);
}

/**
 * preload资源组加载进度
 */
private onResourceProgress(event: RES.ResourceEvent) {
    if (event.groupName == "preload") {
        this.loadingView.setProgress(event.itemsLoaded, event.itemsTotal);
    }
}


三 , 自定义加载组加载资源(重点)

在json中建立资源,这次资源不放在任何组中,本人使用代码自动构建组进行加载

Egret之RES资源加载


加载管理器:

module app{
    /**
     * 构建组RES并加载
     * @author Aonaufly
     */
    export class AutoGroupResLoardManager{
        private _loaderArr : Array<IAutoGroupResLoarData> = null;
        private _is_loading : boolean = false;//是否正在加载中
        private static _instance : AutoGroupResLoardManager = null;
        /**当前正在加载的资源数据*/
        private _cur_data : IAutoGroupResLoarData = null;
        public static get Ins() : AutoGroupResLoardManager{
            if( AutoGroupResLoardManager._instance == null ) AutoGroupResLoardManager._instance = new AutoGroupResLoardManager();
            return AutoGroupResLoardManager._instance;
        }
        public constructor(  ){
            this._loaderArr = [];//数据加载的集合
        }

        /**
         * 开始加载接口
         * @param {app.IAutoGroupResLoarData} data
         */
        public startLoader( data : IAutoGroupResLoarData ) : void{
            if( this._is_loading ){
                this._loaderArr.push( data );//放入加载列表等待加载
            }else{
                this.createGroup2Res( data );
            }
        }

        /**
         * 构建组并加载
         * @param {app.IAutoGroupResLoarData} data
         */
        private createGroup2Res( data : IAutoGroupResLoarData ) : void{
            if( RES.createGroup( data._groupName , data._arr2Res , true )){
                this._cur_data = data;
                this.onConfigComplete(data);
            }else{
                //构建失败
                data._callBack( TypeCallBack2AutoGroupResLoar.CREATE_GROUP_ERROR );
                this.loaderNext();//继续加载下一个
            }
        }

        /**
         * 加载下一个
         */
        private loaderNext() : void{
            if( this._loaderArr.length > 0 ){
                let data : IAutoGroupResLoarData = this._loaderArr.shift();
                this.createGroup2Res( data );
            }else{
                RES.removeEventListener(RES.ResourceEvent.GROUP_COMPLETE,this.onResourceLoad, this);
                RES.removeEventListener(RES.ResourceEvent.GROUP_LOAD_ERROR,this.onResourceLoad, this);
                RES.removeEventListener(RES.ResourceEvent.GROUP_PROGRESS,this.onResourceLoad, this);
                RES.removeEventListener(RES.ResourceEvent.ITEM_LOAD_ERROR,this.onResourceLoad, this);
            }
        }

        /**
         * 添加加载侦听
         * @param {app.IAutoGroupResLoarData} data
         */
        private onConfigComplete(data : IAutoGroupResLoarData): void {
            RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE, this.onResourceLoad, this);
            RES.addEventListener(RES.ResourceEvent.GROUP_LOAD_ERROR, this.onResourceLoad, this);
            RES.addEventListener(RES.ResourceEvent.GROUP_PROGRESS, this.onResourceLoad, this);
            RES.addEventListener(RES.ResourceEvent.ITEM_LOAD_ERROR, this.onResourceLoad, this);
            RES.loadGroup(data._groupName);
        }

        /**
         * 加载侦听处理
         * @param {RES.ResourceEvent} $e
         */
        private onResourceLoad( $e : RES.ResourceEvent ):void{
            switch( $e.type ){
                case RES.ResourceEvent.GROUP_COMPLETE:
                    if( $e.groupName == this._cur_data._groupName ){
                        this._cur_data._callBack( TypeCallBack2AutoGroupResLoar.GROUP_COMPLETE , this._cur_data._class );//加载完成
                        this.loaderNext();//加载下一个
                    }
                    break;
                case RES.ResourceEvent.GROUP_LOAD_ERROR:
                    if( $e.groupName == this._cur_data._groupName ){
                        this._cur_data._callBack( TypeCallBack2AutoGroupResLoar.GROUP_COMPLETE , this._cur_data._class);//容错加载完成
                        this.loaderNext();
                    }
                    break;
                case RES.ResourceEvent.GROUP_PROGRESS://加载进度
                    if($e.groupName == this._cur_data._groupName){
                        this._cur_data._callBack( TypeCallBack2AutoGroupResLoar.GROUP_PROGRESS , this._cur_data._class ,$e );
                    }
                    break;
                case RES.ResourceEvent.ITEM_LOAD_ERROR:
                    if($e.groupName == this._cur_data._groupName){
                        this._cur_data._callBack( TypeCallBack2AutoGroupResLoar.ITEM_LOAD_ERROR , this._cur_data._class ,$e);
                        console.log("Url:" + $e.resItem.url + " has failed to load");
                    }
                    break;
            }
        }
    }

    /**
     * 自动加载数据
     * @author Aonaufly
     */
    export interface IAutoGroupResLoarData{
        /**
         * 组名
         */
        _groupName : string;
        /**
         * 资源名
         */
        _arr2Res : Array<string>;
        /**
         * 回调方法
         */
        _callBack : Function;
        _class : any;
    }

    /**
     * 毁掉类型枚举
     */
    export enum TypeCallBack2AutoGroupResLoar{
        /**构建失败*/
        CREATE_GROUP_ERROR = 0,
        /**组加载完成*/
        GROUP_COMPLETE = 1,
        /**组加载进度*/
        GROUP_PROGRESS = 2,
        /**组中元素加载失败*/
        ITEM_LOAD_ERROR = 3
    }
}

测试调用:

module app {
   export class FntView extends eui.Component implements eui.UIComponent{
      private group_number : eui.Group;
      private img_webp : eui.Image;
      public constructor() {
         super();
         this.skinName = "resource/eui_skins/FntView.exml";
      }
      protected childrenCreated():void{
         super.childrenCreated();

         this.showNumer( 1139 );

         //this.img_webp.source = RES.getRes("bg_jpg");

            var texture:egret.Texture = RES.getRes("aab_webp");
            var result: egret.Bitmap = new egret.Bitmap();
            result.texture = texture;
            result.width = 500;
            result.height = 500;

            this.addChild(result);

            this.loaderRES();
      }




      private showNumer( num : number ) : void{
         let show : string = num.toString();
         FntManager.showFnt( this.group_number , "" , show , 125 , 75  );
      }



      ////////////////////////  RES加载器的使用
      private loaderRES():void{
         let resData : IAutoGroupResLoarData = {
            _groupName : "test2create",
            _arr2Res : [
               "c_01_jpg",
               "c_02_jpg"
            ],
            _callBack : this.callBack2Res,
            _class : this
         };
         AutoGroupResLoardManager.Ins.startLoader( resData );
      }

      private callBack2Res( type : TypeCallBack2AutoGroupResLoar , $class : FntView = null ,  $e : RES.ResourceEvent = null ) : void{
         switch ( type ){
            case TypeCallBack2AutoGroupResLoar.GROUP_COMPLETE:
                    //加载完成
                    let img01: eui.Image = new eui.Image();
                    img01.source = RES.getRes("c_01_jpg");
                    let img02: eui.Image = new eui.Image();
                    img02.source = RES.getRes("c_02_jpg");
                    img01.x = 100;
                    img01.y = 300;
                    img02.x = 300;
                    img02.y = 300;
                    $class.addChild(img01);
                    $class.addChild(img02);
               break;
            case TypeCallBack2AutoGroupResLoar.CREATE_GROUP_ERROR:
               console.error("创建组 : test2create 失败");
               break;
            case TypeCallBack2AutoGroupResLoar.GROUP_PROGRESS:
               console.log(`进度 : ${$e.itemsLoaded}/${$e.itemsTotal}`);//打印进度
               break;
            case TypeCallBack2AutoGroupResLoar.ITEM_LOAD_ERROR:
               console.log(`自定义加载组 : ${$e.groupName} , 错误单元 : ${$e.resItem.url}`);
               break;
         }
      }
   }
}

结果:

Egret之RES资源加载

控制台打印结果:

Egret之RES资源加载

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI