unity 滚动 UI Scroll Rect

最新推荐文章于 2025-06-03 23:41:43 发布
原创 最新推荐文章于 2025-06-03 23:41:43 发布 · 934 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍如何在Unity中创建可滑动的面板，包括新建Canvas、设置滚动区域、添加滑动组件及遮罩等步骤。

1.新建Canvas
2.新建Panel,命名为ViewScroll,设置宽高，即 可视滚动区域。
这里写图片描述
3.在ViewScroll 面板添加ScrollRect 组件用于滑动，添加 Mask 组件用于遮罩
4.在ViewScroll下新建 Panel 名为Content，Content面板的大小一定要超过ViewScroll的大小，才能滑动
5.将ScrollRect 的Content 设为 Content面板
这里写图片描述

6.将ScrollRect 的MovementType 设置为 Clamped,将不会回弹
7. 把Mask组件 勾上会遮罩超出可视滑动区域

【unity游戏开发入门到精通——UGUI】UI控件 —— ScrollView滚动视图
向宇
04-24 1838
【unity游戏开发入门到精通——UGUI】UI控件 —— ScrollView滚动视图
Unity 之 UGUI Scroll Rect滚动矩形组件详解
热门推荐
陈言必行 -- Unity游戏开发领域优质博主
10-05 1万+
当占用大量空间的内容需要在小区域中显示时，可使用滚动矩形。滚动矩形提供了滚动此内容的功能。
[特殊字符] Unity UI 性能优化终极指南 — ScrollRect篇
qq_41179365的博客
06-03 1949
ScrollRect组件是UGUI的滚动视图区支持水平/垂直滚动，可添加Scrollbar，支持惯性、阻尼、回弹等功能是做列表、排行榜、背包、技能书等常见界面必备组件⚠️ 也是UI卡顿的重灾区超市里的一排排货架货架太长，堆满商品，逛的人累，服务员累；每次搬运商品就重摆货架，搬一次累一次；超市地上铺满毛毯(遮罩Mask)，清洁工(GPU)累死；推货架太猛滑太久，超市撞坏了(滑动惯性问题)。🎯总结货要少，布局快，遮罩省，滑动稳，物品循环用！
Unity-使用Scroll Rect组件设置物体滑动效果
muziiii的博客
08-02 1847
Scroll Rect组件（可以滑动） vertical取消选择垂直滑动的选项 添加一个空物体（Parent），放大到我们的父物体一样大，这个是我们可以滑动的范围 把他赋值给我的父物体上面的Content组件 然后把他隐藏掉，把颜色值A改为零 然后再下面添加一个Image（SkinChooseItem）修改一下大小 在Image（SkinChooseItem）下面在添加一个Image放我们的需要展示的游戏对象 把父物体（SkinChooseItem）的颜色值A修改为零（这样我们实现点击放大的效
Unity UGUI Scroll Rect List
10-08
UGUI Super ScrollView动态无限滑动列表,功能很多,Demo场景均有。
Unity组件大全之 UI 组件 |（9）Scroll Rect组件
Unity打怪升级
09-14 2664
在Unity的游戏开发中，UI组件是玩家与游戏互动的重要桥梁。ScrollRect组件作为UI系统中的核心组件之一，允许玩家通过滚动来查看超出屏幕范围的内容。本文将详细介绍Unity中的ScrollRect组件，包括其基本属性、事件处理以及一些高级使用技巧。
Unity ScrollRect
sindyra的博客
12-26 4192
ScrollView:滚动区域（当一个页面不能完全显示内容时，使用滚动方式显示剩余的部分） 这也就是Unity -UGUI的ScrollRect的组件。 实现一个鼠标点击拖动让滚动区域滚动显示的效果： 1.将所有要显示的内容全部放到一个空物体(空物体大小为所有子物体大小之和)下作为子物体（可以使用布局组件Grid Layout Group）。（这里空物体重命名为Content） 2.创建Image...
精选资源
infinite-scroll-unity:无限滚动是一个脚本扩展，允许您将ScrollRect控件用作无限微调器。 这是一种快速，简单且易于移动的方式来创建具有数千行的列表
05-17
无限滚动 无限滚动是一个脚本扩展，允许您将ScrollRect控件用作无限微调器。...将InfiniteScroll脚本附加到Unity UI ScrollView对象 初始化列表并定义回调 演示版 打开演示场景并进行构建，以尝试其工作方式 例子
Unity ScrollRect滑动
IT_choshim的博客
06-28 7258
ScrollRect通常是和Mask组件一起使用的。mask组件的功能是使滑动到scrollrect指定区域之外的内容隐藏。滑动ui层级结构，如下图所示：tabcontrol : tabcontrol上绑定着ScrollRect、Mask、Image组件。    ScrollRect ： Content 滑动的内容，也就是tabcontrol层级下的Content，拖拽进去            ...
如何优化UGUI的ScrollRect
su9257的博客
12-20 1597
UGUI的ScrollRect在加载太多物体的时候，第一次弹出界面会非常卡顿，而且不在界面里的内容依然会参与绘制，导致毫无意义的浪费。笔者对此进行了一番研究，并将心得与大家分享. 转载自侑虎科技：这是侑虎科技第136篇原创文章，感谢作者钱康来供稿。 介绍 每个元素知道自己的序号，可以根据需要修改自己的内容、大小等信息。 此外支持了ScrollBar，支持横向、纵向及正反向。
【Unity】优化UGUI 滚动条ScrollRect（高效复用）
11-27
支持ScrollBar 支持反向滑动 支持了GridLayout 高效复用 （平台unity5.6.4）
[Unity UGUI]ScrollRect滚动效果大全
09-10
[Unity UGUI]ScrollRect滚动效果大全 支持缩放滑动效果 - 支持动态缩放循环加载 - 支持大数据固定Item复用加载 - 支持不用Mask遮罩无限循环加载 - 支持ObjectPool动态加载 - 支持无限不规则子物体动态加载 - 支持拖动并点击和拖拽 - 支持拖动并拖拽 - 支持ScrollRect拖动自动吸附功能(拖动是否超过一半自动进退)
Unity UGUI滚动视图无限滚动
05-17
Unity UGUI滚动视图无限滚动，内容很实用，稍加修改就可以适用于自己的需求。
Unity引擎UI滚动列表——滚动复用基础介绍
阿赵的博客
12-04 2591
滚动复用基础介绍
Unity（二十七）：ScrollRect组件 - 制作游戏摇杆
You瞧谁不起 - 道不尽世间的沧桑，诉不完人生的悲凉
02-05 1497
效果 布局(由图一实现至图三的过程) 摇杆脚本 using UnityEngine; using UnityEngine.EventSystems; using UnityEngine.UI; public class GamePad : ScrollRect { protected float radius = 0f; protected override void Start() { base.Start(); // 计算摇杆半径
unity的UGUI笔记（八）--Scroll Rect
rime_neko的博客
02-23 558
关于Scroll Rect Scroll Rect是我个人认为很重要的组件，可以说让游戏具有了灵魂。 效果： Scroll Rect组件： Scroll Rect由三个主要组件组成： 1.viewport：内容部分。 2.scrollbar horizontal：横向滑轮 3.scrollbar vertical：纵向滑轮 Scroll Rect中的重要组件： 惯性：是否使用运动惯性。 滚动灵敏度：我一般用20，数值越大速度越大，根据需求调整。 关于viewport mask组件： 遮罩，将多余的部分
Unity-ScrollRect扩展
qq_42957107的博客
12-07 516
Unity-ScrollRect扩展。
Unity UGUI的ScrollRect（滚动视图）组件的介绍及使用
alianblank的博客
07-10 4944
ScrollRect（滚动视图）是Unity UGUI中的一个常用组件，用于在UI界面中创建可滚动的区域。通过ScrollRect组件，可以实现在有限的空间内显示大量的内容，并且可以通过滑动手势来浏览内容。
UGUI组件ScrollRect扩展,自动移动到中心位置
qq_32470423的博客
02-10 629
UGUI ScrollRect扩展,自动移动到中间,自动移动到中心点
unity uiadditive可以被scroll Rect裁剪 自定义shader不能被scroll Rect 裁剪
最新发布
07-22
### Scroll Rect 裁剪 Additive Shader 的机制与自定义 Shader 的差异 Unity 的 Scroll Rect 组件依赖于 UGUI 的裁剪系统，该系统通过 `RectMask2D` 或 `Mask` 组件实现。在默认情况下，Unity 的 UI 系统使用一种特殊的裁剪方式，即在 GPU 层面通过修改顶点坐标或使用 `clip()` 函数来丢弃超出裁剪区域的像素。Additive Shader（如 Unity 的内置粒子着色器）通常会遵循这些规则，因为它们在编写时已经考虑了 UGUI 的裁剪需求。 然而，自定义 Shader 往往不会自动适配 UGUI 的裁剪逻辑，除非开发者显式地在着色器中加入对裁剪区域的支持。这是由于 UGUI 的裁剪信息（如裁剪矩形的坐标）并不会自动传递给自定义着色器，导致裁剪无法生效[^1]。 ### Additive Shader 可以被裁剪的原因 Unity 内置的 Additive Shader（例如 `UI/Particles/Additive`）在编写时已经集成了对 UGUI 裁剪系统的支持。这些着色器通常会使用 `clip()` 函数，并结合裁剪区域的坐标信息（通过 `_ClipRect` 传递）来判断当前像素是否在裁剪区域内。例如： ```hlsl sampler2D _MainTex; float4 _ClipRect; fixed4 frag (v2f i) : SV_Target { fixed4 col = tex2D(_MainTex, i.texcoord); clip(i.texcoord.x >= _ClipRect.x && i.texcoord.x <= _ClipRect.z && i.texcoord.y >= _ClipRect.y && i.texcoord.y <= _ClipRect.w ? 1.0 : -1.0); return col; } ``` 上述代码中，`_ClipRect` 是 Unity 自动传递的裁剪矩形参数，确保只有在 `Scroll Rect` 可视区域内的像素才会被保留[^1]。 ### 自定义 Shader 无法被裁剪的原因 自定义 Shader 缺乏对 `_ClipRect` 参数的处理逻辑，导致即使 `Scroll Rect` 启用了裁剪功能，这些着色器也无法响应裁剪区域的变化。此外，如果使用了 `clip()` 函数但未正确引入 `_ClipRect`，裁剪逻辑将无法正常工作。因此，自定义着色器中的 `clip()` 通常仅用于透明通道裁剪（如 alpha 测试），而不是用于响应 UI 裁剪区域。 ### 解决方案：在自定义 Shader 中加入裁剪逻辑 为了使自定义 Shader 支持 Scroll Rect 的裁剪功能，需要手动引入 `_ClipRect` 参数，并在像素着色器中使用它来控制 `clip()` 的行为。以下是修改后的着色器示例： ```hlsl Properties { _MainTex ("Texture", 2D) = "white" {} _ClipRect ("Clip Rect", vector) = (0,0,0,0) } SubShader { Tags { "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" } LOD 100 Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #include "UnityCG.cginc" struct appdata_t { float4 vertex : POSITION; float2 texcoord : TEXCOORD0; }; struct v2f { float4 vertex : SV_POSITION; float2 texcoord : TEXCOORD0; }; sampler2D _MainTex; float4 _ClipRect; v2f vert (appdata_t v) { v2f o; o.vertex = UnityObjectToClipPos(v.vertex); o.texcoord = v.texcoord; return o; } fixed4 frag (v2f i) : SV_Target { fixed4 col = tex2D(_MainTex, i.texcoord); clip(i.texcoord.x >= _ClipRect.x && i.texcoord.x <= _ClipRect.z && i.texcoord.y >= _ClipRect.y && i.texcoord.y <= _ClipRect.w ? 1.0 : -1.0); return col; } ENDCG } } ``` 通过这种方式，自定义 Shader 将能够正确响应 Scroll Rect 的裁剪区域变化，从而实现与 Unity 内建 Additive Shader 一致的裁剪效果。 ### 替代方案：使用双 Camera 投影裁剪 另一种方式是通过设置两个 Camera，分别用于 UI 和特效显示。将 Scroll Rect 的内容设置为特定 Layer（如 `RewardEffect`），并将一个独立的 Camera 设置为仅渲染该 Layer。通过调整该 Camera 的 `Viewport Rect` 与 Scroll Rect 的可视区域一致，可以实现对自定义 Shader 的裁剪效果。这种方式不依赖着色器内部的 `clip()` 逻辑，而是通过 Camera 的视口控制来实现裁剪[^2]。 ### 总结 Scroll Rect 可以裁剪 Unity 内建的 Additive Shader 是因为这些着色器已经集成了 `_ClipRect` 参数并使用了 `clip()` 函数进行裁剪判断。而自定义 Shader 由于缺乏这些逻辑，默认情况下无法响应 Scroll Rect 的裁剪区域变化。通过在自定义 Shader 中手动引入 `_ClipRect` 并添加裁剪逻辑，或使用双 Camera 的方式，可以有效解决 Scroll Rect 对自定义 Shader 无法裁剪的问题。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

tianyongheng

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值