UGUI笔记2-Image、RawImage和Text控件

Image控件是用来显示一张的，sprite类型的

CanvasRenderer：负责UI元素的渲染，所有UI控件都需要一个CanvasRenderer，它继承自Componet

SpriteRenderer（渲染sprite用的）、MeshRenderer（渲染三维物体用的）、SkinnedMeshRenderer（渲染蒙皮的物体），它们都继承自Renderer负责渲染的

SourceImage： 是你要显示的，下面的有一个对应的 Set Native Size按钮 ，有可能会被拉伸，按这个按钮可以让Image控件的宽高设置为和原始的宽高一样，

Material： 材质，当我们需要一些比较高级的效果，比如你要为这张编写自己的shader的时候，才会用到材质

ImageType: 表示展示的类型，默认是Simple，就是正常显示，对应一个Preserve Aspect选项，意思是，是否保持比例（宽高比）， 在屏幕适配的时候，有可能会拉伸，这时候为了不让失真，一般会勾选这个选项

1引入命名空间

using UnityEngineUI

2获取组件

Image image = GetComponent<Image>();

3改变属性

imagesprite = xxx;

RawImage控件也是用来显示一张的，但是显示的是Texture类型的

用于显示文本，这个和一些应用里面的字体差不多，没什么好说的

Line Spacing：行距

Rich Text：是否使用富文本，就是会检测到尖括号

Best Fit：根据Text控件的大小来显示合适的字体大小，字体大小会受控件大小的限制，即文本会完整显示

总结：

1、NGUI与UGUI的区别

2、uGUI的Canvas 有世界坐标和屏幕坐标

3、uGUI的Image可以使用material

4、UGUI通过Mask来裁剪，而NGUI通过Panel的Clip

5、NGUI的渲染前后顺序是通过Widget的Depth，而UGUI渲染顺序根据Hierarchy的顺序，越下面渲染在顶层

6、UGUI 不需要绑定Colliders，UI可以自动拦截事件

7、UGUI的Anchor是相对父对象，没有提供高级选项，个人感觉uGUI的Anchor *** 作起来比NGUI更方便

8、UGUI没有Atlas一说，使用Sprite Packer

9、UGUI的Navigation在Scene中能可视化

10、UGUI的事件需要实现事件系统的接口，但写起来也算简单

2各自的优缺点

1) NGUI还保留着图集，需要进行图集的维护。而UGUI没有图集的概念，可以充分利用资源，避免重复资  源。

2) UGUI出现了锚点的概念，更方便屏幕自适应。

3) NGUI支持图文混排，UGUI暂未发现支持此功能。

4) UGUI没有 UIWrap 来循环 scrollview 内容。

5) UGUI暂时没有Tween组件。

3使用选择总结

UGUI由于是Unity原生支持的，所以使用上会更加的人性化。并且伴随着版本升级功能会越来越强，逐渐将成为主流ui方案。NGUI是UGUI出现之前的产物，通过MeshRenderer来实现类似CanvasRenderer的功能，概念上有点蹩脚。作为一个插件虽然已最大努力让UI开发工作变得简单，但相比能够让UnityEditor做出相应修改的UGUI（如RectTransform的出现），其易用性是没法比的。综合来说，新的项目建议使用UGUI，学习成本不高，工具流更有助于提高开发效率。

自学备用，如有问题欢迎及时指正，我会尽快改正。

（版本unity 201829f1）

本篇记录 Unity UGUI canvas 中的各项参数设置和效果，还是那句话自学备用，如有问题欢迎指正，我会尽快改正。

新建的Canvas拥有Rect Transform，Canvas，Canvas Scaler 以及 Graphic Raycaster 这几个组件。Rect Transform此时为灰色，在Scene视图中不能对Canvas进行 *** 作。Rect Transform 下一行英文“Some values driven by Canvas” ——Canvas驱动一些值。

此设置时，Canvas会填满整个屏幕，并将Canvas下面所有的UI元素置于屏幕的最上层，Canvas将一直覆盖场景中普通的3D GameObject。

启用pixelPerfect可以使元素看起来更清晰并防止模糊。勾选不启用抗锯齿（还在实验中，暂无截图）。

Canvas深度，数值越大，显示的优先级就越高，也就是数值大的Canvas会遮挡住数值小的Canvas。

此设置使Canvas渲染到指定的显示中。支持的辅助显示器（例如监视器）的最大数量为8。

最新几个版本中拥有的特性，提供给Shader使用的参数。此处不太了解。

启用pixelPerfect可以使元素看起来更清晰并防止模糊。勾选不启用抗锯齿（还在实验中，暂无截图）。

指定Canvas渲染在哪一个摄像机上

当Camera的Projection为Orthograhic时，此值得改变仅仅会改变Canvas的Pos Z；

当Camera的Projection为Perspective时，此值得不仅会改变Canvas的Pos Z，还会影响Scale。

当Plane Distance等于Camera的Clipping Planes的Near时 ，相当于Render Mode 是 Screen Space-Overlay 的效果，当Plane Distance等于Camera的Clipping Planes的Far时，Canvas在所有物体的后面。

