fairyGUI的学习记录1

最新推荐文章于 2024-06-27 02:27:19 发布

石阿包

最新推荐文章于 2024-06-27 02:27:19 发布

阅读量1k

点赞数

分类专栏： FairyGUI的学习案例文章标签：学习 unity c#

本文链接：https://blog.csdn.net/shijinlinaaa/article/details/126468524

版权

FairyGUI的学习案例专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一：前期准备

1、软件准备

在fairyGUI的官网中下载软件，网址如下

FairyGUI

里面有基本内容的教程，可以参考学习，也可以看siki学院的Trigger老师的课程：强大的UI编辑器 - FairyGUI入门教程（网址如下），本次记录的案例都是在siki学院的学习记录

2、sdk包

在unity里面导入fairyGUI的包，这里用的是2020.3.10版的Unity，对应的fairyGUI的包也是相应版本的，具体sdk的包的下载在官网中也有，sdk包链接如下

链接：https://pan.baidu.com/s/1HySCvuQa9OlbzXHkHOO9lw
提取码：jl98

二：案例记录

案例一、按钮动效的混用

实现效果

在fairyGUI的制作

1、图片，音乐素材的导入

2、新建包和组件

新建一个包并命名：Test1（记住名字，代码中会用），

新建一个组件设置大小为800*600，并命名（改名用F2）为Main（记住名字，代码中会用），用于存放主场景

新建一个按钮，把对应的图片拖入按钮的各个状态中，这里只有正常状态和按下状态

新建一个组件设置大小为800*600，并命名为boss（记住名字，代码中会用），用于存放图片的动效

3、按钮的设置

双击选中Button，在右侧的窗口中设置按下效果的缩放和音效设置

4、boss文字的动态的设置

选中组件，然后把图片拖入，点动效的加号，为他添加动效（动画），将时间轴置为0，选择图片，设置位置，然后会有一个关键帧记录，拖动图片的位置记录关键帧，在右侧面板中，有一个Tween选项，选中之后，可以实现缓动到指定位置，可以根据自己的需求制作动画，

5 Main界面的制作

将button按钮和图片拖入里面，然后再button上写上文字，并把button和文字打组（记住组的名字，以后代码中会用）

6、包的导出并导入Unity

选中包中的所有物体，右键->设置为导出，选中包，右键->发布->全局设置->发布路径

改成自己再unity的路径，选项如图所示，不用设置包设置，直接点击发布。

在Unity的制作

新建一个UIPanel，刷新一下，导入01-Test，里面的Main，然后新建GUITest脚本，挂在UIPanel下面，并编写代码，再Stage Camera中添加UI Content Scale，选第一个选项的第二个，设置大小为800*600

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using FairyGUI;
public class FGUITest : MonoBehaviour
{
    GComponent mainUI; //获取UI组件
    GComponent bossCom;//得到boss组件
    GGroup group;
    void Start()
    {
        //得到UIPanel上面的UI组件,(即获得compontent1里面的所有UI)
        mainUI = GetComponent<UIPanel>().ui;
        //获取名为n4的组
        group = mainUI.GetChild("n4").asGroup;
        //获取boss组件
        bossCom = UIPackage.CreateObject("Test1", "boss").asCom;
        //添加按钮监听，获取到名为n1的按钮，为他添加按钮监听
        mainUI.GetChild("n1").onClick.Add(() => { PlayUI(bossCom); });
    }

    // Update is called once per frame
    void Update()
    {
        
    }
    //按钮监听事件
    void PlayUI(GComponent targetCom)
    {
        //名为n1的按钮不显示
        group.visible = false;
        //将指定目标组件添加到序列中
        GRoot.inst.AddChild(targetCom);
        //获取名为t0的动效动画
        Transition t = targetCom.GetTransition("t0");
        //播放动画并添加动画后的委托
        t.Play(()=>
        {
            //group.visible = true;
            mainUI.GetChild("Guide").visible = true;
            GRoot.inst.RemoveChild(targetCom);
        });
    }
}

案例二：增益buff数值的动态显示

1效果展示（录屏反应不过来，绿屏了）

2在FairyGUI中的制作

