Fog of War type thing in a 2D game.

I am trying to do a Fog of War like system in my 2D game where everything is dark and around the player you can see the level. (See attached file for example).

So i've googled abit and found something, but i dont quite know how to implement it.

In another thread i found this advice :
A popular approach is to build a plane mesh by code above the terrain, apply a black texture to it, and then raycast upwards from the player. Any triangles that are hit have their corresponding vertices' vertex colors set to alpha = 0.

I found out how to make a square plane mesh with 2 triangles but if i do it like that wouldnt the entire triangle just be transparent? Do i have to make like alot of triangles and fit them on the screen so i can modify little parts of it? That does'nt seem right to me.

Any help is greatly appreciated.

 

I never did that.

But how about using new UI system to make layer with black texture, with a hole in center?

It would be my first attempt .

 

I don't know much about a new UI System, but the Player is not always in the center though.

 

Hi!

Okay!

I believe you can move the UI.

But like I said, I never did that!

Regards.

 

Yes, that's right, the more triangles the plane has, the better the fog will look at the edges whre is has been uncleared. That doesn' matter too much however, since any mesh can have up tp 65k vertices, so you can make pretty large planes with a good amount of detail. Of course,,you wouldn't set each vertex positions by hand; You would create a simple loop for that and just run it once.

You could also use a black texture and use GetPixels and SetPixels to set the transparency of the pixels around the player in a circle (some math involved there, Pi is your friend ). However, I'm not sure how taxing that would be for the CPU or GPU. Here is another tutorial that uses a variation of the the first approach:

 

Could you point me into a direction to how a loop like that would look like?

Thanks for the help so far.

 

Just search for a tile generation script, ther are many tutorials on that.

Code (CSharp):

1. public int size_x = 10;
2. public int size_y = 10;
3. public int[,] tileArray;
4.  
5. void Start() {
6.      tileArray = new int[size_x,size_y];
7.      for(int x = 0; x < size_x; x++) {
8.           for(int y = 0; y < size_y; y++) {
9.                 tile[x,y] = Random.Range(0,2);
10.                 if(tile[x,y] == 1) {
11.                        //create one tile using the current x and y values
12.                }
13.              
14.                
15.     }
16.     }
17. }