Unity 小地图, 实时与静态, 地图标记, 点击导航, 路线显示, 风格化

如上图, 这些地图分别是:

位置和方向均跟随玩家, 并且带有地图标记的地图
位置和方向固定, 带有地图标记的地图
位置跟随玩家, 带有地图标记的地图
位置跟随玩家, 带有部分地图标记, 能够显示导航路线的地图
位置跟随玩家, 带有部分地图标记, 能够显示导航路线且风格化的地图.

实时地图#

在 Unity 中, 相机渲染的结果能够直接保存到 “渲染贴图” 中, 而贴图可以呈现在 UI 界面上, 通过这一方式, 我们可以创建最简单的实时地图.

首先, 在项目面板中, 我们需要创建一个用于存储相机渲染输出的 “渲染贴图”, 右击鼠标, 选择 “创建 -> 渲染贴图(Render texture)”

然后, 在创建中创建一个垂直向下看的相机, 并将投影模式改为 “正交(Orthographic)”:

然后, 将相机的 “目标贴图” 设置为我们刚刚创建好的渲染贴图:

做完这些操作之后, 你会得到这样的结果:

最后, 我们只需要使用任意方式, 将贴图展示在屏幕上就可以了. 最简单的方式就是直接使用 UI 中的 “RawImage” 进行显示.

在场景中创建 RawImage, 然后将其要显示的纹理设置为我们创建好的渲染纹理, 最后你会看到, UI 上的图片显示着相机拍摄到的内容.

至此, 最简单的实时小地图, 我们就做好了. 关于一些简单的拓展的内容, 大概如下:

如果要跟随玩家, 那么直接手写脚本, 使相机跟随玩家即可
如果要随玩家旋转, 直接手写脚本, 跟随玩家, 并且跟随玩家旋转. 当然你也可以直接将其设置为玩家的子对象, 这样玩家移动和旋转的时候, 相机也会移动和旋转.

静态地图#

静态地图就是提前对场景进行拍摄, 拿到贴图之后放到 UI 上, 然后在实际显示时, 根据比例系数, 移动这张图片.

在 Unity 中截图还是比较麻烦的, 建议是写个编辑器脚本, 点击按钮, 动态的创建相机, 然后使用正交相机, 渲染到 RenderTexture, 再将 RenderTexture 保存到本地, 下面是供参考的代码:

public class MinimapTextureTool : EditorWindow
{
    [MenuItem("Tools/MinimapTextureTool")]
    static void Open()
    {
        var window = EditorWindow.GetWindow<MinimapTextureTool>();
        window.Show();
    }
    
    string _textureSizeStr = "1024";
    string _cameraHeightStr = "5";
    string _minimapAreaSizeStr = "50";
    int _minimapLayers = ~0;

