Unity UGUI简单制作过程

由于要选择Unity UI技术路线，年前分别试了Unity自带的UI（即后面所说的UGUI）和FairyGUI两种UI的制作方式，从流程上制作了一个简单的UI面板来摸索两种方式的套路。
这一篇主要记录制作UGUI的过程。

在记录UGUI制作过程之前需要上一篇文章http://blog.csdn.net/andyqingliu/article/details/54602673的铺垫，Canvas是UGUI最重要的组件之一。

目标：需要有一个按钮入口（假想为背包按钮），点击按钮弹出一个UI面板，这个面板的界面需要如下几个方面的元素（静态图片忽略不提）。

1. 背包里面装备与道具列表

显示为一行，可左右拖动，每个cell显示各自的头像与基础信息（星级与名称等）

2. 背包里功能切换

显示为一列，每个按钮之间互斥，即想象成为Toggle,选中有对应效果并弹出一个新面板显示具体信息。

3. 背包的关闭

关闭按钮

---

接下来就开始行动了：

1. 设置Canvas为项目做准备

废话不多说，设置Canvas的Render Mode为Overlay,Pixel Perfect勾选，设置Canvas Scaler的UI Scale Mode为Scale With Screen Size,分辨率为1280*720,选择Screen Match Mode为Match Width Or Height,Graphic Raycaster不变。如下图：

如上图，Canvas下面有个Button是入口。

2. 开始制作背包面板

这个就不截图了，只说过程如下：

• 把需要的图片拷贝到单独的文件夹下面并设置为Sprite(2D and UI),以后如果需要更新某个图片直接覆盖即可。

• 在背包板子下面建立两个Toggle并给这两个GO一个父节点，给父节点添加Toggle Group组件，这样就能一次选中一个。Toggle本身挂Toggle组件。

• 建立带Scroll Rect组件的GO，然后把放背包列表的Content拖入Scroll Rect的Content属性中，并给Content GO挂Grid Layout Group组件和Content Size Fitter组件，前者是为了设置列表的滚动方式和大小，后者是为了适配列表大小，这里要注意，如果不挂后者，这里要自己手动去适配Content大小，曾经以为Unity没有提供这个组件，为了测试只好自己写适配列表大小，没想到Unity已经有了这样的组件，还以为Unity这个组件怎么这么不智能呢

• UI界面制作好了之后就是写代码了，给入口按钮挂脚本，给背包面板挂背包的控制脚本，主要是Find对应的物体或者拖对应的物体，然后实例化对应物体，添加响应事件等。

UGUI这边的流程就到这里，明天写FairyGUI的流程。