How to do cleaner fog of war

Questions about the LÖVE API, installing LÖVE and other support related questions go here.
Forum rules
Before you make a thread asking for help, read this.
User avatar
Gunroar:Cannon()
Party member
Posts: 1085
Joined: Thu Dec 10, 2020 1:57 am

How to do cleaner fog of war

Post by Gunroar:Cannon() »

I have no idea where to star with fog of war and currently used tile based POVs, but I want to achieve something like this (without using shaders?).
Something like:
Image
Raycasting? Shadowcasting? How would I even draw out the black parts? With triangles?

Please help.
The risk I took was calculated,
but man, am I bad at math.

-How to be saved and born again :huh:
User avatar
Nikki
Citizen
Posts: 83
Joined: Wed Jan 25, 2017 5:42 pm

Re: How to do cleaner fog of war

Post by Nikki »

User avatar
Gunroar:Cannon()
Party member
Posts: 1085
Joined: Thu Dec 10, 2020 1:57 am

Re: How to do cleaner fog of war

Post by Gunroar:Cannon() »

Oh, nice, though the love2d ones seem to use shaders and I've been looking for a raycasting tutorial but they're mostly about that fake 3D stuff :cry:.
The tutorial seems helpful.
So, could I draw lines put of the player until they hit something and everything outside the lines are dark or am I seeing things completely wrong?
The risk I took was calculated,
but man, am I bad at math.

-How to be saved and born again :huh:
User avatar
Nikki
Citizen
Posts: 83
Joined: Wed Jan 25, 2017 5:42 pm

Re: How to do cleaner fog of war

Post by Nikki »

I think what i would do is :

- use that shadowcasting algorithm to get a polygon that describes the light shape, coming from your player in this case
- then instead of just drawing that polygon, which is not good enough because you want the opposite
- draw your shadow as a screen overlapping rectangle with some dark color and opacity
- then i'd use that polygon from step 2 in a stencil as a mask, so you can use it to cut a hole in your otherwise plain black rectangle with some opacity

edit: after that step ususally shaders come in to get a nice gradient going or some extra fuzzyness or what have you, but up untill this step the logic is similar in most the solutions found when looking for shadowcasting/lightcasting algorithm 2d

edit: ps , also filling around with blend modes (vs the stencil stuff) might be good enough too, i am not sure
grump
Party member
Posts: 947
Joined: Sat Jul 22, 2017 7:43 pm

Re: How to do cleaner fog of war

Post by grump »

Fog of war is usually more than just a visual effect. You didn't say if it should have any effect on gameplay. These shadow rendering techniques are purely visual and don't provide an easy way to determine visibility.
Gunroar:Cannon() wrote: Tue Nov 16, 2021 10:50 am (without using shaders?)
That's a severe limitation and rules out all straight-forward and efficient solutions for effect rendering. You have to learn shaders if you want to make advanced effects.
User avatar
darkfrei
Party member
Posts: 1168
Joined: Sat Feb 08, 2020 11:09 pm

Re: How to do cleaner fog of war

Post by darkfrei »

Starting code:

Code: Select all

function getAllUniquePoints ()
	local map, uniquePoints = {}, {}
	for i, segment in ipairs (segments) do
		for j = 1, #segment-1, 2 do
			local x, y = segment[j], segment[j+1]
			if map[x] then 
				map[x][y] = true
			else
				map[x] = {[y] = true}
			end
		end
	end
	for x, ys in pairs (map) do
		for y, bool in pairs (ys) do
			table.insert (uniquePoints, {x=x,y=y})
		end
	end
	return uniquePoints
end

