A way to do simple shadows

General discussion about LÖVE, Lua, game development, puns, and unicorns.
User avatar
Gunroar:Cannon()
Party member
Posts: 1085
Joined: Thu Dec 10, 2020 1:57 am

A way to do simple shadows

Post by Gunroar:Cannon() »

Is there a way to emulate shadows of an image simply by drawing a black version of a sprite upside down (under the original), but with a slant calculated from where the "light source" is? Any ideas?

It seems like the slanting can be done wither with a shader or love.transform, the same with upside down (but maybe also using angles).
The risk I took was calculated,
but man, am I bad at math.

-How to be saved and born again :huh:
User avatar
ReFreezed
Party member
Posts: 612
Joined: Sun Oct 25, 2015 11:32 pm
Location: Sweden
Contact:

Re: A way to do simple shadows

Post by ReFreezed »

You can simply use the scale and shear arguments of love.graphics.draw() and some trigonometry to transform the shadow. Here's an example that handles a light source from any direction:
SimpleShadows.love
(3.23 KiB) Downloaded 157 times
_screenshot.png
_screenshot.png (46.23 KiB) Viewed 3473 times
Tools: Hot Particles, LuaPreprocess, InputField, (more) Games: Momento Temporis
"If each mistake being made is a new one, then progress is being made."
User avatar
BrotSagtMist
Party member
Posts: 604
Joined: Fri Aug 06, 2021 10:30 pm

Re: A way to do simple shadows

Post by BrotSagtMist »

This _example_ looks way more awesome than it should for such a little piece of code :D
obey
User avatar
pgimeno
Party member
Posts: 3541
Joined: Sun Oct 18, 2015 2:58 pm

Re: A way to do simple shadows

Post by pgimeno »

Absolutely. Brilliant.
User avatar
milon
Party member
Posts: 472
Joined: Thu Jan 18, 2018 9:14 pm

Re: A way to do simple shadows

Post by milon »

I love how stuff in front of the light source gets silhouetted. Amazing!

EDIT: Just for funsies, here's a modified version where the light source follows the mouse instead.
Attachments
SimpleShadows.love
(3.24 KiB) Downloaded 126 times
Any code samples/ideas by me should be considered Public Domain (no attribution needed) license unless otherwise stated.
User avatar
Gunroar:Cannon()
Party member
Posts: 1085
Joined: Thu Dec 10, 2020 1:57 am

Re: A way to do simple shadows

Post by Gunroar:Cannon() »

You are all beautiful people :shock:

Though it's looking... flat. Like it those paper -style GE's like Don't Starve and Paper Mario. I don't even know how one would go about making the shadows more 3D looking. Still looks wonderful though!
The risk I took was calculated,
but man, am I bad at math.

-How to be saved and born again :huh:
User avatar
ReFreezed
Party member
Posts: 612
Joined: Sun Oct 25, 2015 11:32 pm
Location: Sweden
Contact:

Re: A way to do simple shadows

Post by ReFreezed »

Well, the sprites are flat, so all you can get are flat shadows. You'd need 3D geometry to some extent for more 3D-looking shadows. Since they look the most flat when the light comes from the side it could be a good idea to design your game/levels such that that situation doesn't happen.
Tools: Hot Particles, LuaPreprocess, InputField, (more) Games: Momento Temporis
"If each mistake being made is a new one, then progress is being made."
User avatar
darkfrei
Party member
Posts: 1168
Joined: Sat Feb 08, 2020 11:09 pm

Re: A way to do simple shadows

Post by darkfrei »

milon wrote: Wed Sep 21, 2022 4:37 pm I love how stuff in front of the light source gets silhouetted. Amazing!

EDIT: Just for funsies, here's a modified version where the light source follows the mouse instead.
Just awesome!
Screenshot_20220921-204701.jpg
Screenshot_20220921-204701.jpg (253.95 KiB) Viewed 3368 times
:awesome: in Lua we Löve
:awesome: Platformer Guide
:awesome: freebies
User avatar
pgimeno
Party member
Posts: 3541
Joined: Sun Oct 18, 2015 2:58 pm

Re: A way to do simple shadows

Post by pgimeno »

Put simply, it's what can be done using slant and size alone, which is what the OP specified.

In fact, slant does not produce correct results even admitting that the object is 2D. Since the light is a point, each side of the object should have a different angle with respect to the light, resulting in a shape for the shadow with diverging sides, not parallel.

I've been thinking what it would take to make it look right in that sense, but I couldn't think of anything short of a shader. And even with a shader it sounds tricky.
User avatar
ddabrahim
Party member
Posts: 182
Joined: Mon May 17, 2021 8:05 pm
Contact:

Re: A way to do simple shadows

Post by ddabrahim »

Wow, this example is amazing. There should be a repo to collect gems like this.
Post Reply

Who is online

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