Sorting Layer，可为UGUI设置画布深度，在下拉菜单中点击“Add Sorting Layer”按钮进入标签和层的设置界面，或者点击导航菜单->edit->Project Settings->Tags and Layers进入该页面。可以点击“+”添加Layer，或者点击“-”删除Layer。画布所使用的Sorting Layer越排在下面，显示的优先级也就越高。

在相同的Layer中区别显示层级关系的设定，相同的Layer中Order in Layer 越高，显示的优先级也就越高。

World Space即世界控件模式。在此模式下，Canvas被视为与场景中其他普通游戏对象性质相同的类似于一张面片（Plane）的游戏物体。在此模式下我们可以手动设置RectTransform数值，来改变Canvas在世界中的位置选择大小等。当所用UI为场景中的一部分时，我们可以使用这种模式。

此处在我使用时World Space模式下，Event Camera为空也可以执行按钮点击事件，摸索中~~~~~

不断学习中。整理出来忘记时看看，有错误的地方感谢指出。

我们在Unity创建一个Canvas游戏对象,会默认添加Canvas,CanvasScaler,GraphicRaycaster这三个组件，下面会详细介绍一下各个组件的作用。

Canvas 组件是UI布局和渲染的抽象空间，所有的UI都必须在此元素之下(子物件)，简单来说 Canvas 就是渲染 UI 的组件。

UI渲染的方式（Render Mode），有以下三种

GraphicRaycaster会观察 Canvas下所有图形，并检测是否被击中，射线检测其实就是指定位置与方向后，投射一条隐形线并判断是否有碰撞体在线上，用于判断是否点选到UI上。

举例：如果画面上有一个 Button 与 Cube 位置故意重叠，现在点击重叠之处会发现 Button 还是会被触发。

Blocked Objects 设定为 Three D，再次点选重叠区域，会发现 Cube 会阻碍射线检测，此时按钮不会有反应

Canvas Scaler是Unity UI系统中，控制UI元素大小和像素密度的组件，Canvas Scaler的缩放比例影响Canvas下的元素，包含字体大小和图像边界。

可以看出，Canvas Scaler 通过设置Canvas下的Scale Factor，缩放所有在此Canvas下的元素

Canvas Size 始终等于 Screen Size，通过Scale Factor直接缩放所有UI元素

