解锁套娃新技能:FairyGUI在Unity中实现List嵌套List/立体画廊等,玩出花儿来

简介: 众所周知,人生是一个漫长的流程,不断克服困难,不断反思前进的过程。在这个过程中会产生很多对于人生的质疑和思考,于是我决定将自己的思考,经验和故事全部分享出来,以此寻找共鸣!!!

👉关于作者

众所周知,人生是一个漫长的流程,不断克服困难,不断反思前进的过程。在这个过程中会产生很多对于人生的质疑和思考,于是我决定将自己的思考,经验和故事全部分享出来,以此寻找共鸣!!!

专注于Android/Unity和各种游戏开发技巧,以及各种资源分享(网站、工具、素材、源码、游戏等)

👉即将学会

FairyGUI跨平台UI方案实现在Unity中的多样化列表,List嵌套List,玩出花来。

👉效果预看

网络异常,图片无法展示
|

网络异常,图片无法展示
|

👉背景

🙎小芝:小空,小空,你知道新的网络词套娃是什么意思吗。

🙈小空:恩,知道啊。

🙎小芝崇拜:哇,你给我讲讲吧,我没明白哎~

🙈小空沉思:姐,中午我带你去午饭吧,你想吃什么。

🙎小芝:好啊,好啊,不知道啊,你决定吧。

🙈小空:吃米线吧

🙎小芝:热,不想吃。

🙈小空:吃脆皮鸡吧,又快又不热。

🙎小芝:额,不想,我减肥啊。

…….

🙈小空逐渐崩溃:那你想吃什么??????

🙎小芝:随便吧,你决定。

🙈小空:!@#¥%()*&……%¥#@,你看看,你这行为就是套娃了!

🙎小芝:有吗?

🙈小空:再给你举个例子,记者:你放羊为了什么?

放羊娃:赚钱

记者:你赚钱为了什么?

放羊娃:娶媳妇

记者:你娶媳妇为了什么?

放羊娃:生娃 记者:生了娃干什么 放羊娃:放羊。

🙎小芝赶快转移话题:好吧,好吧,不说这个了,没意思。我们去吃饭吧

🙈小空进入了长时间的沉思:我突然有个List嵌套List方式有了好的解决方案,我解决下,你自己去吃饭吧。

🙎小芝默默攥紧了她的小拳头:活该你单身。

👉案例环境

Unity 2020.3.8f1 选择的模板是Universal Render Pipeline

FairyGUI编辑器版本 2021.1.0

Demo我已经上传资源中心,下载地址在下方文末。

👉实践过程

小空之前分享了完整的FairyGUI系列教程,但是不能光说不练,所以小空将一些复杂的实例做出来分享一下过程。

官方的样式是这样的

网络异常,图片无法展示
|

可我们要做的是这样的:

网络异常,图片无法展示
|

还有可能这样:

网络异常,图片无法展示
|

更可能是这样的:

网络异常,图片无法展示
|

👉立体画廊

这个案例我们直接使用官方提供的List案例即可,因为代码超级少,重点在思路。

刚开始这个立体的List旋转效果小空是受尽了折磨也没想出来,直到有一天玩鬼谷八荒看到这个画面。

网络异常,图片无法展示
|

小空拿好手纸想沉浸在里面做点事情的时候。

网络异常,图片无法展示
|

突然灵机一动,我怎么沉浸在FairyGUI中死磕呢,应该在Unity中动手脚啊,Unity可是3D的啊,赶紧关掉游戏,去小试一下。

网络异常,图片无法展示
|

重点在这一块:

网络异常,图片无法展示
|

首先我们先看看Pivot(中心),默认是(0,0,)也就是左上角。如果默认你不修改Pivot,这时候更改Rotation(旋转)是这样的表现:

网络异常,图片无法展示
|

所以我们需要将Pivot的X改为0.5,在旋转就行了。我们知道了思路接下来就是在代码中操作了。

起初刚开始我直接来了这么一句:

obj.rotationY = midX - obj.x - obj.width / 2;

感觉很合理,结果运行后,老Rap了。好像哪里不对。

网络异常,图片无法展示
|

