Making a clean (mini)map using Navmesh and a Shader

Hey all!

(Quick update.. update, tooth and cheek infection are over, finally got root canal done on monday, thanks for all the well wishes!)

In this post I'm showing you how to set up a clean looking map.

For my game I wanted a very simple looking map. The most-used way of setting up a map is to just have a topdown camera render the whole scene, maybe excluding some layers.

Desert Area

Then you end up with something like this, it shows all terrain, but it's pretty noisy, hard to see where you can go. Could be enough for some games but I want something cleaner

Another way is to draw your own map, but that's way too time-consuming.

In Astro Kat I'm already using Navmesh for NPC/Enemies, and the built mesh you can display in the editor looks perfect for what I want. 

So I looked for a way to grab that generated mesh, and I found it!

That's more like it! Clear and simple :)


So let's set it up!

I've made a new scene, and added some environment meshes.


Navmesh

Add the "Navigation" tab if you haven't already Window> AI > Navigation 

Go the the Object tab, select the floor and turn on "Navigation Static", and set "Navigation Area" to "Walkable.

Do the same for the environment objects, only set them to "Not Walkable"

Go the Bake tab, and click "Bake"

Now you should see the blue navmesh in the scene view, as long as the navigation tab is open.

Map Camera

Now we set up the top-down camera.

Add a new Camera to the scene.

Set the rotation X to 90 so it points down. And the Projection to "Orthographic", increase the Size to what you need for your minimap. For a static map, I've got a scaling script later though :)

The camera result needs to be sent to a Render Texture, so create a new one Create > Render Texture. Then set this texture as the Render Target in the camera


Adding to UI


Create a canvas and a Raw Image Create > UI > Raw Image

Set the texture of the Raw Image to the Render texture

You should see the camera view already in the game view.

The map has no transparency currently, so go back to the Map Camera, and set the Clear Flags to Solid Color, and make sure this color has no Alpha

Map Mesh

This is the important part. Create a new mesh (doesn't matter what kind, it will be overwritten)

Delete any colliders attached and add a new script "MinimapMesh.cs"

We need to get the Navmesh data, we get this from "Navmesh.CalculateTriangulation().

Then set the data to a new Mesh, and this Mesh will be set to the mesh filter of the object.

The original object is now replaced by the navmesh data, I added a colored material so it's easier to see. For the best result in the shader later, make it gray.


If the mesh doesn't show up, make sure to set it's position to 0,0,0 

Also if you see too many inside areas (inside colliders), a quick hack is to set the Agent Height in Navigation > Bake tabe to something like 10 and rebuild.
Hit play to rebuild the minimap mesh too.

Minimap CS script : Pastebin Link 

Set this mesh to a new layer, and then set the minimap camera to only render that layer in the Culling Mask.

The Raw Image in the UI should now only show the clean minimap mesh.

Map Shader

It's all looking a bit plain right now, let's add an outline, and a texture overlay via shader.

This shader is based on the Sprite Outline shader from a while ago. Check that post out for an explanation of how the outline works. I will post the shadergraph version soon!

I've added an extra layer, and the opacity of the UI element to the shader.

Shader Code:  Pastebin Link  

Map with a texture and an outline.

Resizing the Camera to the map

This is only relevant if you want a static map, not a minimap. Just a little script that resizes the orthographic camera so it fits more on the screen.

It finds the minimapmesh in the scene, and scales to the mesh bounds.

MiniMapSize CS script : Pastebin Link 

Add the script to the map camera. You can change the scale by multiplying the size with whatever you need, it really depends on how big you want your maps to be.


Example settings of the top center map material:

Again all scripts:

Minimap CS script : Pastebin Link  

MiniMapSize CS script : Pastebin Link  

Outline Overlay Shader:  Pastebin Link  


Have fun!

Become a patron to

131
Unlock 131 exclusive posts
Be part of the community
Connect via private message