Welcome, Guest. Please login or register.
Did you miss your activation email?

Login with username, password and session length

 
Advanced search

1396189 Posts in 67347 Topics- by 60494 Members - Latest Member: leocity

October 27, 2021, 06:49:33 PM

Need hosting? Check out Digital Ocean
(more details in this thread)
TIGSource ForumsCommunityTownhallForum IssuesArchived subforums (read only)Tutorials2D Shadow Effects
Pages: 1 [2]
Print
Author Topic: 2D Shadow Effects  (Read 82338 times)
JMStark
Level 1
*


View Profile WWW
« Reply #20 on: July 12, 2012, 03:01:35 PM »

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

Current Project: Shuffle Company
Twitter: JMRante
Website: J. M. Stark
FibonacciSpaghetti
Level 0
**



View Profile
« Reply #21 on: July 15, 2012, 12:01:01 PM »

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/
Logged
vittorioromeo
Level 2
**



View Profile WWW
« Reply #22 on: August 27, 2012, 06:29:41 PM »

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?
Logged

lynks
Level 0
*



View Profile WWW
« Reply #23 on: September 27, 2012, 04:50:09 AM »

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   Smiley

Logged

That is not dead which can eternal lie, and with strange aeons even death may die.
verticalvertex
Level 1
*



View Profile
« Reply #24 on: October 08, 2012, 04:44:43 AM »

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   Smiley



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

It's all good.
lynks
Level 0
*



View Profile WWW
« Reply #25 on: October 14, 2012, 09:35:30 AM »

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

Hi! Thanks for showing an interest Smiley

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 Smiley Or you can just check out some more screenshots at adranos.com/features/screenshots/!
Logged

That is not dead which can eternal lie, and with strange aeons even death may die.
Drahgi_
Level 0
*


View Profile
« Reply #26 on: November 28, 2012, 09:03:48 PM »

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).

« Last Edit: November 28, 2012, 09:12:31 PM by Drahgi_ » Logged
Sergi
Level 1
*



View Profile WWW
« Reply #27 on: November 29, 2012, 12:13:10 AM »

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:

« Last Edit: November 29, 2012, 12:18:56 AM by Sergi Lazaro » Logged

Pages: 1 [2]
Print
Jump to:  

Theme orange-lt created by panic