【UGUI】背包案例(二)

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

一、背包区域UI
【UGUI】背包案例(二)_第2张图片

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

在这里插入图片描述
【UGUI】背包案例(二)_第3张图片
关闭水平方向的拖动效果,只留下垂直就够了,滑动条看自己喜好要不要设置了,我就不要了

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

【UGUI】背包案例(二)_第4张图片

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

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

你可能感兴趣的:(#,UGUI)