【Unity3D】利用Shader以及更改Mesh实现2D游戏的动态阴影效果

最近看到一个非常有趣的益智小游戏，是一个盗贼进入房子偷东西的，

其实这种游戏市面上已经很多了，吸引我的是那个类似手电筒的效果，

主角走到哪里，光就到哪里，被挡住的地方还有阴影。有点类似策略游戏里的战争迷雾。

绞尽脑汁想了一天，终于实现类似的效果，这就给大家分享下。

实现这个效果用到的技术：

1.Shader实现摄影机透明穿透效果（光照的实现）

2.代码里动态改变mesh（阴影形状的实现）

废话不多说，动手。

--------------------------------------------------------------------------------------------

仔细观察可以看出，没被光照到的地方是灰色的，照到的地方是彩色的，而且被光照到的地方，

不仅能显示出被光照到后的效果（彩色地面），还能显示出一些物品，比如钥匙，敌人等。

由此可推测，这场景应该是两个层组成的，一个层在下，是彩色地面以及敌人等要隐藏的物品，

另一个层在上，是没有被照亮的时候的地图，然后根据光线进行裁剪，光线能到达的地方，就把

上层该地方裁剪掉，露出底下部分，从而实现“照亮”的效果。

因此我们先按照这种思路搭载场景：

1.题目说的是2D游戏，我这里弄成3D的，其实都所谓，最终的视觉是俯视的，其实也跟2D一样，这里弄成这个角度是方便大家识别我的层次。

Up就是上层，其实什么都没有，就只有一张没被光照的时候的贴图（我这里偷懒直接用一片灰色代替了）

Down就是下层，这里把几乎所有元素都放满了，玩家，敌人，墙等

2.接下来将各种类型的对象放到相应的层里去，方便相机筛选（这里的层跟上面提到的层不一样，这里的层是Unity里的定义）

 

这里我为了方便大家识别，为一种类型的对象设置一个层，实际操作肯定不会这样繁琐的操作的，没必要。

3.创建两个相机，让它们分别显示对于的层。

（先无视Mask，这个待会再讲）

如果设置正确，你的显示应该跟我上图是一样的，并且把Up相机的Depth级别设置高点，让它显示在Down相机之前。

4.遮挡上层，显示下层。

就是这么个原理

具体至于要怎么遮挡？我一开始想到的是UGUI的Mask组件，后来想想，这个Mask是固定的一张图片，那么只能显示固定的遮挡（虽然可以动态更改，但较麻烦），

后来想，那么就通过网格遮挡，毕竟网格动态改变形状很容易，而且可以通过Shader轻易地实现遮挡效果。

具体如下，先写这么一个Shader：

Shader "Masked/Mask" {
    SubShader {
        // Render the mask after regular geometry, but before masked geometry and
        // transparent things.
        Tags {"Queue" = "Geometry+10" }
        // Don't draw in the RGBA channels; just the depth buffer
        ColorMask 0
        ZWrite On
        // Do nothing specific in the pass:
        Pass {}
    }
}

关于Zwrite可以参考：https://www.cnblogs.com/jeason1997/p/11190491.html

如果你懂Shader那么一眼就可以看懂它，不懂也无所谓，直接Copy进去。

它其实就是让你的网格变成一个遮挡物，摄影机一看到这个网格，就会直接穿透过去，直接看到背景。

然后添加一个GameObject，并添加MeshFilter以及MeshRender组件，并且赋予这个Shader，作为Mask。

如果你这个Mask当前的Mesh不为空的话，你可以很直观地看到它所在的地方都不会被摄影机渲染出来，

直接变成一个穿透的洞：

它不仅是透明的，还是异次元洞，就算它身后的东西也显示不出来，直接就看到背景了。

竟然它直接穿透到背景，那么看到看不到底层，那么我们要它何用呢？

对，它只是将当期摄影机穿透到背景，所以我们将当期摄影机的Clear Flags设置为“Depth Only"，这样第一个摄影机

的背景将显示第二个摄影机的内容。这样就可以轻易达到我们想要的穿透。

5.遮挡实现了，那么该如何实现动态光照变化呢？

