Unity-UI（UGUI详解）02.1 Canvas组件、Visual组件

Canvas Components

Canvas

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

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 Scaler

此组件用于控制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：

Canvas Group

此组件用来控制一组的UI元素，不需要单独的处理他们，此组件也影响其子物体 Properties： Alpha：此值从0到1，控制canvas及其下面全部子物体的alpha interact able：决定组件是否可以被继承 Block Ray casts：此组件对Raycasts来说是否可以被视为collider Ignore Parent Groups：是否受到父物体的CanvasGroup组件的影响，或者忽略他们

通常使用情况：

• 实现淡入淡出窗口的效果
• 使整个控件不可用（置灰），通过给父物体添加CanvasGroup并设置Interactable属性为false
• 设置一些UI元素不能通过鼠标点击事件通过此组件或者设置他们的父物体的Block Raycasts属性。

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

Visual Components（可视化组件）

Text：

图片.png

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：

• See the Effects page for how to apply a simple shadow or outline effect to the text.

Image

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

图片.png

Properties ： Source Image：要现实的贴图 Color：要应用到图片上的颜色 Material：渲染图片的材质 Ray cast Target：可以被射线检测 Preserve Aspect：图片保留原始维度 Set Native Size：设置图片的维度到原始图片的像素大小

Raw Image

Raw Image可以显示任何类型的贴图 Property： Texture：组件要显示的贴图 Color： Material： UV Rectangle：图片的偏移和大小

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

Mask：

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

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

图片.png

图片.png

实现基于GPU的模板缓冲

RectMask2D

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

• 只能在2D空间下
• 不能正确的显示非共面元素

RectMask2D的优势：

• 它不使用模板缓冲
• 没有额外的draw calls
• 没有材质的改变
• 更快的表现

UI Effect Components

1.Shadow 给图片或者文字添加一个阴影效果 Properties： Effect Color：阴影颜色 Effect Distance：阴影距离 Use Graphic Alpha：混合图像和效果的颜色

2.OutLine 给文字或者图片添加描边效果。 Properties： Effect Color： Effect Distance： Use Graphic Alpha：

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