Game Maker Studio: Transitions: Fade in/out Tutorial Video Lecture | Game Maker Tutorial: Build Games from Scratch - Game Development

alright guys welcome back so today I'm
gonna be showing you one of if not the
simplest method of creating a very
simple
fade to black transition between two
rooms in your games that we have room 1
here and room to the just empty rooms
the different colors that we can tell
what room we're in at any given time and
we're just going to make an object that
allows us to fade the screen to black
and then fade that blank back in on the
next ring so new objects I'm going to
create an object or it's gonna be obj
underscore fade now this objects can be
very straightforward really in the
create event as usual we're just going
to establish a couple of simple
variables a is going to equal 0 a is
going to be alpha so that's going to be
the amount of transparency and then what
would I should explain what we're going
to do is we're going to draw a big black
rectangle over the screen and we're
going to draw a varying transparency the
start is going to draw a zero
transparency or zero alpha so it's going
to set this number to zero the numbers
going to make its way to 1 and then when
it's 1 means we're drawing a solid black
rectangle over the screen and that's
when we transfer from one room to the
next and then we simply make that number
go back down to 0 so a is going to equal
0 to begin with and fade is going to
equal 1 fade is going to be the variable
it's going to equal 1 while we're fading
out and it's going to equal minus 1
while we're fading back in on the next
room all this variable is for us to
control whether or not we're fading in
or fading out at any given time go ahead
and save that the other thing you want
to do while you're in here is go ahead
and tick this persistent box make sure
this object carries over from one room
to the next because it's going to be
fading as out it needs to also fit this
back in on the next room and then the
next add the only other event we need to
add sorry is the drawer event so I'm
going to stick the drawer event in here
as useful to remember the drawer event
also kind of works a little bit like the
step event and then it happens every
single frame of your game and it's the
event in which we do any kind of drawing
action
little code so in here first of all we
want to do is very that a variable that
we just saw up in the create event we're
going to vary it between zero and one
depending on how transparent the black
rectangle is that we're trying to draw
so I'm going to set a two equal clamp
now clamp is a special function that
allows you to take a value and clamp it
between two other values now we're going
to be adding and subtracting from a but
we want to make sure it doesn't go over
one and it doesn't go under zero so I'm
going to take first all the value is
going to be simply a plus a x naught
point naught 5 so that there is as
adding fade which will either be one x
naught point naught 5 or minus 1
climbing to null point nine five oh and
we're taking that and we're adding that
to what alpha so that's alpha increasing
because a is going to equal this value
but it's going to equal that value
clamped between a minimum of zero and a
maximum of one so that there is like the
easiest way to create on a variable that
moves between two different values at
the moment it only moves in one
direction because faded one so we're
adding one x naught point naught 5 to a
every single time this line is on lift
line is run so we're just increasing a
by naught point naught 5 every frame at
the moment then what we want to do is
I'm going to say if a equals equals 1
which means that our alpha will be full
and the rectangle that we're going to
draw and then it will be at full um like
it'll be fully opaque you can see its
solid black color room go to next which
won't destroy this object because this
object is persistent and then you know
set babe take or minus one you know if I
go set fade to equal minus one means
that when it comes background to running
this line again instead of adding nor
point five to a every single time
adding -1 x naught point naught 5 so -
null point naught 5 every single frame
but again keeping it between a minimum
of 0 maximum 1 then all we need to do is
check to see whether or not we're back
to 0
a equals equals 0 but we have to
remember that we start at 0 so we need
to check that we're at 0 and a fade is
minus 1 which means we're fading back in
8 equals equals to the minus one
instance destroy and just kill off fade
object because we don't need it anymore
okay so now what object does is it has
this variable called a which starts at 0
it climbs slowly to 1 and then when it
hits 1 we go to the next room and we set
this variable to minus 1 meaning that
then every single frame this variable is
climbing its way back to 0 and then when
it gets to zero and the game knows it
hasn't it's not just at the start
because it's going in the other
direction now we kill the object of
course that's not actually drawing a
fade to our screens and now we actually
need to draw the rectangle based on
where this Y what number this variable
currently is I'm going to say draw set
color see black draw set alpha to equal
a alpha being the transparency at any
given time of our draw tool by setting
it to a we're sending it to whatever
this variable currently is and draw a
rectangle now I'm just going to space
out the different parts of this
bracketed section over the next few
lines to make it a bit easier to read
and I'm just going to refer to the
different coordinates of our camera or
our view I could just put like 0 as like
the X and 0 as the Y and then the room
size is like the width and room height
is the height and so on but what I'm
going to do instead is I'm just going to
use the view because whatever our
viewport is that's that's exactly what
we need to fade out and that working
more games than just this one so via X
view to get our the x-coordinate of our
current camera and then view underscore
y view 0 to get the y coordinate of our
con camera via X view zero to get the x
coordinate of the camera plus view width
view W view which will get the the width
of our current camera which means you
know we take like our x coordinate we
have the width the camera which gives us
the right-hand side of the camera and
view why view zero plus view H view zero
to take the y coordinate of the camera
again but this time add the height of
the camera to give us the bottom cordon
of the camera and then whether or not
the rectangle is an outline which it
isn't so zero and that's the rectangle
the only other thing you would want to
do here is of course that draw offset
alpha back to one in case you need that
for drawing anything else in your room
which would probably do we don't
technically need that here but you might
need it in your game so that's that and
that will draw that properly um the only
other thing I would do is go into depth
here and set depth to be a large
negative number so now set this to
negative 9999 for example and just make
sure that that is higher a rather make
sure the depth is more negative than any
objects in your room that you want the
feed to draw on top of otherwise the
fade will draw underneath them so now if
I go into room one here and I just plonk
object fade in the middle of the room
just run the game should see very simply
it fades to black and then fades in on
the next room just like that run it
again this is kind of fast you can see
that's working so yeah that's how you
create a simple fade transition the
other thing you how you would you
actually use this in the game you could
just whenever you make a transition from
one room to another instead of calling
room go to next
you can just do instance create obj
underscore fade like I can do that for
example in the creation code of this
room instance create zero zero or obj
scope PEGI and that will create a fade
object that will then take you through
to the next room as you do this you
probably also want to disable player
control on to make sure that they
currently do anything while the room is
fading out and stuff like that that's
kind of the main limitation of doing it
in this very very simple way but it is
by far the quickest way to just get a
simple fade transition open running in
your game hope that was useful to you
guys and I'll catch you guys next time
thanks for watching
you