Game Maker Studio Transitions Slide to black tutorial Video Lecture - Game

alright guys welcome back so in this
video I'm going to take a slight break
from the beginner series to look at
another simple transition effect that
you can put into your game transitions
with something highly requested by my
patreon supporters I'm I did I did one
video on it but I wanted to do a few
just to demonstrate some the different
sort of simple effects you can easily
create now the whole transition stuff
that was used to be built into game
maker is now obsolete those of you who
caught my little diary game the death
stream over the weekend will remember
this game a gun that shoots these that I
made in this game I have this little new
transition we press the R key and it
does this little blank sliding sliding
like fade transition okay and I'm just
going to basically show you how to
recreate that in your own game so my
basic setup here is really simple and
straightforward I have two rooms one
called RM underscore one one called
armed and score two I've given this one
a different color background just so
that we know when the transition is
working that's all I have at the moment
both room speeds are set to 60 just make
everything smooth and so you'll if you
do the same thing you'll end up with lot
of similar timings to what I do and so
on to both the same sort of numbers will
work properly so what we're going to do
to create this fade effect is we're
going to have a script that we can call
whenever we want this one ever we want
the the transition to happen and all
that script is going to do is it's going
to create an object which will handle
all the actual transition effect and
that object will then be given a target
room which will allow you to call the
script and send the game from one room
to any other room you want just in the
script itself by just passing along that
variable to the object the object itself
is going to handle all the actual fade
stuff but the first thing we need to do
is make this script so in scripts I'm
going to right click and hit create
script I'm going to call it ser and just
go sign feed I don't know if technically
this is a fade but slide fade was the
word I came up with so that's what we're
going
that's what we're going to work with the
now and here I'm just going to establish
a variable using var they'd let me go on
the reason I'm using VARs because like
this isn't a local variable I need to
establish in the object or whatever it
is that actually calls it's just
temporary somewhere using bar it gets
thrown away when the script is finished
fade is going to be equal to instance
and stop create zero zero and we haven't
made this object yet that it would be
obj underscore side rate just the same
word again but with obj instead of SCR
okay hey won't turn red yet because we
haven't made that object yet but it will
later doesn't matter where you create it
coordinates Y so I just wrote zero zero
and by saying fade to equal that we get
the instance ID of that object passed
into this third variable and which means
we can then use that as a fade dot goal
equals argument zero now what this does
what write fade dot goal does it means
we're creating a creating or changing a
variable inside of the object that is
fade which is the ID of the the object
we've just created we just create this
object we're setting a variable inside
that object that we just created
okay argument zero is the first argument
you pass along to a script whenever you
call the script so when we call the
script will be like something like SCR
and just goes side paid and as soon as
you call it inside the script dissolve
although that would be very dangerous to
do open a bracket and you'll provide the
first argument in the bracket so I would
say something like time underscore two
if I wanted to go to room two close
bracket semicolon and that's how we're
going to be using the script and the
first thing you put in this bracket here
is argument 0 if you have a you can do
not look to like I think it's like 15
like argument one or even two volume it
through and so on football and you call
those as appropriate in the script so if
I wanted another argument I would call
it there but you know comp but we just
need a one argument okay but we
obviously don't want to actually call
the script inside the script itself that
would be a pass
idea and that's it that's all you
actually need for the script okay so we
just made a temporary variable assign
the temporary variable to be a new
instance of this object that we're going
to make and in that object we give it a
goal variable which will be the room
that we're going to transition to okay
let's go ahead and close that the next
thing we want to do is create on the
actual object that's going to move us
from one room to the next
right clicking objects go to create
object tic persistent for this object
because it needs to continue to exist
from one room to the other exit we're
going to fair bring in the black from
the side it's going to go all the way
across and then when it's all the way
across we're going to move from one room
to the next while like it's concealed by
the blackness and then the black is
going to fade from the side all the way
back across again so it's transitioning
from left to right okay and so in order
for that to happen
there's object need to be persistent
because it needs to carry over from one
room to the next if we didn't it would
just like fade from left all the way to
then and then the black would instantly
become the next room which isn't what we
want anyway name this object obj
underscore side beta can not show us the
best name but we'll work with it and add
the create event and the create event
we're just going to establish three
variables are going to initialize them
all to zero first one is going to be
right equals zero the next one is going
to be left equals zero and the last one
is going to stage two equals zero so
we're going to do this in two stages and
that's the variable we're going to use
to control that will set one one one
stage to stage one is fading the black
from left all the way to right covering
the screen in blackness and then stage
two is bringing the blank back from left
to right to reveal the next room that
we're in and right and left of the
variables we're going to use to control
how far right or how far left we draw
the big black rectangle over the room
okay so then the only other event we
need in here is the drawer event so go
ahead and add the drawer and then drag
in execute code as always and this is
the code we need so the first thing I'm
going to do is set our draw color to
black
with that line draw set color black and
then I'm going to establish four
variables a bar and you can establish
multiple variables using barges by
separating them with commas so I'm going
to do X 1 X 2 y 1 and y 2 and these are
the variables we're going to use to draw
a big rectangle okay
so I'm going to set them up one by one x
1 equals x 1 is going to be the left
coordinate of the rectangle which is
going to be our view X view so wherever
our camera currently is at the moment
and if you're using multiple cameras you
might want to set which specific view
using square brackets but by putting no
brackets which using the the current
default view and we're going to add left
to that okay which is the variable we're
going to use to move the right tangle
around so by default is just the far
left of the screen but it's plus left
when we want to actually bring it across
which we want to do right away at the
moment is just zero so for now that's
just view X view so the left coordinate
or wherever our view is X 2 and you do
underscore X Q plus ax t right okay
which is going to determine the
right-hand side of our rectangle that's
what X 2 is going to be which at the
moment is going to equal exactly the
same as X 1 we're just guess we're not
drawing anything so both corners are
from the left like so it's just like a a
line straight down and then it'll be it
will fill out to the right to become a
rectangle now y1 is going to equal new
underscore Y view I mean that's the top
of the rectangle okay it's the topmost
coordinate of our view so that's the top
of the rectangle and y2 will always eat
all view and just got a wide view plus
view and the scar-h view h view means
the height of the V so from the top
corner of our view plus the total height
of the view means the bottom of the view
yeah so y1 is the top y2 is the bottom
right for the top of the screen to the
bottom of the screen the only ones that
actually need to change are the ones
that scrolling from side to side
so that's X 1 and X 2 so the left and
the the right corners and then as time
goes on because draw the draw step works
very much like a step event in which it
like it triggers every single frame no
matter what so here I'm going to write
light plus equals 15 okay and that means
that this coordinate is going to x2 here
is going to start off as just view X
view a plus is zero and then every frame
is going to get 15 added to it so the
right-hand side of our rectangle is just
going to get 15 bigger every single
frame okay and we don't even need to
stop that keep getting bigger because if
that goes off the far right of our
screen we don't see anything happening
off the far I've uh screen so that keeps
getting bigger it's it's not actually a
problem left we're going to do a similar
sort of thing I'm going to plus equal
and then just in brackets 15 multiplied
by stage 2 again you need to put that in
brackets I know I did semicolon okay
stage 2 is you know the moment is 0 so
at the moment every frame we're just
multiplying 15 by 0 which is obviously 0
and we're adding that number 0 to left
at letter just getting added zero to it
every frame so this line currently is
doing nothing but when we turn stage
turrets which turn stage 2 to equal 1
will be adding 15 to left every single
frame which will start to move our
second x-coordinate which is the
left-hand side of our rectangle and
that's when we've moved room and we want
to bring the rectangle back from one
side to the other
okay so having done all that we can then
say draw underscore a rectangle turns
yellow x1 x2 and x1 y1 x2 y2 and it's
not an outline it's the filled rectangle
so 0
then all we need to do is sell the
condition for stage 2 becoming stage two
becoming one from zero and actually
moving from one room to the next when do
we want to do that we want to do that
when the rectangle has gotten bigger
than the width of the view so if right
this is starting at zero and being
having had 15 added to every single
frame it will eventually be bigger than
view underscore W view which is the
width of our view I'm going to say plus
50 so right has to be bigger than our
camera width plus about 50 just an
arbitrary buffer on the end just so that
it doesn't instantly move at room the
moment the blank findt like light
finishes out just so there's a tiny
light delay of like three frames or so
becomes black and then like three frames
later we change room and start bringing
in the camera from the left okay
please bracket and then we want to say
and by putting two and some symbols here
which means that this condition and
another condition have to be true for
this if statement to work the other
condition is going to be just if not
stage two because we won't want to do
this continuously okay so as long as
stage two is currently 0 which it is we
start off with 0 not stage 2 will equal
true okay so assuming but that's
basically to make sure that we don't do
this more than once okay because
otherwise like right is increased by 15
every time so the moment this goes over
that that would be true and otherwise
like we would move this stuff in here
which would be bad because what we're
going to do in here is say room will go
to goal goal being the variable we
established earlier on in our script
when we actually created this object we
gave it a gold room we want to go to and
obviously if it weren't for this here
this would loop and
million times but we can now just say
stage two equals one so that the moment
this if statement remember this combined
thing returns true and we come into the
safe statement we set stage to do equal
one and then because that's no longer
true anymore this will never happen
again
okay so we've right has moved all the
way past the right hand side of our
screen Stage two is equal one and we've
moved from one room to the next but we
still have a giant black rectangle
covering the screen but because stage
two equals one left we'll start to get
15 out of two every single frame so the
rectangle will now move from left hand
side and shrink towards the right but we
since we don't want the object to just
keep doing that forever
I'm just going to say if left it's
greater than view underscore will you
view the buffer again then just destroy
this object just to kind of finish off
the procedure and just so we don't have
persistent objects just lying around
doing nothing because that would be bad
for the memory of our game okay let's go
ahead and click OK save changes to that
so this object will work perfectly now
all I need to do is in room one our
first remedy I'm going to go into the
creation code I'm just going to call
that script that we've got that it's an
SCR underscore side they'd open bracket
the room we want to go to is RM and the
scope to you can also use this to
restart the room which is what I did in
my little bar again but by targeting the
room that you're in like if I do that
just room then it would target the room
you're currently in a restart the room
you can just use it as you would use a
room underscore go to basically I'll
just go on to run that
and those up on fades from the gray room
to the blue room from one side to the
other I'll run that again coz fades in
from that side fade back in from the
other hand you chew in the next room
simple as that I will cover so a few
other different types of transition
effects but I'm just starting with
simple nice little effects not look good
that are easy to produce and my next
video probably again this week um trying
to catch up a bit will probably be
another video in the beginner series
yeah thanks for watching guys I hope you
enjoyed that and I'll see you guys next
time
you