Fog of war video tutorial

Unity fog of war tutorials

My tutorials about making fog of war in Unity.
Tutorial 1. Simple dynamic shader based fog of war
Article.
Webplayer demo.

Tutorial 2. Lightweight mobile version of dynamic fog of war
Article
Webplayer demo

Tutorial 3. Static and dynamic fog of war using render to texture feature
Article
Webplayer demo

 

Added lightweight mobile version of fog of war.

Unity fog of war. Part 2. Mobile version

Webplayer demo

 

Thanks a lot for this tutorial can you please post the source code, (the package file) and if possible make the fog react with sight of view for example even if "Person A" is close to "Person B" and "Person B" is behind a wall "Person A" can't see "Person B" ?

Best regards.

EDIT : Answered in another thread

 

thanks, it was useful

 

Added new video tutorial "Static and dynamic fog of war using render to texture feature"

 

Very nice work! Thank you for the tutorial.

 

You saved my life .Thanks

 

Did anybody get this to work with the current version of Unity 5 Personal Edition?

 

Yes #pragma surface surf Lambert vertex:vert alpha:blend

 

I think only "#pragma surface surf Lambert alpha:blend", mine is working now. When I put vertex:vert in there, it game me an error. Anyway, thx a million.

ps. i'm totally beginner of shader programming

 

Fantastic. Thank you.

What about saving the static FoW (as a player saves, exits, then reloads the game)? Can anyone point me to a resource on how to save a material or texture like this?

EDIT:
Figured out a solution. For anyone else who didn't find this obvious:

Code (csharp):

1. using UnityEngine;
2. using System.Collections;
3. using System.IO;
4.  
5. /* This example script is placed on the FogOfWarCamera */
6. public class ClearAndLoadFOW : MonoBehaviour {
7.     [SerializeField] GameObject FOWLoader;    // This is a duplicated FogOfWarPlane from the video, but (1) raised higher on y-axis, (2) material removed and (3) Layer changed to the aperture layer from video
8.     [SerializeField] RenderTexture rt;    // The RenderTexture the FogOfWarCamera is using
9.  
10.     Camera c;
11.  
12.     // Use this for initialization
13.     void Start () {
14.         c = GetComponent<Camera> ();    // This script is on my FogOfWarCamera as an example
15.  
16.         /* (Assuming you have a saved FOW map from a previous run) */
17.         StartCoroutine (ClearAndLoad ());
18.     }
19.  
20.     void SaveMap()
21.     { /* Used this documentation for saving a Texture2D http://docs.unity3d.com/ScriptReference/Texture2D.EncodeToPNG.html */
22.  
23.         // Unlike the documentation, I want to use the RT my FOW camera is rendering to
24.         RenderTexture activeNow = RenderTexture.active;
25.         RenderTexture.active = rt;
26.  
27.         // Read pixels of our rt (ReadPixels reads from RenderTexture.active)
28.         Texture2D tex2d = new Texture2D (rt.width, rt.height, TextureFormat.ARGB32, false);
29.         tex2d.ReadPixels (new Rect (0f, 0f, rt.width, rt.height), 0, 0);
30.         tex2d.Apply ();
31.  
32.         // creates byte stream to save...
33.         byte[] bytes = tex2d.EncodeToPNG ();
34.         Object.Destroy (tex2d);
35.  
36.         // ...and write to a file.  Save however you like, and anywhere you like.  This is a simple example.
37.         File.WriteAllBytes (Application.dataPath + "/Pictures/SavedMap.png", bytes);
38.  
39.         // Resert to the original RenderTexture.active
40.         RenderTexture.active = activeNow;
41.     }
42.  
43.     IEnumerator ClearAndLoad () {
44.         // clear the FOW texture, setting everything dark.
45.         c.clearFlags = CameraClearFlags.Color;
46.         c.Render ();    // Render camera to capture a cleared plane
47.         GetComponent<Camera> ().clearFlags = CameraClearFlags.Depth;
48.  
49.         // Load old map
50.         LoadMap ();
51.         yield return new WaitForEndOfFrame ();
52.     }
53.  
54.     void LoadMap () {
55.         // setup loading material using saved texture (saved Fog of War overlay)
56.         Texture2D tex = new Texture2D (2, 2); // size does not matter since LoadImage will replace with incoming image size
57.         tex.LoadImage (File.ReadAllBytes (Application.dataPath + "/Pictures/SavedMap.png")); // path to saved texture
58.         Material m = new Material(Shader.Find("Custom/TextureOnly")); // (TexutreOnly shader pasted below) Just need a shader unaffected by light, etc.
59.         m.mainTexture = tex;
60.  
61.         // Instantiate GameObject with exact dimensions of FOW plane to be seen by camera
62.         GameObject clone = Instantiate (FOWLoader) as GameObject;
63.         clone.GetComponent<MeshRenderer> ().material = m;
64.  
65.         // Render camera to capture texture and apply to current RT (current FOW)
66.         c.Render ();
67.  
68.         // Destroy clone to remove from Scene
69.         Destroy (clone);
70.     }
71. }
72.  
73. /*
74. *
75. Shader "Custom/TextureOnly" {
76.  
77.     Properties {
78.         _MainTex ("Texture", 2D) = ""
79.     }
80.    
81.     SubShader {Pass {   // iPhone 3GS and later
82.         GLSLPROGRAM
83.         varying mediump vec2 uv;
84.      
85.         #ifdef VERTEX
86.         void main() {
87.             gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;
88.             uv = gl_MultiTexCoord0.xy;
89.         }
90.         #endif
91.      
92.         #ifdef FRAGMENT
93.         uniform lowp sampler2D _MainTex;
94.         void main() {
95.             gl_FragColor = texture2D(_MainTex, uv);
96.         }
97.         #endif  
98.         ENDGLSL
99.     }}
100.    
101.     SubShader {Pass {   // pre-3GS devices, including the September 2009 8GB iPod touch
102.         SetTexture[_MainTex]
103.     }}
104. }
105. *
106. * */

 

Fantastic. I followed the tutorial and it works on unity 5.0

Now I have a problem with the New GUI, it's not covered by the Fog of war ( the ui is already using world space camera).
@mmortall Any way to fix it ?

 

how did you do this, I tried that but my map is always on top of the plane even though the y axis of plane is greater than the map

 

Can someone please post the complete shader for a unity5 project ?
Even with #pragma surface surf Lambert alpha:blend i just cant get the FOW layer to do what its supposed to do.
Player1pos and other values like alpha are getting updated on the shader, but i dont get the desired result