介绍Reference Pixels Per Unit之前需要先介绍设置中的Pixels Per Unit(表示一张Sprite，在世界坐标中一单位由几个Pixel组成）

这里使用的测试为原始尺寸100100 的

由此可以推导出公式： Sprite 在世界坐标中大小 = 原图大小(Pixels) / Pixels Per Unit

让我们回到 Reference Pixels Per Unit，官方解释是，如果有设置Pixels Per Unit，则会将Sprite 的 1 pixel 转换成 UI 中的 1 pixel，下面将以Image源码说明：

可以看出 Image 通过过 spritePixelsPerUnit / referencePixelsPerUnit 方式算出新的 pixelsPerUnit

在设定 Image 大小时，是把 Sprite宽高 / pixelsPerUnit

由此可以推导出公式： UI大小 = 原图大小(Pixels) / (Pixels Per Unit / Reference Pixels Per Unit)

或者 UI大小 = Sprite 在世界坐标中大小 Reference Pixels Per Unit

通过设定的Reference Resolution(预设屏幕大小)来缩放

分别对ScaleFactor Width、Height取对数后，再进行平均混合，那为什麽不直接使用Match对Width、Height进行混合呢让我们来比较一下

完整源码算法：

通过硬体设备的Dpi(Dots Per Inch 每英吋点数)，进行缩放

Canvas组件代表UI被放置和渲染的虚拟空间。全部的UI元素必须是带有Canvas组件的Gameobject的子物体。当我们创建一个UI元素从菜单的时候，如果场景中没有canvas，将自动创建一个canvas

元素的渲染顺序：

元素的渲染顺序和元素在Hierarchy中显示的一样，第一个子节点先渲染，后面的后渲染。如果两个UI元素重叠，后面渲染的会覆盖前面渲染的。

RenderMode（渲染模式）：

UI渲染到场景的方式

Screen Space-Overlay，Screen Space-Camera 和 World Space

一个Canvas包括全部UIElements将是高效的，但是场景中有多个Canvases也是可能的。在Canvas中嵌套Canvas也是可能的，为了优化的目的嵌套Canvas将使用和父Canvas相同的渲染模式。

Screen Space-Overlay：

在这种模式下，Canvas大小适配之后直接渲染，不通过关联到场景或者摄像机。如果屏幕的大小变化UI将自动匹配大小。UI将覆盖其他图像比如摄像机视图。

Note：

The Screen Space-Overlay canvas需要放置在hierarchy的最上层。这是一种build-in limitation。保证Space-Overlay canvas可以正常显示

Screen Space-Camera：

在这种模式下，Canvas呈现方式好像它是在摄像机前一定距离的平面对象上绘制的一样。UI在屏幕上的大小不随着距离的变化而变化，如果屏幕大小或者分辨率变化UI将自动适应。任何3D objects在场景中相比UI plane到摄像机的距离更近，将渲染到UI的前面。

World Space：

这个模式下作为场景中的一个元素。不同于Screen Space-Camera，plane不需要朝向camera，canvas的大小将由视角和到摄像机的距离来决定，其他场景中的物体可以穿过canvas

此组件用于控制canvas种全部的UI元素的大小。这个设置将影响canvas下的全部物体。

Properties：

UI Scale Mode：

决定UI元素的大小在canvas中是由什么决定的：

Constant Pixel Size（固定大小，不随屏幕大小变化）

Scale With Screen Size （随着屏幕大小的变化而进行变化）

Constant Physical Size（保持物理大小，不随屏幕大小和分辨率变化）

在Constant Pixel Size模式下进行设置：

Scale Factor：设置canvas下全部的UI元素的大小

Reference Pixels Per Unit：像素与单位的对应关系

在Scale With Screen Size下进行设置：

Reference Resolution ： UI 布局的分辨率，这个分辨率将随着屏幕分辨率进行变化

Screen Match Mode：如果当前分辨率的纵横比不适合参考分辨率，则用于缩放画布区域的模式

Match Width or Height Scale the canvas area with the width as reference, the height as reference, or something in between

Expand Expand the canvas area either horizontally or vertically, so the size of the canvas will never be smaller than the reference

Shrink Crop the canvas area either horizontally or vertically, so the size of the canvas will never be larger than the reference

Match：决定缩放的时候宽还是高作为引用

在Constant Physical Size下进行设置：

Physical Unit：设置物理单元的位置和尺寸。

Fallback Screen DPI：

Default Sprite DPI：

Reference Pixels Per Unit：

此组件用来控制一组的UI元素，不需要单独的处理他们，此组件也影响其子物体

Properties：

Alpha：此值从0到1，控制canvas及其下面全部子物体的alpha

interact able：决定组件是否可以被继承

Block Ray casts：此组件对Raycasts来说是否可以被视为collider

Ignore Parent Groups：是否受到父物体的CanvasGroup组件的影响，或者忽略他们

通常使用情况：

Canvas Renderer

此组件呈现包含图形化UI元素的对象

Property：

Text：组件显示的文本

Character：

Font：字体大小

Font Style：字体样式

Font Size：字体大小

Line Spacing：行间距

Rich Text：markup elements在text中是否支持

Paragraph：

Alignment：对齐方式

Align By Geometry：使用字形几何范围执行水平对齐，而不是字形度量

Horizontal Overflow：字体超出范围的解决方式

Vertical Overflow：字体太高超出范围的解决方式

Best Fit：Unity是否直接忽视大小属性，直接根据文本的大小匹配控件

Color：text的颜色

Material：渲染字体的材质

Hints：

Image控件显示的为Sprite类型，Raw Image可以接受任何类型的纹理

Properties ：

Source Image：要现实的贴图

Color：要应用到上的颜色

Material：渲染的材质

Ray cast Target：可以被射线检测

Preserve Aspect：保留原始维度

Set Native Size：设置的维度到原始的像素大小

Raw Image可以显示任何类型的贴图

Property：

Texture：组件要显示的贴图

Color：

Material：

UV Rectangle：的偏移和大小

Details：通过修改UV Rectangle属性，可以缩放

此组件用来控制子控件的显示效果。mask将限制子元素的大小。如果子元素的大小比父元素大，将显示比父元素小的部分。

通常使用流程：

创建一个Panel对象，将需要显示的对象全部放到Panel对象下，给Panel添加一个Mask组件，全部的子物体只能显示在Panel范围内的部分

实现基于GPU的模板缓冲

对于大的区域显示很小的一部分使用RectMask2D。

RectMask2D的限制：

RectMask2D的优势：

1Shadow

给或者文字添加一个阴影效果

Properties：

Effect Color：阴影颜色

Effect Distance：阴影距离

Use Graphic Alpha：混合图像和效果的颜色

2OutLine

给文字或者添加描边效果。

Properties：

Effect Color：

Effect Distance：

Use Graphic Alpha：

3Position as UV1

添加一个简单的位置作为UV1效果给文本和图像

使用 RectTransformUtilityScreenPointToLocalPointInRectangle 方法。

public Vector2 CurrMousePosition(Transform thisTrans)

{

Vector2 vecMouse;

RectTransform parentRectTrans = thisTransparentGetComponent<RectTransform>();

RectTransformUtilityScreenPointToLocalPointInRectangle(parentRectTrans, InputmousePosition, UICamera, out vecMouse);

return vecMouse;

}

Unity  是实时3D互动内容创作和运营平台 。包括游戏开发、美术、建筑、汽车设计、影视在内的所有创作者，借助Unity将创意变成现实。 Unity平台提供一整套完善的软件解决方案，可用于创作、运营和变现任何实时互动的2D和3D内容，支持平台包括手机、平板电脑、PC、游戏主机、增强现实和虚拟现实设备。

以上就是关于UGUI笔记2-Image、RawImage和Text控件全部的内容，包括:UGUI笔记2-Image、RawImage和Text控件、NGUI与UGUI的区别、Unity UGUI Canvas简谈等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！