unity如何实现战争迷雾?思路一

unity如何实现战争迷雾?思路一

断更很久了,刚好今天放假,写一个unity下实现战争迷雾的思路.

效果如下: 

 

思路如下:

建一个plane作为地面,用UI中的rawimage放在最上层作为迷雾显示,用cube作为主角移动.cube每次移动,将它的坐标转化为rawimage上相对位置的点,然后用texture2d的setpixel方法逐像素清除出一个区域出来.

 

 左下角rawimage显示小地图,有单独一个camera专门将迷雾绘制到小地图中.

 

具体实现:

1.新建plane,cube,分别作为地面和主角,并把场景中的Main Camera作为cube的子物体.如下设置.

 

 

 

 在project窗口创建一个material并赋给cube方便改颜色.

 

2.新建一个canvas和一个rawimage,并按如下设置.

 

 

 

  

3.新建一个gameobject,在它的下面,新建一个camera,新建一个canvas并在它的下面新建image,rawimage.设置如下.

 

 

 在project窗口创建一个rendertexture并赋给camera和rawimage.

 

 

 

 image用于小地图的背景框,也可忽略.

 

 

  

3.新建一个gameobject,并加上脚本.

 

4.首先,先将迷雾初始化出来.打开编辑FogOfWar脚本.定义fogRawImage,是worldcanvas下的rawimage.定义fogDensity ,迷雾的像素密度,由多少个点组成.定义fogTexture,赋给fogRawImage后,后续的像素颜色更改,只需对fogTexture进行.InitializeTheFog方法将迷雾初始化为黑色.

public RawImage fogRawImage;

public Vector2Int fogDensity = new Vector2Int(100, 100);

private Texture2D fogTexture; 

void Start()
{
    fogTexture = new Texture2D(fogDensity.x, fogDensity.y);

    fogRawImage.texture = fogTexture; 

    InitializeTheFog();
}

void InitializeTheFog()
{
    int pixelCount = fogDensity.x * fogDensity.y;
    //将迷雾的默认颜色设置为黑色
    Color[] blackColors = new Color[pixelCount];
    for (int i = 0; i < pixelCount; i++)
    {
    　　blackColors[i] = Color.black;
    }
    fogTexture.SetPixels(blackColors); 

    fogTexture.Apply();
}

   

5.接着,设置要消除的形状的坐标数组.定义beEliminatedShapeSize ,要消除的形状的长和宽.定义shapeLocalPosition,这个形状的点分布数组,假设中心为(0,0),后续只需要将要消除的点的坐标跟这个数组所有值相加,即可得到该点出现的形状的所有坐标.InitializeTheShape方法是初始化视野的形状,此处是矩形,如果想将视野做成椭圆形,三角形,六角形,修改InitializeTheShape中的写法然后赋给shapeLocalPosition.

　　public Vector2Int beEliminatedShapeSize = new Vector2Int(8, 6);
　　private Vector2Int[] shapeLocalPosition;
　　void Start()
　　{
    　　//...

    　　InitializeTheShape();
　　}

    void InitializeTheShape()
    {
        int pixelCount = beEliminatedShapeSize.x * beEliminatedShapeSize.y;
        shapeLocalPosition = new Vector2Int[pixelCount];

        int halfX = Mathf.FloorToInt(beEliminatedShapeSize.x * 0.5f);
        int remainingX = beEliminatedShapeSize.x - halfX;
        int halfY = Mathf.FloorToInt(beEliminatedShapeSize.y * 0.5f);
        int remainingY = beEliminatedShapeSize.y - halfY;

        int index = 0;
        for (int y = -halfY; y < remainingY; y++)
        {
            for (int x = -halfX; x < remainingX; x++)
            {
                shapeLocalPosition[index] = new Vector2Int(x, y);
                index++;
            }
        }
　　}