    void OnGUI()
    {
        GUILayout.Label("纹理工具");

        GUILayout.Label("纹理大小: ");
        _textureSizeStr = GUILayout.TextField(_textureSizeStr);

        GUILayout.Label("相机高度: ");
        _cameraHeightStr = GUILayout.TextField(_cameraHeightStr);

        GUILayout.Label("小地图区域大小: ");
        _minimapAreaSizeStr = GUILayout.TextField(_minimapAreaSizeStr);

        GUILayout.Label("小地图层级遮罩: ");
        LayerMask tempMask = EditorGUILayout.MaskField( InternalEditorUtility.LayerMaskToConcatenatedLayersMask(_minimapLayers), InternalEditorUtility.layers);
        _minimapLayers = InternalEditorUtility.ConcatenatedLayersMaskToLayerMask(tempMask);

        GUILayout.Space(10);

        if (!int.TryParse(_textureSizeStr, out var textureSize) ||
            !float.TryParse(_cameraHeightStr, out var cameraHeight) ||
            !float.TryParse(_minimapAreaSizeStr, out var minimapAreaSize))
        {
            GUILayout.Label("输入有误!");
            return;
        }

        if (GUILayout.Button("生成小地图纹理"))
        {
            string filename = EditorUtility.SaveFilePanel("保存纹理", Application.dataPath, "小地图", "png");

            // 创建渲染纹理
            RenderTexture rt = new RenderTexture(textureSize, textureSize, 32);

            // 创建相机
            GameObject cameraGameObject = new GameObject();
            Camera camera = cameraGameObject.AddComponent<Camera>();

            cameraGameObject.transform.eulerAngles = new Vector3(90, 0, 0);
            cameraGameObject.transform.position = new Vector3(0, cameraHeight, 0);

            // 设置相机属性
            camera.cullingMask = _minimapLayers;
            camera.clearFlags = CameraClearFlags.SolidColor;
            camera.backgroundColor = new Color(0, 0, 0, 0);
            camera.orthographic = true;
            camera.orthographicSize = minimapAreaSize / 2;

            // 渲染
            camera.targetTexture = rt;
            camera.Render();

            // 保存当前激活的渲染纹理, 然后激活刚创建的渲染纹理
            var activeRenderTextureBefore = RenderTexture.active;
            RenderTexture.active = rt;

            // 创建 2D 纹理, 并从渲染纹理中读入数据
            Texture2D png = new Texture2D(textureSize, textureSize);
            png.ReadPixels(new Rect(0, 0, textureSize, textureSize), 0, 0);
            png.Apply();

            // 恢复之前激活的渲染纹理
            RenderTexture.active = activeRenderTextureBefore;

            // 编码 PNG, 并保存
            var bytes = png.EncodeToPNG();
            System.IO.File.WriteAllBytes(filename, bytes);

            // 清理临时创建的对象
            DestroyImmediate(cameraGameObject);
            DestroyImmediate(rt);
            DestroyImmediate(png);
        }
    }
}

如果要手动截图的话, 可以将窗口上的这两个关闭, 隐藏天空盒以及辅助线之类的.

这里以一个准备好的地图做示例.

然后, 我们继续写一个简单的脚本用来展示地图, 通过改变顶点 UV, 实现移动地图内容.

public class SimpleTextureMinimap : MaskableGraphic
{
    public Texture MinimapTexture;
    public Vector2 Pivot = new Vector2(.5f, .5f);

    public float MinimapAreaSize = 50;
    public float DisplayAreaSize = 10;
    public float ImageSize = 100;

    public Transform FollowTarget;

    private void Update()
    {
        if (FollowTarget != null)
            SetVerticesDirty();
    }

    public override Texture mainTexture => MinimapTexture;

    protected override void OnPopulateMesh(VertexHelper vh)
    {
        vh.Clear();

        var radius = ImageSize / 2;
        var uvRadius = DisplayAreaSize / MinimapAreaSize / 2;
        var uvOffset = new Vector2();

        if (FollowTarget != null)
            uvOffset = new Vector2(FollowTarget.position.x, FollowTarget.position.z) / MinimapAreaSize;

        vh.AddVert(new Vector3(-radius, -radius), color, Pivot + uvOffset + new Vector2(-uvRadius, -uvRadius));
        vh.AddVert(new Vector3(-radius, radius), color, Pivot + uvOffset + new Vector2(-uvRadius, uvRadius));
        vh.AddVert(new Vector3(radius, radius), color, Pivot + uvOffset + new Vector2(uvRadius, uvRadius));
        vh.AddVert(new Vector3(radius, -radius), color, Pivot + uvOffset + new Vector2(uvRadius, -uvRadius));

        vh.AddTriangle(0, 1, 2);
        vh.AddTriangle(0, 2, 3);
    }
}

在上面的代码中, 我们只使用跟随目标的位置计算 UV 偏移量, 没有考虑到当玩家旋转时, 地图也旋转的这种需求, 所以计算就变得简单了许多.

地图标记#

