美文网首页一只腊鸭做游戏
Laya FairyGui系列二 GObject GComp

Laya FairyGui系列二 GObject GComp

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

GObject

GObject是FGUI中UI组件的基类。GComponent,GImage,GGraph等都继承自GObject。
但GObject虽是FGUI的组件基类,但是FGUI的所有组件还是在Laya的基础上进行封装的。例如每个GObject对象或者GObject子类的对象中都包含一个Laya.Sprite对象

    handleXYChanged() {
            var xv = this._x;
            var yv = this._y + this._yOffset;
            if (this._pivotAsAnchor) {
                xv -= this._pivotX * this._width;
                yv -= this._pivotY * this._height;
            }
            if (this._pixelSnapping) {
                xv = Math.round(xv);
                yv = Math.round(yv);
            }
            this._displayObject.pos(xv + this._pivotOffsetX, yv + this._pivotOffsetY);
    }

关于轴心点
设置轴心点的源码:

     setPivot(xv, yv = 0, asAnchor = false) {
            if (this._pivotX != xv || this._pivotY != yv || this._pivotAsAnchor != asAnchor) {
                this._pivotX = xv;
                this._pivotY = yv;
                this._pivotAsAnchor = asAnchor;
                this.updatePivotOffset();
                this.handleXYChanged();
            }
        }
      updatePivotOffset() {
            if (this._displayObject != null) {
                if (this._displayObject.transform && (this._pivotX != 0 || this._pivotY != 0)) {
                    GObject.sHelperPoint.x = this._pivotX * this._width;
                    GObject.sHelperPoint.y = this._pivotY * this._height;
                    var pt = this._displayObject.transform.transformPoint(GObject.sHelperPoint);
                    this._pivotOffsetX = this._pivotX * this._width - pt.x;
                    this._pivotOffsetY = this._pivotY * this._height - pt.y;
                }
                else {
                    this._pivotOffsetX = 0;
                    this._pivotOffsetY = 0;
                }
            }
        }

FGUI的轴心点和Laya的有一点区别,如果设置一个120*120的图片的轴心点为中心时Laya应设置为(60,60),FGUI应设置为(0.5,0.5)。并且FGUI中不允许不设置轴心点的情况下直接设置锚点。

GComponent

FGUI中GComponent是非常常用的基础容器,可以包含多个基础显示对象或者包含其他GComponent。例如按钮,列表,进度条等UI组件也都是继承自GComponent。GComponent是一个容器,所以包含_children属性,可以被当成父节点,GObject则不可以。

GComponent的使用

  • 创建
const testCom = fairygui.UIPackage.createObject('包名','组件名').asCom
  • 销毁
testCom.dispose();
  • 操作子节点(子节点相关的方法有很多,看下源码吧)


    GComponent.png

    其中包括按名称,按zIndex,按ID等获取子节点,添加子节点,删除子节点,交换子节点的zIndex等方法。

实例运用中我习惯将每个独立的页面创建成GComponent。项目开发中很多UI是以非全屏弹框的形式展示,FGUI中的窗口系统可以实现弹框,但是个人觉得使用的限制比较多,在美术人员把非全屏改全屏或者全屏改非全屏的时候修改的地方比较多。

相关文章

  • Laya FairyGui系列二 GObject GComp

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

  • Laya FairyGui系列一 FairyGui接入

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

  • Laya FairyGui系列七 GTextField

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

  • Laya FairyGui系列八 GList

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

  • Laya FairyGui系列六 GLoader

    装载器(GLoader) FGUI规定需要切换图片的Texture时就需要使用装载器,所以装载器在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使用

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

网友评论

    本文标题:Laya FairyGui系列二 GObject GComp

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