我这里使用的是RayCast，以主角为原点，向四周辐射一定量的射线，这样可以模拟光照，

然后根据射线探测到的点组合成上面提到的遮挡物的网格。最终就达到我们想要的效果。

using UnityEngine;

public class FOVMesh : MonoBehaviour
{
    // 玩家
    public GameObject playerGameObject;

    // 光照半径
    public float range = 3;

    // 光照质量，数值越低，向四周辐射的射线越多，效果越好，但性能越低
    public int levelOfDetails = 1;
        
    // 接受光照产生阴影的对象
    public LayerMask[] layerMask;
        
        
    private Vector3 direction;
    private int index = 0;
    private int triIndex = 0;
    private int lod = 1;
    private float width;
    private GameObject go;
    private GameObject pGo;
    private Mesh mesh;
    private Vector3 worldPos;
        
    private Vector3[] verts;
    private int[] tris;
    private Vector2[] uvs;
    private GameObject didHit;

    private int mask;
        
        
    // Code that runs on entering the state.
    public void Start ()
    {
        go = gameObject;
        pGo = playerGameObject;
            
        mesh = new Mesh ();
        go.GetComponent<MeshFilter> ().mesh = mesh;
            
        lod = levelOfDetails;
        width = range;
            
        // 若loa为1，则共发射360条射线作为光线，则有360个顶点加个圆心
        verts = new Vector3[(360 / lod) + 1];
        // 每两个顶点跟圆心组成一个三角形，所以三角形的个数为定点数乘3
        tris = new int[(360 / lod) * 3];
            
        uvs = new Vector2[verts.Length];

        for (int i = 0; i < layerMask.Length; ++i) {
            mask |= layerMask [i];
        }
    }
        
    // Code that runs every frame.
    public void Update ()
    {
        index = 0;
        triIndex = 0;
            
        worldPos = pGo.transform.position;
            
        verts [index] = worldPos;
            
        index++;
            
        for (var a=0; a<360; a += lod) {
            var direction = new Vector3 (Mathf.Sin (Mathf.Deg2Rad * a), 0, Mathf.Cos (Mathf.Deg2Rad * a));
                
            direction = direction * width;
                
            RaycastHit hit;
                
            if (Physics.Raycast (worldPos, direction, out hit, width, mask)) {
                // 如果被射线探中，则将探测到的点作为网格的顶点
                verts [index] = new Vector3 (hit.point.x, hit.point.y, hit.point.z);
                    
            } else {
                // 否则将射线的末端作为网格的顶点
                verts [index] = new Vector3 (direction.x + worldPos.x, worldPos.y, direction.z + worldPos.z);
            }
                
            index++;
        }
            
        // 根据网格顶点组合三角形
        for (var i=1; i<(360/lod); i++) {
            tris [triIndex] = 0;
            tris [triIndex + 1] = i;
            tris [triIndex + 2] = i + 1;
            triIndex += 3;
                
        }
            
        tris [((360 / lod) * 3) - 3] = 0;
        tris [((360 / lod) * 3) - 2] = 360 / lod;
        tris [((360 / lod) * 3) - 1] = 1;
            
        // 网格贴图
        int j = 0;
        while (j < uvs.Length) {
            uvs [j] = new Vector2 (verts [j].x, verts [j].z);
            j++;
        }
            
            
        // 重新组合网格
        mesh.Clear ();
        mesh.vertices = verts;
        mesh.triangles = tris;
        mesh.uv = uvs;
        mesh.RecalculateNormals ();
    }
        
}

最终效果如图：

源码：

点我下载，欢迎转载，转载请注明出处

好吧，就在我写完这个帖子后的一个小时，我百度了下2D伪阴影。。。然后发现了一个神物。。。

原来早就有类似的插件了，而且效果很强大，实现方法跟我这个类似，但那个还能实现光影的强弱，

远处较暗近处较亮。

http://www.narkii.com/club/thread-358505-1.html

还有一个很屌的外国人写的：

http://blog.jobbole.com/89193/

2016.1.15 更新

刚刚在YouTube上看到一篇教程，也是做这个的，跟我这个很像：

https://www.youtube.com/watch?v=rQG9aUWarwE

该项目资源文件

该项目GitHub源码