在UGUI - Scroll View中显示Sprite的技巧

时间:2024-04-08 18:55:43

在UI显示Sprite的两种方法

1. 使用一个独立摄像机,将Sprite读入可视范围里,渲染成Render Texture, 再将Render Texture于UI中的Sprite绑定

2. 在Canvas中使用Screen Space - Camera 模式,将Sprite挂在一个具有RectTransform的根节点下面,作为一个UI单位


方法1 ,是很多项目中常用的,在此不再赘述,但是有诸多问题并且实现方法繁琐,是舍近求远的做法,所以我们用方法2来实现

方法2中遇到的问题

Scroll View中图片是可以被拖动的,并且有个显示范围,直接拖动,会将图片显示到范围外面

在UGUI - Scroll View中显示Sprite的技巧

Sprite会显示到背景框区域外面


解决方案:使用Sprite Mask

步骤:

1. 设置Sprite的Mask Interaction 为Visible Inside Mask

在UGUI - Scroll View中显示Sprite的技巧


2. 添加Sprite Mask

3. 设置Sprite Mask的Custom Range

在UGUI - Scroll View中显示Sprite的技巧

此处用的UIMask是Unity默认的透明图片,建议自己做个会比较好

4. 调整Sprite Mask的大小 - 调整Scale值

在UGUI - Scroll View中显示Sprite的技巧

橘红色圈住的范围就是Sprite可显示的范围

5. 适配不同屏幕比例

在UGUI - Scroll View中显示Sprite的技巧

在UGUI - Scroll View中显示Sprite的技巧

只要 Canvas Scalar中的 Reference Pixel Per Unit 与Texture设定中的Sprite Mode/Pixel Per Unit 一致,之前设定过的Scale值就会通过UGUI自动适应不同的屏幕比例


运行结果:

在UGUI - Scroll View中显示Sprite的技巧

SpriteMask内的Sprite不会再溢出了