6.接着是在texture中消除出一个形状来.这里需要注意的是,cube是在世界坐标中,通过消除rawimage中的像素透明度来实现获得视野,所以需要将cube的坐标转换为rawimage上(texture2d上)相对应的点.因为texture是左下角为原点,向右为正x,向上为正y,如下图.

 

 所以,一种思路就是将cube的世界最左下的一点作为它的原点,然后根据cube的位置和这个原点的位置偏移量,换算成texture中相对应的点,也就是plane的左下角的坐标.下图,是从上往下看的视角.

 

定义cubeTransform,cube的transform.定义planeMeshCollider,用于获取plane的尺寸.定义planeOriginPoint,储存世界坐标中cube的假定原点.定义worldSize,地面的尺寸,也就是plane的尺寸.EliminateFog方法,获得当前cube位置的视野.

    public Transform cubeTransform;
    public MeshCollider planeMeshCollider;

    private Vector2 planeOriginPoint;
    private Vector2 worldSize;
    
    void Start()
    {
        //...

        worldSize = new Vector2(planeMeshCollider.bounds.size.x, planeMeshCollider.bounds.size.z);
　　　　　//将plane的坐标减去它尺寸的一半,即可得到它的左下角的坐标
        planeOriginPoint = new Vector2(planeMeshCollider.transform.position.x - worldSize.x * 0.5f, planeMeshCollider.transform.position.z - worldSize.y * 0.5f);

        InitializeTheShape();
        InitializeTheFog();

        EliminateFog();
    }

    void EliminateFog()
    {
        Vector2 cubePos = new Vector2(cubeTransform.position.x, cubeTransform.position.z);
　　　　　//相对假定原点的距离比例,因为是世界坐标,两个点相减有可能是负数,texture中不存在负数的坐标,所以转化为正数.
        Vector2 originDistanceRatio = (cubePos - planeOriginPoint) / worldSize;
        originDistanceRatio.Set(Mathf.Abs(originDistanceRatio.x), Mathf.Abs(originDistanceRatio.y));
　　　　　//距离比例乘以密度,即可知道cube相当在texture中的点即可计算出来
        Vector2Int fogCenter = new Vector2Int(Mathf.RoundToInt(originDistanceRatio.x * fogDensity.x), Mathf.RoundToInt(originDistanceRatio.y * fogDensity.y));
        for (int i = 0; i < shapeLocalPosition.Length; i++)
        {
            int x = shapeLocalPosition[i].x + fogCenter.x;
            int y = shapeLocalPosition[i].y + fogCenter.y;
　　　　　　　//因为消除迷雾的形状是比cube的位置还要大的,在最边缘的时候,消除的像素点的坐标会超出texture范围,所以超出部分忽略.
            if (x < 0 || x >= fogDensity.x || y < 0 || y >= fogDensity.y)
                continue;

            fogTexture.SetPixel(x, y, Color.clear);
        }

        fogTexture.Apply();
    }

7.设置cube的移动控制,并在每次移动消除迷雾.这里简单写一个.

　　 public float cubeMoveSpeed = 0.1f;
    private void Update()
    {
        if (Input.anyKey)
        {
            if (Input.GetKey(KeyCode.W))
            {
                cubeTransform.position += Vector3.forward * cubeMoveSpeed;
            }
            else if (Input.GetKey(KeyCode.S))
            {
                cubeTransform.position += Vector3.back * cubeMoveSpeed;
            }
            else if (Input.GetKey(KeyCode.A))
            {
                cubeTransform.position += Vector3.left * cubeMoveSpeed;
            }
            else if (Input.GetKey(KeyCode.D))
            {
                cubeTransform.position += Vector3.right * cubeMoveSpeed;
            }

            EliminateFog();
        }
}

8.完成后的场景结构和FogOfQar脚本设置如下.

 

9.完整代码如下:

using UnityEngine;
using UnityEngine.UI;

public class FogOfWar : MonoBehaviour
{
    public RawImage fogRawImage;
    public MeshCollider planeMeshCollider;
    public Transform cubeTransform;

    public float cubeMoveSpeed = 0.1f;

    public Vector2Int fogDensity = new Vector2Int(100, 100);
    public Vector2Int beEliminatedShapeSize = new Vector2Int(8, 6);

    private Texture2D fogTexture;

