GameMaker Studio 2 - Room Transitions using Sequences

this video is going to allow you to use a single function to make transitions from one room to another or even to the same room using any combination of in and out sequences that you can think of creating code is in the description free for everybody funded by my patreon supporters the first thing we're going to want is some sequences so that we have a context from which to understand how this is all going to work um the first thing i want you to do there for is make a pixel sprite okay i've named mine s pixel it is literally a one by one white pixel this is actually super useful for a lot of different things and i have one of these sprites in the vast majority of my products once you have this go ahead and make a new sequence and right click in the workspace to do that and i'm going to call the sequence sq fade out let's put it with our other ones that i made earlier um then in the top right corner here you'll have this little floating uh box if you click on a this thing here the canvas frame settings you can change the frame that this offers you that's pretty useful um to be able to set that to the size of whatever your game's resolution is uh mine is 640 by 360. so i'm going to change this to that you can also if you go to file preferences change what that is by default if you would like once i've done that i'm also in that that same menu sorry i'm going to change the origin x to be uh minus half of that value uh so minus 320 and the origin y to be minus uh half of the height so that's minus 180 there just to put that origin in the top left corner um i just find that personally useful so that when we place the sequence in the room uh this is going to be like a whole transition animation when we place it in uh into our game i find it easier to place it in the top left of wherever our camera is because that's also how cameras work right you might find the origin works better in the middle for you if you want to position it to a camera object or something like that do whatever you want i'm putting it in the top layer i'm going to drag our s pixel onto the track panel that's going to create a new s pixel it's going to be really really small so just you know use control on the mouse wheel just zoom super far in so you can quickly just grab the edges of this make it bigger so we just get to use this as just an arbitrary rectangle of whatever size we want this is going to be a fade animation so we just want to cover the entire of this frame uh that we defined don't worry about going over a little bit that's absolutely fine next initially i want this to be black and transparent fully at the start so i'm gonna click on this s pixel thing click this little plus button here and click color multiply just to add that attribute to the list of things we can track and change and make sure this automatically record changes button is ticked and if it is uh just go ahead and click this little white rectangle here next to uh the hex listing of our color and set this color to be fully black and turn the alpha all the way to zero okay and then it'll look like we've just gone rid of the rectangle because it's now fully invisible i'm going to stretch out uh this bar here it'll be a different color i think it picks a random color whenever you place it just stretch that bar all the way to cover the entire sequence the sequence is 60 frames long at 60 frames a second that's about right for a transition for me uh we're going to have it basically do the transition for the first 50 frames and then be fully black fully opaque for the the last 10 frames and then on the last frame we're actually going to go to the next room okay that's generally how i'm going to have these transitions work you can you can do it however you want obviously i'm going to come to the 50th frame here as i just said and i'm then making sure that this is on the 50th frame making sure that this is still ticked we're going to change the color again and just change the alpha from 0 all the way to 255 and click ok then if you scroll over the sequence you can see we've created a fade out sequence pretty easily now there's a very easy way for us to create the opposite of the sequence if i just right click and go to duplicate and call this sq fade in make sure you double click on that to actually get to that don't make the mistake i do of just duplicating a thing then continue it continuing to edit the original i do that way too often with sq fade in up we've got the same sequence here but what we can do is if i uh if i click the little arrow here just to unfold this you can find the keyframe that we've actually changed which is just this one color multiply uh attribute we can just swap these keyframes around like this and then if you play it you'll find you've got the opposite of what you just created okay very simple way if you're making out and in transitions to just do that to be able to make the opposite of whatever it is you just made now i'm going to make a new script i'm going to go to scripts create script and get rid of all the boilerplate code that you start with i'm going to name the script transitions because it's just going to contain everything that we're going to do with our transitions all the functions related to our transition is going to be in this script the first thing i'm going to do is create a function that will place a given sequence into a room all right it's going to look something like this okay when we call this function transition place sequence we're going to give it a type which is going to refer to one of our sequences that we created we're going to see if a layer exists in the room called transition if it does we're going to destroy it so it's no longer there you'll see why that's important later and otherwise we're just going to make sure that we then create a layer we're going to create a depth minus 9999 this might vary depending on how your game works and how your how your layers throughout your game work um but by default since the highest layer and your game is going to be depth zero having a depth of negative 9000 means that's we're going to ensure that this is in front of absolutely everything else okay how you do that in your particular game a project is up to you but that'll work for probably most people then layer sequence create simply takes that layer and actually creates that sequence uh that we gave the function on that layer all right the other slight variation here will be we've given this coordinate zero zero which just matches up to uh you know the default room size we're gonna put it in the top left corner obviously if you've got cameras and stuff moving around you're going to want to put this wherever the camera happens to be okay so you'll you'll probably want to vary how x and y works in that particular circumstance all right next up we're going to create the function that is the key to all of this really it's uh the transition start function that we're gonna call whenever we want to make a transition happen in our game between one room and another room and that'll look something like this okay so this function we've just made as you can see accepts three arguments uh room target being the room that we're going to go to type out being the type of sequence we're going to use to transition out of the room and type in being the type of sequence we're going to use to transition in to the next room all right we've got two uh global variables in here that we're also going to declare um in a bit of a a way unique to game maker 2.3 that i'll show you in a second but we're going to check if global mid transition is not true all right that's what the exclamation mark is for uh that's just gonna be a safety check to make sure that if we're in the middle of a transition already and we've called this function for whatever reason it won't go off again all right um so we turned global mid transition to be true assuming it wasn't already and then our global room target is going to equal whatever our argument was we need to store this in a global so that when our transition finishes something in our game knows what what room we are actually trying to get to next okay because this is just where we're starting the transition transition play sequence is the function that we just made so this is going to actually place our fade out transition into the room by creating that layer and placing it in the room and then it will start playing all by itself then we're going to do something slightly special we're going to use layer underscore set underscore target underscore room that's going to allow us to instead of targeting layers in the active room currently in memory and running we can actually target the room data of our game okay and change the properties of layers of rooms that we don't currently have loaded this even works if we want to target our current room and we can change it for the next time that room would load so by doing layer set target room and doing room target we're actually now targeting the room that we're transitioning to for any further functions that we call that affect layers in some way and so then if we call this function again uh transition place sequence but this time with our in sequence we're going to create that sequence on a layer in the room that we're going to instead of you know the room where we're currently leaving then we call layer reset target room to put things back to normal so that if we do any other layer functions later on they'll target the current room again then we just do a return true else return false that's just a nice thing if we want to do any error checking and make sure that we're not calling this multiple times when we don't need to we can assign this to a variable and it'll come back true assuming there wasn't a transition already happening so that we started one if there was a transition already happening we return false simple as that now we're going to go ahead and actually declare these global variables that we've used so that we don't get an error when we check this now normally before 2.3 what you would have to do is probably have an object or something and a create event where you declare all your global variables and stuff like that don't really have to do that in game maker 2.3 because um every script that you have in your game is going to get called once at the start of your game so what we can actually do is just put these global variables at the top of the script here outside of our functions there's global dot mid transition equals minus one and global dot room target is equal to uh minus one in fact the transition should be false my bad so when the script gets called once at the start of the game in order to actually declare all these functions at global scope it will also declare these variables for us so then when we actually get around to calling this these globals will exist and be ready for us to check and use lastly in here we want to make two more functions that are going to be the moments that we'll call at the end of our fade out transition and at the end of our fade in transition the fade out moment is going to look something like this okay ultra simple it literally just calls room go to and refers to whatever is in global room target no arguments or anything like that it's just so that we have a function that we can call from the end of uh from the end of our sequence to tell us to actually go to the next room the other function is going to look like this again really simple no arguments we're just going to destroy the sequence when it's finished so it doesn't just remain behind in memory and turn global.mid transition back to false so that we're ready to call another transition when we need to you probably also want to put some useful comments at the start of these functions just to remind you what they all do i'll do that now all right and that's the whole script the last bit of setup you'll want to do is to actually come to your out and in transitions and set them up to use these moments so if we come to sq fade out and we come to the very last frame here make sure that's where your little playhead is just right on the end frame if you click this little lightning bolt which is the add moment button you can specify a function to call on this particular frame we're going to call transition change room then just hit okay all right and then when you want to do the same thing in our fade in transitions come to sq fade in and the 60th frame hit the lightning bolt transition and it will come up here transition finished click ok and then when that ends it'll call that function then whenever you actually want to use this i have this object here called o mover when i press the space key um get a target room that you want to go to via however you want to do that whether it's colliding with a zone or pressing a button or whatever else here i've just got it to toggle between going between room one and room two and then just do transition start pick the target room that you wanna go to pick the sequence you want to use to fade out and the sequence you want to use to fade in um i'll use sq fade out here fade in those are the two that we've made just to demonstrate it run the game and now if i press space we do a fade out and fade in that's the sequence we've just made you'll notice i had a different one in there slide out diagonal because this is the whole joy of the system you can make any any sequence that you want and all you have to do is just call the relevant um moments at the end to make it into an out transition and an in transition all right so i've got this cool little slide slide out and slide in um so we can put those in here instead sq uh slide out diagonal sq slide in diagonal run that now we have that transition instead and we can use them in combinations so we can have uh sq fade out with slide in and that will mean we fade out but slide into the next room or do whatever you want okay it's for a 40 line script um that's it's pretty powerful because you can just now create any number of uh sequences you want um and use them in any kind of uh out and in combination hope that was useful as i mentioned the entire code for this is in the description including just like you know this set up an example of it and what the few i've made down here this little github thing you can download if you want all made free for everyone to download and use all thanks to funding from my patreon supporters so you can thank them as i'm about to in the credits just for watching guys see you next time an enormous thank you to my patreon supporters who fund my work and allow it to exist for everybody else for free thank you in particular and in no particular order to michael college tim tharman cameron busby chao parker john kenai stephen chenier raiden borgia mk ultra hello winter cookie draghi rachel stewart arctics feral princess john c team d mr oars jordan hague dalvore vacants phil keane andrew gilbert the holtzman effect keizer ho justin nadega alex schenkel troy mara boris the wizard zach collar figgy cabbage pants and peter leo scott matthews mark burgess simeon yaya legoglow renee dam rupinder hare darkrider0318 jason james l anderson james siggins relentless rex bertie t daca dondago mike kb robert churches kimpo bowser the dog max m zephyr flame and pong pong zhao if you want to support this work but you can't afford to do so on patreon that's absolutely fine doing the regular youtube things clicking like subscribe etc helps out just the same thank you very much for watching i'll catch you all next time bye

Channel: Shaun Spalding

Views: 11,672

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: TCwIerWM2iU

Length: 15min 16sec (916 seconds)

Published: Fri Oct 23 2020