Article about Lighting in "A Valley Without Wind"

[kikito]

I've just read this article and I decided to put it here in case anyone is interested.

It basically discusses how to implement light & darkness in a 2D-game



Basically it renders darkness as a group of blurred black circles. I'm pretty sure this could be adapted to create a "fog of war" effect.

http://christophermpark.blogspot.com/20 ... 8-new.html

As a fallback, they also have a z-buffer-based solution for low-end graphic cards, but they don't look as good (no gradient).

[Jasoco]

But is this Löve? Or some other language?

I can see this being doable in Löve if it's possible to erase part of a framebuffer.

Basically you first draw a semi-transparent black rectangle onto a framebuffer the size of the screen. Then you somehow remove sections of the drawing to reveal the transparent underlay. Then draw that to the main screen on top of the game field. But I don't know if or how it would be possible to use an erase type function. Would be nice if Löve let us erase sections using the alpha channel of an image. This is the only way I can think of that lighting would be possible in Löve. But I sure would love to see it.

[Robin]

Only if you use mapPixel(), I think. But that's ImageData, not Framebuffer.

It would be faster to draw a lot of black circles, I think.

[vrld]

I did something similar a while back (see here). Basically, this sprite is drawn multiple times along the border of what can be seen, while being slighly scaled, rotated and shifted. Depending on how much fog you draw, this will get very slow though...
This is how it looks:

[Robin]

Depending on how much fog you draw, this will get very slow though...

If the fog doesn't change too often, you can use framebuffers to speed things up.

[kikito]

But is this Löve? Or some other language?

Definitively other language. I read the name in some of his posts, but I can't find it now.

... framebuffers ...

It's actually not necessary to draw that many circles. The "completely black" part can be drawn using several small polygons. I'd assume that is much faster than adding circles. That is probably what vrld did on its game, isn't it?

If the game is "light vs completely dark zones" then framebuffers aren't really needed; for "grayed, but still visible zones", as in Starcraft's fog of war, you would need framebuffers (draw everything black on a "FOW framebuffer", then draw the it on top of the screen with some alpha)

... stuff ...

Very nice example. I totally forgot about your game. I should have probably posted my link on your game's thread.

I see some differences:

• The image he uses is regular; he doesn't rotate or scale. It simply has lots of semi-transparent borders. No offense, but I think it'd look better with more regular circles (this is totally a personal preference).
• In your game, it seems that "visited zones" are always light. On A Valley Without Wind game, light sources move and places with no light gradually turn black again. The "gradually" detail is actually a nice touch. Although I imagine it complicates things

[BlackBulletIV]

for "grayed, but still visible zones", as in Starcraft's fog of war, you would need framebuffers

Couldn't you just draw the circles, but instead use a color with a lower alpha?

Code: Select all

love.graphics.setColor(r, g, b, 150)
-- fire away!

[vrld]

• The image he uses is regular; he doesn't rotate or scale. It simply has lots of semi-transparent borders. No offense, but I think it'd look better with more regular circles (this is totally a personal preference).

Absolutely. And the pulsating of the fog and how it fades in and out if the player/fireball moves looks awesome too.
Also, my method is a bit sloppy: you can see some black corners where there isn't drawn a tile nor fog

[kikito]

for "grayed, but still visible zones", as in Starcraft's fog of war, you would need framebuffers

Couldn't you just draw the circles, but instead use a color with a lower alpha?

Code: Select all

love.graphics.setColor(r, g, b, 150)
-- fire away!

I think the fog would not look "uniform" then. The limits between the "totally black" zone and the circles would have artifacts due to the transparency. The circle borders would be visible, even in the "dark side". They would become too obvious.

Code: Select all

###########
###OOOOO###
###O...O###
###O...O###
####O...OO#
####O....O#
#####OOOO##
########### 

[Jasoco]

I made this neat thing for you to look at...

Screen shot 2011-04-01 at 4.47.44 AM.PNG (24.21 KiB) Viewed 1858 times

Fog of War.love

(2.46 KiB) Downloaded 92 times

It's a start. And it still runs fast. Can it be useful with some tweaking?

Basically it creates light sources. They have radiuses. For my example I created 2 lights.

Then there's a grid of darkness/lightness.

In each Update it first creates some fog around each light source as long as it doesn't fall inside another light source. Then it creates darkness in the grid in any tile that doesn't fall inside a light source.

It then draws the circle of fog and the grid of fog onto a framebuffer as solid black. Then copies that to the main screen as whatever opacity you want.

In a future version you can use an image with a gradient to make it look more real and blend better. Maybe particles? I dunno. Let's do some tests!

If I can get it working well, I might even use it in my game. Currently it only does circular light sources. Maybe that can change in the future?

Edit: The only problem is on my machine at least, if I try to draw anything with partial opacity to a buffer, it places a matte color behind it so it ends up looking wrong. Can anyone tell me how to fix that? I am having the same problem in my other project. I have to make sure to draw either 100% opaque or 100% transparent or else I end up with a matte color.