【Unity之FairyGUI】FairyGUI元件详解

发布于:2024-05-18 ⋅ 阅读:(194) ⋅ 点赞:(0)

在这里插入图片描述


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

👨‍💻 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()
  • 专业版内容
    在这里插入图片描述


⭐相关文章⭐

【2023unity游戏制作-mango的冒险】-4.场景二的镜头和法球特效跟随

【2023unity游戏制作-mango的冒险】-3.基础动作和动画API实现

【2023unity游戏制作-mango的冒险】-2.始画面API制作

【2023unity游戏制作-mango的冒险】-1.场景搭建

“狂飙”游戏制作—游戏分类图鉴(网易游学)

本站最全-unity常用API大全(万字详解),不信你不收藏



你们的点赞👍 收藏⭐ 留言📝 关注✅是我持续创作,输出优质内容的最大动力!