什么是 UGUI

UGUI 是 Unity 自带的一套 GUI 系统，含有基本的一些 UI 控件。


UGUI 控件有哪些？

我们常用的有 Canvas，Text，Image，Button，Toggle，Slider，Scroll Bar，Scroll View，Input Field。


怎样新建 UI 控件

 

在 Hierarchy 中右键添加

 

在菜单栏的 Component 中添加

Canvas

Canvas 是所有 UI 控件的根节点，即所有 UI 控件均需要在 Canvas 下。


 

上图所示即一个 Canvas 包含了多个 UI 控件。

Text

用来显示文本的。




Text：即显示的文本内容。

Font：文字的字体。

Font Style：字体的形式，有正常，加粗，斜体，加粗斜体几种可选。

Font Size：字体的大小。

Line Spacing：行间距。

Rich Text：是否支持富文本。

Alignment：对齐方式。

Align By Geometry：几何对齐

Horizontal Overflow：横向裁剪方式。
Wrap：裁剪
Overflow：不裁剪

Vertical Overflow：竖向裁剪方式。
Truecate：裁剪 
Overflow：不裁减

Best Fit：是否最佳适应当前大小。

Color：字体的颜色。

Material：字体的材质。

Raycast Target：是否可被点击到。

Image

用来显示图片的。




Source Image：显示的源图片。

Color：给图片叠加的颜色。

Material：图片的材质。

Raycast Target：是否可被点击到。

Image Type：图片的类型。

Simple：普通类型


Preserve Aspect：是否保持图片的外形比例
Set Native Size：设置为图片的原大小

Sliced：九宫格


Fill Center：是否填充中间部分

Tiled：平铺


Fill Center：是否填充中间部分

Filled：填充



Fill Method：
Horizontal：横向填充
Vertical：纵向填充
Radial 360：360 度填充
Radial 180：180 度填充
Radial 90：90 度填充

Fill Origin：填充起点
Fill Amount：填充量
Clockwise：是否按时钟方向
Preserve Aspect：是否保持图片的外形比例
Set Native Size：设置为图片的原大小

Button

游戏中使用的按钮。




 

上图展示了按钮一般由图片和文字组成



Interactable：按钮当前是否激活可用

Transition：过渡方式

Color Tint：颜色过渡.

Target Graphic：控制颜色的对象
Normal Color：正常时的颜色
Highlighted Color：悬浮高亮时的颜色
Pressed Color：点击按下时的颜色
Disabled Color：禁止不可用时的颜色
Color Mutiplier：颜色乘数
Fade Duration：渐变过渡时间

Sprite Swap：图片过渡

Target Graphic：控制变化图片的对象
Highlighted Sprite：悬浮高亮时的图片
Pressed Sprite：点击按下时的图片
Disabled Sprite：禁止不可用时的图片

Animation：动画过渡

Normal Trigger：正常时的动画触发
Highlighted Trigger：悬浮高亮时的动画触发
Pressed Trigger：点击按下时的动画触发
Disabled Trigger：禁止不可用时的动画触发
Auto Generate Animation：自动生成动画

Navigation：导航方式
None：无
Horizontal：横向
Vertical：纵向
Automatic：自动
Explicit：自定义

Visualize：导航线是否可见

Toggle

开关，适用于单选或者复选或者控制其他控件的显示或隐藏。


 

上图显示一个 Toggle 一般由底图，文本和一个是否选中的图片组成。



大部分类似于 Button。
Is on：是否默认处于打开状态

Toggle Transtion：开关过渡方式
Fade：渐变过渡
None：无

Graphic：开关控制的对象
Group：所属于的 Toggle Group。（所属同一个 Toggle Group 的可以存在互斥状态）

Slider

滑杆。


 

上图所示一个滑杆由背景，滑杆进度，滑块三部分组成。



大部分类似于 Button。

Fill Rect：填充的对象

Handle Rect：滑杆对象

Direction：滑动的方向
Left to Right：由左往右
Right to Left：由右往左
Bottom to Up：由下往上
Up to Bottom：由上往下

Min Value：最小值

Max Value：最大值

Whole Numbers：是否只允许整数进度值

Value：当前值

Scroll Bar

滚动条。


 

上图所示滚动条由背景和滑块组成。



大部分类似于 Slider。

Size：滑块的比例大小

Number of Steps：进度的块数

Scroll View

滚动区域。


 

上图所示滚动区域由背景，遮罩和显示内容组成。



Content：显示的内容框

Horizontal：是否可以横向滚动

Vertical：是否可以纵向滚动

Movement Type：
Unrestricted：无限制的滚动，无回滚
Elastic：有限制的滚动，有回滚
Elasticity：回滚系数，数值越大弹性越小
Clamped：有限制的回滚，无回滚

