next »

[JMStark]

Really cool technique and end result. I have always liked the look of dynamic shadows in 2D games. I wish they were more common.

[FibonacciSpaghetti]

Thanks for this... it was fun to play around with.

Not sure if I followed all the steps correctly or if the code is useful, but here's an example in JS fiddle that draws to the canvas.

http://jsfiddle.net/tfaas/7K45A/

[vittorioromeo]

I implemented this, but shadows are behaving in weird ways. I've noticed that in your OP you have this

Code:

if (dotProduct(normal, lightToStart) < 0)
 {
  return true;
 }
 else
 {
  return false;
 }

But in your implementation it's actually "> 0".

What one is the correct version?

[lynks]

Thanks for posting this, it has given me some ideas to improve my very mediocre shadow engine. Its needed an overhaul for months anyways, this might have just given me the motivation   

[verticalvertex]

Thanks for posting this, it has given me some ideas to improve my very mediocre shadow engine. Its needed an overhaul for months anyways, this might have just given me the motivation   

The lightning looks real good. Care to share some more info about it?

[lynks]

The lightning looks real good. Care to share some more info about it?

Hi! Thanks for showing an interest

It's really quite simple; certain entities are marked as light-producers (static things like fires, braziers, lava etc. As well as moving things like other players, NPCs, even fireballs).

When the rendering engine is building the frame, it builds a list of all the light producers in the visible area. It ends up with an array of 'LightSource' objects, each of which has a screen position and an intensity.

It then builds the darkness mask. The base colour is based on where the player is, and what time of day it is (it goes red during sunrise and sunset, is transparent during the day, and is almost opaque underground - the screenshot is underground). I simply iterate over the array of light sources, and 'carve' ovals out of the darkness mask. I do this with concentric ovals to give the 'fade out' illusion.

Finally the darkness mask is simply drawn on top of the main render, and as it has an alpha-channel, the render shows through more clearly closer to the light sources.

The position of each concentric oval is slightly randomized with each frame, so all the light sources 'flicker' slightly. The effect is quite nice, but breaks down with walls, cliffs and other '3D' parts of the game world, as the ovals don't deform around objects that have a height. There are also no shadows.

For a live demo, you can head over to adranos.com. It's an MMORPG that I've been building in my spare time. It should be pretty simple to sign up, download and run the client Or you can just check out some more screenshots at adranos.com/features/screenshots/!

[Drahgi_]

I hope I'm not doing a necro here...
but I really must thank-you for putting this tutorial up.
It's been literally the ONLY shadow tutorial I've seen that I can understand.

Anyway, bellow is my *basic* implementation result (In Pascal). It's not quite finished yet (don't have multi-light mixing working yet or shadows that aren't fully black I'm also planning to make shadows soft by drawing a gradient image along the edge of the shadow).

[Sergi]

Getting the gradient right is not totally straightforward. You can't use linearly decreasing radial gradients because then the light looks like it's a gradient made in Flash.

If you try to be physically accurate, you can think of the light as being 1 meter (for instance) over the ground, then using the usual lighting equations used in 3D. But the problem there is that they have no cutoff, the light contribution would never be zero no matter how far you go. What I used in my old 2D shadows experiments was to use an exponential function (I don't know if the terminology is right), so that at the edge of the circle the light is zero, at the center it's one, and it decreases exponentially, something like this:

Code:

// 0 <= normalizedDistance <= 1
// rate should be something like 0.001
// returns from 0 to 1
float exponentialDecay(float normalizedDistance, float rate)
{
    return (pow(rate, normalizedDistance) - rate) / (1.0 - rate);
}

Haven't used this snippet in a while, so I don't guarantee that it works perfectly. Also, I don't remember if the light went 0 to 1 or the other way, but that's trial and error. The rate controls how steep the function is in the beginning.

Edit: Here's what it looked like when I tried it: