使用Unity做出在固定大小区域显示主摄像机看不到的画面

前言：

​ 这次的标题好长啊。但是我也不知道怎么写这样个标题。最近做项目刚好遇到了这个需求，所以标题就是按照需求写的。这个项目后面转给同事了。不过我觉得这个要求挺有意思的，所有我就做了一个Demo。这篇文章希望能给要做这种要求的你提供一个思路。

项目的要求

​ 这次我做的项目要求我做一面照妖镜。然后角色可以使用这个照妖镜去照射出妖怪的样子。所以我需要在一个固定大小的区域中显示出主摄像机看不到的画面。即玩家操纵一个UI，然后UI里面要显示出主摄像机看不到的画面。（Unity版本2020.3）

主要思路

​ 因为要操作UI去看到不一样的画面。所以我打算直接在UI中实现。我设置一个Raw Image（覆盖全屏）配合Render Texture进行画面的显示。然后用一个mask遮罩将画面超出照妖镜的部分遮盖掉。一开始照妖镜是不显示的，只有玩家操作时照妖镜才会显示出来。

实现

配置

​ 我们设定主摄像机的Culling Mask看不到UI层。自然那些“妖怪”就要是UI层的。具体设置什么为主摄像机不可见由你来决定。然后复制一份主摄像机，设定为副相机。由副相机显示主摄像机看不到的画面，所以设定副相机的Culling Mask为Everything。记得要设置一下相机的Depth值。要让主摄像机的渲染覆盖掉副相机的渲染。接下来我们设定UI。

​ 关于UI。我们要先设定一个Image，大小根据你的要求（我将其设置为w 300，h 300。名为Mirror）。并且我们给其添加Mask组件。然后我们再创建一个Raw Image作为其子物体。Raw Image一定要设置为全覆盖屏幕。最终UI配置如下（我的屏幕设定是1920 x 1080）：

图1

代码部分

​ 我们新建一个脚本，代码内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

namespace ns
{
    public class RenderTextureController : MonoBehaviour
    {
        //所有public的变量都是靠拖拉获取。
        public Camera viewCamera;//副相机
        RenderTexture renderTexture;//给Raw Image的texture
        public RawImage image;
        public Transform view;//Mirror的显示
        private Vector3 pos;//Mirror一开始的位置

        private void Awake()
        {
            //为了配置屏幕，所以RenderTexture要动态创建。
            renderTexture = new RenderTexture(Screen.width, Screen.height, 16, RenderTextureFormat.ARGB32);
            renderTexture.Create();
            //设定Render Texture要设定的相机
            viewCamera.targetTexture = renderTexture;
            //设定Raw Image的Texture
            image.texture = renderTexture;
            //只要角色不操作，镜子默认不显示
            view.gameObject.SetActive(false);
            //获得一开始的镜子坐标
            pos = view.position;
        }

        private void Update()
        {
            //监听角色点击。角色只要有操作就显示镜子
            if(Input.GetMouseButtonDown(0))
            {
                view.gameObject.SetActive(true);
                view.position = new Vector3(Input.mousePosition.x,Input.mousePosition.y,0);
            }
            else if(Input.GetMouseButton(0))
            {
                //照妖镜移动到玩家指定的位置
                view.position = new Vector3(Input.mousePosition.x, Input.mousePosition.y, 0);
            }
            else if(Input.GetMouseButtonUp(0))
            {
                //玩家不操作了，再次隐藏它
                view.gameObject.SetActive(false);
            }
            //防止子物体跟随父物体移动
            view.GetChild(0).position = pos;
        }
    }
}

​ 这样需求就实现了。这里我也只做了一个简单实现。我希望这篇文章能帮助到你。