Create Revealing Map In Unity

A friend of mine, Rere, asked me how to create a world map being revealed as a player visited some specific areas. Just like Ori And The Blind Forest world map. Welp, I never made one myself, but it sure is an interesting task.

I'm sure there might be other simpler and cool solutions to do this thing. For example, you can specifically put "shadow chunks" scattered all over the area and turn them off when players visit that place. That will do, but what came to my mind was "Well.. maybe you only need to mask the area you need to reveal?"

Think of it like a dirty window. As you smudged your finger across the window, the area being smudged would be revealed. In Unity, you can replicate the same effect to the UI by utilizing the Mask component. However, instead of "clean" to reveal the desired area, we "paint" it out to reveal the desired area.

Preparing The UI

First, let's create the masking area using Raw Image and add a Mask component to it.

Under the mask, create the map you'd like to reveal like so.

Our map is ready!

Drawing the Mask

Now, the fun part is the drawings! We will draw on a Render Texture. This Render Texture then will feed its result into our mask.

First, create a Render Texture in your Assets folder. This will be our target to draw stuff. I used the size 480 x 270. The bigger the size, the heavier the process.

Add this script to the Canvas and add references to the script

Here's the reference for the script

Now, press play. When you pressed the mouse button, the map will reveal what's beneath.

If you press ctrl+click on the Texture field of the Raw Image, you can see actually we only render the black part of the mask. Pretty neat, huh?

From this, we can simply map the player's position to the brush's position and when to paint it. Later, you can save the image and load them into the current map to show the player's progressions. There's also much more improvement to do, such as antialiasing of the mask result.

This might be not the most efficient way to do it, and it really depends on your needs. Hope this small snippet helps!