《Unity3d5的UGUI简单介绍分析教学提纲》由会员分享，可在线阅读，更多相关《Unity3d5的UGUI简单介绍分析教学提纲（22页珍藏版）》请在金锄头文库上搜索。
1、,Unity3d从入门到精通 UGUI 孙肖雨 2015/12/06,目录,UGUI简介,UGUI组件,效果展示,谢谢,UGUI简介,NGUI,EzGUI、其他,UGUI,NGUI,NGUI是严格遵循KISS原则并用C#编写的Unity插件，提供强大的UI系统和事件通知框架。 相当长的一段时间内，NGUI是Unity UI的第一解决方案。 当需要编写代码让控件移动时，可以选择简单的例子代码，可以把你的控件转变为按钮、输入框、基于事件改变颜色、播放声音、触发动画等等。 KISS原则是啥？ KISS原则源于David Mamet（大卫马梅）的电影理论。 KISS原则是英语 Keep It Simp
2、le, Stupid。 KISS原则是指在设计当中应当注重简约的原则。 简单的理解这句话就是，要把一个系统做的连白痴都会用。,UGUI ？！,UGUI即UnityGUI是官方的UI的实现方式，后来因为效率和可视化程度低，逐渐被NGUI和EzGUI等第三方插件替代。 但是，Unity4.6之后呢，又推出了新的uGUI系统（据说是把NGUI的作者挖过去了），包括后面的Unity5.x都采用了这一新的系统。 uGUI还在不断完善，应该会超越NGUI,Unity视图1,Hierarchy视图显示的是当前场景Scene里的游戏对象。 为什么提？ uGUI可以直接在Hierarchy面板中上下拖拽来对渲染
3、进行排序，越上面的UI会越先被渲染。（见例子）,Unity视图2,Scene视图是对场景中游戏对象进行可视化操作。 Game视图显示的是游戏运行时的图像。 Inspector视图显示当前选中游戏对象的所有组件及组件的属性。,Canvas,所有的UI元素必须是canvas的子元素。 Canvas参数Render Mode的渲染模式： Screen Space-Overlay 画布铺满整个屏幕空间，ui元素置于屏幕的最上层，简单来说看到的就是一个2D的样子。 Pixel Perfect，使UI像素对应，UI的边缘清晰，不模糊。 Sort Order，不同画布深度，即不同画布的前后显示顺序。 Can
4、vas 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功能有些相似，设置画布的深
5、度的。,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
6、Transform是继承自Transform（包括position、Rotation、Scale）。 锚点（anchor）：这里有一个锚点的概念。左中右、上中下，有9中锚点；用锚点来确定或者固定UI元素的位置。 伸展（stretch）：也是用来确定位置和形变的。如果选择stretch的某一种拉伸效果，那么UI元素就会相对于canvas进行相应变化。这个变化是相对的变化，这样就可以很好的处理形变的问题。,Image,image组件，加入图片，要求图片的类型是sprite 什么是sprite？ 图片精灵是用来绘制图集的控件，精灵可以在一张大图中去截取一部分（大图就是整体图像集合（Atlas），而截
7、取的小图就是一个精灵），然后给精灵命名，使用时通过精灵的名称就能直接绘制，并且精灵还可以用来制作动画。 sprite有两种single & multiple（可切）,RawImage,Image元素用的是sprite格式的文本，RawImage使用普通的Texture2D贴图。 UV Rect属性 X、Y是指图片的偏移 X在水平方向的偏移，值改变，会使图片重复出现 Y是在垂直方向上的偏移。 W、H可以改变图片的显示图片，即w=2时，图片会显示2个，宽度会被压缩。同样若是h=2，那么高度就会被压缩一半，用来显示2个图片。 Mask遮罩，可以遮挡图片多余的部分，可以和scrollBar结合使用。,
8、Text&Button,Text文本 Line Spacing 是设置行间距的 Rich Text 富态字 Best fit 忽略字体大小，将文本全部显示在元素区域。 所有的UI元素可以添加轮廓和阴影效果。 Shadow 和 Outline 修改Effect Color和Effect Distance可以看到明显的变化。,Text&Button&InputField,Button 首先，button中，也包括一个Text，设置和之前的是一样的。 Transition，响应用户的可视化操作方式。 None无 ColorTint，颜色 SpriteSwap，精灵替换 Animation，动画 On
9、 Click 点击事件,Text&Button&InputField,InputField是组合image和text产生的。 具体操作： 首先新建一个image组件，设定图片大小； 新建一个text，将text里的Rich text 取消勾选，调整大小（小于image）； 在Hierarchy窗口中，将text拖动，使之成为image的子对象。 为image添加Input Field组件，为该组件中的Text Component属性添加Text组件，即将之前新建的Text拖动到这里。 当然也可以设置InputField组件的其他的属性,Toggle &ToggleGroup,Toggle类似复
10、选框 可以实现对选项进行勾选或者不勾选的操作，可用于音乐的开启、关闭等界面功能。 Is On，Toggle开关是否为开启状态，开始运行时，开关是否开启，在运行过程中，随开关勾选变换而变化。 Group，Toggle所处的组，后面的Toggle Group相关。 On Value Changed, 值变换响应，事件相应。,Toggle &ToggleGroup,Toggle Group，属于一个开关组的Toggle，就只能有一个勾选。 怎么实现？ 首先，在canvas下新建一个Create Empty，创建一个空的组件，命名为Toggle Group； 然后为这个空的组件添加 Toggle Gr
11、oup组件； 将三个Toggle拖到Toggle Group下，成为子对象，为三个toggle选择所属的组； 将后两个Is on 勾选取消。 运行之后，Toggle只有一个勾选。,Slider &滚动区域 &Scroll bar,Slider滑动条 可以设定参数为预定取值范围里的数。 值由滑动柄在滑动条的相对位置决定，可以用来实现音量控制、发兵数量等功能。 Direction，方向：从左到右，从右到左，从上到下，从下到上 Min/Max Value，最小/最大值 Whole Numbers，是否限定为整数 Value 值 On Value Changed，响应事件,Slider &滚动区域 &
12、Scroll bar,滚动区域，Scroll Rect组件 滚动区域怎么？ 新建新的游戏对象，Create Empty；，命名为SrollRect，再然后加上Scroll Rect组件；可以新建image，使之成为ScrollRect的子对象，图片就可以有拖动效果。 Content，被拖拽的内容 H、V，分别代表是否可水平、垂直拽 Movement Type： Unrestricted，不限制，可以移出去 Elastic，限制，移出后弹回 Clamped，限制，不可移出 Inertia，惯性，rate，拖拽后减速度 H、V Scroll Bar，水平垂直滚动条,Slider &滚动区域 &Scroll bar,Scroll Bar滚动条 可以为Scroll Rect添加滚动条，以显示当前滚动的位置，滚动条也可以拖拽。 Mask，遮罩的使用 这里用到了遮罩；上面滚动区域完成后，可以新建两个scroll bar，一个水平，一个垂直，将这两个scroll bar加到scroll rect上面，此时已经能够拖动，但是会出现覆盖的问题。 在scroll rect 上面增加imag组件和Mask组件（为啥加image？），这时候超出scroll rect的部分就会被遮住，就实现了遮罩的功能。,谢,谢,观看,
