Create Revealing Map In Unity
3 min read

Create Revealing Map In Unity

A friend of mine, Rere, asked me about how to create a world map being revealed as the 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
Create Revealing Map In Unity

A friend of mine, Rere, asked me how to create a world map being revealed as 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.

Ori And The Blind Forest world map. You can see dimmed area where player haven't visited yet.

I'm sure there might be another simpler and cool solutions to do this thing. For an example you can specifically put "shadow chunks" scattered all over the area and turn it off when player visit that place. That will do, but what came in 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 Mask component. However, instead of "clean" to reveal 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 Mask component on 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, 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 on your Assets folder. This will be our target to draw stuffs. I used the size of 480 x 270. The bigger the size, the heavier the process.

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

Here's the reference for the script

Now, press play. When you pressed down 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 black part of the mask. Pretty neat, huh?

you can show current texture by pressing ctrl+click on the texture gutter

From this, we can simply map the player's position to brush's position and when to paint it. Later, you can save the image and load them into current map to show 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, and it really depends to your needs. Hope this small snippet helps!

Enjoying this blog? Support me!