How to implement dissolving fog of war?

Question

I want to achieve a similar effect to what you see in the following clip from Enter the Gungeon. When a character enters a new area, I want a dissolving fog of war which begins dissolving at the character and gradually expands outward.

https://youtu.be/3SzOXAzO_TA?t=848

Currently, I just have black ColorRects connected to an Area2D and I animate their transparency when the player enters the area. But this is nowhere near as satisfying as what you see in the Gungeon clip.

So, advice on how to achieve dissolving fog of war like that seen in the clip?

I was thinking I could do it using the lighting resources of Godot. For example, I could add a Light2D to the color rect that is initially invisible. When the player enters the area, I could position the Light2D, make it visible, and then animate it so that it gradually expands outward. Unfortunately, I can't seem to set up the Light2D properly to dissolve the color rect (not sure what kind of texture or render mode to use).

I could also do it with a shader, perhaps, though I am a novice when it comes to shaders. I guess the idea would be to add the shader to the color rect when the player enters the area, and set a uniform depending on the player's position so that I could then gradually decrease the alpha of pixels in a widening radius over time. If I had some GLSL code implementing something like this, I could probably adapted it to Godot's shader language, but I don't think I could write it myself from scratch.

Any advice?

Comments

I don't have an answer but check the old fog of war demo from godot 2.1 to see if you find something useful.

https://github.com/godotengine/godot-demo-projects/tree/2.1/2d/fog_of_war

I will comment this to some tutorial makers because a good example on 3 would be nice to have.

---

You're on the right track with Light2D. You can set it's mode to Mask. Then any transparent pixels in the light texture will become invisible in objects it touches. Check out the lights and masks demo project:

https://github.com/godotengine/godot-demo-projects/tree/master/2d/light2d_as_mask

Also take a look at this answer:

https://godotengine.org/qa/3031/how-do-i-mask-a-sprite

---

That's very helpful, thanks! I tested it with a texture depicting a white square with a transparent circle on the center and it seems like it has the potential to achieve what I want. Now all I need is the right texture (a circle with gradient transparency) to really test it!