Inertia：惯性
Deceleration Rate：减速率

Scroll Sensitivity：滚动灵敏度

Viewport：可视区域

Horizontal Scrollbar：横向滚动控制条

Vertical Scrollbar：纵向滚动控制条

Input Field

输入框。


 

上图所示输入框由背景，默认文本和输入文本组成。



大部分类似于Button。

Text Component：输入文本组件

Text：文本内容

Character Limit：限制字符长度 (0 表示不限制)

Content Type：验证输入类型
Standard：标准
Autocorrented：自动修正
Integer Number：整数
Decimal Number：可带小数
Alphanumeric：数字和字母混合
Name：字母
Email Address：邮箱
Password：密码
Pin：数字密码
Custom：自定义

Placeholder：最初显示文本

Caret Blink Rate：光标闪动速率

Caret Width：光标宽度

Custom Caret Color：光标颜色

Selection Color：被选中部分颜色

Hide Mobile Input：是否隐藏手机输入

Read Only：是否只读

简单的控件组合



 

其中包含了常用的基本控件组合。

滚动窗口的实现


image 加 scroll rect 、mask 组件
image子物体 panel  长度要超出image
panel里可以加grid layout group 组件 


over

1.下载UGUI源码

unity在bitbucket上开源了各个unity版本的UI源码，地址是:https://bitbucket.org/Unity-Technologies/ui/downloads?tab=tags

UnityEditor.UI文件夹是UGUI的编辑器实现类，因为Unity中规定编辑器实现类必须以Editor命名，所以要将UnityEditor.UI改名为Editor。

UGUI综合
##1、UGUI背包系统
++1.1、UGUI背包系统
++++1、UGUI应用最多的地方就是背包系统，其综合性比较强，背包系统做好了，其移植和重用性都比较好。
++++2、背包里面最重要的功能是鼠标拖动物品应用到角色身上，以及物品与物品之间的交换。
++++3、UGUI在游戏中实现“商店”方面用得也比较多。

++1.2、UI层级结构
++++UI层级：
--Knapsack背包使用网格布局。
--item用来存放物品，通过鼠标拖动，改变其父物体和位置。
--cell是Image控件，作为物品的父物体，用于交换和移动物品。
--Mall商城，可以上下滑动。
--Equip，所有的物品通过脚本加载。

++1.3、Canvas Group的作用
++++当一个控件盖到另外一个控件上的时候，下面的控件默认是不检测的，为了可以透过当前控件检测到下面的控件，可以给该组件添加CanvasGroup组件。
++++其属性BlocksRaycasts设置为false时表示可以穿透该控件检测到下面的控件，如果为true表示不能穿透，下方的控件检测不到。

##2、UGUI小地图
++2.1、UGUI实现小地图效果
++++1、使用另外一个摄像机渲染整个场景，得到摄像机渲染的纹理；
++++2、设置摄像机的Culling Mask渲染不同的层。
++++3、创建RawImage控件并加上纹理并进行圆形遮罩；

++2.2、小地图制作过程
++++1、制作过程一：
--Player 玩家对象
--主摄像机： 渲染场景和Player。（渲染除mask层的游戏物体）
--地图相机： 渲染场景和Player上的Mark。（渲染除player层的游戏物体）
--Mark：小地图中人物的标记。（设置Player所在的层）
++思考：
  --1、如何将游戏物体的阴影隐藏？
  --2、相机的Depth（深度）的作用？

++++2、小地图制作过程二：
--将渲染小地图相机的深度值修改比主相机的小。
--在Assets文件夹中创建RenderTexture。
--指定Map Camera中的Target Texture为刚刚创建的MiniMapTexture，MiniMap Texture接收Map Camera渲染的画面。

++++3、小地图制作过程三
--背景图片
--添加遮罩组件
--把MapCamera摄像机渲染的图片拖到此位置，显示到UI上。

##3、Application类，SceneManager
++3.1、应用程序简介
++++1、应用程序是指为了完成某项或某几项特定任务而被开发运行于操作系统之上的计算机程序。
++++2、应用程序（Application）运行在用户模式，它可以和用户进行交互，具有可视的用户界面。
++++3、工程（Project）是面向开发者的，两者之间是一一对应的。
++3.2、Application类
++++在Unity中，所有与应用程序相关的方法都写在Application类中。
++++主要功能：获取或设置当前应用程序的一些属性。
--加载有关卡场景。
--获取资源文件路径。
--退出当前游戏程序。
--获取当前游戏平台。
--获取数据文件夹路径。
++++Application类常用的变量和方法：
--platform ：返回游戏运行平台。
--runInBackground ：应用程序是否在后台运行。
--dataPath ：游戏数据文件夹的路径。
--persistentDataPath ：一个持久数据目录的路径。
--temporaryCachePath ：临时数据/缓存目录的路径。
--loadedLevel ：加载的关卡（场景）索引。
--OpenURL ：在当前设备中调用浏览器打开网页。
--Quit ：退出应用程序。
++3.3、场景切换
++++同步加载场景的方式分为两种：
--1、读取新关卡后立即切换，其参数为所读取新关卡的名称或索引。
    ---SceneManager.LoadScene(“Scene2”);
