How to Make an RPG in GameMaker Studio 2! (Part 5: Room Transitions)

okay so in this video we're gonna make some room transitions we're gonna be able to move between different rooms in our game which is pretty great and we're gonna do it with a cool little transition effect okay so moving between rooms and creating new ones so let's go over to our room folder since we're gonna have more than one room now let's go ahead and rename this one this one is decidedly my living room so i'm gonna name it rm underscore living room and that's perfect and now we can create a new one create room and we can go ahead and call this one rm underscore bedroom so an important thing to note here is actually if we go up into this quick access folder you'll see there is something labeled room order which what this means is this is the order in which the rooms will appear in the game so the first one on top here is always going to be the one the game starts in so even though down here bedroom is on top up here is where you would want to change the order so if you wanted to start in the bedroom you could just drag it above now the game will start in the bedroom so we can go ahead and leave this here because we're gonna suit everything up now we gotta remember to set all of this stuff down here in the bottom left to the same when it comes to the viewports and cameras so we need to enable our viewport we need to make it visible remember it was 288 by 216 and our viewport was uh 864 by 648 [Music] and we need to make sure that the camera is following the player object and that our speeds or our borders are half the width and the height of the camera or just a super high number now for this room this actually isn't going to be super important because i'm going to make this room the same size as our view so that way the camera just stays totally stable but it's good practice to just do this in every room in case you resize it or whatever so i'm going to decorate this really quick so i'm going to add my tile layer and i'm going to add my tiles go down here in the tile layers select my tile set my house tile set then i'm going to get a little a little funky then i'm going to add some of my objects and then i'm going to add a new instance layer for the walls again okay so if we run this again we'll start the game in our little room because up here it's the top in the room order okay so now we have two fully functioning rooms now we just got to figure out how to move between them so let's get out of here close out of this and we'll get back to our workspace so let's make a new sprite we're doing another good old 16 by 16 pixel square i'm gonna make it this bright green and i'm gonna turn this opacity down on this layer a bunch so we're gonna name this new thing this is gonna be sprite warp block okay so let's make a new object we are making object warp block set the sprite the same and now we're going to make a create event here so basically what we need to do to actually move the player between two rooms is we have to change the room that we're in obviously and we need to move our player to the correct x and y coordinate of the new room so let's set up some variables to do all that stuff so we can have a target x we can have a target y and we can have a target rm for target room now these zeros are obviously just temporary we don't always want this to be where the player ends up and i'll show you how we're going to set this for each one of these warp blocks in a minute first let's go to our step event so we want to set this up to where once the player touches a warp block that we put down the player will go to these correct coordinates and this room so if place meeting our x and y coordinate with the object player so now place meeting is being called from the block so it's saying if the player touches me let's run this code so the first thing we want to do is use this function called room go to [Music] and what we're going to put in there is our target room so whenever we set this target room variable this function will take us there the next thing we need to do is get the player's x and y coordinate correct so to do that we are going to say object player dot x equals target x by doing this by putting like an object name down and then putting dot you can reference any variable that that object has initialized which includes all the built-in ones like x so this will just immediately be sending the player's x-coordinate to this point and if we do the exact same thing with the y values now the player will go exactly where we need them to go so now how do we set these variables for each individual warp block that we need to put down i will show you so let's exit out of here and let's go let's open up both the bedroom and we can open up the living room we can swap between them up here first let's i'm going to get rid of the grid so it won't so our objects won't snap around let's go to our instances layer highlighted the wart block and now we're going to put the word block down so let's put it right here this is about where we would want it to be so in the room editor if you double click this object i've already showed you this menu and we've messed around with the frames there's also this little thing here called creation code if you click on this it opens up a little code window and what instance creation code does from the room is it is code that you can add to every individual instance of any object and it will run immediately after the initial create event of this object and it will run before any of the other events do it's basically just tacking on more creation event so essentially what we can do if we go to edit object it'll open up our events here we can go to our create event now we can take these variables i'm going to copy them [Music] we can put them in our instance creation event and now if we set these variables they will be specific to this object and it won't make every single version of the original object do the exact same thing now we need to figure out what x what why in what room do we want to go to well we know we want to send the player to the living room so let's go room living room so that's correct and now we need the right x and y coordinates and to do that we can just go into our living room one thing we actually need to do we don't want to have two versions of the player walking around so we can go ahead and get rid of this we just need to have the player in the first room that runs the game so let's just get rid of that so now where do we want the player to end up let's just say right about here we want the player to show up right here so if you look down here this will show you the exact x and y point you are in the room where your mouse is so if i just hover my mouse right here and i say i want my player to go here that's 176 for the x and 112 for the y so we can go back over here and we can write 176 for the x and 112 for the y so let's see if that works out how i think it should okay so wait a minute okay i forgot something very important let's go back into our player object now over here we have a little checkbox called persistent and uh if you read the text that just showed up this will make it so this object will persist between rooms so that means that the game won't get rid of it whenever you walk out of that room so now if we run our code okay there we go now we can move between rooms but there's obviously a couple things going on here first of all it's pretty abrupt to just kind of pop into the next room and on top of that there's another issue which let me rerun this really quick it may be kind of hard to notice just because it's so instant but this won't necessarily make our player face the right way if i walk in with the right sprite it starts facing the right and we want the player to be facing downwards so let's fix a bunch of this stuff now first we're just going to fix the transition since that will also help me illustrate the other issue so here's how we're going to do this let's make a new sprite once again we are going to resize to 16 by 16. so i want to do like a little effect where a diamond like grows outwards as the transition so i'm gonna go into this little grid here and i'm gonna change it to eight by eight just so i can see where the center is properly let's add a frame i'm going to start here you can copy and paste this we're going to make it go out a little bit more do the same thing and you get the idea let's just keep going okay so i got this little diamond and just made it go all the way to the edge to where it's totally covered up i kept the animation speed at 30. i think that looks pretty cool we are gonna leave this first one blank and this last one totally filled out so just keep it exactly like this let's go back to our workspace don't need to change anything there and now we can make a new object so this object we're just going to call object warp we're going to set it to that new sprite that won't show up here because the first one is blank this is now going to be the object that we use to transition the player between rooms so basically what we're going to do with this thing is we are going to have it animate and we're going to tile that across the whole screen so it covers up the whole screen whenever the little diamond fills out once the screen is covered we're going to transition to the new room we're going to reverse the animation and then we're going to get rid of this thing once it's done with all of its different animation stuff that might sound a little complicated but it's actually really really simple there's not a lot of there's not like a ton of code to do this stuff so since this object is going to be warping us we need to open up our old object warp block and we're going to take these variables here now this warp block is still very important so leave the variables here we're just copying them and we're moving them to the creation code here as well the next thing we're doing is adding a new type of event so let's go to add event we can go all the way down here to other and then there is an animation end event where you could probably guess that this code only runs once the animation has ended our animation for this ends here on this frame where it's just completely covered up and we're going to be tiling it over the screen so that's when the screen is covered so the code we want to run here is actually moving our player to the new room so we can go back to our warp block we can take this code here we can actually take this code out so i'm going to control x to cut it and then i'm going to paste it here in the animation end event now that we've transitioned to the new room the next thing we need to do is to reverse this animation so the diamond shrinks back down and we can do that literally by just saying image speed equals negative one image speed is another built in variable and it just means how fast the animation is playing the image speed always starts out as one and one just means whatever you have set in the editor for that specific sprite so for this sprite normally it is 30 frames a second and if we make it negative 1 that changes it to negative 30 frames a second which means it will start animating backwards so that's all we need in this animation end event next we can go ahead and move on to another new event called the draw event so let's go down here to draw just normal draw event and this event you can use functions and do all kinds of code stuff that will actually put visuals up on the screen even when you don't add a draw event to an object it actually does have one there it's just invisible if you don't specify you want to have your own draw event the object will just say oh i just need to draw myself so now that we have opened our own draw event we have to specify how we want to what we want to draw and how we want to draw it so this function here draw sprite if we choose our sprite index we choose our image index which is what frame we're on in our animation and we draw that at our x and y coordinate that's pretty much what every object does anyways so for this object what we want to do is we want to do draw sprite tiled and this does exactly what it sounds like it just draws whatever you're specifying here tiled now for simplicity's sake we could set this to zero and zero and basically what that would do is it would draw start drawing this sprite up here and then it would tile it across the entire room we have one more thing to do in this object so we're going to go back and add our good old step event the final thing we need to do is to get rid of this object once it's done all of its duties and we already know that we want to get rid of this thing once it is done animating backwards so here is a good way to do that first we want to check if we are in the new room that we want to be in so we can say if room is equal to target room run this code so room is another built in and room just returns whatever room that the game is in right now so if the room so the room that we're in is the one that we're trying to get to then we are ready to get rid of this object but we only want to get rid of it once it is done animating backwards so let's add another check here and we will say so if the room is the correct room and if our image index is less than one so basically what this is doing our image index is what image is being displayed by our object right now so i'll open up this sprite really really quick to show you so our image index starts at zero so this frame would be image index zero this frame is image index one image index two three four five six you get the picture so if we're checking if our image index is below one it basically means we are on this frame the image index is very rarely actually just 0 1 2 whatever it normally has some kind of decimal point because it's always adding a very small value to it to make sure it's animating at the correct speed but it's always showing the number to the left of the decimal point meaning if our image index is 0.9 it will still show us the zero image this image right here the first one if our image index is 3.9 it's still only going to show us this image so zero one two three it won't round up it just shows whatever is to the left of the decimal point so this just means if it's below one we're on this blank space here which means it's basically invisible and now we can get rid of it so let's call this function instance destroy this will just destroy itself so basically this object will be totally gone at that point use this power wisely okay so this should do everything we needed to do so let's exit out of this the only thing left is it's not gonna make itself and that's where our warp block comes back into play so we obviously want to make this object whenever we run into our warp block so let's use the function instance create depth so this will make sure that whenever we create this object we will be setting it at an appropriate depth that's very important for this transition because we want it to show up pretty much on top of everything so this calls for an x position a y position the depth and the object to create our x and y position does not matter because in our warp object in our draw event we are just setting that manually so really this could show up wherever so just to make it easy we'll just say we'll create it at zero zero our depth will set to a very very low number because like i explained depth the lower the number the more on top it is drawn so i'm going to set this to negative nine nine nine nine nine okay i said that right and now we are just making the object warp there's two things with this one is that we still need to set the object warps variables here and since they're being created dynamically we can't do it with creation code like we did with the wart block but that's what the word block is for so something cool we can do whenever we create new instances is we can store the id of that new instance with a variable so i'll show you how to do that so we're going to create a local variable and to do that we say var space we name our new variable so we're going to call it inst and we will say equals this function let's let this work itself out okay there we go so local variables are this light yellow color and what local variables are is just a variable that you only need in this one event so if i were to reference this variable in the create event or if i made a draw event or anything like that it wouldn't recognize it this is just for the step event we only need it for the step event so that's why we're doing this so what this is doing is we've created a new variable and anytime you use an instant create function it returns the new id of that object that's just been created which means that like earlier whenever i referenced object player.x to set the player's x we could say inst dot x equals something so we can access any variables in this thing that we've just created in the same way that we did with the player earlier and what we're going to do with that is we're going to say this new instances target x equals our target x because target x has already been set in our warp block in the creation code of whatever room we were doing this is how we can set all the variables for this warp to be correct so we can do this with both the y the target y and the target room okay we're looking pretty good just one more check that we need to do because right now if the player is where is it is touching this warp block every single frame that the player is touching it it's going to create one of these warp objects and we do not want that so we're going to do one more check so we're going to say if the players run into this block and not instance exists object warp so a couple new things here instance exists is just a function that checks if there is an instance of this object in the game currently and an exclamation point means not so it means the opposite so this is saying if this instance does not exist then we can run this code this is also one of those things where you could just type not but again this is just a little bit more proper might as well get used to this stuff as soon as you can so if we've if the players run into the wart block and there are none of that warper object around then we can create this warping object so that should do it let's run our game and let's see oh i did it again okay i have made the exact same mistake again uh let's go back to our warp object much like our player this warp object also needs to be persistent because what just happened there was once we left the room it was just gone so we want it to persist between both of the rooms so it can finish out the visual let's try again all right all right hey look at that pretty cool now we can tweak this a little bit if we want so for our warp transition if you want it to stay covered up a little bit you could just copy this last frame and just paste a couple more in there it's honestly just the easiest way to do it and if you wanted you could change the color you can make it black or whatever i am actually going to make it the same color as this dark color here [Music] so i just i just copied a little a little piece of that color so i could i could paste it here and then use this new color this is what i'm gonna do uh actually if you keep it white you through code you can actually color this thing anything you want to but uh we're not going to do that right now that's something you can look into later we can also go into our warp block and make it not visible so whenever we run the game it won't just be this weird ugly green square nice but we are not done yet my friend i'm going to add a little return warp really quick just so i can demonstrate strength so the first thing we need to fix is while the transition is happening we can still move our player around you see and we probably want the player to actually wait and i didn't put any walls there so i just see i can just even walk right up through there so we probably want the player to pause while we're doing that and another thing is if we move this way we don't end up facing the correct direction these are very easy things to fix so first things first let's create an object that will tell our player to pause so let's create an object here we don't need a sprite for this object [Music] pauser one that pauses much like the wall we don't actually have to put any code here the player is just going to figure it out so let's open up our player go into that step event okay so let's make a really really simple pause event so we're going to go in between getting our speeds and setting our sprite basically all we need to do is check if a pauser exists so if instance exists object pauser we can just set our x speed and our y speed to zero now for this little game this will do exactly what we need it to it's setting our speeds back to zero before they can affect anything so our sprites won't change and we will be set back to our image index of zero down here there's a bunch of different ways to do like a pause event and actually we can name this pause there's a bunch of different ways to do this including having the character have different states and make a very very simple like state machine type thing but we really just don't need to do that for this video at some point in the future i might touch on something like that or once you're done with this little thing you can just go watch some other videos and look up states and game makers something like that if you if you got the the programming each itching bug but like i said this will do exactly what we needed to do so the last thing to do is we need to make sure that the game considers our warp a pauser as well and we already saw how to make objects children of other objects with the wall so let's go into our object warp go into the parent and select our parent as a pauser object so as long as this thing shows up the player will pause and set its speeds back to zero so here we go alright perfect so while it's up on screen the player can't move or change direction or anything so now we have to solve the facing issue so if i walk to the right and i walk up i show up to the right super easy fix let's go to the warp block first there we go okay so we are going to add one more little variable here and we are going to call this target face so now much like these other things in our creation code we can set which way we want the player to be facing at the end and here's how we're going to do this so first things first we need to add this variable over here because we also need to add it to our warp object so this instance is our warp object's target face needs to equal the one set by the warp block let's go back into our warp object just so we can initialize this here now we can go into our animation end event and add one more thing we can say the object players face now equals our target face easy let's go back into our rooms and set these appropriately in the creation code so we'll go to our instances i'm going to open this up i'm going to add the target face value and we want the player to end up facing down and we can just use our macros for that so down let's go into the living room do the same thing except this time we want to make sure that the player is facing up okay let's check it all right let's see so i'm going to come at this at a weird angle so we can check it actually sets everything right look at that look at that perfect this is one of the beautiful little things about how we set up our player here to handle all of its sprite stuff by just using this little face variable this variable can come in handy for a lot of different stuff so just just keep that in mind hopefully you're gonna stick with me through that last video parallax backgrounds are such a cool effect i'm honestly kind of hard-pressed to even think of some kind of modern indie game that doesn't do it in some kind of way so yeah watch it but if now you kind of feel like you have the tools to go off on your own then i'll just go ahead and say thank you excellent work genuinely i know the completion rate for these types of tutorials isn't probably super high so yeah no good good job great work the discord community that i have for my game i love to see other creative things that people are doing there is a channel there for people to post their own creative stuff no matter what it is if you're working on something and you kind of wanted to show it off that would be a good place to do it because everyone who hangs out there is really cool really nice so yeah and likewise if you haven't played the demo of my game yet you can try that out i'm also working on another little side kind of game that i want to have done around october and i have a couple plans for more game maker tutorials one by the time you even see this video might already be done because that was one of the ones i wanted to do first a text box system but regardless whatever just if you if you want to keep up you know how to do it but also don't be a wise guy watch the watch to the sixth part alright you're already here you

Channel: Peyton Burnham

Views: 9,627

Keywords: gamemaker, yoyogames, rpg, how to make, how to make an rpg, gamemaker studio, gamemaker studio 2, gms, gms2, tutorial, beginner, beginner tutorial, undertale, omori, top down, pixel art, indie game, how to make a game, rose of starcross, earthbound, platformer, rpgmaker, rpg maker, pixel, from scratch, deltarune, delta rune, easy, coding, code, programming, cute, animation, player movement, collision, parallax, player, depth, tiles, tileset, tilesets, camera, room transitions, warp, rpg tutorial, nintendo

Id: xlqFO_fuCEo

Length: 30min 10sec (1810 seconds)

Published: Thu Mar 25 2021