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;