Unity之2DUI和3DUI混合开发

Unity之2DUI和3DUI混合开发

一、项目需求

为了增加UI效果打算在2DUI上嵌入3D模型，以增加立体效果。

内容来自：休闲社交游戏-淘金城堡课程

课程地址：Unity中文课堂 https://learn.u3d.cn/tutorial/xiu-xian-she-jiao-you-xi-tao-jin-cheng-bao

1、基础知识：

首先看下基本概念：

（1）画布 (Canvas) ：（来自官方）

画布 (Canvas) 是应该容纳所有 UI 元素的区域。画布是一种带有画布组件的游戏对象，所有 UI 元素都必须是此类画布的子项。

创建新的 UI 元素（如使用菜单 GameObject > UI > Image 创建图像）时，如果场景中还没有画布，则会自动创建画布。UI 元素将创建为此画布的子项。

画布区域在 Scene 视图中显示为矩形。这样可以轻松定位 UI 元素，而无需始终显示 Game 视图。

画布 使用 EventSystem 对象来协助消息系统。

绘制元素的顺序

画布中的 UI 元素按照它们在 Hierarchy 中显示的顺序绘制。首先绘制第一个子项，然后绘制第二个子项，依此类推。如果两个 UI 元素重叠，则后一个元素将显示在前一个元素之上。

要更改元素的显示顺序，只需在 Hierarchy 中拖动元素进行重新排序。也可以通过在变换组件上使用以下方法从脚本控制顺序：SetAsFirstSibling、SetAsLastSibling 和 SetSiblingIndex。

渲染模式

画布具有__渲染模式 (Render Mode)__ 设置，可用于在屏幕空间或世界空间中进行渲染。

Screen Space - Overlay

此渲染模式将 UI 元素放置于在场景之上渲染的屏幕上。如果调整屏幕大小或更改分辨率，则画布将自动更改大小来适应此情况。

Screen Space Overlay 画布中的 UI

Screen Space - Camera

此渲染模式类似于 __Screen Space - Overlay__，但在此模式下，画布放置在指定__摄像机__前面的给定距离处。UI 元素由此摄像机渲染，这意味着摄像机设置会影响 UI 的外观。如果摄像机设置为__正交视图__，则 UI 元素将以透视图渲染，透视失真量可由摄像机__视野__控制。如果调整屏幕大小、更改分辨率或摄像机视锥体发生改变，则画布也将自动更改大小来适应此情况。

Screen Space Camera 画布中的 UI

World Space

在此渲染模式下，画布的行为与场景中的所有其他对象相同。画布大小可用矩形变换进行手动设置，而 UI 元素将基于 3D 位置在场景中的其他对象前面或后面渲染。此模式对于要成为世界一部分的 UI 非常有用。这种界面也称为“叙事界面”。

World Space 画布中的 UI

1. 第一种解决方案：渲染到纹理-Render Texture

（1）首先看下概念：

渲染纹理（来自官方）：是一种 Unity 在运行时创建和更新的纹理。要使用渲染纹理，请使用 Assets > Create > Render Texture 创建一个新的渲染纹理，并将其分配给 Camera 组件中的 Target Texture。然后，即可像使用常规纹理一样在__材质__中使用渲染纹理。

（2）具体步骤：

1. 使用 Assets > Create > Render Texture 创建新的渲染纹理资源。

我们建立了rendertexture起名为“RenderText1”，如下

    2.使用 GameObject > Camera 在场景中创建新的摄像机。

    3.将渲染纹理分配给新摄像机的 Target Texture。

选择摄像机，将新建的“RenderText1”拖动到新建的camera的“TargetTexure”，如下

（4）选择 GameObject > 3D Object > Cube 来创建新的 3D 立方体。

（5）将渲染纹理拖动到立方体上以创建使用该渲染纹理的材质。如下图

(6) 然后将摄像机移动到刚才建立的“3D 立方体”模型上，如下图 (7)进入运行模式 (Play Mode)或直接切换到”Game”视图，观察立方体的纹理是否会根据新摄像机的输出情况实时更新。如下图

1. 第二方法：建立一个新的Canvas，将需要的3D模型放到上面

这也是我最终使用到的方法，因为我有大量的3D模型要混合到UI上，我不想建立太多的camera。

基本概念是建立两个canvas，一个是放置UI，一个是放置3D模型，并且两个canvas的“RenderMode”都设置为“Screen Space Camera”，并且“Render Camera”都设置为同一个“Camera”。具体如下

1. 建立两个canvas和一个camera，我的游戏的canvas是随着屏幕大小缩放的，如下图

（2）2DUI和3DUI的前后显示设置

通常的做法是直接修改Canvas的“Plane Distance”属性值，但我的3DUI的一部分模型是显示在2DUI的后面，一部分显示在2DUI的前面，我的做法是直接修改模型坐标的”Z”值，如下图陨石显示在UI的后面

角色显示在2DUI的前面（通过修改Z坐标的方式），如下图

1. 然后是点击交互的问题

这部分在我的游戏中没有涉及到，所以没有处理。但大概的处理方式为：使用函数EventSystem.current.IsPointerOverGameObject() 来判断当前鼠标是否点在 ui 上，如果是则返回true 否则返回false。示例代码如下

当点击模型时加入以下的函数回调判断

public void OnMouseDown()

{

    if (EventSystem.current.IsPointerOverGameObject())

    {

     Debug.Log("鼠标点击到了UI，我们返回");

        return;

    }

//我们点击到了模型，处理模型点击事件

}