UGUI

1.Canvas画布

 a)Render Mode

• Screen Space-Overlay：覆盖模式

  画布会填满整个屏幕空间,UI元素置于屏幕的最上层,如果屏幕尺寸被改变，画布将自动改变尺寸来匹配屏幕

  重要参数

（1）Pixel Perfect：只有RenderMode为Screen类型时才有的选项。使UI元素像素对应，效果就是边缘清晰不模糊.

（2）Sort Layer: Sort Layer是UGUI专用的设置，用来指示画布的深度.

• Screen Space-Camera：摄像机模式
  

与覆盖模式类似,画布也是填满整个屏幕空间，如果屏幕尺寸改变，画布也会自动改变尺寸来匹配屏幕.

不同的是，在该模式下，画布会被放置到摄影机前方。在这种渲染模式下，画布看起来绘制在一个与摄影机固定距离的平面上。所有的UI元素都由该摄影机渲染，因此摄影机的设置会影响到UI画面。在此模式下，UI元素是由perspective也就是视角设定的，视角广度由Filed of View设置。

这种模式可以用来实现在UI上显示3D模型的需求，比如很多MMO游戏中的查看人物装备的界面，可能屏幕的

一侧有一个运动的3D人物，另一侧是一些UI元素。

重要参数

1.Render Camera:渲染摄像机
2.Plane Distance:画布距离摄像机的距离
3.Sorting Layer: Sorting Layer是UGUI专用的设置，用来指示画布的深度。可以通过点击该栏的选项，在下拉 菜单中点击“Add Sorting Layer”按钮进入标签和层的设置界面，或者点击导航菜单->edit->Project->Settings->Tags and Layers进入该页面。可以点击“+”添加Layer，或者点击“-”删除Layer。画布所使用的

4.Sorting Layer越排在下面，显示的优先级也就越高。

5.Order in Layer:在相同的Sort Layer下的画布显示先后顺序。数字越高，显示的优先级也就越高。

此种模式下,画布的渲染顺序:摄像机的深度值>画布的图层顺序>画布相同图层的Order顺序

•        World Space：世界空间模式

在此模式下，画布被视为与场景中其他普通游戏对象性质相同的类似于一张面片（Plane）的游戏物体。画布

的尺寸可以通过RectTransform设置，所有的UI元素可能位于普通3D物体的前面或者后面显示.

它有一个单独的参数Event Camera，用来指定接受事件的摄像机，可以通过画布上的GraphicRaycaster组件

发射射线产生事件。

这种模式常用于3D游戏中实现角色在移动时的血条或角色名称的跟随

总结一下:

1.Overlay模式,永远覆盖在其他物体之上,出现在最上面,不受摄像机的Depth值影响

2.有多个摄像机时,由摄像机的Depth值决定

3.只有一个摄像机时,由距离和方向决定World模式和Camera模式.他们的渲染结果可前,可后,可穿插

1.Text和InputField

   a)Text

     

      Rich Text（富文本属性）

    b)InputField

        Character Limit：限制输入框的输入的文本长度，默认为0无限长度 

        Content Type：输入文本类型(Standard/Autocurrected/Integer Number/Decimal Number/Name/Password等。重点Integel Number整数类型，Name字符串类型，Password密码形式，以‘*’显示）

2.Image与Sprite

     ImageType：

                            Simple默认方式

                            Tiled平铺

                            Filled（常用于做技能冷却）

                            Sliced（配合SpriteEditor用于处理图片边框的拉伸）

     延伸：带有Alpha通道的图片制作

    Unity可以将导入的图片分割为若干Sprite，然后通过SpriteRenderer组件或者uGUI的Image组件来渲染。一般情况下，两者的显示效果是一致的。那么究竟该使用哪个组件呢？

    异同:

         使用上，两者区别不大，都是使用一个Sprite源进行渲染，而Image需要位于某个Canvas下才能显示出来。场景中的Sprite可以像普通的3D游戏物体一样对待，通过Transform组件进行移动等操作，而Image则使用RectTransform进行布局，以便通过Canvas统一管理。由于RectTransform可以设置大小、对齐方式等，Image可以说更加方便一点，这也是很多人选择使用Image的原因。

        渲染上，Sprite使用SpriteRenderer组件渲染，而Image则由CanvasRenderer组件渲染。两者在视觉上没有任何区别（都使用默认材质时）。它们默认的渲染也都是在Transparent Geometry队列中。

        而在引擎的处理上，两者则有很大的不同。将Wireframe选项打开然后在场景中观察，就可以清楚地发现，Image会老老实实地为一个矩形的Sprite生成两个三角形拼成的矩形几何体，而Sprite则会根据显示内容，裁剪掉元素中的大部分透明区域，最终生成的几何体可能会有比较复杂的顶点结构。

        那么这种不同会造成什么结果呢？在继续之前，我们先回顾一下游戏中每帧的渲染过程。对任何物体的渲染，我们需要先准备好相关数据（顶点、UV、贴图数据和shader参数等等），然后调用GPU的渲染接口进行绘制，这个过程称作Draw Call。GPU接收到DrawCall指令后，通过一系列流程生成最终要显示的内容并进行渲染，其中大致的步骤包括：

• CPU发送Draw Call指令给GPU；

• GPU读取必要的数据到自己的显存；

• GPU通过顶点着色器（vertex shader）等步骤将输入的几何体信息转化为像素点数据；

• 每个像素都通过片段着色器（fragment shader）处理后写入帧缓存；

• 当全部计算完成后，GPU将帧缓存内容显示在屏幕上。

    通过上面的认知，我们可推断：                                                                                                                                 

1. Sprite由于顶点数据更加复杂，在第1/2步时会比Image效率更低；

2. Sprite会比Image执行较多的顶点着色器运算；

3. Image会比Sprite执行更多的片段着色器运算；

        看起来似乎Image比Sprite有更大的好处，然而事实上，由于片段着色器是针对每个像素运算，Sprite通过增加顶点而裁剪掉的部分减少了相当多的运算次数，在绝大多数情况下，反而比Image拥有更好的效率 —— 尤其是场景中有大量的2D精灵时。

       总结一下:SpriteRenderer会创建额外的几何体来裁剪掉多余的透明像素区域，从而减少了大量的片段着色器运算，并降低了overdraw；而Image则会创建简单的矩形几何体。随着2D元素数量的增加，这种差别会慢慢明显起来。

可以看出，SpriteRenderer确实是经过优化以显示更多的元素的。所以在2D游戏开发中，游戏场景中的元素，应该尽量使用它去渲染。而Image应该仅用于UI显示（实际上即使不考虑性能原因，由于屏幕分辨率的变化，Image可能会被Canvas改变显示位置和实际大小，如果用于游戏内元素的显示，可能会造成跟预期设计不一致的显示结果，也应该避免使用）。