哈哈,这明显是旋转过头了,我们要保证旋转尽量在可见范围内比如正负70以内,那么我们将上面那行代码除以某个数保持旋转在一个不错的范围内即可。

obj.rotationY = -(midX - obj.x - obj.width / 2) / 4;

再运行查看,漂亮。

网络异常,图片无法展示
|

核心源码:

网络异常,图片无法展示
|

🙎小芝:一步步按照你的做了,但是看起来就是个平面的啊

🙈小空提醒:还有一点记得将摄像机(Stage Camera)改为透视模式(默认是正交),这样才会看出立体效果。

👉水体倒影

具体看这篇文章,小空有介绍:

掘金 (juejin.cn)

👉多List嵌套

FairyGUI小节

  1. 在FairyGUI编辑器中创建ListA,自定义一个组件作为ListA的Item,组件里面再套娃创建一个ListB
  2. ListB的Item随意自定义,我这是一个装载器
  3. 注意:将ListB的轴心设置成(0.5,1.4),这点是关键步骤
  4. 其他效果随意搞,项目工程在下方有链接

网络异常,图片无法展示
|

Unity小节

没有特别的内容,正常显示后,在代码里控制,代码是重点,注释很详细。

using System.Collections;
using System.Collections.Generic;
using FairyGUI;
using UnityEngine;
public class ScriptFGEThreeDListList : MonoBehaviour
{
    private GComponent _mainView;
    private GList ListListThreeD;
    public GameObject UIPanel;
    void Start()
    {
        _mainView = UIPanel.GetComponent<UIPanel>().ui;
        ListListThreeD = _mainView.GetChild("ListList").asList;
        ListListThreeD.SetVirtualAndLoop(); //设置虚拟列表和循环
        ListListThreeD.itemRenderer = RendererGListPageSelect;
        ListListThreeD.numItems = 4;
        ListListThreeD.scrollPane.mouseWheelEnabled = false;
        ListListThreeD.scrollPane.onScroll.Add(ScrollListenerGListPageSelect);
        //我们模拟赋值 5*5 共25
        for (int i = 0; i < 5; i++) //5行
        {
            for (int j = 0; j < 5; j++) //5列
            {
                GLoader gLoader= ListListThreeD.GetChildAt(i).asCom.GetChild("ContentList").asList.GetChildAt(j).asCom.GetChild("loader").asLoader;
                //加载的是路径为Assets/Resources/Img下的贴图    因为文件名直接是数字的所以 随机数生成下1-13
                gLoader.url = "Img/"+Random.Range(1,14);
            }
        }
        //滑动到指定位置,可以解决刚出来的时候界面是平铺的,没有体现出立体效果
        ListListThreeD.AddSelection(4, true);
    }
    private void RendererGListPageSelect(int index, GObject item)
    {
        item.SetPivot(0.5f, 8f); //重点哦,超级重点,需要设置锚点 来实现缩放的方向
    }
    private void ScrollListenerGListPageSelect()
    {
        float midX = ListListThreeD.scrollPane.posY + ListListThreeD.viewHeight;
        for (int i = 0; i < ListListThreeD.numChildren; i++)
        {
            GObject obj = ListListThreeD.GetChildAt(i); //只有最后一个是正常的比例 其他的都是缩小比例
            float dist = Mathf.Abs(midX - obj.y);
            if (dist > obj.height)
            {
                float ss = 1 + (1 - dist / obj.height) * 0.1f;
                obj.SetScale(ss, ss);
                // ScriptFairyGUI_Tools.ChangeBlurFilter(0.02f, obj.asCom);
                BlurFilter blurFilter = new BlurFilter();
                blurFilter.blurSize = 0.2f;
                obj.filter = blurFilter;
                //修改透明度,越往后的越透明
                obj.alpha = ss;
                if (ListListThreeD.GetChildAt(i).asCom.GetChild("ContentList").asList.touchable)
                {
                    ListListThreeD.GetChildAt(i).asCom.GetChild("ContentList").asList.touchable = false;
                }
                if (ss > 0.99f)
                {
                    BlurFilter bb = new BlurFilter();
                    bb.blurSize = 0f;
                    obj.filter = bb;
                    obj.alpha = ss;
                    // ScriptFairyGUI_Tools.ChangeBlurFilter(0, obj.asCom);
                    if (!ListListThreeD.GetChildAt(i).asCom.GetChild("ContentList").asList.touchable)
                    {
                        ListListThreeD.GetChildAt(i).asCom.GetChild("ContentList").asList.touchable = true;
                    }
                }
            }
            else
            {
                obj.SetScale(1, 1);
            }
        }
    }
}
复制代码

