美文网首页一只腊鸭做游戏
Laya FairyGui系列六 GLoader

Laya FairyGui系列六 GLoader

作者: s0ok | 来源:发表于2019-11-20 18:40 被阅读0次

    装载器(GLoader)

    FGUI规定需要切换图片的Texture时就需要使用装载器,所以装载器在FGUI中的使用也非常广泛,例如前面说到的GButton的图形标题。

    创建装载器的方法和创建图形一样,在左侧工具栏点击装载器按钮创建一个装载器。 GLoader.png

    装载器的属性:

    • URL URL指向的资源可以是图片、动画或者组件

    • 自动大小 设置装载器是否根据内容的大小自动调整自身的大小。例如,如果图片的大小是120x120,则装载器的大小自动变成120x120。

    • 填充处理 当内容大小和装载器大小不同时的缩放策略,如果设置了自动大小那么填充处理就无效了。


      GLoader_0.png
    • 仅允许缩小 勾选后,装载器加载的内容将永远不被放大,但可以被缩小

    • 对齐 设置装载器内容的对齐方式。

    装载器时继承自GObject,但是自身并不会处理图片的显示过程,自身只处理指定的显示内容的加载:

    __proto.loadContent=function(){
           this.clearContent();
           if (!this._url)
               return;
           if(ToolSet.startsWith(this._url,"ui://"))
               this.loadFromPackage(this._url);
           else
           this.loadExternal();
       }
    
       __proto.loadExternal=function(){
           AssetProxy.inst.load(this._url,Handler.create(this,this.__getResCompleted),null,"image");
       }
       __proto.onExternalLoadSuccess=function(texture){
           this._content.texture=texture;
           this._content.scale9Grid=null;
           this._content.scaleByTile=false;
           this._contentSourceWidth=texture.width;
           this._contentSourceHeight=texture.height;
           this.updateLayout();
       }
    

    通过源码可以看到,在设置装载器的url属性时会判断如果设置的值是"ui://"开头则同FGUI资源包中寻找指定的资源,或者则通过Laya.loader加载指定的资源。加载完成后将加载的内容赋值给MovieClip,由MovieClip来负责内容的显示。
    这里不说MovieClip如何处理内容显示的,如果有兴趣可以点击这里

    装载器的使用

    • 动态创建装载器
    const testLoader = new fairygui.GLoader();
    //一定要设置装载器大小,或者显示不出来
    testLoader.setSize(100,100);
    testLoader.autoSize = true;
    testCom.addChild(testLoader);
    
    • 设置装载器url属性
    //设置资源包中的图片(URL)
    testLoader.icon = "ui://pz4zm4twoxk59";
    //设置资源包中的图片(包名/图片或者组件名)
    testLoader.icon = "ui://Package1/skill015";
    //设置本地res目录下的资源(res下完成路径)
    testLoader.icon = "res/skill014.png";
    //设置本地图集中的资源(图集名称/图片名称)
    testLoader.icon = "skillIcon/skill015.png";
    

    设置装载器的url是本地资源时会先去内存里面查找资源是否已经加载,如果未加载则会执行Laya.loader的加载过程,如果指定的是图集那么加载整个图集。

    • 装载器的点击事件
    testLoader.onClick(this,()=>{
        console.log("点击了GLoader");
    })
    
    • 装载器的url指定的如果时其他组件,在代码中可以这样或者这个组件
    const testLoader2 = testCom.getChild("n22").asLoader;
    const testButton = testLoader2.component.asButton;
    testButton.onClick(this,()=>{
        console.log("点击了GLoader中的Button");
    })
    

    注:

    • 直接释放装载器正在使用的资源后,装载器的url属性并未重置,然后将这个资源加载后再设置给装载器的url时会失效。

    • 装载器,图片组件都可以再编辑器中直接修改颜色,但是再Laya中不建议使用,因为Laya中改变图片颜色时通过滤镜实现,会产生效率问题。

    相关文章

      网友评论

        本文标题:Laya FairyGui系列六 GLoader

        本文链接:https://www.haomeiwen.com/subject/zuvgictx.html