unity之UGUI系统基础

                                                      UGUI系统基础
一.UGUI 简介：
①.Unity3D4.6 版本开始，Unity 引擎内出现了一个自己的完整 UI 系统。在此之
前，国内 90%以上的 Unity 项目，项目 UI 界面都是使用 NGUI 插件制作的。

②.旧版 UI：GUITexture，GUIText。
OnGUI：主要用于“Unity 界面扩展开发”，用于写引擎插件界面。

二.UGUI 游戏物体：

①.基础介绍
Unity 引擎将 UGUI 内的 UI 组件进行了简单封装，封装成了一些简单的 UI 游
戏物体，这些游戏物体是可以直接作为 UI 使用的。

②.创建步骤
步骤 1：在unity导航栏点击GameObject -> UI-> UI 游戏物体
步骤 2：Hierarchy 面板点击鼠标右键 -> UI -> UI 游戏物体
备注：
这两种操作步骤，都可以找到同样的 UI 游戏物体列表，点击即可创建出该物体。
开发过程中，一般使用的是步骤 2 这种方式，相对比较方便。

③.创建步骤分析
当我们使用上面的步骤在场景内创建出第一个 UI 游戏物体的时候，会顺带出现
两个其他游戏物体：Canvas 和 EventSystem。【见图】

Canvas：画板，所有的 UGUI 游戏物体，都必须是 Canvas 的子物体。否则，
UI 游戏物体将无法正常渲染显示。【见图】

EventSystem：事件系统，UGUI 所有的操作事件都是由该游戏物体处理。
如果场景内没有该游戏物体，UGUI 相关物体将无法操作。【简单演示】

在Hierarchy 面板点击鼠标右键 -> UI -> Button完成按钮的创建，运行测试你会发现可以点击，测试完成后把EventSystem删除掉，再次运行测试。

三.UGUI 组件：

①.基础介绍
UGUI 系统中除了官方简单封装过的 UI 游戏物体外，还提供了独立的 UI 组件，
方便我们直接使用 UI 组件制作一些复杂的 UI 功能。
其实官方的简单 UI 游戏物体的封装，使用的就是该区域的 UI 组件。

②.创建步骤
步骤：在unity导航栏Component -> UI -> UI 组件
备注：
这个 UI 组件列表，默认是灰色不可用状态。
只有当你选中了游戏物体后，该 UI 组件列表才是可用状态。

 

③.创建步骤分析
在 Canvas 游戏物体下，创建一个空的游戏物体，选中它，然后给它添加相关
的 UI 组件。[见图]

备注：
Canvas 游戏下，创建的空物体，这些空物体身上默认存在 Rect Transform。
Rect Transform 继承至 Transform，在原有的 Transform 组件的功能基
础上，进行了新的功能扩展。 

----------------------------------------------------------------------UGUI组件之Text文本----------------------------------------------------------------------

一.Text 游戏物体组成部分

①Rect Transform：用于控制 UI 物体的基本属性。
②Canvas Renderer：画板 UI 渲染器，UI 游戏物体必备且不可编辑的组件。
③Text 组件：当前 UI 物体的的核心组件。
④Default UI Material：默认 UI 材质球，UI 的显示也是需要材质球的。
备注：
①②④是所有的 UGUI 游戏物体必备的组件，其实 UI 的形态改变，就是通过使
用不同的 UI 组件来实现的。【见图】

二.Text 面板属性 

Text：文本
控制当前的 UI 游戏物体要显示的文本内容。

Font：字体
控制文字显示的样子；Unity 支持的字体格式是 TTF 格式。
在企业项目开发中，一款游戏，一般会使用到三到五款字体文件。

Font Style：字体样式
正常字体，加粗，倾斜，加粗并且倾斜。
这样的字体样式在 Word，Excel，Web 开发都是有的，最基础的字体美化。

Font Size：字体大小
控制字体的显示大小，但是当字体很大的时候，需要配合调整当前区域的宽和高，
否则字体将因为空间太小，无法显示。

Line Spacing：行间距
当 Text 内的文本是多行数据的时候，控制行与行之间的间隔空隙。

Rich Text：富文本支持
勾选开启后，我们可以在 Text 内编写富文本标签。
比如： <color=“red”>MkCode</color>

Alignment：对其方式
控制文本在区域内的九宫显示位置。

Align By Geometry:是否支持图文混排。

Horizontal Overflow:横向溢出(对应X水平方向)，当文本框内容超出文本框尺寸的时候，将Wrap更改为Overflow观察效果。

Vertical Overflow:纵向移除(对应Y垂直方向)，  当文本框内容超出文本框尺寸的时候，将Truncate更改为Overflow观察效果。

Color：颜色
控制文本显示的颜色。

Raycast Target：射线投射目标
当前游戏物体是否接受射线，如果取消勾选，射线将会直接穿透该物体，勾选则
会阻挡射线。
备注：UGUI 的 UI 交互，是系统以鼠标点击位置发射射线与 UI 进行交互的。

----------------------------------------------------------------------UGUI组件之Image图片--------------------------------------------------------------------

一.Image 基本使用

①.Image 使用演示
Image 组件是用于显示图片资源的。
使用方式有两种：1.显示纯粹的颜色；2.指定图片源，用于显示图片。
注意事项：导入 Unity 内的图片资源，如果是用于 UI 显示的，需要手动将这些
图片的类型修改为Sprite(2D and UI)【见图】