UG4L7-3——动态加载界面

本章代码关键字

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
//GRoot相关
GRoot                                //动态创建UI时会自动创建的根对象
GRoot.inst.SetContentScaleFactor()    //设置适配（分辨率自适应）
GRoot.inst.AddChild()                //创建好的UI对象添加为GRoot子对象
//加载GComponent相关
UIPackage.CreateObject()            //从包内同步加载
UIPackage.CreateObjectAsync()        //从包内异步加载
//GComponent相关
GObject                                //元件类，GComponent的父类
gObject.asCom                        //返回将GObject对象as成GComponent的属性
GComponent                            //FairyGUI的组件
gComponent.Dispose()                //销毁组件对象
gComponent.x                        //组件的x轴位置
gComponent.y                        //组件的y轴位置
gComponent.SetPosition()            //设置组件位置
gComponent.width                    //组件宽
gComponent.height                    //组件高
gComponent.SetSize()                //设置组件宽高
gComponent.pivotX                    //组件的轴心x轴位置（范围0~1）
gComponent.pivotY                    //组件的轴心y轴位置（范围0~1）
gComponent.SetPivot()                //设置组件的轴心位置（范围0~1），且设置是否将锚点设置到轴心位置
gComponent.pivotAsAnchor            //是否将锚点设置到轴心位置
gComponent.rotation                    //组件的角度
gComponent.visible                    //组件是否可见
gComponent.grayed                    //组件是否置灰
gComponent.scaleX                    //组件的x轴缩放
gComponent.scaleY                    //组件的y轴缩放
gComponent.sortingOrder                //组件的排序层级
gComponent.opaque                    //组件点击不穿透
gComponent.numChildren                //与FairyGUI编辑器的显示列表的数量一致
gComponent.AddChild()                //为组件添加子对象
gComponent.GetChild()                //通过名字获取组件的子对象
gComponent.GetChildAt()                //通过索引获取组件的子对象
gComponent.SetChildIndex()            //设置子对象的索引
gComponent.childrenRenderOrder        //设置子对象的渲染顺序
ChildrenRenderOrder.Ascent            //升序渲染
ChildrenRenderOrder.Descent            //降序渲染
ChildrenRenderOrder.Arch            //拱形顺序渲染
gComponent.apexIndex                //拱形顺序渲染时，拱峰的位置

使用UIPanel还是动态创建UI？

UIPanel一般用来做3DUI，它可以更加方便的挂载到任意GameObject上
优点是可以直接摆放在场景中，但是一般的UI界面不建议使用UIPanel，因为随着UI的增多，项目的变大，通过它管理UI非常的麻烦

动态创建可以使用代码创建UI，可以应用到传统的设计模式上，需要注意的是，动态创建的UI不要和其它GameObject相关联

GRoot

​GRoot​是动态创建UI时会自动创建的根对象，它主要负责适配等工作

  1. 设置适配（分辨率自适应）API

    • 参数一、二：设计分辨率
    • 参数三：适配模式

    这里参数应当是和你在FairyGUI编辑器里的项目设置里的适配设置是一致的

    ​image​

    1
    GRoot.inst.SetContentScaleFactor(1365, 768, UIContentScaler.ScreenMatchMode.MatchHeight);

  2. 创建好的UI对象添加为它的子对象

    1
    GRoot.inst.AddChild(gObj);

    将创建出来的UI对象添加到GRoot​下后，UI就能显示出来了

    ​image​

代码动态创建UI

主要步骤

  1. 设置适配相关内容
  2. 加载包
  3. 加载依赖包
  4. 动态创建UI资源

设置分辨率适配相关，该代码在进入游戏后设置一次就可以了

1
GRoot.inst.SetContentScaleFactor(1365, 768, UIContentScaler.ScreenMatchMode.MatchHeight);

创建UI之前，必须加载包，并加载其依赖包

1
2
3
4
5
UIPackage package = UIPackage.AddPackage("UI/Teach");
foreach (var item in package.dependencies)
{
    UIPackage.AddPackage("UI/" + item["name"]);
}

动态加载和销毁UI资源

  1. 同步加载

    • 参数一：包名（需要已经加载完毕）
    • 参数二：组件名

    值得一提的是，这样创建出来的对象是GObject​类型的，我们需要使用.asCom​属性来将其as​成GComponent​类型

    1
    2
    GComponent view = UIPackage.CreateObject("teach", "TeachPanel").asCom;
    GRoot.inst.AddChild(view);

  2. 异步加载

    • 参数一：包名（需要已经加载完毕）
    • 参数二：组件名
    • 参数三：回调函数

    第三个参数的回调函数需要GObject​类型的参数，再在回调函数里写加载出来的对象应该做什么

    1
    2
    3
    4
    5
    UIPackage.CreateObjectAsync("teach", "TeachPanel", (obj) =>
    {
        GComponent view = obj.asCom;
        GRoot.inst.AddChild(view);
    });

  3. 销毁UI

    1
    view.Dispose();

GComponent常用API

  1. 位置

    1
    2
    3
    view.x = 10;
    view.y = 10;
    view.SetPosition(0, 0, 0);

  2. 宽高

    1
    2
    3
    view.width = 1000;
    view.height = 500;
    view.SetSize(1365, 768);

  3. 轴心点

    1
    2
    3
    4
    view.pivotX = 0;
    view.pivotY = 0;
    view.SetPivot(0, 0, true);
    view.pivotAsAnchor = false;

  4. 角度

    1
    view.rotation = 0;

  5. 可见与否

    1
    view.visible = true;

  6. 置灰

    1
    view.grayed = true;

  7. 缩放（范围0~1）

    1
    2
    view.scaleX = 1;
    view.scaleY = 1;

  8. 排序层

    1
    view.sortingOrder = 1;

  9. 点击不穿透

    1
    view.opaque = true;

  10. 子对象数量

    1
    print(view.numChildren);    //与FairyGUI编辑器的显示列表的数量一致

  11. 子对象相关

    1
    GComponent childview = null;    //假设这是一个子对象

    • 添加子对象

      1
      view.AddChild(childview);

    • 根据名字获取子对象

      1
      view.GetChild("n1");

    • 根据索引获取子对象

      1
      view.GetChildAt(0);

    • 设置对象排序位置

      1
      view.SetChildIndex(childview, 5);

    • 设置子对象排序规则

      • 升序（默认），从小到大依次渲染，序号大的显示在前面

        1
        view.childrenRenderOrder = ChildrenRenderOrder.Ascent;

      • 降序，从大到小依次渲染，序号小的显示在前面

        1
        view.childrenRenderOrder = ChildrenRenderOrder.Descent;

      • 拱形，设置一个顶峰值显示在最前面，两侧的依次渲染

        1
        2
        view.childrenRenderOrder = ChildrenRenderOrder.Arch;
        view.apexIndex = 5;

‍