【UGUI】背包案例(二)

现在我们首先搭建UI,设计好大致的规划
【UGUI】背包案例(二)
首先将分开了三块区域,各司其职

一、背包区域UI
【UGUI】背包案例(二)

1.我们用【ScrollRect】组件来做背包的滑动效果,蓝色区域

【UGUI】背包案例(二)
【UGUI】背包案例(二)
关闭水平方向的拖动效果,只留下垂直就够了,滑动条看自己喜好要不要设置了,我就不要了

2.将Viewport设置合适的宽高,这是我们的Mask层

【UGUI】背包案例(二)

3.Content下方我们的背包格子,为了让格子整齐划一,设置一些组件

【UGUI】背包案例(二)
【Grid Layout Group】让格子整齐划一
【UGUI】背包案例(二)
【Content Size Fitter】让我们的滑动板在增加或减少格子的情况下都能自动适应
【UGUI】背包案例(二)
二、商店区域UI
和背包差不多,就不详细介绍了
【UGUI】背包案例(二)
三、人物区域UI
【UGUI】背包案例(二)
大致框架就是这个样子了,然后我去找些UI素材
【UGUI】背包案例(二)
【UGUI】背包案例(二)
UI差不多就这个样子吧,接下来就是实现功能了
按钮控制这些背包、商店、人物信息的显示和隐藏,这里就不写了,商店和人物不能同时打开,因为放不下了