当你玩的正666的时候,突然发现这里也可以滑动,这不符合心里预期啊。

网络异常,图片无法展示
|

原因:看似这没有内容,其实我们改变的是里面的内容显示,并没有真正修改过这个最外层List的高度,也就是说这个List高度还和在FairyGUI编辑器中默认状态下一样。

解决:在FairyGUI编辑器中利用图形元件覆盖住,这样就遮挡住了鼠标事件,就搞定了。

源码下载地址Unity技术-FairtGUI实例教程-List篇.zip-Unity3D文档类资源

👉其他

📢作者:小空和小芝中的小空

📢这位道友请留步☁️,我观你气度不凡,谈吐间隐隐有王者霸气💚,日后定有一番大作为📝!!!旁边有点赞👍收藏🌟今日传你,点了吧,未来你成功☀️,我分文不取,若不成功⚡️,也好回来找我。

相关文章
|
图形学 Android开发 容器
解锁爬坑新技能:FairyGUI在Unity中遇见的问题
众所周知,人生是一个漫长的流程,不断克服困难,不断反思前进的过程。在这个过程中会产生很多对于人生的质疑和思考,于是我决定将自己的思考,经验和故事全部分享出来,以此寻找共鸣!!!
1062 0
|
9月前
|
SQL Java 数据库连接
Mybatis使用collection标签实现一对多关联查询,返回结果集list中嵌套list
Mybatis使用collection标签实现一对多关联查询,返回结果集list中嵌套list
297 0
|
存储 安全 算法
Java小技能:快速创建List常用几种方式
集合的概念: - 在数学意义上的概念是: 对个数据放置在一起而建立起来的模型,这些数据类型可以不同; - 在软件中的定义,一堆数据放置在一个空间中存储,将整个存储空间称为集合。
366 0
Java小技能:快速创建List常用几种方式
|
编解码 图形学 Android开发
解锁爬坑新技能:FairyGUI在Unity中遇见的问题-补充
众所周知,人生是一个漫长的流程,不断克服困难,不断反思前进的过程。在这个过程中会产生很多对于人生的质疑和思考,于是我决定将自己的思考,经验和故事全部分享出来,以此寻找共鸣!!!
462 0
|
SQL Java 数据库连接
Mybaits结果集之集合,Javabean中嵌套List的解决方案
Mybaits结果集之集合,Javabean中嵌套List的解决方案
217 0
Mybaits结果集之集合,Javabean中嵌套List的解决方案
|
SQL
Mybaits结果集之集合,Javabean中嵌套List的解决方案
版权声明:欢迎转载,请注明沉默王二原创。 https://blog.csdn.net/qing_gee/article/details/79214721 有类似这样的场景,我作为一个写作者来说,我写了很多篇文章,如果把我抽象成一个对象,那么该如何通过Mybatis 获取到我和我写的文章呢?这种情况下,使用Mybatis结果集的集合就可以满足需求。
1445 0
|
2月前
|
安全 Java
java线程之List集合并发安全问题及解决方案
java线程之List集合并发安全问题及解决方案
186 1
|
21天前
|
Java API Apache
怎么在在 Java 中对List进行分区
本文介绍了如何将列表拆分为给定大小的子列表。尽管标准Java集合API未直接支持此功能,但Guava和Apache Commons Collections提供了相关API。
|
25天前
|
运维 关系型数据库 Java
PolarDB产品使用问题之使用List或Range分区表时,Java代码是否需要进行改动
PolarDB产品使用合集涵盖了从创建与管理、数据管理、性能优化与诊断、安全与合规到生态与集成、运维与支持等全方位的功能和服务,旨在帮助企业轻松构建高可用、高性能且易于管理的数据库环境,满足不同业务场景的需求。用户可以通过阿里云控制台、API、SDK等方式便捷地使用这些功能,实现数据库的高效运维与持续优化。