minionsart
patreon
Making a clean (mini)map using Navmesh and a Shader
🕑 Added 2020-05-20 20:16:08 +0000 UTCHey 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!
