Dialogue | Farming RPG Tutorial: GMS2 [P19]

hey guys welcome back so today we're going to work on creating a textbook system and if you've watched any of my other text box tutorials this one is going to be a little bit different I've had some time to refine the system and we're also going to be including things like portraits and camera maneuverability so it's going to be a little bit more complex we'll do this over the next few tutorials but by the end this is what our system is going to look like we're gonna have portraits names voices for the characters and typewriter text that spells out over time and we'll also include this camera maneuverability so you can move it to a specific location or character now the first thing I'm gonna do is so just like our inventory we're going to be drawing the text boxes on the GUI layer because it's gonna be in a fixed location on the screen and we don't want it being an object kind of in the room we want it to be something that is just being displayed to the player and what I'm gonna do now is actually resize the GUI layer to be at the same size as our views in our rooms and this is going to sort of mess up a little bit of what we did with the inventory we're gonna have to scale it and that's just because the GUI layer is usually not the same size as the view in your room it's the same size as the game window itself I remember we were kind of scaling alga by two so to make things easier I'm going to rescale it to be the same size in the game object so we only need to do this once because it's set for the rest of the game and what I'm actually gonna do is create a global variable so that whenever we want to reference what the width and height of the game is we can just refer to this global variable and this is something we could have done earlier but now that our game is a little bit more established I'm gonna set up this stuff now so the way we declare a global variable is just to write global dot and then whatever the variable name is so I'm gonna say game width I'm gonna set this equal to 750 because that was the width that we had in this room for the view and the height was 4 20 all right and now let's set the GUI size to be equal to that so display set GUI size and then we have to write global game with do you have to write that every single time you want to reference the global variable so and the hype global dot game hi all right so now the GUI layer is resized so now we don't really need these anymore in any of our objects so before when we were just getting the display within height we can now just reference this variable right here so I think we were referencing that here when we're drawing the fade so instead of having GUI width and height we can just write global game with and global game height and you can do that in all your objects so that now if you ever changed the game with an height you can just do it from within here and they'll all be accessing the same variable so if we run the game now you'll see what I mean about the scaling so now the GUI width in height is at the same resolution as the rest of the game but if you remember in our inventory we were actually scaling it up by two to fit that GUI size that we had before that was twice as big so now we can just scale it down to one just like that and when we run it now that should fix the inventory there you go and the fonts are all gonna be a bit wonky now so we might have to change some of those sizes but I'll let you do that on your own just resize it to something that fits nicely all right now that we've done that let's get started on the actual text box so what we'll have to do is import a few new assets so I've left a link to my ones in the description obviously I've already imported mine so once you've done that we are ready to go so these are just sprites so this one has all of my characters portraits and I've kind of used just some blank slates because I'm not really an artist and I don't want to go and draw a bunch of characters so I've just used some free assets as usual but basically so to do it the way that I have you'll just have this one sprite and every frame will be a new person and when it comes to drawing the appropriate portrait basically a character is going to set its image index to the appropriate frame so I've also got a portrait frame so this is what is going to be drawn over the character portrait and this is what's going to be drawn under the character portrait and then this is the text box itself so you can use your own assets if you like or you can just use the ones I'm using all right let's make the text box object so I'm gonna put it in this folder again because it's not a proper object in the game world this is just for the player we're gonna call this obj text box obviously there is a lot to do but let's start small and just get something drawing so let's just come into the draw a GUI event and think about the logic of what we're going to be doing so if you imagine the text box the order that we draw all of the sprites is going to be important because you want the text to be appearing on top of the text box and we want the portrait and the frames to be ordered correctly so let's just comment them firstly let's just draw the text box itself then let's draw the very back of the portrait then the portrait itself the frame then the name box that the name is going to display in and then the for the text portion of this we're going to draw the name on top of the name box and in the text so that is the order of everything now what we're gonna have to do is plan out where everything is so we'll need to decide on the positions for every single element so for the text box for the text itself which is probably not going to be the same as the textbox it's gonna be over a little bit with some buffer room between the edges of the textbox we're gonna need a location for the portrait and then the name box and also the name text so for example let's think about where the portrait is so we're gonna have to do some maths here so the entire text box is in the center so what we're gonna have to do is firstly let's get half the width of the GUI layer so half of that global game width variable and that puts us in the very center but if we start drawing from there because the angular point is at the top left it's just going to draw it right there in the center so we're gonna need to put it over a bit so we're gonna need to subtract half the width of the text box and then we're going to need to subtract half the width of the portrait to give it to where the portrait is all right so let's come into the create event and set up some variables for this so firstly I'm gonna make some variables to store all of our sprites and this is just so that we can keep it consistent if you would named it something else so I'm gonna go box equals to the text box frame portrait frame and name box for the name box all right and now we're gonna have to get the width and heights of all of these because as I said before with the maths to get out coordinates right we need to know the widths of everything just like that all right and now let's get that portrait location because that's sort of gonna anchor the rest of everything so it's good portrait X so just like I said we're gonna need to have the game width which will get us at the center the box width will get us over again and then the portrait with itself and I'll just times all of these by a half instead of doing it to each of them individually and now the portrait Y so this is the Y position of the portrait I want it basically almost all the way down the bottom so that would be the GUI Heights - the porter height so that would put it all the way down the bottom so that would come all the way down and then up by whatever the portrait height is but actually I'm not gonna have it all the way down the bottom I'm gonna have it up a little tiny bit so I'm just gonna times the GUI height by 0.98 so that'll just shift it up a little bit and now for the text box what we have to do is well we're gonna be the same as this but just shifted over by the width of the portrait so we can go port X plus the porter width and the text box Y position is actually going to be the same as the portrait what well that's where I'm gonna put it anyway and for the name box I'm also gonna put this at the same X position as the portrait and for the Y I'm gonna have it at box Y and then we're gonna shift it up by whatever the height of the name box is so we just subtract that all right so let's draw these snow about the positions for all of them so we can draw this let's go draw sprite so the box the frame is just 0 and then box X Box wife and then we told the back of the portrait the frame we called it now for the back of the portrait remember that that is frame 0 in this and then frame 1 was the top of the frame first v2 or frame 0 and this is just gonna be at the portrait X put it wide and basically this is the same for this one but the frame that we're drawing is frame 1 and for the portrait so we're drawing the portrait but now what frame are we drawing right so this is going to correspond to what person is talking so we're going to need to set up a variable and I'll just call it portrait index and I'll set it to 0 for now as the default so we the first frame and then we need again put X and pull Y all right and finally we draw the name books all right so now let's test this so it's coming to the farm room I'm gonna make a new layer that we're gonna put all the text in so let's just put it here on top of all our other objects because we want the text to appear on top of this but probably below any transitions that we might have so I'll put it in here and let's just drag in the object so we run it it doesn't matter where we put it it's always going to draw it on the cuy layer in the same spot so hopefully because of a lot of scaling it will put it right in the center for us all right so we've still got our inventory coming up on top of that so actually we should turn that off we should make sure women Tory false it'll do that but we can also see that our text box is drawing properly so it's coming to inventory just first and turn it off right and now we can start drawing the text so let's set up text and just set up a string and I might just copy this a few times so we can have a long string because we've been gonna need to program in some text wrapping now it's gonna have name and so this will be getting again the person who is talking but for now I'll just put name and now let's draw these two things so your draw text and let's actually let's draw it a certain color so again for the text and name has actually set up the color and the font that we're going to be using so let's go text Kyle and I might just make this black and same for the name one another phone that we're gonna be using I'll just use 12 for now and we'll see how that looks so we're actually gonna want to do is before we draw any of this text we want to set the font so now we need an x and y position for the name box and for the text so now like I said this isn't gonna be exactly where the name box and the text box are it's going to be over and down a little bit so we're gonna need buffers so I'm gonna call this let's do it here X buffer and I'm just gonna use 12 and this is just because I've tested these numbers and I think they look okay you might want to play with them so text X so the text x position is going to be where the box is but plus the X buffer and the same for the Y and now for the name text X so I'm gonna have it drawing from the center of the name box and you might be thinking that this is going to look really weird because it's going to be aligned at the left and then drawing in the center but what I'm going to do is when I'm drawing it I'm going to change the alignment so that it's Center justified it's gonna do the same thing for the Y just like that all right let's come back so like I said we're gonna change that horizontal and vertical alignment so we're gonna use draw set HLN so for a Chilean that Center is FX Center and for the vertical alignment it's actually called the middle and whenever you mess with the alignments you're gonna want to reset it afterwards so let's just do that before we forget so put it back to the default left and the top alright good now we can draw it so we use the name text X name text y and the string that we're drawing is the name and now so the color that we want is that name text color but I don't want to write that out every time so I'm just gonna make a variable C equal to name text cold just like that and fool alpha all right and then we'll do the same thing for the text but you want to get the text color alright so that should be it let's run that and give it a look alright great so everything is drawing in the correct location so we have that name and it's being drawn in the center just like we want and the text is as well as you probably noticed if we have a long string it's just going to keep drawing off to the side and it's not going to wrap here so we're gonna have to set this up ourselves now there is a alternate draw text function that does this for you and we're gonna use this for now later on we're actually going to be making our own script that does this because we're gonna be having text that spells out but for now let's just use that other function so it's just draw text ext color so this AC is just sort of like extended so this is a similar function but it's going to wrap the text for us so for it to wrap that text it asks for two more arguments so it's asking for a width so this is the max width that the text can kind of go to before it will wrap it to the next line and in this separation is going to be how far apart the lines are so I think we've actually used this in our inventory already so that should look familiar to you but let's also set up some variables that we can put in for this so I'm going to come back to the create and I'm gonna set a max width for the text so text max width and if you think about it so the maximum width that the text can be is going to be to the text box and then -2 of the X buffets because we need that X buffer on the left and in the X buffer on the right so we need to times that by 2 so it's gonna be the box with minus 2 times the X bar all right and for the height of the text what we are going to do is just get the string height of just some capital letter of the strain and what this does is it gets the string the height of the string in pixels of whatever the font that is currently set so what we should do is right here just set that font that we're gonna use font and we just have to make sure that we're doing this after we actually save what the font is it's all put it down there so I know this is a lot of variables and you might want to be careful with how you're ordering all this because it is a lot to manage alright let's come back to the draw and there's those arguments the separation is going to be that text height and then text max-width all right and let's run that all right good so now it is wrapping correctly now the last thing we're gonna do today is just get multiple pages working so then instead of making the text variable just equal to one string what we're gonna do is have an array of text so and we've used a raise before so this shouldn't be too tricky so let's just make that the first entry in the array and I'll just make a second one equal to this is the second page and what we're gonna do is have a page variable and it's gonna start off equal to zero and we're gonna use this to access the appropriate entry in our array set the start when we get text page that is going to be getting this one and then when we press a button we're gonna change page to one and then we'll be accessing this one so we need to set that up so the button I'm going to use I'm just gonna make this interact key so I'm gonna make this equal to the key itself so you could put VK spacebar or something I'm just gonna use the e key so before we set up the key presses that's just come into here so instead of accessing text now we're gonna be accessing text page now let's come into the step event and let's see if we press the interact key now one of two things is gonna happen so either we have a page to actually go to so if we're on a page and there is actually a next page to go to we're going to want to increment this page variable but if we're on the last page already then we're just going to want to delete the text box so we have to check what the length of this array is so if page is less than the array length one d of text minus one right because array is start at zero so if it is less than the total number of entries then we do have a page to go to and we can just increment page but otherwise we're going to want to destroy the text box alright let's run that and have a look so we're on the first page we are accessing the first entry in the array so if I press email or whatever your interact key is it goes to the second page and one more time and it should delete all right there we go so we've got it working so the coming tutorials we'll add some interactivity for the NPCs themselves so they'll all have their own textile have their own names their own portraits and everything we'll also set up that camera maneuverability and the text spelling out but that's all for today thanks for watching guys I'll see you next time as always I'd like to thank everyone who is supporting me on patreon to make these tutorials and special shoutouts to Adrian s Amy Sara and turning a capper Colin McLennan coaster toast Daniel Hargrave Doan Tecton foscar e'en second in maximal an hour Ricky C semi metal alchemist semi myth Estrella moon Stewart Wells the great poultry Thomas M and XT game studio I hope you guys are well and I'll see you in the next video

Channel: FriendlyCosmonaut

Views: 31,913

Keywords: dialogue gamemaker, textbox gamemaker, text gameamker, conversations gamemaker, dialogue system gamemaker, dialogue gms2, dialogue gamemaker studio 2, textbox gms2, textbox gamemaker studio 2, dialogue tutorial gamemaker, gamemaker, gamemaker studio 2, gamemaker studio, gms2, friendly cosmonaut, friendly cosmonaut dialogue, friendly cosmonaut textbox

Id: Lxy8Q67HgD4

Length: 18min 5sec (1085 seconds)

Published: Fri Mar 16 2018