UGUI Unity内建UI系统的认识和一些问题的解决方案

UGUI所有的控件都基于rect transform,具体请看之前的文章：http://blog.csdn.net/fenrir_sun/article/details/50163099

UGUI所有的UI元素还需要放在canvas下，关于canvas，主要有以下几种模式：

1.screan space-overlay : UI会覆盖整个场景，所有的UI元素会在场景最上层渲染输出，会随场景视图大小变化而自动变化，rect transform不可编辑，canvas会修改它，使它自动填充整个屏幕。Pixel Perfect:选中后，UI元素渲染输出时，会自动吸附到最近的像素点，有时会增强显示效果。

2.screan space-camera ：由场景中的指定摄像机渲染输出，类似于1.但是可使camera相关设定作用于UI元素上。这个模式一般用透视摄像机，可以在UI上展示3D模型，这个模式canvas会自动填充相机空间，可得到景深效果。Render Camera:设置渲染摄像机，如果设为null，则行为同screan space-overlay。Plane Distance : canvas和摄像机之间的距离

3.World Space : 在世界坐标系下渲染UI，UI元素可以是场景中的静态对象，也可以是动态对象，例如对话框，标签等跟随游戏对象的运动。此模式下canvas不再影响Rect Transform , canvas可以位于世界坐标系下的任意位置。Event Camera : 接受事件必须具备的，确定哪个摄像机来检测例如UI上的点击事件等，一般是当前渲染场景的摄像机。Receives Events:设置这个canvas中的UI元素是否接受事件。类似血条，跳字等跟随角色的UI，推荐方法是在人物Object下建一个World Space模式的canvas，然后在其上面放上要显示的东西。

主要元素：

1.Image

图片元素，类似原来的sprite

Image Type分为：Simple, Sliced, Tiled, Filled四种

其中Sliced需要将原图设置为Sprite(2D and UI)并且编辑它的边界

2.Text

文本控件，用类似于HTML的模式来定义富文本。文字描边需要使用UGUI的控件outline完成

3.Botton

按钮控件，继承于Selectable



可调整不同状态的显示效果，有动画，颜色，图片可供选择。

4.EventSystem

事件系统

创建Button时会自动添加。场景开始时，EventSystem查找相同游戏对象上的输入模块，并使用它们来定义UI元素如何相应用户输入。它只有一个属性，FirstSelected，所有UI元素都能被选中，场景开始后，该属性设置的对象被默认选中（这个一般是主机游戏用，手游不用）。

官方的事件监听方式：

（1）.不同事件的监听需要在对应的UI元素上挂载EventTrigger脚本。

（2）.另外一种方式是继承UnityEngine.EventSystems名称空间下的接口（如IDragHandler然后在public void OnDrag(PointerEventData data) {}中填写相应的功能。

建议用一个辅助脚本，动态的绑定EventTrigger，设置相应事件即可。

5.Toggle

勾选控件，和Toggle Group配合

6.Slider

滑动条，界面中可使用，给玩家调节某项值。

7.Dropdown

下拉选项框，点击之后会有选项出现供玩家选择

8.Input Field

输入框

9.Scroll View

滑动框：放置不定数量的物品用的，背包，奖励等

这玩意用系统的添加UI可以自动生成，如右上图那样，需要显示的物品都放在Content节点下。

滚动的时候是按照Content的大小来适配的，并不是按照物品的多少，所以需要动态更改Content的Rect Transform。

动态更改大小实在太麻烦（有时候也没办法）。推荐的方法是在content上挂载两个控件ContentSizeFitter和VerticalLayoutGroup (或者Horizont或Grid)。

ContentSizeFitter的作用是让content的大小自动适应它上面挂的东西的大小之和，但是需要和VerticalLayoutGroup 配合。 VerticalLayoutGroup 的作用就是自动排列content下面的各种元素。这样一来content下面的东西就不能调整大小了，所以content下面都挂空的GameObject然后在GameObject上挂一个LayoutElement，通过它来设置大小。其他的图片，按钮都作为GameObject的子元素，就能手动调节Rect Transform了。





10.Mask

遮罩，作用是设置它自己下面的子元素的可显示区域，需要和Image控件配合才能产生作用。可以用不规则的图片来设置不规则的可显示区域。但是似乎不能使用图片的透明度，只要图片的透明度小于255 * 0.01就不显示，大于这个值就完全显示。资源商店有一个卖10刀的解决方案可以使它有透明度效果。

下面说几个实际问题：

一.2D帧动画

除了通过Animator可以很方便的创建动画外，UGUI还可以自动创建2D帧动画（其实就是一个Animator ），方法：

1.空object上挂一个 sprite renderer和一个Animator。并进行相关设置

2.批量选中图片，将它们放到一个空GameObject上。unity会自动生成一个帧动画组件。

可以通过设置sorting order来控制动画在UI上的显示层级

二.3D模型/特效UI界面显示

在人物能力界面之类的地方，有时候需要显示人物或者装备的3D模型，这种情况可以使用3D摄像机在场景中一个偏僻无人的角落渲染一个模型，然后用RenderTexture显示摄像机内容，再把这个RenderTexture放到一个Raw Image上就能显示了。3D特效的显示也可以用这种方法。

三.图片打包

UGUI本身没有图集的概念，也没有从图集中读取的概念，一切都是包装好的，作用就是可以减少DrawCall,但是使用起来颇蛋疼。

正确的使用方法是将需要打包的图片放在除Resources目录下的地方，要打在一起的包输入同一个PackingTag，然后打开Windows -> SpritePacker，点Pack就行了，打包好的文件在Assets同级目录Library\AtlasCache下面。

在编辑器里使用的还是原来的图片，只是Unity会自动用打包好的图，我们不用关心。

这种打包方式的蛋疼之处是：1.没办法直接取到图集，也不能直接压缩图集，而且Resources目录下的图片不能打包，也就意味着打包好的图不能动态生成。

解决办法有两种：

1.用Prefabe把Resources外面的图片用字典存起来，把这个Prefabe放在Resources目录下。

2.把需要打包的图片做成assetbundle ，直接读打好的bundle。

注意这里用assetbundle也需要把同一个图集的sprite设置成同一个PackingTag。

这两种方法都是可行的，考虑到热更新，还是用第二种更合适一些，而且用assetbundle的话Unity会自动打成图集，我们只要生成assetbundle就可以了。经过测试，打成bundle包之后只要用类似下面的方法，可以通过图集和图片名称动态加载图片。

总的来说UGUI 作为一个引擎内建的UI解决方案能解决大部分问题，但是在图集打包和一些特殊需求的处理上还有待加强。功能确实没有现在的NGUI丰富，虽然NGUI的图集打包比较麻烦，但是好在直观，也更便于管理和加载图集中的图片。