Unity3D自学笔记——UGUI系统介绍

与OnGUI的比较

• 独立的坐标体系

  UGUI坐标体系
  
  传统坐标体系
  

• 全新的事件机制
• 更加高效的运转效率
• 独立的库，拓展编辑器仍需要老版本GUI库

与NGUI的比较

• 由NGUI创始人参与开发
• 与Unity结合更紧密
• 自适应系统更完善
• 更方便的深度处理
• 省去了Atlas，直接使用Sprite Packer
• 没有循环的ScrollView
• 没有本地化多语言的支持

UGUI组件

Image 图片组件
Image Type

• Simple 根据边框大小进行图片缩放
• Slice 切割模式，根据图片切割Sprite显示，用于制作Button，避免拉伸造成图片的边框变形
• Tiled 平铺模式，以左下角为原点，不断重复显示图片，图片大小不改变
• Field 填充模式，可以调整图片显示区域，如血条，进度条显示
  

Raw Image 纹理组件
用途

• 网络加载图片
• 播放视频或动态图
  两种特殊纹理
• Render Texture – 渲染纹理
• Movie Texture – 影视纹理

Test 文字组件
富文本语法

UI Effects 界面特效

• Shadow –阴影
• Outline –描边
• Position As UV1 –添加一层Uv效果

Mask & Scroll Rect 界面的遮罩与滑动
Mask 区域显示子物体某一部分的组件

Show Mask Graphic 显示背景底图

选中状态

未选中状态

Scroll Rect
滚动显示大图

Horizontal, Vertical 控制滚动方向

Movement Type

• Unrestricted 没有限制的滚动
• Elastic 固定滚动范围，可以超越图片大小，但超越后自动回滚到最大位置
• Clamped 无法超越图片最大位置

Inertia 是否有阻力效果

• Deceleration Rate 阻力系数，数字越大阻力越小

Scroll Sensitivity 滚动条

AutoLayout 界面系统的自动布局
Layout Groups 组合布局

• Horizontal 横向布局
• Vertical 纵向
• Grid 网格

Layout Element 布局元素
重写Layout Group对子物体Rect Transform的控制

三种属性设置

• Min Width/Height 最小宽高
• Preferred Width/Height 最大宽高
• Flexible Width/Height 拉伸布局比例

Layout Fitters 布局适配器

• Content Size Fitter 内容尺寸裁切
• Aspect Ratio Fitter 长宽比例裁切