Unity2D——滑动翻页效果

最近因为做毕设的原因,需要使用到相关的内容,也在网上找了相关的很多资料,根据自己在哔哩哔哩看到的一个教程,总结了以下一种方法,不需要使用到代码就可以轻松的实现滑动翻页效果。

这里参考的教程是
遮罩
滚动列表
从上面给出的两个超链接不难看出,要做到滑动翻页,我们需要用到的两个组件就是遮罩滚动条
上面给出的两个视频做出来的效果是垂直翻页的效果
下面我给出来的教程做出了点修改,是水平翻页的效果

  1. 首先新建一个2D的项目
    Unity2D——滑动翻页效果

  2. 新建一个Canvas,在它的下面再新建一个Game Object,并重命名为LayOutGroup,并新建几个Image(可以通过crtl+d来实现复制)Unity2D——滑动翻页效果

  3. 给LayOutGroup添加Content Size Fitter,如下图中的设置Unity2D——滑动翻页效果

  4. 再添加Horizontal Layout Group,据图如下,取消Child Force Expad中的Width勾选Unity2D——滑动翻页效果

  5. 接着选中所有的图片添加LayOut Element组件Unity2D——滑动翻页效果

  6. 接着在Canvas下创建一个Create Empty,并改名为MaskedGroup,我们把这个的大小改为200×200,作为遮罩使用,并且给其添加Rect Mask 2D组件Unity2D——滑动翻页效果

  7. 接着把LayOutGroup拖进MaskedGroup下面Unity2D——滑动翻页效果

  8. 其实这个时候就已经可以看出来,有部分的图片已经被遮住了,我们拖动LayOutGroup就可以看出来初步的效果已经实现了。我们可以根据自身的需要来修改MaskedGroup的长宽,来实现你想要出现的区域范围。

  9. 这里因为要做出来翻页的效果,就被我更改了一下大小的设置Unity2D——滑动翻页效果

  10. 完成了上面的步骤以后会发现,在运行的时候我们并不能拖动它,所以下面我们要来添加一个滚动条实现运行时的拖动

  11. 在Canvas下创建一个Create Empty,并改名为ScrollGroup,再把MaskedGroup拖拽进ScrollGroup下面,再ScrollGroup里添加Scroll Rect组件,完成下面的一些修改就可以啦Unity2D——滑动翻页效果

  12. 这个时候运行程序就会发现,已经可以拖动图片进行翻页设置了,当然其中的一些灵敏度参数,弹性设置也可以自己修改

  13. 给出的教程里有添加滚动条显示进度,因为本人的设计并没有这方面的需要就没有添加,有需要的可以参考给出的教程。