1、新建包：F2命名为：02-Test，把文件导入，并按文件类型整理成文件夹

2、制作数字的位图字体

新建位图字体，命名为addValue，把对应图片拖进去

字符表示的是，这个位图表示的那个字符，例如：在输入加号的时候，会出现加号那张图片

再新建一个位图字体，名为attackValue，把对应图片拖进去

3、新建按钮，把对应状态的按钮拖进去，新建一个组件，按F2重命名为Mian（记住名字，代码中会用），把按钮拖进去（按钮位置随意），作为主场景

4、新建动画，命名为fire，把火焰的图片拖进去

5、新建一个组件，F2命名为：AddValueCom，把需要的图片和动画拖进来，并按图示排列（火焰添加动效，一开始没显示），把他们打一个组，选择组为高级组（方便以后组中的元素的使用和移动，普通组不能对其中的元素设置）

动效动画的刻画（可以根据自己的需求自行刻画）

这边做的效果就是先移入画面，然后再向右移动，右移的过程中火焰出现，再向右上方移动，全部渐隐消失

关键帧的添加：选中n5的关键帧，再右侧检查器中再标签中写上addValue（这个关键帧在unity中会调用，记住他的名字）

6、导出与导出unity

将包中的所有物体设置为可导出，再将包发布，选择自己在unity中的文件

在Unity的制作

新建一个UIPanel，刷新一下，导入02-Test，里面的Main，然后新建GUITest脚本，挂在UIPanel下面，并编写代码，再Stage Camera中添加UI Content Scale，选第一个选项的第二个，设置大小为800*600

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using FairyGUI;
using DG.Tweening;

public class FGUITest2 : MonoBehaviour
{
    GComponent mianUI;      //获取所有UI组件
    GComponent addValueCom; //获取addValue组件
    float startValue;     //分数的初始值
    float endValue;       //分数的结束值


    void Start()
    {
        //获取导入的资源的所有的UI组件
        mianUI = GetComponent<UIPanel>().ui;
        //获取导入包中的AddValueCom组件，第一个参数是包的名称，第二个参数是组件的名称
        //（组件名最好不要跟动态里面标签的名字重复，一开始名字为addValue，但是这个组件是显示为空的）
        addValueCom = UIPackage.CreateObject("02-Test", "AddValueCom").asCom;
        //获取t0动效，获取他的标签，（addValue为他的标签名），并为他增加事件监听
        addValueCom.GetTransition("t0").SetHook("addValue", AddAttackValue);
        //获取button组件，并为他添加监听
        mianUI.GetChild("n0").onClick.Add(()=> { PlayUI(addValueCom); });
    }

    #region 按钮的监听
    void PlayUI(GComponent targetCom)
    {
        //按钮消失
        mianUI.GetChild("n0").visible = false;
        //将目标组件添加到序列中
        GRoot.inst.AddChild(targetCom);
        //设置位置动画（在GUI中名为t0的动效）
        Transition t = targetCom.GetTransition("t0");
        //设置高级组的用处在这，如果是一般组，没法对里面的元素设置
        //设置一开始n2的数值（为AttackValue的数字）
        startValue = 10000;
        //设置随机增加的数字
        int add = Random.Range(1000, 3000);
        //设置结束数字
        endValue = startValue + add;
        //将文字赋值（n4为AddValue的数字）
        addValueCom.GetChild("n2").text = startValue.ToString();
        addValueCom.GetChild("n4").text = add.ToString();
        //播放动画并添加动画后的委托
        t.Play(() =>
        {
            mianUI.GetChild("n0").visible = true;
            GRoot.inst.RemoveChild(targetCom);
        });
    }
    #endregion

    #region 数字动态增加效果
    void AddAttackValue()
    {
        //用dotween和lamder表达式将增加的数字动态增加到n2这个字上
        DOTween.To(()=>startValue,x => { addValueCom.GetChild("n2").text = Mathf.Floor(x).ToString(); },endValue,0.5f).SetEase(Ease.Linear).SetUpdate(true);
    }
    #endregion
}

后面还有几个案例，写一篇太长了，所以分着写，看后续案例，就看后面的专栏把