NGUI UIRoot组件

UIRoot

Transform
我们在创建NGUI的时候会自动创建的组件，所有的NGUI组件都会放到该组件下，专业点就是UIRoot总是出现在“UI”树的最上层。而UIRoot的作用是缩放UI。假如我们把一个像素为100x100的UI元件放入到1000x1000的屏幕中，如果没有UIRoot的话他的边长会变为100x100米，变得特别大，而假如放入到UIRoot下，该UI元件会变成100x100像素。

Paste_Image.png

注意

• UIRoot中scale属性最好不要去更改

• 当我们想调节某个UI元件的大小时不要去调节Transform中Scale属性，而要去调节UI原件自身的Widget中Size

Paste_Image.png

• 当我们通过代码去实例一个UI原件的时候，除了要给这个新建gameobjcet添加父类，还要把localScale这个属性重新设置为Vector3.one，否则新建物体会变得特别大。

关于UIRoot缩放

Paste_Image.png

在该图中Scaling Style中有三个选项

• Flexible 这个组合主要用于对所有的UI元件都不进行缩放，但是当屏幕分辨率不在Minimum Height和Maximum Height区间时，则会根据Minimum Height（Maximum Height）/screen height的比例对UIRoot进行缩放。这种在PC端这种可以调节界面大小的会使用比较多。

Paste_Image.png

• Contrained 这个组合主要用于对所有的UI元件进行缩放，，我们上图勾选的是通过高度适配，当设备分辨率的Height值不同于此设置值时，则根据其比例（即 ContentHeight / Screen Height）对整棵UI树的进行“等比”缩放，我们就可以更好去适配屏幕了。一般用于移动设备上，特别是手机上，屏幕就那么小，UI界面一定要求全屏显示，就要进行缩放。保持该UI在屏幕中所占的百分比去缩放。

Paste_Image.png

• Constrained On Mobiles这种是我们经常选用的，这种就是上边两种的混合。因为我们做的有些项目不但希望可以在PC端，也希望在移动设备上运行。

注意

• 我们一般在做项目之前都会知道我们做的项目需要在什么平台上运行，此时我们需要首先把ScalingStyle调成Constrained On Mobiles，并且把分辨率也调到我们想要的，通过高度还是宽度适配，这个需要我们自己去判断。同时我们也要把Game视图的分辨率也要调成和这个相等的，假如我们最后再去调节的时候，有些UI界面可能就会在新界面中变形，此时就需要我们一步一步去调节。
  这个也是我在网上看到的感觉比较不错的关于缩放的文章http://blog.csdn.net/onerain88/article/details/11713299/

Panel

Paste_Image.png

UIPanel用来收集和管理它下面所有widget的组件。通过widget的geometry创建实际的draw call。没有panel所有东西都不能够被渲染出来。

• 每一个UI组件必须要依托在一个Panel下，UI元素会依托到离自己最近的Panel下。
• Alpha 会影响到子类所有UI元素的透明度
• Depth这个表示该Panel的层级，层级高的会把层级低的遮罩，说到此点扩展下，每个UI元素也都会有Widget这个组件，而该组件也有Depth属性，在同层Panel下Widget才会有效，意思就是Panel的层级要在Widget层级之上。

Paste_Image.png

• clipping 一般默认为None，在我们对此panel下的UI元件进行裁剪（就是不让超范围显示的时候）我们会选择soft clipping这个选项，其他的我现在还不怎么明白，上网搜也没有搜到，希望知道的朋友给我指点下。

Camera

Camera的主要作用就是让该摄像机渲染出来的物体能够接受到NGUI的事件。他的大部分设置是不需要我们去更改的。

Paste_Image.png

其中的EventMask这个表示的是我的该Camera组件能够接受到该层级的事件。当有的时候我们NGUI接收不到事件的时候我们可以看看该属性是否被修改。

Anchor

这个是锚点的意思，我们在创建UI元素的时候我们需要把所有的UI元素放到Anchor下边这样我们就可以做到一些更好的适配屏幕。关于Anchor我就不说那么多了，大家可以自己去网上搜索下。

Paste_Image.png