Unity3D--UGUI背包系统（一）

 与以前的ngui所比较的话，ugui感觉更为简单方便，同样也与ngui有很多相同的功能，这里我们先来初步制作ugui的背包系统。

---

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

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

我们取消掉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来滑动我们的背包了。

这样呢，我们的背包系统就有一个初步的样子了，关于一些布局的锚点以及各个节点的位置，请大家自行调整。有一个简单背包的框架，滑动，网格布局。但是总觉得还差点什么。。。没物品！！我的天！这算什么背包？！！宛如鱼香肉丝没有鱼，老婆饼没老婆，钱包没钱一样可恶！¥＃％％¥……＃

好了好了，我们会在之后的文章里面来添加我们的物品。如果有什么问题或建议，请指出或一起交流～🔥🔥🔥