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

效果展示

在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 updatevoid 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 updatevoid 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”）的大小跟图片的宽度有关，宽度越宽，被除数越大，实现效果如图

关于倒影效果

参考这一篇博客，一个很厉害的博主！！

女性朋友约我看水，我反手用可视化搞出水面倒影(Shader Graph)_芝麻粒儿的博客-CSDN博客

fairyGUI的学习记录2相关推荐

fairyGUI的学习记录1
一:前期准备 1.软件准备在fairyGUI的官网中下载软件,网址如下 FairyGUI 里面有基本内容的教程,可以参考学习,也可以看siki学院的Trigger老师的课程:强大的UI编辑器 - F ...
FairyGUI基础学习笔记
FairyGUI基础学习笔记前言加载资源到场景中按钮添加点击事件列表的写法前言之前研究了一些Xlua想搞热更新,得需要一套UI框架,公司的那套局限性太强,不得已只能另辟蹊径,之前听朋友说公 ...
Pytorch学习记录-torchtext和Pytorch的实例（使用神经网络训练Seq2Seq代码）
Pytorch学习记录-torchtext和Pytorch的实例1 0. PyTorch Seq2Seq项目介绍 1. 使用神经网络训练Seq2Seq 1.1 简介,对论文中公式的解读 1.2 数据预 ...
HTML5与CSS3权威指南之CSS3学习记录
title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...
springboot @cacheable不起作用_Springboot学习记录13 使用缓存：整合redis
本学习记录的代码,部分参考自gitee码云的如下工程.这个工程有详尽的Spingboot1.x教程.鸣谢! https://gitee.com/didispace/SpringBoot-Learnin ...
【Cmake】Cmake学习记录
Cmake学习记录 1.1 常例 add_library(gen_reference_infogen_reference_info/gen_reference_info.hgen_reference_ ...
ASP.NETCore学习记录(一)
ASP.NETCore学习记录(一) asp.net core介绍 Startup.cs ConfigureServices Configure 0. ASP.NETCore 介绍 ASP.N ...
Android开发技术周报176学习记录
Android开发技术周报176学习记录教程当 OkHttp 遇上 Http 2.0 http://fucknmb.com/2018/04/16/%E5%BD%93OkHttp%E9%81%87% ...
add函数 pytorch_Pytorch学习记录-Pytorch可视化使用tensorboardX
Pytorch学习记录-Pytorch可视化使用tensorboardX 在很早很早以前(至少一个半月),我做过几节关于tensorboard的学习记录. https://www.jianshu.co ...

fairyGUI的学习记录2