unity 从头开始制作类dota2小地图

　　想要做一个类似dota2小地图的功能，但是用了几个插件，感觉并不是我想要的效果，就自己做了个小地图，现在把这部分功能提出来，简单再做记录下。

首先我们要做一些准备工作：让人物可以在一块地图上自由行走。创建个Plane当作地图表面，再摆放写Cube当作障碍物，如图：

　　

　　淡蓝色的为地图平面，褐色的方块为障碍物，接着分别给地图和障碍物方块设置Wakeable和Not Wakeable进行导航网格的烘焙。接着再引入个第三人称视角的人物控制器，按照导航网格进行行走，效果如下图：

　　

　　准备工作做好了，现在就要真正开始小地图的制作了。

　　一、创建个Panel，大小和Canvas一样大，作为界面，canvas的UI Scale Mode属性设置为Scale With Screen Size，这样界面在屏幕缩放时可以相应的缩放，分辨率就设置为1280*960吧。Panel改名为DlgMiniMap，创建个Image，对当前场景进行截图，并设置给创建的Image，锚点设置为右上方。好的，这时候已经有小地图了。如图：

　　

　　有了地图之后，我们就可以做人物与小地图的对应显示了。思路如下：新建一个image用来显示人物，我这边用的是一个箭头图标，测量地图的左下角、右上角从而得知地图的大小与中心点，给DlgMiniMap界面增加一个同名脚本，在Update中实时计算人物的相对位置与角度，Update代码：

 void Update()
    {
        Vector3 vecPosOffset = player.transform.position - vecMapCenter; //计算人物位置与地图中心的偏移
        float fOffsetX = vecPosOffset.x / vecMapSize.x * fWidth;
        float fOffsetY = vecPosOffset.z / vecMapSize.y * fHeight;
        rtImgPlayer.anchoredPosition = new Vector2(fOffsetX, fOffsetY);	//因为中心位置为（0,0），所以直接设置成偏移值
        rtImgPlayer.eulerAngles = new Vector3(0, 0, -player.transform.rotation.eulerAngles.y); //人物面向的角度是绕着Y轴的，直接把Y的欧拉角设置为箭头的Z轴
    }

　　效果如下：

　　

　　做到这一步，我们的小地图就只剩一个步骤了：点击小地图的位置，人物自动导航到该点（如果不可行走，那么走到最近点）。思路跟上一个步骤差不多，不过有个差别是前面的计算我们没有去理会场景视图的缩放造成的影响，直接把Image当做原始大小来处理就行了，UGUI会自动帮我们缩放，但是现在因为我们加入了鼠标点击，而鼠标点击是基于当前屏幕分辨率的，所以在处理鼠标点击位置的时候我们得把缩放的因素考虑进去。

　　给地图Image添加EventTrigger组件并增加OnPointerClick事件，绑定DlgMiniMap新增的SelTargetPos函数，SelTargetPos代码如下：

public void SelTargetPos()
    {
        float fScreenWRate = (Screen.width - vecPos.x) * 2 / fWidth; //根据地图与右上角的距离，计算出地图显示尺寸与原尺寸的横纵比例
        float fScreenHRate = (Screen.height - vecPos.y) * 2 / fHeight;
        float fXRate = (Input.mousePosition.x - vecPos.x) / (fWidth * fScreenWRate); //根据鼠标与中心的距离计算出横纵偏移比例
        float fZRate = (Input.mousePosition.y - vecPos.y) / (fHeight * fScreenHRate);
        Vector3 vecOffest = new Vector3(fXRate * vecMapSize.x, 0, fZRate * vecMapSize.y); //计算出横纵的具体Offset值
        Vector3 vecTargetPos = vecMapCenter + vecOffest; //得到目标点
        Debug.Log(Input.mousePosition);

        var objMove = player.GetComponent<MoveController>();
        if (null == objMove)
        {
            return;
        }

        objMove.MoveToTargetPos(vecTargetPos); //调用人物MoveController接口，移动到目标点
    }

　　MoveController.MoveToTargetPos接口代码为：

public void MoveToTargetPos(Vector3 vecPos)
    {
        ani.SetBool("Run", true); //播放跑步动画
        nav.isStopped = false; //开始寻路
        nav.SetDestination(vecPos); //设置目标点
    }

　　写到这，我们的小地图就差不多完成了，点击小地图寻路效果如下（忽略她手上多出来的那把刀。。。）：

　　大功告成。当然如果真正要应用的话，还有很多需要补充完善的地方，例如要显示多个人物标识，地图肯定也需要美术提供，不可能就是一张截图等等。这边就是提供这个一个思路，可以使用这种方式来制作小地图，而且也很简单，代码量不多。