【Unity之FairyGUI】FairyGUI元件详解-EW帮帮网

在这里插入图片描述

👨‍💻个人主页：@元宇宙-秩沅

👨‍💻 hallo 欢迎点赞👍 收藏⭐ 留言📝 加关注✅!

👨‍💻 本文由秩沅原创

👨‍💻 收录于专栏：unityc#专题篇习题

在这里插入图片描述

⭐习题总结专题篇⭐

文章目录

🎶前言

🪶（一） FGUI元件

1.组件类继承元件类
2.元件类:GObject —— 组件类:GComponent
3.元件是stage舞台上的最小组成单位，舞台中的组成元素我们称之为元件

😶‍🌫️1.元件基本属性

在这里插入图片描述

关键参数:

①.原大小：勾选后，将使用素材的原始大小，当资源修改后，尺寸会随之修改
②.缩放和尺寸的区别： 缩放会改变子对象大小变化，尺寸不会
③.倾斜：伪3D的效果，除（图片、动画、装载器）三个元件外，建议不要使用
④.轴心：旋转，尺寸，缩放的参考点
⑤.同时作为锚点：锚点用于计算相对位置。默认位置为左上角（0,0）
⑥.不可触摸：默认图片、普通文本、动画永远是不可触摸，不会监听事件。

用的比较少:

在这里插入图片描述

①.BlendMode混合模式和滤镜
除图片、动画、文字之外的其它组件会有一定内存消耗。特别的会增加DC
②.自定义数据：作为额外数据，可以通过代码来获取

😶‍🌫️2.元件的调用及API

元件类 GObject是所有UI元素的基类，组件类中很多内容都是继承自元件类的
①.创建一个组件设置适配相关

 GRoot.inst.SetContentScaleFactor(1920, 1080, UIContentScaler.ScreenMatchMode.MatchHeight);

②.包和依赖包的加载

    UIPackage package = UIPackage.AddPackage("UI/xxx");
    foreach (var item in package.dependencies)
    {
        UIPackage.AddPackage(item["name"]);
    }

③.得到组件类，并设置位置

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

④ 获取组件中的元件

 GObject obj = view.GetChild("btnXXX");

⑤元件的相关API

  //1.设置坐标
  obj.x = 20;
  obj.y = 20;
  obj.SetPosition(0, 0, 0);
  //2.设置大小
  obj.SetSize(100, 100);
  obj.width = 200;
  obj.height = 100;
  //3.设置大小限制
  obj.maxWidth = 1000;
  obj.minWidth = 100;
  //4.设置缩放
  obj.scaleX = 1;
  obj.scaleY = 1;
  obj.scale = Vector2.one;
  //5.设置轴心
  obj.SetPivot(0, 0, true);
  obj.pivotAsAnchor = false;
  //6.设置可见
  obj.visible = true;
  //7.设置是否交互（点击）
  obj.touchable = false;
  //8.设置置灰
  obj.grayed = true;
  //9.设置激活(变灰+触摸)
  obj.enabled = true;
  //10设置旋转
  obj.rotation = 0;
  //11.获取原对象
  //obj.displayObject.gameObject
  //12.销毁
  //obj.Dispose();
  //资源地址 动画、 图片、 组件才会有
  //13.得到URL资源地址和资源名
  obj.resourceURL
  obj.packageItem.name
  //14.是否在舞台
  obj.onStag
  //15.自定义数据（用得少）
  obj.data

😶‍🌫️3.图片元件

最基础的图片显示元素，为了简介高效，它不支持修改图片源、不支持点击（PNG、JPG、TGA、SVG）
如果需要动态改变或者支持点击，使用装载器实现
①图片大小：图片的原始大小，SVG格式可以修改，SVG可以无损缩放，但是其它格式不能
②数据大小：图片所占字节大小（压缩前—压缩后）
③缩放模式同UGUI
④平滑：若不是像素游戏都需勾选
⑤纹理集：将图片设置道同一纹理集中

单独：图单独成为一张纹理集
单独（NPOT）：图按原大小直接输出

⑥重复边缘像素：（平铺时使用）避免平铺时产生缝隙
⑦禁止裁剪边缘空白：不想去掉多余的空白边缘可勾选
更新：选择外部图片覆盖此图片
⑧裁剪边缘空白：永久剪除图片周围的全透明像素，图片可能变小

在这里插入图片描述

填充：可以用作做进度条等（如UGUI的Slider）
图片元件相关API：

   //1.获取图片元件
   GImage img = view.GetChild("图片元件名").asImage;
   //2.动态创建图片元件
   GImage img2 = UIPackage.CreateObject("包名", "图片名字").asImage;
   view.AddChild(img2);
   //3.填充值
   img.fillAmount = 0.5f;
   img.fillMethod = FillMethod.None;
   //4.材质和着色器改变
   img.shader = xx
   img.material = xx
   //5.更换精灵图集___动态赋值Texture2D
   img.texture = new NTexture(sprite);

高清图片使用：将原图改为—— 原名@2x.png 的格式，用作这种情况显示，使界面显示效果呈现高清的效果。

😶‍🌫️4.图形元件

在这里插入图片描述