要将场景中的某些物体在地图上标记出来, 方式有很多. 对于基于渲染相机的小地图, 其中最简单的方式是直接在物体上创建一个世界坐标空间的 Canvas, 并在上面放一张图片, 然后让小地图相机拍摄到.

就像这样, 调整 Canvas 的位置, 旋转, 缩放使其面朝上方以被相机地图拍摄到, 然后设置单独的层级, 并且使主相机不渲染该层级, 而小地图相机渲染它.

最后的效果, 就是这样的:

对于静态地图, 也就是地图由贴图构成, 我们需要做世界坐标到地图坐标的坐标转换, 然后在地图上实例化 Sprite, 并设置其位置.

地图标记当然不止这一种实现方式, 不如说, 直接用 UI 在小地图上放一个图片是更好的解决方案

小地图包#

对于更多功能, 我将它封装成一个 Unity 包了. 其中就包含实时小地图, 静态小地图, 标记, 点击导航以及路线显示.

要安装这个包, 首先确保你的电脑中有安装 ‘git’, 然后在 Unity 包管理器中, 单击左上角的 ‘添加包’ 按钮, 然后单击 ‘从 git URL 添加包’, 然后输入 https://github.com/SlimeNull/UnityMinimaps.git 并确认.

不出意外的话, 名为 “SlimeNull.UnityMinimaps” 的包会被安装到你的项目中:

现在, 我们可以直接在场景中创建小地图了. 在 Unity 菜单栏中, 找到 Tools 按钮, 单击其中的 Minimap 即可打开小地图创建工具.

如果要在场景中创建一个基于相机与渲染纹理的实时地图, 需要以下准备:

一个渲染纹理
一个地图相机, 并且有赋值上面所说的渲染纹理, 同时该相机必须正向垂直向下照射(X旋转90度, Y 和 Z 不旋转)

然后, 将小地图类型调整为 “Render texture”, 拖拽小地图相机到窗口中, 最后在场景层级中选择你要放置小地图的位置(这里是 Canvas 节点), 然后点击 “创建” 即可.

如果你在场景层级中选择对象, 它会提示你 “选择一个在 Canvas 之下的 GameObject 以创建小地图”, 只有当你选择之后, 才会有 “创建” 按钮.

在做完上述步骤之后, Canvas 下就会自动创建好一个小地图, 其中显示的内容是相机所照射到的内容. 通过这一方式就能实现实时小地图了.

如果你要调整小地图的显示大小, 则需要设置 Minimap 组件中的 Size.

操作#

通过更改 Minimap 组件中的 AreaSize, 可以指定当前小地图显示的区域大小. 不过, 注意不要超过小地图相机的照射范围, 因为范围之外是显示不到的.

自带的 MinimapModifier 组件是实现用户鼠标滚轮缩放小地图的功能的. Factor 用来指定缩放的速度倍数, MinSize 和 MaxSize 则是最小与最大的大小. 如果你不希望用户能够通过鼠标滚轮调整大小, 移除这个组件就可以了.

人物跟随#

要实现人物跟随, 只需要将要跟随的物体设置到 Minimap 组件的 Origin 上即可. 并且, 当跟随的物体旋转时, 小地图也会跟着旋转, 保证玩家的前方始终是地图上方.

不过, 需要注意的是, 如果你的小地图相机不会移动, 那么当玩家超出小地图照射范围的时候, 那么小地图的内容也会变成空, 因为小地图渲染器获取不到玩家周围的地图信息了.

所以一般的, 如果你需要始终能够正确显示小地图, 你还需要保证小地图跟随玩家, 以保证小地图组件能够获取到玩家周围的地图信息. 我们需要一个简单的物体跟随脚本来使相机始终跟随玩家.

using UnityEngine;

[ExecuteAlways]
public class FollowObject : MonoBehaviour
{
    public Transform Target;
    public Vector3 Offset;

    private void LateUpdate()
    {
        if (Target != null)
        {
            transform.position = Target.position + Offset;
        }
    }
}