Unity3d中UGUI组件精简复盘Canvas及其相关组件

Posted 2021-06-26 ProMer_Wang

一、 Canvas组件

上一节，我们简单概括了Unity3D编辑器中RectTransform的相关属性简要介绍。具体详情链接为：Unity3d中UGUI组件精简复盘（一）RectTransform组件

1.canvas的三种渲染模式

所有的UI元素只有在Canvas下才能够正常显示

• Screen Space - Overlay：UI元素始终在3D物体之上的

即便添加了一个Cube调至摄像机面前，Canvas一样在最上层显示

• Screen Space - Camera：与摄像机关联，3D物体可以遮挡UI

当我们将摄像机拖至Render Camera

此时的Canvas的位置会跟摄像机的位置关联，画布的位置会调整是摄像机的渲染切面上。此时Canvas的位置可以通过调节Plane Distance的距离来实现。

• World Space：整个Canvas会作为一个3D物体来进行调节

可以对Canvas的位置进行调节，即属性位置可以进行调节

注意： Screen Space - Overlay模式与Screen Space - Camera模式下特有的属性：Pixel Perfect

• Pixel Perfect：是否为了准确显示图片的像素关闭抗锯齿

例如：做了抗锯齿处理后，可能100像素的图片会被处理为101像素

如果有的图片要求特别高，需要关闭抗锯齿，此时勾选Pixel Perfect

• Target Display：根据组件设置的Display 可以在Game中单独进行显示
  我们可以通过设置不同的DisPlay从而实现摄像机Game中显示的效果不同。
  具体如图：

二、UI单位和像素的对应关系

上面讲到讲到抗锯齿处理中，提及到了像素，这就不得不提一嘴UI单位与像素之间的对应关系了。首先我们了解一下Canvas Sacaler组件下的属性。

Canvas Sacaler组件：
作用：控制界面的缩放，即控制的所有UI元素的缩放和像素，但不会直接作用于字体的大小或者图片的尺寸

• Scale Factor： 调节缩放变量

假设 将Canvas下的Canvas Scacaler组件下的Scale Factor属性 设为0.5，渲染效果会缩放为原来的0.5倍，但是Image的图片大小（width、height）不会发生实际的改变。

• Reference Pixels Per： 1Unity单位对应b个像素

• Pixels Per Unity： 多少像素对应1Unity单位

例如图：

<该素材图片来自于网上>

三、Canvas Scaler下的三种适配方案

1. ConstantPixelSize模式下的UI适配

• ConstantPixelSize：显示屏幕会根据屏幕的大小来自动变，但是UI的元素的大小是不会变的

这种情况下，会出现以下情况，当在1920*1080尺寸下，UI布局如果为这样

在不进行适配调整的情况下，当尺寸调整为1080*720，UI布局效果如下：

会出现上面的白色面板 遮挡住了中心的 棕色面板，因此需要进行适配

UI适配的方法，就是通过Canvas里的Scale Factor 来进行控制，因为constant Pixel Size 模式下，显示屏幕会根据屏幕的大小来实现自动适配。

因此，我们可以通过代码控制Canvas Scaler 里的Scale Factor 来进行实现：

eg.TestConstantScaler

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class TestConstantScaler: MonoBehaviour {

	// Use this for initialization
	void Start () {
        float wScale = Screen.width / 1920.0f;
        float hScale = Screen.height / 1080.0f;
        //第一种模式下进行的UI适配的操作
        GetComponent<CanvasScaler>().scaleFactor = wScale;
	}

}

运行过程呢，当获取到当前屏幕为1080*720时，则会计算出相应的缩放比，赋值给sacleFactor，从而实现跟1920 *1080一样的UI布局效果。

_{说到这就不得不提一嘴博主工作中的经历，起初博主在工作期间，也是第一次遇到关于屏幕分辨率适配的问题。当时博主也觉得这个问题就是一个适配问题，思路很明确，获取分辨率->每次重启游戏根据分辨率动态计算->调整位置。但是由于之前并没有去实践过，导致在一个简单的问题上卡很久。当然，一般来说，项目组针对于分辨率的适配，一般早已在框架中写有，参考调用即可。}

因此，仅仅通过对组件属性注解的几篇文章想要学好unity基本是不可能的。更多的还是要通过具体实践、广泛应用才能孰能生巧。

_{如果看到这，已经觉得很吃力了，建议先去了解和简单学习Unity的基本使用，不必在组件的注解上深究与组件属性。博主之所以将属性注解通过图片展示效果，一方面，是简要注解属性，另一方面，更是找到我们自以为知道但是实则不了解的组件属性的作用与。这些内容也是通过网络学习，只是博主更愿意把它总结下来，这样的话，就能做到针对某个组件更加的有目的性！}

2. ScreenWithScreen Size模式下的UI适配

通过控制Reference Resolution 来进行调整UI

• Match Width Or Height：适应你的宽或者高，Match一般设置为0.5

• Expand：Canvas会进行放大，即画布的大小最小也不会低于原来我们设置的1080*720

• Shrink：Canvas会被缩放，即画布的大小最大也不会超过原来我们设置的1920*1080

3. ConstantPhysicalSize模式下的UI适配

根据物理大小来调整进行适配

• Physical Unit

• Centimeters: 厘米

• Milimeters: 分米

• Inches： 英尺

• Point： 点

• Picas： 派卡

我们一般用到Point这个属性，Point指构成显示屏的点的数目

• Fallback Screen DPI： 对应物理单位的像素密度

• Default Sprite DPI： 默认精灵的像素密度

• Reference Pixels Per： 每个unity单位对应的像素数
  
  

四、Graphic RayCaster组件

该组件针对的是UI作用的，用于管理图片射线响应的一个组件，关闭该组件时，UI元素则得不到射线响应

属性：

• Ignore Reversed Graphics： 勾选，翻转的图片无法响应射线，不勾选，翻转的图片一样可以响应射线

• Blocking Objects： 决定什么物体能够遮挡射线

  1.None： 判定没有遮挡
  2.Two D： 2D物体可以遮挡射线
  3.Three D： 3D物体可以遮挡射线
  4.All： 所有物体只要在摄像机前，都可遮挡射线

判定原则：根据碰撞体来进行判定

Blocking Mask决定什么层级能够遮挡射线，只有选中的层级才能对射线进行阻挡

五、Canvas Group组件

属性：

Alpha： 透明通道，对Canvas下的所以子物体都可以通过该组件下的Alpha来统一进行管理，例如需求：有几个图片，放在一起，希望这几张图片同时变透明

Interactable： 它所管理的元素是否能够接收图形射线的检测

Ignore Parent Groups： 当前的Group是否受父级Group的影响

以上呢，便是我对Canvas及其相关组件作出的简要的描述，希望能够对你有所帮助~ 也希望能获得你们的关注、点赞、评论吖~
你们的点赞、评论就是我前进的动力！

作者：ProMer_Wang

链接：https://blog.csdn.net/qq_43801020/article/details/117611758

本文为ProMer_Wang的原创文章，著作权归作者所有，转载请注明原文出处，欢迎转载！