Unity学习日志_NGUI简介

Unity学习日志_NGUI简介

NGUI仅支持相机模式。

UIRoot

UIRoot类似于UGUI中Canvas的UI Scaler组件，负责缩放模式调节。

属性：

1. Scalling Style：
   1. Flexible：旧版本叫PixelPerfect，指永远保持图片自身像素大小不变。适合PC
   2. Constrained：旧版本叫FixedSize，永远保持图片在Panel中的比例不变。适合手机
   3. ConstrainedOnMobiles：前两种的集合体。

UIPanel

UIPanel类似于UGUI中Canvas的Canvas组件+RectTransform组件。

属性：

1. Alpha：透明度。
2. Depth：渲染深度。
3. Clipping：裁剪模式。
4. Sorting Layer：渲染层。

UICamera

UICamera类似于UGUI中的EventSystem，负责NGUI的UI事件。

注：NGUI实现交互的前提是碰撞器。

NGUI图集制作

与UGUI不同，NGUI必须先选择一个图集（Atlas）后选择图片，所以在NGUI上，我们就需要制作自己的图集。

打开AtlasMaker，点击右侧的X号或者New来创建一个新的图集，当然也可以使用现有图集。

选择若干图片，AtlasMaker会自动将图片添加进来。

点击Create创建图集，完成后，你将可以在保存的文件夹中看到这三个类似的文件

关于图集的一些细节：

保证同一个Atlas的精灵在同一Depth，否则会增加Draw Call

NGUI字体制作

NGUI中的label，如果选择unity则可以直接使用导入进来的字体，如果选择NGUI则需要制作Font（字体路径不要有中文）

字体制作器FontMaker就在AtlasMaker下面

打开FontMaker

FontMaker中的几种模式：

1. Generated Bitmap：直接导入现有字体，Bitmap适用于数目小写死的文字，例如英语

2. Improted Bitmap：导入C#字体文件和Texture纹理

3. Dynamic：动态的，适合汉字这种数目量打，但一定会占一个Draw Call

output时如果选择一个有其他图片的图集则会出现一种模式：

1. 图文混材（文字保存在一个图集中）可以减少Draw Call，同时可以在字体文件中编辑快捷键显示的图片
   1. 

Label外框的大小限制了字体的最大尺寸

UIanchor

可以理解为NGUI提供的锚点组，在下图路径创建：

面板：

属性：

1. UICamera：UI相机。
2. Container：理解为选择Canvas，如果不填默认为UIRoot。
3. Side：锚点的类型。

NGUI实现交互的前提是碰撞器

NGUI中的两个基础控件

UISprite：

属性：

1. Atlas：选择图集。
2. Sprite：选择图片。
3. Material：选择材质。
4. Type：选择图片类型，分为：Simple，Siled，Tiled，Filed
5. Gradient：渐变色。
6. Color Tint：基色。
7. Widget：确定轴心点。NGUI中使用Widget来代替空物体使用
8. Anchors：确定锚点。

UILabel：

属性：

1. NGUI/Unity：选择NGUI字样还是Unity字样，unity字样可直接使用导入进来的字样资源，而NGUI字样需要自己再制作字体。
2. Material：字体材质。
3. Font Size：字体大小。
4. Text：字体内容。
5. Modifier：更改字体大小写。
6. OverFlow：溢出处理。
   1. ShrinkContent:即默认的策略，文字显示的大小与Label的Size自动适应。
   2. ClampContent:如字面意思，就是裁剪掉无法显示的字体内容。字体内容会按照Font Size设定的大小来显示。
   3. ResizeFreely：与第一种策略相对应，这时是Label控件的大小去适应字体内容的大小。
   4. ResizeHeight：同字面意思，Label控件的高度无法手动调节，而是随着字体内容的大小需求去适配字体内容。
7. Alignment：对齐方式。
8. Gradient: 字体颜色渐变的设置。包括Top和Bottom，即从Top色变到Bottom色。
9. Effect：效果，包括描边（outline）和阴（Shadow）。
10. Color Tint：字体渲染的颜色。
11. Max Lines：多少行来显示字体。
12. BBCode：使用NGUI的字体自定义来格式化字体。

NGUI高级控件

高级控件的制作可以参考UGUI上的层级关系进行制作

UIButton

button的颜色渐变实际是使用了Tween动画。

UIToggle

其中State Transform中设置的是选中状态的图片或者动画。

UISlider

其中Foreground层级应当大于Background，实现覆盖

UIInputfield

Tween

NGUI的Tween动画库有许多写好的脚本：

属性：

1. From：起始点
2. To：终止点
3. Tweener 动画
   1. Play Style 播放模式
   2. Duration 播放时长
   3. Start Delay 延迟播放
   4. Tween Group 动画组
   5. Ignore Timescale unity会设置TimeScale的影响忽略之后就不受影响。

Scroll view

属性：

1. Content Origin：起点位置。
2. Movement：移动方式，有Horizontal, Vertical, Unrestricted, Custom
3. Drag Effect:拖动特效，注拖动需要子物体有UIDragScrollView脚本。
4. Scroll Wheel Factor：鼠标滚轮滑动速度。
5. Momentum Amout：移动速度。
6. Restrict Within Panel：子物体是否保持在Panel内。
7. Contrain On Drag：拖动限制。
8. Cancel Drag If Fits：如果合适，取消拖动。
9. Smooth Drag Start：柔性拖动起步。
10. Scroll Bars：水平垂直滑动条。

注：NGUI中Scroll View需要创建一个Panel。

布局组件。

定位由父物体和子物体的轴心点一起决定

UIGrid

UITable

Grid一样

NGUI中的事件监听

1. 使用NGUI提供的OnXXX事件，具体叫什么可以在UICamera的注释中找到。不常用
2. 使用EventTrigger进行拖拽绑定。不常用
3. 使用UIListener
   1. UIListener使用模板：
   2. 

NGUI与UGUI的区别

1. uGUI的Canvas 有世界坐标和屏幕坐标

2. uGUI的Image可以使用material

3. UGUI通过Mask来裁剪，而NGUI通过Panel的Clip

4. NGUI的渲染前后顺序是通过Widget的Depth，而UGUI渲染顺序根据Hierarchy的顺序，越下面渲染在顶层.

5. UGUI 不需要绑定Colliders，UI可以自动拦截事件

6. UGUI的Anchor是相对父对象，没有提供高级选项

7. UGUI没有Atlas一说，使用Sprite Packer

8. UGUI的Navigation在Scene中能可视化

9. UGUI的事件需要实现事件系统的接口，但写起来也算简单

10. NGUI还保留着图集，需要进行图集的维护。而UGUI没有图集的概念，可以充分利用资源，避免重复资源。

11. UGUI出现了锚点的概念，更方便屏幕自适应。

12. NGUI支持图文混排，UGUI暂未发现支持此功能。

13. UGUI没有 UIWrap 来循环 scrollview 内容。

14. UGUI暂时没有Tween组件。

HUD

UI跟随，使用脚本UIFollowTarget：

HUDText