function love.load()
	love.window.setMode(640*2, 360*2, {resizable=true, borderless=false})
	segments = {
		-- border
		{0,0, 640,0, 640,360, 0,360},
		-- #1
		{100,150, 120,50, 200,80, 140,210},
		-- #2 
		{100,200, 120,250, 60, 300},
		-- #3
		{200,260, 220,150, 300,200, 350,320},
		-- #4
		{340,60, 360,40, 370,70},
		-- #5
		{450,190, 560,170, 540,270, 430,290},
		-- #6
		{400,95, 580,50, 450,150},
	}
	uniquePoints = getAllUniquePoints ()
end


function love.draw()
	-- draw segments (polygons)
	love.graphics.scale (2)
	love.graphics.setColor (1,1,1)
	love.graphics.setLineWidth (2)
	for i, polygon in ipairs (segments) do
		love.graphics.polygon('line', polygon)
	end

	local mx, my = love.mouse.getPosition()
	mx, my = mx/2, my/2

	-- lines to uniquePoints
	love.graphics.setLineWidth (0.5)
	for i, point in ipairs (uniquePoints) do
		love.graphics.line (mx, my, point.x, point.y)
	end
end
sight-and-light-01.png
sight-and-light-01.png (50.89 KiB) Viewed 5018 times
sight-and-light-02.png
sight-and-light-02.png (104.64 KiB) Viewed 4999 times
sight-and-light-02.love
(1.63 KiB) Downloaded 98 times
:awesome: in Lua we Löve
:awesome: Platformer Guide
:awesome: freebies
User avatar
darkfrei
Party member
Posts: 1168
Joined: Sat Feb 08, 2020 11:09 pm

Re: How to do cleaner fog of war

Post by darkfrei »

I don't know how to fix that we are need the second collision, not the first one.

sight-and-light-03.love
(1.74 KiB) Downloaded 135 times

(fixed)
sight-and-light-04.png
sight-and-light-04.png (54.62 KiB) Viewed 4984 times
sight-and-light-04.love
(1.83 KiB) Downloaded 138 times
Last edited by darkfrei on Tue Nov 16, 2021 9:20 pm, edited 5 times in total.
:awesome: in Lua we Löve
:awesome: Platformer Guide
:awesome: freebies
grump
Party member
Posts: 947
Joined: Sat Jul 22, 2017 7:43 pm

Re: How to do cleaner fog of war

Post by grump »

The actual problem is not to darken the area that's occluded by fog/shadow; that's easy. The real problem for gameplay usually is to efficiently determine whether or not a particular game object is inside the fog/shadow.
User avatar
darkfrei
Party member
Posts: 1168
Joined: Sat Feb 08, 2020 11:09 pm

Re: How to do cleaner fog of war

Post by darkfrei »

No shaders:


sight-and-light-05.png
sight-and-light-05.png (108.52 KiB) Viewed 4969 times
sight-and-light-05.love
(2.15 KiB) Downloaded 171 times
:awesome: in Lua we Löve
:awesome: Platformer Guide
:awesome: freebies
User avatar
Gunroar:Cannon()
Party member
Posts: 1085
Joined: Thu Dec 10, 2020 1:57 am

Re: How to do cleaner fog of war

Post by Gunroar:Cannon() »

grump wrote: Tue Nov 16, 2021 8:46 pm The actual problem is not to darken the area that's occluded by fog/shadow; that's easy. The real problem for gameplay usually is to efficiently determine whether or not a particular game object is inside the fog/shadow.
Oh, I've already got that worked out ... cheaply :ehem: :ultrahappy: . I just need to keep seeing the different types of implementations and see whether one will work for me or whether I should try something else. My game is tile based "roguelike" but is a platformer. Trying to dee if I can make the game have a little stealth.

@Nikki
Hmmm, I see. That makes sense. I'll take note of that.

@darkfrei, nice, especially since you used no shaders for that other effect. Haven't tested it, how's the performance... Does it work with...like...alot of "polygons"(tiles). Which are alot on my screen.
The risk I took was calculated,
but man, am I bad at math.

-How to be saved and born again :huh:
Post Reply

Who is online

Users browsing this forum: Ahrefs [Bot] and 18 guests