Unity3d5的UGUI简单介绍.ppt

* * 模板来自于 * 目录 UGUI简介 UGUI组件 效果展示 谢谢 UGUI简介 NGUI EzGUI、其他 UGUI NGUI NGUI是严格遵循KISS原则并用C#编写的Unity插件，提供强大的UI系统和事件通知框架。 相当长的一段时间内，NGUI是Unity UI的第一解决方案。 当需要编写代码让控件移动时，可以选择简单的例子代码，可以把你的控件转变为按钮、输入框、基于事件改变颜色、播放声音、触发动画等等。 KISS原则是啥？ KISS原则源于David Mamet（大卫马梅）的电影理论。 KISS原则是英语 Keep It Simple, Stupid。 KISS原则是指在设计当中应当注重简约的原则。 简单的理解这句话就是，要把一个系统做的连白痴都会用。 UGUI ？！ UGUI即UnityGUI是官方的UI的实现方式，后来因为效率和可视化程度低，逐渐被NGUI和EzGUI等第三方插件替代。 但是，Unity4.6之后呢，又推出了新的uGUI系统（据说是把NGUI的作者挖过去了），包括后面的Unity5.x都采用了这一新的系统。 uGUI还在不断完善，应该会超越NGUI Unity视图1 Hierarchy视图显示的是当前场景Scene里的游戏对象。 为什么提？ uGUI可以直接在Hierarchy面板中上下拖拽来对渲染进行排序，越上面的UI会越先被渲染。（见例子） Unity视图2 Scene视图是对场景中游戏对象进行可视化操作。 Game视图显示的是游戏运行时的图像。 Inspector视图显示当前选中游戏对象的所有组件及组件的属性。 Canvas 所有的UI元素必须是canvas的子元素。 Canvas参数Render Mode的渲染模式： Screen Space-Overlay 画布铺满整个屏幕空间，ui元素置于屏幕的最上层，简单来说看到的就是一个2D的样子。 Pixel Perfect，使UI像素对应，UI的边缘清晰，不模糊。 Sort Order，不同画布深度，即不同画布的前后显示顺序。 Canvas Scaler，用来处理缩放的，pc或移动端分辨率不同，采用不同的设置 Constant Pixel Size：像素大小始终不变 Canvas 所有的UI元素必须是canvas的子元素。 Canvas参数Render Mode的渲染模式： Screen Space-Camera 和之前的渲染模式类似，画布填满整个屏幕空间，尺寸改变，画布也会自动改变尺寸来匹配屏幕。 不同：多了一个UIcamera，所有的UI元素由这个相机渲染。 Plane Distance 画布平面到相机的距离 Sorting Layer和Order in Layer与之前的Sort Order功能有些相似，设置画布的深度的。 Canvas 所有的UI元素必须是canvas的子元素。 Canvas参数Render Mode的渲染模式： World Space 世界空间模式。canvas被视为一个类似Plane的游戏对象。这个模式下，画布的大小可以在Rec Transform里进行设置。这个时候是3d的，UI元素可以位于普通3d物体的前面或后面显示。 特别：有一个Event Camera，用来指定接受事件的摄像机，可以通过画布上的Graphic Raycaster组件发射射线产生事件。 注：EventSystem，是创建UI元素时，自动生成的，UI元素响应，不能缺少它。 Rect Transform Rect Transform是继承自Transform（包括position、Rotation、Scale）。 锚点（anchor）：这里有一个锚点的概念。左中右、上中下，有9中锚点；用锚点来确定或者固定UI元素的位置。 伸展（stretch）：也是用来确定位置和形变的。如果选择stretch的某一种拉伸效果，那么UI元素就会相对于canvas进行相应变化。这个变化是相对的变化，这样就可以很好的处理形变的问题。 Image image组件，加入图片，要求图片的类型是sprite 什么是sprite？ 图片精灵是用来绘制图集的控件，精灵可以在一张大图中去截取一部分（大图就是整体图像集合（Atlas），而截取的小图就是一个精灵），然后给精灵命名，使用时通过精灵的名称就能直接绘制，并且精灵还可以用来制作动画。 sprite有两种single multiple（可切） RawImage Image元素用的是sprite格式的文本，RawImage使用普通的Texture2D贴图。 UV Rect属性 X、Y是指图片的偏移 X在水平方向的偏移，值改变，会使图片重复出现 Y是在垂直方向上的偏移。 W、H可以改变图片的显示图片，即w=2