Unity3d5的UGUI简单介绍 精选文档.ppt

Unity3d 从入门到精通 —— UGUI 孙肖雨 2019/12/06 目录 UGUI 简介 UGUI 组件 效果展示 谢谢 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 ）：也是用来确定位置