美文网首页一只腊鸭做游戏
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

    装载器(GLoader) FGUI规定需要切换图片的Texture时就需要使用装载器,所以装载器在FGUI中的使用...

  • Laya FairyGui系列一 FairyGui接入

    一,什么是FairyGui FairyGUI(下面简称FGUI)提供了一个强大的UI编辑器,使用习惯与Adobe系...

  • Laya FairyGui系列七 GTextField

    文本(GTextField) 文本是一个基础组件,说到文本就不能不说字体。FGUI支持动态字体和位图字体,同时也支...

  • Laya FairyGui系列八 GList

    列表(GList) 游戏开发过程中经常会用到列表组件,比如我们做排行榜,服务器列表等。FGUI的列表能实现很多种复...

  • Laya FairyGui系列四 GButton

    按钮(GButton) 按钮毋庸置疑在任何引擎中都是比较常用的组件之一,FGUI中按钮的类时GButton,它包含...

  • Laya FairyGui系列三 Controller

    控制器(Controller) 控制器是FGUI的一个核心的功能,使程序员在写UI时可以节省大量控制UI的代码。可...

  • Laya FairyGui系列九 GProgressBar G

    进度条(GProgressBar) 点击顶部工具栏创建一个进度条组件,然后按照向导提示一步一步设置资源。 注意 进...

  • Laya FairyGui系列五 GImage GGraph

    图形(GGraph) 编辑器中使用图形点击侧工具栏中图形按钮即可创建图形,图形支持圆形,矩形,空白三种,空白不消耗...

  • Laya FairyGui系列二 GObject GComp

    GObject GObject是FGUI中UI组件的基类。GComponent,GImage,GGraph等都继承...

  • Laya开发-FairyGui使用

    xzhuan原创稿件,转载请注明出处! FairyGui简介FairyGUI(下面简称FGUI)提供了一个强大的U...

网友评论

    本文标题:Laya FairyGui系列六 GLoader

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