--2、加载一个新的场景，当前场景不会被销毁。
    ---SceneManager.LoadScene(“Scene2”, LoadSceneMode.Additive);
++++异步加载场景的方式分为两种：
--1、异步加载新游戏场景，当新场景加载完成后进入新场景并且销毁之前的场景。
    ---SceneManager.LoadSceneAsync(“Scene2”);
--2、同样异步加载新场景，新场景加载完毕后，保留之前场景并且进入新场景。
    ---SceneManager.LoadSceneAsync(“Scene2”, LoadSceneMode.Additive);
++++场景导出：【Assets】=>【Export Package...】
--小贴士： 场景导出的时候会将当前场景用到的所有资源都导出。


++4.4、工程发布



#立钻哥哥Unity 学习空间: http://blog.csdn.net/VRunSoftYanlz/
++立钻哥哥推荐的拓展学习链接（Link_Url）：
++++立钻哥哥Unity 学习空间: http://blog.csdn.net/VRunSoftYanlz/
++++Unity引擎基础：https://blog.csdn.net/vrunsoftyanlz/article/details/78881685
++++Unity面向组件开发：https://blog.csdn.net/vrunsoftyanlz/article/details/78881752
++++Unity物理系统：https://blog.csdn.net/vrunsoftyanlz/article/details/78881879
++++Unity2D平台开发：https://blog.csdn.net/vrunsoftyanlz/article/details/78882034
++++UGUI基础：https://blog.csdn.net/vrunsoftyanlz/article/details/78884693
++++UGUI进阶：https://blog.csdn.net/vrunsoftyanlz/article/details/78884882
++++UGUI综合：https://blog.csdn.net/vrunsoftyanlz/article/details/78885013
++++Unity动画系统基础：https://blog.csdn.net/vrunsoftyanlz/article/details/78886068
++++Unity动画系统进阶：https://blog.csdn.net/vrunsoftyanlz/article/details/78886198
++++Navigation导航系统：https://blog.csdn.net/vrunsoftyanlz/article/details/78886281
++++Unity特效渲染：https://blog.csdn.net/vrunsoftyanlz/article/details/78886403
++++Unity数据存储：https://blog.csdn.net/vrunsoftyanlz/article/details/79251273
++++Unity中Sqlite数据库：https://blog.csdn.net/vrunsoftyanlz/article/details/79254162
++++WWW类和协程：https://blog.csdn.net/vrunsoftyanlz/article/details/79254559
++++Unity网络：https://blog.csdn.net/vrunsoftyanlz/article/details/79254902
++++C#事件：https://blog.csdn.net/vrunsoftyanlz/article/details/78631267
++++C#委托：https://blog.csdn.net/vrunsoftyanlz/article/details/78631183
++++C#集合：https://blog.csdn.net/vrunsoftyanlz/article/details/78631175
++++C#泛型：https://blog.csdn.net/vrunsoftyanlz/article/details/78631141
++++C#接口：https://blog.csdn.net/vrunsoftyanlz/article/details/78631122
++++C#静态类：https://blog.csdn.net/vrunsoftyanlz/article/details/78630979
++++C#中System.String类：https://blog.csdn.net/vrunsoftyanlz/article/details/78630945
++++C#数据类型：https://blog.csdn.net/vrunsoftyanlz/article/details/78630913
++++Unity3D默认的快捷键：https://blog.csdn.net/vrunsoftyanlz/article/details/78630838
++++游戏相关缩写：https://blog.csdn.net/vrunsoftyanlz/article/details/78630687
++++设计模式简单整理：https://blog.csdn.net/vrunsoftyanlz/article/details/79839641
++++U3D小项目参考：https://blog.csdn.net/vrunsoftyanlz/article/details/80141811
++++UML类图：https://blog.csdn.net/vrunsoftyanlz/article/details/80289461
++++Unity知识点0001：https://blog.csdn.net/vrunsoftyanlz/article/details/80302012
++++U3D_Shader编程（第一篇：快速入门篇）：https://blog.csdn.net/vrunsoftyanlz/article/details/80372071
++++U3D_Shader编程（第二篇：基础夯实篇）：https://blog.csdn.net/vrunsoftyanlz/article/details/80372628
++++立钻哥哥Unity 学习空间: http://blog.csdn.net/VRunSoftYanlz/

--_--VRunSoft : Lovezuanzuan--_--