Godot: Setting up lighting for topdown 2D

hello in this video I would like to share what I've learned about setting up shadows and shadow casting and shadow occlusion and stuff like that in a top-down game but and the coded engine because there's some kind of weird kind of issues and yeah I spend a lot of time thinking that all and I thought why not share a lot of information um so let's just start on got an engine let's create an new project all right I've now created a new color project right here on the desktop also I've prepared a little asset folder it's just a folder containing couple of all of simple assets to test the shadow stuff let's drag and drop services until surfaces on panel and gold and without say are imported project some switching to a 2d scene I could now just simply drag and drop those cubes here onto the sea likes us I don't want to do that because I want to apply a couple of changes to the cubes and I do not want to have to do that was every Q individually which is why I'm going to create a new cube scene but some actually let's use this blank scene for that leading source cubes again create a no to the earth root node for that scene adding is bright note and just dragging our cube match asset and the texture fulfilled of inspector here next thing I'm going to do is to add a shadow occluder no it's called light of glory to D and now we are getting a little exclamation mark I came here bringing it tells us at um are supposed to create a polygon shape that defines the shape of the of circular just clicking into the scene now while the lighter color 2d is selected prompts us researchers suggest into rights of polygons yes we want to do that and now we just click into the scene to create points of quality all right I clicked on basically the the corners of the cube that touches the ground although some tape of the cutest faces down don't words and it's basically all those shapes that's going to throw a shadow so let's save sad scene all right and we are going to create another scene which is our um they scene where everything comes together also initialize a initializing that one lesson note today as a road nod now we can't can't just drag and drop our result is a cube seen into here which is automatically going to instantiate sat scene which is indicated by this little again right here the lectins of note and hitting ctrl d a couple of times just duplicated not now I've got four cubes I want two of those cubes to be a little larger or actually now I want your son to be to be a little smaller so I'm just letting this cave to 0.5 all right next thing is we are going to create our light that I don't I don't think I want to create another scene because right now I'm planning just to have one single light those are known for that is called light today we are getting another exclamation mark indicator which is just telling us that we are supposed to add our light texture now so God accuses extras to give a form to the light basically so let's drag and drop this is light ing here it is out here right now it's not nothing really I suppose over here because we need to set up a couple of more things with the stuff to work first of all let's also create another sprite using this light orb image which is just um this is not really necessarily but it is it helps us to locate the position of selectors just makes it look a little bit nicer what I meant to do was okay the next thing is to add some kind of ground to oversee because right now we have just so clear color as background and salad can't work the top of salt color okay let the ground I have to cut this ground P&G was just some kind of grainy noisy texture moving this image to the very top of our know tree here makes it so that it's rendered first which in turn makes it so that it appears below or other sprouts now our life becomes submersible as well however the header Okuda still don't shadow closer don't throw any shadow because we need to enable this in July to denote as a array area and the inspector called shadow offices and that enabled too long now as you can see our cubes or throwing issue so let's check sour old in the actual game and perhaps you're not something which is it doesn't look quite right the problem is that shadows are rendered on top of the sprites that cast a shadow oh this line should be visible for example was that line here yes the shadow should be obviously behind objects are casted let's fix up a second ago what we need to do is to change and I filled in the inspector again we are going to the cube scene and selecting our sprite in here under visibility we find a filter called light mouse what this does is that it finds a layer which is a note is affected by a light source we want to change that layer for example is a second one important thing is that it is on a different layer there's a light mask from our light or clear light Okuda remains on at mask 1 despite us now on the layer to safe set C test play and okay now shadow is no longer ended on top of our game that's nice however now our sprites are not at all affected by the light source which may or may not be a problem depending on again for example let us add another node choosing they seen here the sounds going to be a canvas modulate what sir does they said it's a set of more lights so my economist basically with a color let's pick a dark color suplexes so you could imagine that now it perhaps at night no once again at least a a much darker place are up some kind of factory or so let's jump into the game again and what we notice here is that all the cubes are way to darkman right because the right beside a bright light source and the way that makes it even darker to really make this effect clear almost pitch-black now even selves or right beside a light source which shouldn't be the case doesn't look nice so what can we do here let's go to the light to D again and set the item colors we thought it's a light now effects items that are on Zack almost glare too as well so it affects for circular or clear which is on there one and the cube sprite which is on there too however this item call mosque down here which is different from this one up here this is was in range area and that's a bonus reasons a shadow area this item cool mosque is exclusively for the shadow clusters and in here you do not set it to the second layer that should give us a result we have a this is where it's going to get a little bit weird because if we do a test by now well as the shadows are once again rendered on top of our sprites that skips up let's play over on the left here after engine of the editor I mean on the right and changed something in our almost layer setup of Saladino all right that's interesting even those settings are exactly identical to when we started the game now we exactly have the effect we want the shadows are rendered in these subscribes not covering sprouts what the sprites are still affected by the light source even though it's the canvas is modulated it's very dark the cubes are very visible arisen the light source you can see that the pixels of the cubes that are closer to the light source our brightest and so said our auras are removed so I believe this is a book and I actually reported that one said God it helped yes yeah let me know let's play at it again just for szeliga enjoying the item called mosque in that door and changing it back to the initial state when we started the game different result this can't be intended actually let's automate since that's at a script to our light let's still put in script and within the ready function shadow Adam Cole mosques that's a building question now let's just so that you know item code mask equals a shadow item called mask obviously that's a silly lines that shouldn't change anything shouldn't have any effect let's start oh well it does have a effect this is what we want shadows are rendered under the sprites and the sprites are affected by our light source yeah and hopefully this is going to get fixed and this weird workaround it's no longer necessary but right now if you just use this one signal line added to your light sources you can achieve this effect I spent a lot of time trying to figure this out perhaps there is still some way or I'm misunderstanding something if you know a better way to achieve this it's out of the silly workaround likes out please let me know a photo time-being beliefs how to compute that makes a scene a little bit nicer I'm going to add an animation player move the light around an amazing light position over some three seconds Nexus is a little bit smoother oops no medically that's this animation nice another thing we can do is using normal maps so let's just go into a cube scene here let's select the sprite note and I've prepared a normal map here let's drop certain tip oh and now what we have pretty nice scene I find our cubes now not only cast a shadow but also are affected by the light source dynamically the society pickles right up depending on the position of lightens besides facing the light source are brighter than the sides it's in a way though it really looks like the light sources now on a particular side of a cube and that is a here is our final scene cool of course I'm going to upload this to github or good luck we will see you can check that out going to puts up your into the description and you could let me know if you would like me to make more videos in the future similar to this one

Channel: Holly

Views: 6,140

Keywords: godot, game engine, game development, topdown, 2d, lighting, tutorial, shadows

Id: JfBZfnkg1uM

Length: 21min 22sec (1282 seconds)

Published: Mon Apr 20 2020

Reddit Comments

[u/H0lley]

Hi, this is a first tutorial I made.

I do realize that it could and should be half the duration. ^^

[u/AireekonSwitch]

I've been looking for a good tutorial on this forever. I figured out a lot of it on my own but this... this just looks great! Thank you and to the creator (in case it isn't you). If it is you, then double thanks!

[u/baurawson]

This was very useful for me, thank you!

If feedback is any good, I watched it at 1.75 speed. Understood everything :)