fairyGUI的学习记录2

最新推荐文章于 2025-04-29 15:56:44 发布

石阿包

最新推荐文章于 2025-04-29 15:56:44 发布

阅读量972

点赞数

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

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

版权

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

3 篇文章

订阅专栏

这篇博客介绍了如何使用FairyGUI在Unity中创建新手引导和循环列表。首先，详细讲解了在FairyGUI中制作新手引导的过程，包括设置遮罩、控制器和动画。然后，展示了在Unity中导入并实现引导的逻辑。接着，文章转向了循环列表的制作，包括设置虚拟列表、渲染函数和滚动效果。最后，提到了如何添加3D效果和倒影效果，并给出了相关资源链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

案例三：新手指引制作（主要用控制器实现界面切换）

效果展示

在Fairy中的制作

1、新建包F2命名：03-Test，导入所有的素材，新建一个组件F2命名：Guide

2、在Guide中新建4个图形，作为遮罩，如图所示，将遮罩和圆圈的动画放入一个组中，方便用控制器统一控制他们

3、新建一个控制器

选中箭头，选中控制器的0界面，设置他的位置，在选择第一页，设置位置，在右侧的属性控制中，选择控制器，选择0，1这两页，在添加一个缓动动画

选中组n7，设置为高级组，设置属性控制，设置为控制器的1（为了实现一开始没有这些，点击按钮后，出现这些）

4、设置为导出，并发布到unity的对应文件夹中

在Unity的制作

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

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

public class FGUITest03 : MonoBehaviour
{
    GComponent mainUI; //获取UI组件
    GComponent Guide;//得到Guide组件
    GGroup group;
    // Start is called before the first frame update
    void Start()
    {
        //得到UIPanel上面的UI组件,(即获得compontent1里面的所有UI)
        mainUI = GetComponent<UIPanel>().ui;
        //获取名为n7的组
        group = mainUI.GetChild("n7").asGroup;
        //获取Guide组件
        Guide = UIPackage.CreateObject("Test03", "Guide").asCom;
        //添加按钮监听，获取到名为n0的按钮，为他添加按钮监听
        mainUI.GetChild("n0").onClick.Add(() => { PlayUI(Guide); });
    }

    //按钮监听事件
    void PlayUI(GComponent targetCom)
    {
        GRoot.inst.AddChild(targetCom);
        //获取名为c1的控制器
        Controller c1 = targetCom.GetController("c1");
        //获取第一个界面
        c1.selectedIndex = 1;

    }
}

案例四：列表循环案例

1、效果展示

在FairyGUI的制作

1、新建一个包，按F2命名为：04-LoopList，并导入素材（这里我用的是自己的素材）

2、新建一个组件，命名为loopList，组件大小为1920*1080，在新建一个Button，设置大小为比图片尺寸大，在里面新建一个装载器，设置大小跟图片差不多大小或者比图片大，设置装载器的关联为与容器上下左右居中（如图）

我这边做的（图片：496*331，装载器：560*360，按钮：700*400）

如果想看装载器中图片的效果，可以把图片的URL放进去，最后导出的时候，需要把URL删掉（如图）

在button中设置装载器的名称为icon（很重要，因为fairyGUI封装的按钮里面的方法，获取按钮中的元素，元素名必须是icon）

3、在loopList组件中新建一个列表，命名为list（记住名字，代码会用），设置列表的大小（自行设置，看你想装下几个图片）（我这边设置的是1550*760）设置列表与容器上下左右居中

将前面建的按钮拖入资源项目中（不拖得话，不会生成图片）

4把全部设置为导出，并发布文件，发布方式跟之前一样，（注意：资源中得图片名称要记住，代码中要用，我这边得图片名称分别为n0，n1，n2...）

在Unity中的制作

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

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using FairyGUI;
public class LoopList : MonoBehaviour
{
    GComponent mainUI;
    GList list;
    public int itemNums;
    // Start is called before the first frame update
    void Start()
    {
        mainUI = GetComponent<UIPanel>().ui;
        list = mainUI.GetChild("list").asList;
        //设置成虚拟列表（FairyGUI规定，如果使用循环列表，一定得是虚拟列表）
        list.SetVirtualAndLoop();
        //设置渲染函数
        list.itemRenderer = RanderListItem;
        //设置列表长度
        list.numItems = itemNums;
        //添加监听事件
        list.scrollPane.onScroll.Add(DoSpecialEffect);
        DoSpecialEffect();
    }
    //中间放大的效果
    void DoSpecialEffect()
    {
        //列表中心x的坐标
        float midX = list.scrollPane.posX + list.viewWidth / 2;

        //numchildern是当前渲染得对象，即当前屏幕显示得对象
        for (int i = 0; i < list.numChildren; i++)
        {
            //获取列表的子对象
            GObject item = list.GetChildAt(i);
            
            //获得距离
            float dist = Mathf.Abs(midX - item.x - item.width / 2);
            if (dist > item.width)
            {
                item.SetScale(1, 1);
            }
            else
            {
                float distanceRange = 1 + (1 - dist / item.width) * 0.5f;
                item.SetScale(distanceRange, distanceRange);
            }
        }
    }
    /// <summary>
    /// 渲染函数
    /// </summary>
    /// <param name="index">索引</param>
    /// <param name="obj">变量</param>
    void RanderListItem(int index,GObject obj)
    {
        //将物体改为button组件
        GButton button = obj.asButton;
        button.onClick.Add(ButtonEvent);
        //设置锚点为中心
        button.SetPivot(0.5f, 0.5f);
        //要在fairyGUI中，把装载器得名字改为icon才行   两个参数，第一个是包名，第二个是图片得名字，就是在fairyGUI里面得图片名
        button.icon = UIPackage.GetItemURL("04-LoopList", "n"+(index+1));
    }

   
}

如果还想丰富下效果，让他有3d的感觉，可以更改y的旋转值，添加

item.rotationY = -(midX - item.x - item.width / 2 )/ 10;这个后面被除数（“10”）的大小跟图片的宽度有关，宽度越宽，被除数越大，实现效果如图