IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 游戏开发 -> Scroll View踩坑记录 -> 正文阅读

[游戏开发]Scroll View踩坑记录

Unity要想实现游戏中的背包滑动效果,最简单的方法就是使用ScrollView这个组件,这个组件可以实现拖动滑动的效果。
在这里插入图片描述
如上图所示,我希望将这些Item实现背包的排版效果。
第一步:现将所有的Item移到Content下,此时我们会发现部分图片被隐藏,显示不全,效果如图下所示
在这里插入图片描述
第一个小坑:图片显示不全。
原因分析:Viewport上挂有一个Mask组件,会将超出范围的内容隐藏(范围是四个蓝色的点内部),如图下所示。
在这里插入图片描述
第二步:给Content上添加GridLayoutGroup组件,实现排版美观。
第二个坑:添加GridLayoutGroup之后,内容显示不见,如下图所示。
在这里插入图片描述
为什么我们添加了排版组件,结果反而更混乱了呢?
原因分析:GridLayoutGroup组件,是拿到当前物体下所有的下一层子物体(描述比较抽象),即图下这些。
在这里插入图片描述
Content挂有GridLayoutGroup组件,所以我们拿到的是Item的集合。
然后我们看下Item的具体位置。
在这里插入图片描述
在这里插入图片描述
然后我们就发现了,GridLayoutGroup组件排版没有问题,有问题的是我们子类物体的位置不对。
在工作中,我们通常会新建一个空物体作为根节点,然后再添加相应的Image,Text,Button等,有时候会为了偷懒,我们不更改根节点的位置,直接拖动子节点,常规情况下没有问题,但是需要排版的时候,就会发现出问题。
将子物体的postion归0后,更改GridLayoutGroup一些参数,即可实现滑动效果。
在这里插入图片描述
如上图所示,我们实现了简单的滑动效果,但是发现左右还是可以滑动,明显不符合我们的要求。
在这里插入图片描述
根据自己的选择将Scroll View上的Vertical(竖直方向)Horizontal(水平)勾选即可。

第三个坑:拖动之后,滑动组件自动弹回去,显示不全。如下图所示:
在这里插入图片描述
原因分析:出现这种情况,是Content范围太小导致
在这里插入图片描述
解决方法:给Content增加Content Size Fitter组件或者手动更改它的大小。(特殊情况下Content Size Fitter组件自动适配的数值会出错,原因暂且不明)。
Tip:不想要背景图,将ScrollView下的Image禁用即可。
TIp:不想要滑动条,将Scrollbar Horizontal或者Scrollbar Vertical下的Image禁用即可。
预制体Demo

  游戏开发 最新文章
6、英飞凌-AURIX-TC3XX: PWM实验之使用 GT
泛型自动装箱
CubeMax添加Rtthread操作系统 组件STM32F10
python多线程编程:如何优雅地关闭线程
数据类型隐式转换导致的阻塞
WebAPi实现多文件上传,并附带参数
from origin ‘null‘ has been blocked by
UE4 蓝图调用C++函数(附带项目工程)
Unity学习笔记(一)结构体的简单理解与应用
【Memory As a Programming Concept in C a
上一篇文章      下一篇文章      查看所有文章
加:2021-10-21 12:43:55  更:2021-10-21 12:46:08 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/28 0:52:03-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码