UnityUGUI背包系统之制作背包的UI界面。本节介绍背包系统UI界面的简单的案例，具体如下
工具/原料
Unity
UGUI
UGUI背包系统之制作背包的UI界面
1、在场景中，新建一个“Canavas”，可以改名为“KnapsackUI”，设置“CanavasScaler”的“UIScaleMode”为“ScaleWithScreenSize”，具体如下图
2、在“KnapsackUI”下，新建一个“Panel”，可以改名为“GridPanel”，然后合理调整好大小与布局，具体如下图
3、在“GridPanel”下添加一个“Image”，可以命名为“GridImage”，可以在工程中新建文件夹为“Prefabs”，把“GridImage”作为预制件，具体如下图
4、选中“GridPanel”，添加一个“GridLayoutGroup”组件，具体如下图
5、把“GridPanel”下的子件“GridImage”复制若干个，并调整好“GridPanel”上的“GridLayoutGroup”的参数，具体如下图
6、在“KnapsackUI”下新建一个“Image”可以命名为“ItemImage”水貔藻疽，在“ItemImage”下，添加一个“皈其拄攥Text”，可以命名为“ItemText”，调整设置好布局，并把他作为预制件，具体如下图
7、在“Scripts”文件夹下，新建个“View”文件夹，在“View”文件夹下，新建“GridPanel”和“ItemImage”脚本，双击脚本或者右键“OpenC#Project”打开脚本，具体如下图
8、在打开的“ItemImage”脚本上编辑代码，实际应用中可能是修改图片精灵，本案例愍父煜暌讲解修改文本信息，首囗寝嗵若先设置获得文本的变量，然后提供接口修改文本信息（当为图片时，获得图片组件，提供接口修改图片组件精灵），具体代码和代码说明如下图
9、“ItemImage”脚本擢爻充种的具体内容如下usingSystem.Collections;usingSy霜杼厮贿stem.Collections.Generic;usingUnityEngine;usingUnityEngine.UI;publicclassItemImage:MonoBehaviour{publicTextitemText;//本节以字体为例publicvoidUpdateItem(stringname){itemText.text=name;}//实际多是图片，可以使用这个更新图片publicImageitemImage;publicvoidUpdateItemImage(Spriteicon){itemImage.sprite=icon;}}
10、在打开的“GridPanel”脚本上编辑代码，首先设置对应的“GridImage”数组变量，然后判断“GridImage”下是否存放图片，返回没有存放图片的“GridImage”，具体代码和代码说明如下图
11、“GridImage”脚本短铘辔嗟具体内容如下：usingSystem.Collections;usingSystem.Collections.Ge荏鱿胫协neric;usingUnityEngine;publicclassGridPanel:MonoBehaviour{publicTransform[]grids;publicTransformGetEmptyGrid(){for(inti=0;i<grids.Length;i++){if(grids[i].childCount==0){returngrids[i];}}returnnull;}}
12、脚本编译正确，回到Unity界面，把脚本“ItemIamge”赋给UI“ItemImage”，把脚本“GridPanel”赋给UI“GridPanel”，具体如下图
13、到此《UnityUGUI背包系统（二）之制作背包的UI界面》讲解结束，谢谢