可用它来实现的功能：遮罩、占位、雷达图等等

  //1.获取图形元件
  GGraph graph = view.GetChild("图形名").asGraph;
  //2.画出图形
  graph.DrawRect(100, 100, 4, Color.red, Color.white);//画矩形
  graph.DrawEllipse(100, 100, Color.red);//画椭圆
  //3.动态创建图形元件
  GGraph graph2 = new GGraph();
  graph2.SetPosition(50, 50, 0);//设置位置
  graph2.DrawRect(200, 200, 5, Color.white, Color.red);
  view.AddChild(graph2); 
  //4.空白图形中添加Unity对象
  GGraph graph3 = view.GetChild("图形名").asGraph;
  //5.设置激活状态
  graph3.SetNativeObject()

😶‍🌫️5.序列帧动画元件

序列帧动画，就是指由n张图片构成的动画，每张图片按照一定时间进行切换产生动画播放的效果

如何用FGUI制作序列帧动画

动画格式为JTA格式

1.菜单栏——>资源——>新建动画（或工具栏快捷按钮如下：），然后在动画编辑器界面导入图片序列，制作序列帧动画.

在这里插入图片描述

2.拖入Gif文件到动画编辑器中，Gif会自动转换为序列帧动画
3.美术在外部创建

在这里插入图片描述

注意：

1.导入序列动画图片到动画编辑里面时，一定要注意图片的顺序是否正确，不然会影响动画播放的效果
2.保持序列动画都在同一个纹理集当中

//1.获取序列帧动画元件
GMovieClip movie = view.GetChild("序列动画名字").asMovieClip;
movie.x = 0;
movie.y = 0;

//2.动态创建动画
GMovieClip movie = UIPackage.CreateObject("包名", "动画名").asMovieClip;
movie2.x = 50;
view.AddChild(movie2);

//3.切换播放和停止状态
movie.playing = false;
//4.ruo处于停止状态，设置停止在第几帧
movie.frame = 5;
//5.设置循环播放
movie.SetPlaySettings(0, -1, 10, -1);
movie.playing = true;
//6.返回播放动画头部
 movie2.Rewind();
//7.播放结束回调函数
movie2.onPlayEnd.Add(() =>
{
    print("动画播放完毕");
});

😶‍🌫️6.骨骼动画元件

FairyGUI目前只支持

1.DragonBones龙骨编辑器所有版本导出的骨骼动画（建议使用）
2.只支持Spine编辑器 3.8版本 导出的骨骼动画
①着色器：

Default：，常规遮罩无法作用于骨骼动画，需要用自定义遮罩（骨骼动画库默认的着色器）

FairyGUI/Image：常规遮罩可以作用于骨骼动画。但是没有预乘处理

预乘：预乘就是提前把srcRGB*srcAlpha计算出来存在贴图的rgb通道中,这样在渲染时就能少做一次乘法

②贴图是否已预乘：要和骨骼动画软件发布时选项一样，否则动画显示不正确

Unity获取API

首先要将骨骼动画插件的SDK导入

在这里插入图片描述

然后填写FAIRYGUI_DRAGONBONES
若导入了两个就填
FAIRYGUI_DRAGONBONES；FAIRYGUI_SPINE

目的启用导入的SDK的代码

选中ske后缀的龙骨动画配置文件，进行下列操作
就会生成一个Data结尾的数据文件，才可以正常使用龙骨动画

😶‍🌫️7.装载器元件

1.内容装载器 :
节约性能提升效率
用途就是动态载入资源，动态得改变图片

    装载器可以装载：  图片、动画、组件

在这里插入图片描述

装载器属性

①URL：资源路径（图片、动画、组件）

②填充处理

无：内容不会发生任何缩放。
等比缩放（显示全部）
等比缩放（无边框）
等比缩放（适应高度）
等比缩放（适应宽度）
自由缩放
注意：如果设置了自动大小，那么填充不发挥作用

创建装载器

①工具栏点击 在这里插入图片描述

②元件替换 在这里插入图片描述

装载器API

    //1.获取装载器
    GLoader loader = view.GetChild("装载器名称").asLoader;
    //2.加载包中的资源
    loader.url = "ui://包名/资源名";
    //3.路径也可以为Unity中资源路径
    loader.url = "UI/bk";
    //4.动态创建装载器
    GLoader loader = new GLoader();
    loader.SetSize(100, 100);
    loader.y = 400;
    loader.url = "ui://包名/资源名";
    view.AddChild(loader);
    //5.获取装载器中的内容
    loader.movieClip //得到装载器中的动画
    loader.component //得到装载器中的组件

    //6.装载Unity贴图
    public Texture t;
    loader.texture = new NTexture(t);

    //7.自定义加载方案
    UIObjectFactory.SetLoaderExtension(typeof(MyGLoader));//注册方法

public class MyGLoader:GLoader
{
    protected override void LoadExternal()
    {
        //自定义加载方式
        Sprite s = null;
        //如果加载成功 
        NTexture t = new NTexture(s);
        onExternalLoadSuccess(t);
        //如果加载失败
        onExternalLoadFailed();
    }

    protected override void FreeExternal(NTexture texture)
    {
        //释放外部载入资源的逻辑
    }
}

2.3D内容装载器 :

用途是和区别：动态载入比较复杂的资源，例如骨骼动画、模型（暂未支持）、粒子特效（暂未支持)等

在这里插入图片描述

装载器元件相关API

       GRoot.inst.AddChild(view);
       //1.获取3D装载器
       GLoader3D loader3D = view.GetChild("装载器名称").asLoader3D;
       //2.动态创建3D装载器
       GLoader3D loader3D2 = new GLoader3D();
       loader3D2.SetSize(100, 100);
       view.AddChild(loader3D2);
      //3.设置骨骼动画
        loader3D2.SetDragonBones()；
        loader3D2.SetSpine()；