Godot Tutorial -- 2D Lighting Video Lecture | Godot Game: Learn and Master - Game Development

hello this is my cat game scratch
welcome back to our ongoing - doh game
engine tutorial series today we're going
to be looking by user requests at -
delighting in the Godot engine now
you'll notice that I've jumped forward a
bit in time if you've been following the
series back to back is it because I
jumped up using a good of two point two
I believe them on so the user interface
is gonna change slightly from the
previous tutorials
but don't worry for the most part things
all work I actually did a video on the
jump two to two so if you want a bit of
a recap it's available they are chances
are if you're starting now you're
actually using a current version of
Godot so this is gonna be easier to
follow than previous parts of the
tutorial
alright so without further ado what
we're looking at today is 2d lighting
this is basically simulating 3d lighting
in a 2d world and the nice thing about
using a dough is it's very very easy so
with that disclaimer let's jump right in
here I've just created a very simple
empty scene and we're gonna go ahead
just set up our I mean wanna know 2d as
our route so we shall dub the route if
you hear some background noises I
apologize I just got a brand new puppy
and she occasionally makes noises when I
don't want her to don't worry in time
she will get better and I'll hopefully
pause it in advance but advance warning
alright so I created a root node here
and I'm just gonna bring in I'm gonna
use this guy it's my background we just
need something to interact this we're
gonna go ahead and create a new sprite
him and for our texture we'll go ahead
and load him so and let's make you
really big and ugly
alright so there's our basic scene I'll
go ahead and save it and we'll set the
default
and run okay so nothing magical so far
but we do have a scene to now interact
with now what we're gonna do is add a
light to the scene again we're gonna add
it to the root node not to the sprite
come up here just click plus and now
what we want is a node 2d derived light
2d flan crepe this guy and you'll notice
an exclamation mark right away that's
because it needs a texture now the
texture is what defines the shape and
intensity of the light so what you want
to do is create an alpha mapped image
grayscale basically where the black is
the least affected white is the most
affected in this case I'm gonna use
paint.net very simple process
pate on net is a free editor for Windows
but you can use whatever image editing
program you want just do make sure that
you download when you're done you
ultimately want to save with
transparency so save the file format
such as the PNG format that encode to
the Alpha Channel so I'm just gonna go
ahead I'm going to create a 300 by 300
pixel image for defining our light and
I'm gonna come in here hit control a and
delete the background see this
checkerboard transparency that
represents that there's no color or
there's no alpha channel now I'm just
gonna come down here to define we're
going to create a circular map so I'm
just going to basically create nice
circle mask like so and we're gonna make
our primary and secondary colors alright
I want you to be darker alright so white
to black and now I'm gonna come up here
to the gradients veil pretty much every
single graphic application Under the Sun
is gonna be capable of doing this but
you see we're just gonna start in the
middle and then span out so most intense
least intense and then no effect at all
so we're gonna go ahead and save that
guy so save you as and then light 2d and
we shall call the light mask PNG
all right we got that guy saved now
let's go back to our editor so we added
our light we've now can define the
texture for it so new image texture load
bring in our light mask like so so now
we've got this light defining you'll see
as I drag it across the surface there is
the effect of it pretty cool and it's a
programmatically it's a node derived
object so we can do pretty much anything
we want to it so example I'm gonna go
ahead and add a script to it this
current directory save we will call the
light controller I'm just gonna do a
really simple script that responds to
key presses and moves it around so
there's a first delete what we got and
set process input input input is true
and then here func input now just if the
event type equals event type key so if a
key is pressed if that event dot scan
code equals key I'm sure right now keep
in mind I'm doing this for demonstrative
purposes only you're not gonna want to
use this key codes in your own game you
use a input mapping probably there's
I've already done tutorials on input you
check the earlier part I think it was
perfect three where I covered this stuff
but was in this case all we're gonna do
is move ourselves so this is the light
node that we're moving so move local X
by one and the power of cut-and-paste
coding let's do the same thing left
and minus one
alright see if I screwed anything up yes
I did you vent type not found Oh input
mixing my game in da hit that running
alright so now you notice I press the
right arrow you can see the light come
across and you can see the direct result
of the light so as we're over a white
surface it gets brighter so these you
see the very center point of our light
this area right here right there that is
defined by our image so you can see the
intensity is most intense in the center
and that's basically yeah it's very cool
very powerful feature now we're gonna
back over here I'll show you a couple
the settings of it so if they're light
selected span this guy out a bit so we
just set our texture so far we can also
do a couple things we can scale the
light up so we can make it basically
bigger or smaller you know move this guy
so it's on tops you can see so obviously
scale will affect the intent or this
fall-off of the light like so or we can
also come up here and go to energy and
this is the intensity of the light so
basically just bright white or almost
none okay so those are the two key
values gonna use their mode we're gonna
come back to in a second for a very neat
trick but the lighting effects a pretty
straightforward the other thing you can
do is set the tint or the shade of the
light so there we've got our light is
reddish or blue we can come back down
let me get back to white though and the
intensity will determine how much of
that color supply so if I go with my
blue as we change the energy level here
so to you'll see it's much more blue and
0.5 little blue now blue is a bad choice
because the the color it's mixing with
in the background isn't really showing
the difference but so you can tint the
light quite simply now and another
important thing in here is our light our
interaction between our light and our
sprite so I'm gonna do one thing before
we leave here we're gonna be using
something called an occluder and we're
gonna want it to cast shadows we're just
gonna turn shadows and able to
but otherwise that's it for our light
settings we're not gonna really play
with anything else here we'll go back to
our sprite you'll notice in the sprite
if you go down to the canvas item you've
got this light max grid and it tells you
what channels interact with what channel
so go back to our light and you'll see
item mask and it's set the first channel
is set so if we went back to our sprite
and said all right click this and then
turn channel one off then you'll notice
it is no longer interacting with that
light so if you want some lights to
interact with some channels or sort of
some notes interact with the light and
other nodes and not to and vice-versa
just like with physics you can set it up
using basic this light mask here in for
the canvas item you're drawing with and
the light 2d it is set via the item mask
so that's how you can have some things
not interact with other things within
your scene all right now let's back
things up a bit and get into the topic
of occluders now include errs are cool
so what's gonna happen is right now we
have this light and the light is
affecting everything in the scene now
let's say that this nose here was
actually solid and let's say like a wall
it's somewhere in a game and we didn't
want the light to actually go through it
so what we need to do is basically set
up an occluder an occluder is like a
polygonal shape that blocks out or masks
away light and how do we do this well we
come back to our sprite which is where
we're gonna set the include or up on and
create a new node and you'll see it's
right here
light occluder 2d it's like that now
you'll see there's a masterís mark it's
not happy with us because we're not done
yet
now when effing we need to do is come up
here and actually add an occluder to it
so go new occlude or polygon so so we
now have an occluder polygon set to our
scene and you'll see now we have our
editing tools up here we don't want to
do a new polygon I'm just gonna define
out the shape roughly around our nose
myself so this area is now you notice it
it suddenly went dark in that area
that's because the light is no longer
interacting with that particular spot so
when we run our scene you'll see light
comes through and that is an occlusion
so the light will not interact with it
you can see the direct result and then
eventually we're actually going to be
inside of it and our light disappears
completely and then outside so this is
how you can set up areas where light
doesn't cast through this is how you set
your solid objects up in the world is by
defining Oh clue doors on them and
you'll notice I actually defined it it
on the item in the world itself not on
the light source and that is it that is
essentially lighting Inka doe it's very
very straightforward very easy to use
now there is another thing that we can
cover here and this is very useful for
things like fog of war now let's go back
to our light for a second and you'll
notice we've got our ad mode and this is
how the light interactions are seen so
far we've been doing it it's as an
addition so you can also subtract or mix
but what we're gonna do now is actually
mask I never imagine if your light was
you know your character carrying a torch
that followed them around - or you're
doing fog of war well this is an image
that will basically define the light
around the person so you can do a lot of
neat effects for this but we're gonna
have to go ahead and create a new mask
to do this so back to our trusty image
editor we'll create this as 300 by 300
again I'm just picking that value at
random by the way so there is our end
result now what we want to do is set up
a light mask here I'm gonna go ahead
you feel so we're fine with opacity
pleat fill it with that that was my
stupid all right fill it with black
we're good to go
now what we want to do is have it so
just the circular area in the middle is
good for our character so let's swap
this guy back Oh oops
come on are you going to apply apply all
right so now I'm gonna go here we'll
create another circle in the middle a
little smaller this time like you and we
are going to use the same tools as
before so we're gonna do a gradient you
want to do like the black you actually
I'm gonna do a little bit less do that
there so now basically we're gonna have
is all of this guy is blacked out so
we'll call this guy save it as I should
light mask was the better name here and
as a bad choice I use the first time so
we'll save it that's light mask anyways
so now we're gonna go back over to
Aikido engine yeah stop running there we
go alright so use our same guy and we'll
move him off so I don't immediately
spoil what we're gonna do I'm gonna
switch this guy instead of using that
texture I missed all right load other
guy alright so you can see immediately
it doesn't have the result you wanted so
like a very low intensity light but now
let's switch that mix mode so back to
our light 2d and we're changing the mode
instead to mask and now you're gonna see
a very profound effect tada
so this is one way you can implement fog
of war so if I wanted to go ahead and
you know have it apply a little bit more
tour scene so so you could actually
Center this guy around your character
and that was how you implement you know
a limited visibility range so that's
where your mode comes in very very
important but you'll notice the same
basic principles work here so where the
intensity is the strongest there is the
most light we're kind of inverting it so
we're kind of deeming out all of the
light except for in the area of our mask
and this could actually interact with
another light they're not mutually
exclusive so I could create another
light within the scene and have a mask
as long as our mask is within the area
of that light it will work in just fine
okay so that is it that's all I want to
cover today I hope you found that useful
if you do please do click like and again
I've done all kinds of Godot tutorials I
have more coming up don't worry I won't
be taking a number of months between
releases coming up so if you do want to
see more could go coverage in the future
please do click Subscribe there's all
kinds coming them along with other game
engines techno
reviews you name it so hope you did
enjoy that I'll see you all later before
my voice Gribbs up have a good day bye