GameMaker Studio 2: Action RPG Tutorial (Part 20: Room Transitions #2)

hello everyone and welcome to the second attempt at recording episode 20 I screwed up all the audio for my first recordings that are gonna do all the footage again so if I just sound deeply sad throughout this video that's that's probably why anyway episode 20 we're gonna look at making a fancier transition system as I said last time you might quite like this like snapping effect like going from one room to the other in here perfectly reasonable if you decide to keep that but even if you do you still want to follow this particular episode and learn how to make fancier transitions because we've got a main menu transition coming from the main menu to the game we've got a cave that we're gonna go into later and lots of other different types of going from room to room where this sort of snapping effect might not look as good okay so we're gonna create a pretty modular transition system that we can call from anywhere in the game to go from one room to the next and do whatever kind of special effect we want okay so the first thing we're gonna do is create a new state for the player that they can be in when a transition effect is happening that's not necessarily to say the player will always be there when we're making one of these transition effects happen but if they are we want to put them into a specific state because we don't want to play a state labeled and move around and do stuff while we're moving from one room to the next that could cause all sorts of problems but what we do want them to do is not just stand entirely still we want them to carry on doing whatever they were doing on the frame they started the transition so if I walk into room exit here this son this object I want to essentially keep walking without pressing any keys so that the player just walks off the side of the screen while the transition is happening so we're gonna create a state that will allow us to do that alright so I'm gonna go to our player States area and make a new function called player state transition alright and let's make our font nice and big for this because there's not actually a whole lot that we want to put into this particular function okay we basically want to mirror the normal things that happen in Free State without taking into a and you play as inputs all right and to do that we basically have only need to call our player collision function and our player animate sprite function and everything else like relies that's zoomed in so much and that padded e to zoom out immediately everything else in here kind of relies on you know where we press the key or like you know what direction we should be facing based on inputs and your movement based on our inputs okay otherwise it's just play a collision player enemy sprite so I'm gonna copy this and go to our play state transition put that in there play a collision and this section here okay image index and put that in here as well and I'll add that comment at the top that movements okay so this bit handles on movement just just play a collision which just looks for a collision and movses or whatever our HP Envy speed are which will just be whatever they were set to on the frame we started this state and and then we animate appropriately because we have to animate manually with arcs out okay so that's it that's all we need to do for this particular state okay pretty simple straightforward we don't need to right away in or out the state because we're gonna handle that manually okay the next thing I'm gonna do is I'm gonna come to knock rose and we're gonna add a couple new constants on fire on macros that are gonna help us out first one I'm gonna call macro transition speed which is gonna be naught point naught 2 which self-describing Li is going to represent the speed of our transition effect and then two more which are kind of optional but I recommend them called macro out which is gonna be 0 and in which is going to be 1 now that might seem kind of redundant to you that I've just essentially created a new version of true and false in a way right called out and in why have I done that well the way our transitions are gonna work is we're gonna make an instance of an object called owed transition that fades us out of the room we're currently in okay and you know performs whatever transition effect we want to happen completely covers conceals the screen and then when the screen is concealed we move from one room to the next I'm using the I groom go to and then the effect will play in Reverse and faders back in to our new room and then when it's finished doing that it'll destroy itself okay so there's kind of two states our transition object can be in at any point in time and that's leading us out and leading us in now I could just have like a variable called state or leading or whatever that could just equal zero and equal one and I think it's easy enough for us to remember what it means but I think it looks really nice and it's much more readable and easy to come back to and be like oh yeah that's how this works if instead of zero one it just says out and in or instead of true and false it says out and in because there is contextually are relevant to what we're doing totally optional if you don't want to use these don't but I think that they're very useful and make things look a little bit nicer okay with those macros done I'm gonna make another new function called room transition this function is what we're going to call anywhere in our game that we want a room transition to occur so instead of doing room underscore go-to typically we will do room transition and we will specify the room we want to go to as well as the type of transition effect that we want to happen be that fade or slide or whatever in in this episode we're just going to cover a slide effect right so I'll write the description stuff at the top so at desk room transition type target room and our type and our target right because that's that's how this is going to work so the first thing I'm going to do in here is check to see if we have already got an instance of our transition happening because if that's true we don't want to create another one and create multiple of this object causing lots of room transitions to try and take place out once if we make one we want to be committed to it so this is the transition that's happening and not make any others so I'm going to write if not instance exists oh trans which will stay gray or turn blue because we don't actually have an instance we don't have an object called au transition yet we'll make that after we're done with this but assuming that there isn't an au transition we're going to make one with and use the with statement with it so that we can set some variables inside it based on the type of transition we're trying to do and the room we're trying to get to so I'm going to do with instance create depth and you you might want to make a layer I don't know a dedicated layer in your rooms that like for handling the transition that's above everything so you know the effect is always going to be above them and so on even though they're gonna use the the draw a GUI layer you know you don't want them to be above other things that use the draw GUI and so on but I'm just going to be quick here and just use depth it's not really gonna be a problem which is going to use a really low value that we know nothing else is going to be lower than so I'm going to instance create depth the position is kind of irrelevant I'm just going to do 0 0 it doesn't matter where in the room it gets made depth is gonna be negative 9999 just because we know nothing we're not gonna put anything lower than that and the object name will be Oh transition okay which yeah we sort of made yet and because we've done that with a with statement probably done this kind of thing before so forgive me if this is a redundant explanation but this will return the ID instance ID of this specific instance of our transition we've just made and we'll send that ID to this with statement so we can do things with it right away ok very useful combining with with instance create okay so with that Oh transition that we've just made we want to set type to equal argument 0 and targets to equal arguments 1 now we already know that this won't happen if this won't actually happen if there is already a no transition in the room but if we tried to do it I think it's worth as knowing because that's something we wouldn't really expect that happen generally okay we generally wouldn't expect to be trying to call this multiple times even though we've accounted for it and it wouldn't cause a book so it's good to know if we tried to do this even though we've protected the game from any real ill consequences so what I'm gonna do is write an else at the end here and show us a little debug message if this does happen at any point so right else show debug message and right in quotation marks trying to transition while transition is happening escalation mark okay just I in case you can see the end of that line there remember the closing quotation mark bracket and semicolon okay and basically what that will do is if we call this function and there is an instance of Oh transitional room it won't make a new one so it won't causes any problems there but what it will do is will let us know in the output window down here it'll just pop a little thing up to aid you won't have to worry about these when you actually compile your game they're not going to show you anyone but when when you're just running the game from inside game maker you'll get these little messages either come up in output which are useful so be if we see this we know that for some reason we called this a second time or multiple times when really we only want to call it you know we've we don't really want to be in a position where this is game called by the game when transition is already trying to happen right so it's worth is knowing because it might you know be a sign that something is wrong or something is behaving in a way we don't expect all right okay so with that done I'm now gonna go ahead and make the object that this function is trying to create an x' ition alright so I'm gonna go make a new object via whatever means you want I'm gonna call it o transition I'm gonna tick this persistent box first of all very important right even though this object isn't going to blast throughout the entirety of the game it's only temporarily going to exist while a transition effect is happening it needs to be persistent because it's going to fade us out of a room send us to the next room and then faders into that room so it still needs to exist in the next room so it needs to be persistent make sure that is ticked okay then I'm gonna add the create event to it and we'll just maximize this and also just sort minimize the room editor that we don't need that in the way this whole time I think that's nice and big so in the create event for our transition we're going to I'm gonna write a description on top of this actually I'm gonna call it enums and set up the cell pi is obvious because it's a Korea event but we might not know that we're doing enums in here so it's a good thing to press the label was an enum I don't think I've explained these before but I'm gonna write one and then talk about what it is okay so I'm gonna write enum trans type you may guess from the all caps that this is a type of constant and you'd be right slide fade with a comma at the slide okay and I could put a bunch more in here as well a slide fade push star wipe you know these are all just names of different types of transition okay with a comma after each one but not after the last one alright so what is an enum what I've created here is just another type of constant okay this now allows me to write anywhere in my game trans underscore type dot slide or dot fade and so on and they will return numbers that are unique to other enums of other elements of that union okay so by default and slide I think will be zero fade will be one push will be two star three and so on right and you can set them to equal things as well I could wipe equal the or whatever if I wanted to but all I need to happen here is for them to be unique to one another and this just really helps when you want to you you need to label things that are unique from one another you don't just want to use odd numbers I don't want to just be like oh what type of transition is this you know transition oh it's type 2 or whatever I or it's type 4 or ever okay and have to remember all those numbers are if I just create an enum I can just write this is what type of transition is this oh it's trans type fade okay and obviously to the to the game and to the code that just represents the number 1 or 2 or whatever right but to me it's super readable as just oh that's the fade transition okay and I don't have to remember what each number is that that's all items are pretty useful for this type of thing the only actual transition type we're going to make in this episode is this slide one I don't think slides even the right name for this type of transition you tell me if you think of the correct name for it you'll see what it is later but but that's the only one we're actually going to make feel free to put as many in here is you like the you know but you'll have to actually build those types in yourself later anyway run so leave that like that and then we're gonna make some variables for transition that it's gonna need in order to create the transition effect we're gonna create width equals a resolution W our macro for the width of our resolution width height equals resolution H height half-off equals height times 0.5 and percent equals zero and leading equals out okay you might wonder why I've bothered since we already have a constant for width and the height why're we just buried them in two variables you know why not just refer to that when we need to right and the reason for that is just that because we might change how this works just depending like our you know it's our GUI is scaled and so on if we ever wanted to say our don't base this off the hard resolution of the game but base it off on another scale of the window or something like that we can just change these two values here rather than going to say our draw step what we're going to be calling these quite a lot and replacing every single one okay just makes just make things a little more flexible for us with covert okay these are the two variables here right half here is just a quick way of us getting half the height so we don't have to keep writing high high times not point value okay just useful for us percent is going to start at zero and gonna make its way to one and that's going to represent how far the how far we are through the effect of the transition and then when it hits one we're going to move to the next room and we're going to make its way back to zero again and when it hits zero for the second time we destroy the object okay and then leading is just which direction we're heading so it's going to start as out which means we're fading out and then when it hits one percent hits one we're going to change from out to end and so on okay as I say that's just easier in my opinion to read and understand leading equals helped and leading equals in than it is to read equals zero or equals one right just easier for us to remember which is which okay so the next thing I'm going to do is add the step event for transition or not just the step eventually I'm gonna need a step I'm gonna add the begin step event okay kind of important okay so the next thing I'm gonna do is I'm gonna add the begin step event so add open event in step and just like begin step not step but begin step okay fundamentally the same event and that it happens once every frame but this the begins step of an object will happen or the begin steps of all objects will happen before any objects step events happen okay and the reason that's important is because we want this to all happen before the player gets a chance to run its step event because in here we're going to make sure that the player is locked to the transition state at all times okay Wow a transition exists so the description for this is just going to be progress transition because that's what this event is going to do and the first thing I'm going to do is as described we're going to write with a player state equals player a state transition that's the the state we wrote the start of this video okay and so every single frame at the beginning of the the frame we're going to make sure the player is locked into the state a nice thing with the with statement with with is difficult to say a nice thing about the width statement I don't know if I pointed this out before is that we don't have to do a check to see if a player exists okay if it doesn't exist then this just gets skipped all right well whatever we do in the wood statement just gets skipped if it can't actually find an instance to perform this code with which is handy because you know we might want to call a transition when there isn't even a player there in the first place and so on this just saves it writing a stupid if no instance exists so player thing right okay so we just write that and leave it as it is and it'll do the job we want it to do next thing we want to do is write if leading equals out open some braces and then put an else at the end here and I'll leave a comment that says leading equals in and another pair of braces okay that comet just to remind us that you know if bleeding is out then we know it's not in and if leading is not out then we know it is in so when leading is out we do the stuff in here and when leading is in we do the stuff in here and that separates our two main states that this object can be in okay so when it's out we want our percent variable to slowly approach or quickly approach if you want the number one right okay so it starts at zero and we want to make its way to one and I do that by using the min function which will return the smaller of the of whatever values we put into it and our first value is going to be one and our second value is going to be a percent plus transition speed okay which you'll remember is our macro 4.02 okay again we've done this plenty of times by now but just a quick reminder because I know it can be anti intuitive men we're doing men here's just so that we don't overshoot one okay so if we are 0.99 and we added point naught 2 and we go to one point zero one it'll give us one and that of 1.01 because one is smaller than one point zero one okay and that's what min does just helped us out there and when we're going the other direction we use max to do the same thing okay but there it is that's not simple as that so as long as leading is out every single frame we're going to add point zero two to our percent variable and then I want to say if percent is greater than or equal to one and I'll leave a comment here that just says if screen fully obscured because that's what that will mean room go to target okay so then we go to the target room of this particular instance don't worry about the fact that this will come up and say that oh we haven't actually declared this variable or used it anywhere else that doesn't matter because we set target in a different place than this object we set it in the room transition function if you remember okay so don't worry about that the only other thing to do in here is set leading so then equal in okay so once we've moved from this room to the next we set leading to in and then this will make % approach zero and bring us back to normality all right so if leading is in we want percent to make its way toward zero so percent equals max this time zero percent - transition speed okay same thing again let's close this so max just make sure we don't go below zero and we're just removing the transition speed from this every single frame simple stuff and then if percent less than or equal to zero or if it's screen fully revealed I guess then the only thing left to do here is get rid of this object so it doesn't do anything else because we don't need it to instance destroy that's when we are totally done and that's the logic there I'll zoom out just who can get it all on one screen their progress transition set the player to the transition state every single frame if we're leading out slowly make % approach 1 when it gets to 1 set us to leading in move room and when we're leading in make that approach zero again when it gets to zero destroy the instance simple logic okay then our last thing to do with this object is make sure it actually draws our transition effect and this is where the modularity of this comes because at the moment we just have a percent value that just approaches one at a fixed speed and we can just draw an effect in progress based on that okay and it could be any type of effect you want whether it's just fade in or I don't know a big shape or whatever you want to do for your particular transition okay so I'm gonna right click go to our open event and find in draw the draw gooey event I don't I don't think this more needs a description here because I think it's fairly self-explanatory what it's gonna do is just gonna draw our effects okay if type equals trans type dot slide and I mean you could do this with a switch statement if you just don't want to do it with an if or like a bunch of ifs for each one it really doesn't matter cuz type is only ever going to be one thing I am right so if did it do it however you want I'm just gonna do an if statement cuz it's faster and I don't have to write break and stuff after each line entirely up to you if you want to do it as a switch statement instead and but if type is trans type slide then we're doing odd trying to pick in fact I'm gonna write another one down here as well if I equals trans type fade I'm gonna leave this one blank it's actually the easier of the two effects to write as a fade in or fade out but I'm gonna leave this one for you as homework okay so if you've understood this tutorial and understand how it works you should be able to now in this space here write the visual effect for a fade out okay that's your homework okay wait until I've shown you how to do this does it make it a little clearer but your homework is to go away and try and write in a fade type as well and then you have two types that you can use going forwards right see if you can work that one out the only thing you might need that won't be covered in this video is draw set alpha okay go the manual check what that does you can work it out I believe in you okay I have anyway are a slide transition so we're going to suppose well do draw set color I'm just going to equal see black we're going to draw two rectangles one at the top of the screen and one at the bottom of the screen and we're going to make them approach the middle of the screen using our percent value right so we're going to draw rectangle and to do our rectangle we just need to give it two coordinates of two opposite diagonal corners so either like the top left and the bottom right or the bottom left and the top right okay so we give it an x1 and y1 and an x2 and y2 those two positions x1 and y1 for the first rectangle is going to be at the top left of our screen so 0 0 and then the x2 and y2 are going to be the width of the screen which we know is in width and the Y 2 is going to be % which is between noir and 1 x height R okay and then the last thing in here is whether or not this is an outline it's not bolts at the end there okay and so as percent increases we will get closer from a height of 0 on this rectangle just being a straight line at the top of the screen and all the way to being half our screen height okay when this is 1 so it'll go from the top of the screen to the middle then we want to do the same at the bottom so draw rectangle and this one's going to be 0 comma heights okay so as so far laughter the screen but the the bond so the bottom left of our screen and then the next one's going to be the top right corner of this rectangle is going to be first of all the X is going to be whipped across the screen and the height is going to be the full height of the screen - % x height ah okay and then false at the end there as well okay so the full hive full height of the screen subtracting that same value will get as a rectangle that moves up from the bond as opposed to one that moves down from the top okay and that's it that's all there is to actually drawing this effect in here ok as I said from this you can probably work out now how to do a feed em just by well I'm not gonna spoil it that's your homework go away and work out how to do a fade transition on top of this okay now all we need to do is get this to actually be called by our game okay so I'm going to go to a room exit in the step event where we cause a room transition so the moment we're just calling room go team I'm gonna get rid of that and I'm going to put two lines here okay I'm gonna first of all write with a player a state equal player state transition I just want to be super safe and make sure they're in the state right away let me put a hump from there I'm just to make sure they can't get in any more key presses or anything like the free map that we've done this sort of shouldn't happen because the way we done begin state but I just want to be careful then after this I'm going to write room transition to call that function we're in and we need to provide it with a type so that's trans type well sorry trans underscore type dot slide comma and then the room is target room right that's you know whatever we put in the room makes it in the last episode so I would run the game now but as often is the case there is something I forgot and that's that if we need to make it so the player actually ever comes back how would this stay okay we set the width at state they'd ever actually come back out of it at the moment so what we need to do is you know transition when we destroy the instance because the screens fully revealed we want to return control to the player and put them back in the Free State so with a player state equals player state free semicolon okay no brackets on the end there alright and then if I run that this should pretty much just work yeah I run off the screen there we get that transition happening everything is good okay and like is hard for you to tell but like if I just walk into then let go of the button our character still just neatly runs off the screen and if I press other buttons while it's happening I don't change direction or anything like that and it's pretty cool obviously because of our messed up level design probably shouldn't have them on the screen because I can walk down and something like that and then the same thing happens and it preserves our direction between the Rings and everything which is it all looks quite good okay no too tiny but kind of optional tweaks that I want to make for this before we finish this episode is first of all I'm gonna come into a room exit and I'm gonna wrap this whole chunk of stuff inside and if no instance exists Oh a transition and wrap this here now this might seem like overkill we do plenty of checking for in room transition to you know to make sure that that doesn't actually happen but the reason I'm putting it here is because we have this instance destroy thing here and it's theoretically possible in an age case that you might have the player switching a room exit when a transition is already happening which means that that remakes it's going to get destroyed and it could just be the transition bringing you into a room right and you're stood on a room exit which shouldn't happen in the moment and thank would kind of mess things up if it did but just uh you know be safe to make sure that doesn't actually kill the object we're gonna wrap that in there up to you if you want to put that in anyway and the other thing is at the moment the transition looks a little snappy like when it hits the middle it just instantly senses across if you want just a look a brief period of time where the screen is just black before the transition like sends you to the next room quick way to accomplish that is to just take our height half here and just like add 20 to it and then when we run this and go through here you can see it's just like just a few extra frames there because they're trying to add the bars are actually trying to get a little bit higher right the actual duration is exactly the same because it's still percent getting from zero to one but the effect just leaves the screen fully black for a little while before person actually hits one okay just so that we care a little bit of a smoother eel and then you can do very similar things with any any kind of effect right okay that's it so they have a super modular neat little transition system your homework has to go away and write in a fade version of it so you can call that whenever you want because calling it is just a simple manner as I say of calling room transition now I'm putting in the type putting in the target room I hope you enjoyed that one guys hope you find it useful and I'll catch you all next time thank you of course and as always to my amazing patreon supporters without whom I couldn't be doing any of this work a huge show in particular and in no particular order to the following cool kids Bowser the dog Zen I'm a Robert church's row van Dahlen Safiya flame daca dawned ago max n Bertie T relentless Rex do what do be Jason Dark Riders zero three one eight James seconds James L Andersen hair a youngin roopinder Reni Dan Scott Matthews leo Tyler Hubble maria celeste de oliveira frailing your unpaid ur cabbage pants Gilberto sis nose piggy mark Burgas john harwood sack cola goose cow Franklin Troy Mara Alex Schenkel will free Dolan Dara Carter green just Anna daga Julian Paul and Kaiser ho thank you all ever so much and thank you of course for watching catch you all next time

Channel: Shaun Spalding

Views: 9,808

Keywords: Game Maker (Video Game Engine), Tutorial, GameMaker Tutorial, GameMaker, Game Development, Indie Games, Tutorial Series, Game Maker Studio, Making Games, How to make games, GameMaker Studio 2, GMS, GMS2

Id: ZnwCrFwxQIc

Length: 32min 25sec (1945 seconds)

Published: Fri Jun 05 2020