BlackWindBooks.com | Newsletter! | risingthumb.xyz | achtung.risingthumb.xyz | github.com/RisingThumb | site map

risingthumb.xyz Fishmongers, Fearmongers, fishing fears from the deep!

Quiver Fluid Fog of War Effect

This blog post is a textual version of my video on the same topic. You can find that here.

This effect is taken directly from Teleglitch, though I did not refer to any of their code to achieve it. Teleglitch's code is available if you look through its files.

=> Sample project provided under MIT License
=> Video demonstration

To achieve this I create a Node2D and give it a Sprite child with the sprite I want to use. I then give the Node2D a Polygon2D and create this polygon which will be where the fog of war is casted from. It is recommended to cover the whole sprite, as we will use an offset to give it the motion we see. We then add this Node2D to a group called walls. We attach a script to it with the following text.

extends Node2D 
func getPool():
var vecsCurr = $Polygon2D.polygon
var vecs = []
for vec in vecsCurr:
vecs.append(global_position + vec.rotated(global_rotation))
return vecs

What this script does, is define a function called getPool() which we can call to get an array of the global positions of the vectors with their rotation properly accounted for. We save this scene as Wall.tscn

We create a new scene called LightCaster.tscn which will be where the light is cast from, and attach a script with the following text.

extends Node2D 
var vectorObjects = []
const offset = 10
func _draw():
for vectorObject in vectorObjects:
var importantVectors = []
for vector in vectorObject:
var offsetVector = (vector - get_global_mouse_position()).normalized()* offset
importantVectors.append(vector + offsetVector)
importantVectors.append((vector-get_global_mouse_position()).normalized()*1600+vector)
var important = Geometry.convex_hull_2d(PoolVector2Array(importantVectors))
draw_colored_polygon(important, Color.black)
func _ready():
var walls = get_tree().get_nodes_in_group("walls")
for wall in walls:
vectorObjects.append(wall.getPool())
func _process(delta):
if Input.is_action_pressed("mouseClick"):
update()

The function _draw() is called whenever update() is called, and in this draw function we handle the drawing of the Fog Of War as this is an additive method. By additive method, I mean that we draw the shadows on top of everything. The function _process(delta) can be replaced in your code, as what is key is that you call update() somewhere. You will notice towards the top we have an empty array named vectorObjects. What we do with this is in the _ready() function that is called when the node enters the tree, we get all the vectorArrays of all the walls. For your game, this may cause an issue with memory if you have too many walls, so you could create a timer to get all the relevant arrays of vectors within however many units of your central point.

We shall now discuss the _draw() function, repeated below.

const offset = 10 
func _draw():
for vectorObject in vectorObjects:
var importantVectors = []
for vector in vectorObject:
var offsetVector = (vector - get_global_mouse_position()).normalized()* offset
importantVectors.append(vector + offsetVector)
importantVectors.append((vector-get_global_mouse_position()).normalized()*1600+vector)
var important = Geometry.convex_hull_2d(PoolVector2Array(importantVectors))
draw_colored_polygon(important, Color.black)

What this does is loop over vectorObject in vectorObjects. Remember that vectorObject is just an array of Vectors. We then create a new empty array which will store all vectors we use for drawing the coloured polygon on top of everything. We then loop over every vector in vectorObject and add the vector that has been offset slightly, and the vector that has been extrapolated far out of the screen. We use get_global_mouse_position() as our central point here, but any Vector2 will work just as well. Normalization is where we take a vector and change it to have a scalar value of 1 but an unchanged angle. As a result, it effectively gives us the direction which we can multiply by. We next use a function Godot provides called convex_hull_2d. Explaining the convex hull algorithm is outside of the scope of this text, but effectively what it does is get the minimum points required to draw a line from point to point to capture all points within. With this, we then draw a black coloured polygon with the points returned from this function.

That's how you achieve a fluid fog of war effect without relying on Light2D or anything else.

Published on 2020/08/22

Articles from blogs I follow around the net

thecozycat 🤩 My raspberry pi 5 stuff is all here! My self-hosti...

My raspberry pi 5 stuff is all here! My self-hosting journey is about to begin. My site may go down for a bit as I transfer everything over.

via thecozycat July 14, 2025

Update: Old Computer Challenge 2025 > -- Old Tech, New Tricks - Day Two

Hello and welcome to the Old Computer Challenge - 2025 Edition! This is the second year when I’m participating, and if you didn’t see my previous year’s entry, you can check the OCC24 - Party like it’s 2004 article, although it’s not mandatory. Since last …

via andrei.xyz July 14, 2025

Setting Up an SDL3 Mac App in XCode 16

This is mainly a note for my future self, but making it a blog post in case it helps anyone else. This weekend, I decided to try making a little SDL3 app on my new M4 MacBook Pro. It took me a few hours to figure out how to get XCode to play nice with the SD…

via journal.stuffwithstuff.com July 13, 2025

Generated by openring