    private Vector2Int[] shapeLocalPosition;

    private Vector2 planeOriginPoint;
    private Vector2 worldSize;

    // Start is called before the first frame update
    void Start()
    {
        fogTexture = new Texture2D(fogDensity.x, fogDensity.y);
        fogRawImage.texture = fogTexture;

        worldSize = new Vector2(planeMeshCollider.bounds.size.x, planeMeshCollider.bounds.size.z);
        //将plane的坐标减去它尺寸的一半,即可得到它的左下角的坐标
        planeOriginPoint = new Vector2(planeMeshCollider.transform.position.x - worldSize.x * 0.5f, planeMeshCollider.transform.position.z - worldSize.y * 0.5f);

        InitializeTheShape();
        InitializeTheFog();

        EliminateFog();
    }

    private void Update()
    {
        if (Input.anyKey)
        {
            if (Input.GetKey(KeyCode.W))
            {
                cubeTransform.position += Vector3.forward * cubeMoveSpeed;
            }
            else if (Input.GetKey(KeyCode.S))
            {
                cubeTransform.position += Vector3.back * cubeMoveSpeed;
            }
            else if (Input.GetKey(KeyCode.A))
            {
                cubeTransform.position += Vector3.left * cubeMoveSpeed;
            }
            else if (Input.GetKey(KeyCode.D))
            {
                cubeTransform.position += Vector3.right * cubeMoveSpeed;
            }

            EliminateFog();
        }
    }

    void InitializeTheShape()
    {
        int pixelCount = beEliminatedShapeSize.x * beEliminatedShapeSize.y;
        shapeLocalPosition = new Vector2Int[pixelCount];

        int halfX = Mathf.FloorToInt(beEliminatedShapeSize.x * 0.5f);
        int remainingX = beEliminatedShapeSize.x - halfX;
        int halfY = Mathf.FloorToInt(beEliminatedShapeSize.y * 0.5f);
        int remainingY = beEliminatedShapeSize.y - halfY;

        int index = 0;
        for (int y = -halfY; y < remainingY; y++)
        {
            for (int x = -halfX; x < remainingX; x++)
            {
                shapeLocalPosition[index] = new Vector2Int(x, y);
                index++;
            }
        }
    }

    void InitializeTheFog()
    {
        int pixelCount = fogDensity.x * fogDensity.y;
        //将迷雾的默认颜色设置为黑色
        Color[] blackColors = new Color[pixelCount];
        for (int i = 0; i < pixelCount; i++)
        {
            blackColors[i] = Color.black;
        }
        fogTexture.SetPixels(blackColors);

        fogTexture.Apply();
    }

    void EliminateFog()
    {
        Vector2 cubePos = new Vector2(cubeTransform.position.x, cubeTransform.position.z);
        //相对假定原点的距离比例,因为是世界坐标,两个点相减有可能是负数,texture中不存在负数的坐标,所以转化为正数.
        Vector2 originDistanceRatio = (cubePos - planeOriginPoint) / worldSize;
        originDistanceRatio.Set(Mathf.Abs(originDistanceRatio.x), Mathf.Abs(originDistanceRatio.y));
        //距离比例乘以密度,即可知道cube相当在texture中的点即可计算出来
        Vector2Int fogCenter = new Vector2Int(Mathf.RoundToInt(originDistanceRatio.x * fogDensity.x), Mathf.RoundToInt(originDistanceRatio.y * fogDensity.y));
        for (int i = 0; i < shapeLocalPosition.Length; i++)
        {
            int x = shapeLocalPosition[i].x + fogCenter.x;
            int y = shapeLocalPosition[i].y + fogCenter.y;
            //因为消除迷雾的形状是比cube的位置还要大的,在最边缘的时候,消除的像素点的坐标会超出texture范围,所以超出部分忽略.
            if (x < 0 || x >= fogDensity.x || y < 0 || y >= fogDensity.y)
                continue;

            fogTexture.SetPixel(x, y, Color.clear);
        }

        fogTexture.Apply();
    }
}

欢迎交流.

转载注明出处.