一个FairyGUI测试使用的unity工程：使用FairyGUI建了UI界面

2022-10-05

前言

原因是在一个FairyGUI项目中，有一个项目要求弹出框的背景是虚化效果，包括UI虚化和背景后面的场景虚化，所以有一个实现虚化效果的测试记录这次要团结。

首先粘贴用于测试的unity项目：

使用 FairyGUI 构建 UI 界面，并在场景中构建一个 Cube 作为对象。

在这里插入图片描述

1.FairyGUI自带的模糊滤镜

FairyGUI 可以使显示对象进入绘图模式。简而言之，就是将目标对象作为一个整体绘制在一个纹理上3D动画，然后可以对纹理进行操作，达到一些特殊的效果。这里的简单用途是对组件使用任意过滤器，对任意对象使用模糊过滤器。

在任意对象上使用模糊滤镜的测试：

代码：

using UnityEngine;
using FairyGUI;
public class MainBlur : MonoBehaviour
{
    GComponent _mainView;
    void Start()
    {
        //加载UI包
        UIPackage.AddPackage("UI/Main");
        UIPanel panel = this.GetComponent<UIPanel>();
        //获取主容器组件
        _mainView = panel.ui;
        CreateBlur();
    }
    void CreateBlur()
    {
        BlurFilter filter = new BlurFilter();
        //找到背景，添加模糊滤镜，背景图片在FairyGUI工程里名称是n0
        _mainView.GetChild("n0").filter = filter;
        //设置模糊程度
        filter.blurSize = 0.2f;
    }
}

运行结果如下unity运行时很模糊，可以看到只有背景图模糊了

在这里插入图片描述

要在测试运行期间在主容器组件上使用模糊过滤器，只需稍微更改上面的代码：

        //_mainView.GetChild("n0").filter = filter;
        _mainView.filter = filter;

这次可以看到整个界面上的UI都变得模糊了，但是对于组件使用模糊滤镜有一个限制，那就是只有组件中的物理UI会被模糊，空白处会不能被模糊，所以FairyGUI自带了自己的模糊滤镜，这里不满足项目的需要。

在这里插入图片描述

2.相机模糊

有一个 ImageEffect 插件可以轻松实现这个效果，但是 AssetStore 插件好像被移除了。此处仅找到 BlurOptimized 组件进行测试：

将BlurOptimized组件挂在需要模糊的相机下方，选择shader，可以看到相机下方看到的物体是模糊的。

这个效果适用于对整个相机下的物体进行虚化，但是上面提到的要求是虚化整个场景和一些UI界面。游戏场景可以直接使用这个unity运行时很模糊，但是一些UI界面不能使用这个方法。.

目前的项目需求也考虑过用UI相机和场景相机同时拍一张模糊的截图，然后放到UI上作为背景图，不过这个过程有点繁琐，不用于暂且。

在这里插入图片描述

3.UGUI部分模糊

在这里找一个shader，参考链接，再测试一下：

根据链接音乐音效，首先将图像的透明度设置为0，然后将带有shader的材质分配给图像。到目前为止，这种方法似乎是最好的。

在这里插入图片描述

但是项目需求是基于FairyGUI的，如何实现差异化（场景+部分UI模糊，部分UI清晰）？

在这个测试示例中，图片和彩色动画在同一个 UI 界面上。要达到的效果是场景中的立方体和UI中的图片应该是模糊的，但是彩色动画不应该是模糊的。

做一个测试：

代码：

代码中使用的素材就是上面UGUI模糊使用的素材。

using UnityEngine;
using FairyGUI;
public class MainBlur : MonoBehaviour
{
    GComponent _mainView;
    public Material material;
    void Start()
    {
        //加载UI包
        UIPackage.AddPackage("UI/Main");
        UIPanel panel = this.GetComponent<UIPanel>();
        //获取主容器组件
        _mainView = panel.ui;
        CreateBlur();
    }
    void CreateBlur()
    {
        //新建一个图形遮罩
        GGraph graph = new GGraph();
        //将图形遮罩添加到UI界面上，并且层级在图片背景前，颜色动画后
        _mainView.AddChildAt(graph, 1);
        //绘制一个矩形的全屏遮罩
        graph.SetPosition(0, 0, 0);
        graph.DrawRect(1080, 1920, 1, Color.black, Color.white);
        //给图形赋材质
        graph.displayObject.material = material;
    }
}