[UGUI]Unity背包系统制作详细步骤

一、基本功能

一个常见的滚动背包

二、背包制作 

1.创建空物体，然后创建UI-Image 制作背包整个背包所在的父UI的背景图

选中BG，找到他的锚点设置，按住Alt键，点击右下角的适配，让锚点和内容都匹配画布

PS：不按Alt键是设置一个元素的锚点位置

 2.制作背包内容-LOGO和背景

创建空物体，改名，BagContent,尺寸700*500

然后在他里面分别创建一个Image做背景bg，调整锚点相对父亲的位置以及颜色

在创建一个顶部image做LOGO（宽度和父亲一样，高是50像素），里面创建子文本写上内容

3 .制作背包内容-物品网格

创建空物体作为网格内容容器，相对父亲居中，700*450像素，为他再添加一个组件UI -image，铺满作为背包背景图

添加自动网格布局组件Grid Layout Group

这个组件可以让其所在物体的子UI全部按照网格自动对齐和排列

设置未来格子的大小和间距

然后开始添加子物体，可以看到自动排列了

4.添加滑动框（Scroll View）

滑动框是由三部分组成：横向和纵向滑动块、被关联的滑动内容（这个内容可以是任何UI，文本、图片、视频，只认UI）

滑动框（Scroll View）是Unity内部提供的成品预设，我们只需要把内容关联到里面，就可以被滑动条控制。

首先创建滑动内容框Scroll View

 修改设置，取消水平，把纵向滚动条改为永久可见

然后把位置调整好，把刚才做好的背包关联到滑动面板的内容变量里面，或者重新在content下面开始创建新的背包也可以！

content下面需要增加两个组件，一个是网格自动布局组件(Grid Layout Group)，这样里面的内容会上下左右自动布局！第二个是自身大小跟随内容自动缩放（Content size Fitter）

 因为我们只需要上下滑动，因此可以把左右滑动关闭掉，同时设置滑动条的显示模式为始终显示

为content添加网格组件，和第三步一样。然后为其创建子物体的物品图标父物体

 现在就可以看到效果了！

但是因为Content内部内容比较多，默认情况下，父物体组件装不下子UI内容，就会不显示。滑动条也就不能滑动。我们需要让父物体Content根据其子UI内容大小自动调节自己的大小。我们为Content加一个组件-Content Size Fitter(让父物体跟据子物体的最终大小调整自己大小)

修改组件设置 ，竖直方向自适应内容长度调整自己的长度

效果，可以看到父物体Content变长了！

 Over!

背包源码包

https://download.youkuaiyun.com/download/leoysq/88576258?spm=1001.2014.3001.5501