UGUI滚动视图ScrollView的使用教程之简易背包

 

本篇文章我们来看下Unity New UI即UGUI,利用滚动视图ScrollView来创建简易背包,下面我们看具体步骤!

Unity3d中,UGUI提供了 Scroll Rect、Grid Layout Group、Mask这三个组件,我们用来实现滚动视图,这里用一个简易的背包作为示例。

首先我们放置好背包的底层方框,如下图。

我们在红色的那一块,作为物品栏的滑动区域。

接下来创建一个Panel ,改名为ScrollRectPanel,把大小拉动到红色方框大小。先Reset ,添加Scroll Rect 组件。勾选 Vertical 选框,意思是只有Y轴可以滑动。

然后在 ScrollRectPanel 下面添加一个 Panel 作为 Child ,改名为 GridLayoutPanel ,先Reset ,拉伸宽度为 红框 宽度,高度稍微弄大一点 。添加 Grid Layout Group 组件。修改 颜色为红色 ,便于区分。


然后 选择 ScrollRectPanel ,把GridLayoutPanel 拖到 Scroll Rect 的Content 中。

运行测试一下,现在可以上下滑动了。

 

然后在 GridLayoutPanel 下添加一个Button 作为 Child ,然后Ctrl + D 复制出 多个。

 

最后在 ScrollRectPanel 上 添加 Mask 组件,使超出 ScrollRectPanel 范围的不显示。

最后看看效果