解锁套娃新技能: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中遇见的问题
众所周知,人生是一个漫长的流程,不断克服困难,不断反思前进的过程。在这个过程中会产生很多对于人生的质疑和思考,于是我决定将自己的思考,经验和故事全部分享出来,以此寻找共鸣!!!
1136 0
|
SQL Java 数据库连接
Mybatis使用collection标签实现一对多关联查询,返回结果集list中嵌套list
Mybatis使用collection标签实现一对多关联查询,返回结果集list中嵌套list
576 0
|
存储 安全 算法
Java小技能:快速创建List常用几种方式
集合的概念: - 在数学意义上的概念是: 对个数据放置在一起而建立起来的模型,这些数据类型可以不同; - 在软件中的定义,一堆数据放置在一个空间中存储,将整个存储空间称为集合。
411 0
Java小技能:快速创建List常用几种方式
|
编解码 图形学 Android开发
解锁爬坑新技能:FairyGUI在Unity中遇见的问题-补充
众所周知,人生是一个漫长的流程,不断克服困难,不断反思前进的过程。在这个过程中会产生很多对于人生的质疑和思考,于是我决定将自己的思考,经验和故事全部分享出来,以此寻找共鸣!!!
625 0
|
SQL Java 数据库连接
Mybaits结果集之集合,Javabean中嵌套List的解决方案
Mybaits结果集之集合,Javabean中嵌套List的解决方案
240 0
Mybaits结果集之集合,Javabean中嵌套List的解决方案
|
SQL
Mybaits结果集之集合,Javabean中嵌套List的解决方案
版权声明:欢迎转载,请注明沉默王二原创。 https://blog.csdn.net/qing_gee/article/details/79214721 有类似这样的场景,我作为一个写作者来说,我写了很多篇文章,如果把我抽象成一个对象,那么该如何通过Mybatis 获取到我和我写的文章呢?这种情况下,使用Mybatis结果集的集合就可以满足需求。
1461 0
|
4月前
|
图形学 C#
超实用!深度解析Unity引擎,手把手教你从零开始构建精美的2D平面冒险游戏,涵盖资源导入、角色控制与动画、碰撞检测等核心技巧,打造沉浸式游戏体验完全指南
【8月更文挑战第31天】本文是 Unity 2D 游戏开发的全面指南,手把手教你从零开始构建精美的平面冒险游戏。首先,通过 Unity Hub 创建 2D 项目并导入游戏资源。接着,编写 `PlayerController` 脚本来实现角色移动,并添加动画以增强视觉效果。最后,通过 Collider 2D 组件实现碰撞检测等游戏机制。每一步均展示 Unity 在 2D 游戏开发中的强大功能。
224 6
|
4月前
|
图形学 缓存 算法
掌握这五大绝招,让您的Unity游戏瞬间加载完毕,从此告别漫长等待,大幅提升玩家首次体验的满意度与留存率!
【8月更文挑战第31天】游戏的加载时间是影响玩家初次体验的关键因素,特别是在移动设备上。本文介绍了几种常见的Unity游戏加载优化方法,包括资源的预加载与异步加载、使用AssetBundles管理动态资源、纹理和模型优化、合理利用缓存系统以及脚本优化。通过具体示例代码展示了如何实现异步加载场景,并提出了针对不同资源的优化策略。综合运用这些技术可以显著缩短加载时间,提升玩家满意度。
303 5
|
3月前
|
测试技术 C# 图形学
掌握Unity调试与测试的终极指南:从内置调试工具到自动化测试框架,全方位保障游戏品质不踩坑,打造流畅游戏体验的必备技能大揭秘!
【9月更文挑战第1天】在开发游戏时,Unity 引擎让创意变为现实。但软件开发中难免遇到 Bug,若不解决,将严重影响用户体验。调试与测试成为确保游戏质量的最后一道防线。本文介绍如何利用 Unity 的调试工具高效排查问题,并通过 Profiler 分析性能瓶颈。此外,Unity Test Framework 支持自动化测试,提高开发效率。结合单元测试与集成测试,确保游戏逻辑正确无误。对于在线游戏,还需进行压力测试以验证服务器稳定性。总之,调试与测试贯穿游戏开发全流程,确保最终作品既好玩又稳定。
167 4