Unity3D--UGUI背包系统(一)

新建一个项目,创建一Image对象,同时会生成Canvas和EventSystem,修改Image的名字为Bg,我们可以将Bg的image组件修改为自己喜欢的图片作为背景,并调整RectTransform让其布满整个Canvas。

Unity3D--UGUI背包系统(一)_第1张图片

之后,我们需要创建整个背包的各个部件。我们在Bg下再创建一个Image作为背包的背景,改名为Inventory_Bg,创建一个空物体在Inventory_Bg下,并在空物体下创建一个Text对象,修改空物体名字为Title,作为背包的标题。完成这一步,我们再创建一个Image对象作为背包格子的框架,并相应添加Mask组件Scroll Rect 组件,修改Image名字为Scroll Rect。

Unity3D--UGUI背包系统(一)_第2张图片
Unity3D--UGUI背包系统(一)_第3张图片

我们取消掉mask组件的ShowMaskGraphic选项后,就不会显示白色区域了,但这个区域会作为我们的背包格子布局区域。
ScrollRect下创建一个空物体,改名为GridList添加Grid Layer Group组件,并调整GridList的宽度与ScrollRect一致,高度暂时设置为800左右(超出ScrollRect),设置锚点在顶部,调整位置。然后,我们创建Image名为Grid在GridList下,复制N个,可以看到Grid已经被自动排序了。然后我们再来微调,GridLayerGroupz组件下的cell size是设置我们每个Grid的长宽,spacing是间距,padding是内边距,其他几个选项也可以调整整个背包格子的布局位置等。为了方便我们自由的增加格子而不用每次因为格子的多少来调整高度,我们给GridList添加一个Content Size Fitter,将Vertical Fit 设置为Preferred Size,这样我们的高度便能根据格子来自适应了。然后,我们把ScrollRect组件的Content设置为GridList,取消Horizontal选项。设置好后,运行试试,已经可以滑动了。
最后一点,我们稍微改改,在ScrollRect下创建一个UI-ScrollBar,将ScrollRect的ScrollRect组件的Vertical ScrollBar设置为我们刚才创建的ScrollBar,并将ScrollBar的Direction设置为Bottom To Top,调整Scrollbar的位置和长度。再一次运行,我们已经可以通过拖动ScrollBar来滑动我们的背包了。

Unity3D--UGUI背包系统(一)_第4张图片

你可能感兴趣的:(Unity3D--UGUI背包系统(一))