Textbox Tutorial: Game Maker Studio 2 [1/2]

hi there so today we're going to be making a basic text box system in game maker studio 2 I'm going to preface the video by saying this isn't aimed at the absolute beginner I'm hoping you have some familiarity with the program just navigating menus making sprites and objects and writing some simple code like movement that's it I'm going to be explaining everything as I go so hopefully it won't be too tricky if you're relatively new so right here is the finished product it's got basic movement just the player object so that we can walk up to the NPC's which is just the yellow and blue squares and if we hit space we have a text box appear so both NPCs have their own unique dialogue and multiple pages of text so the names are displayed in the center there and we have got the text filling up one character at a time so I've written up a tutorial into two parts by the end of this video we'll have a working system but it's going to be more simplified than what we have here in the next video we'll expand on it and add the things like the border outline and the multiple pages of text we'll also have a skip function and the spilling out walls are due in the next video so we've got lots to get done let's get through it alright so before we start I'm just going to change one of the settings I'm going to increase the room speed to 60 all right and we're going to start off really simple I just want to make an object we're going to call it ovg a text box and I just wanted to draw a basic text box and some text of the screen so we're going to come to the draw event which just handles all of the drawing and draw a text box and the text so with my text box I'm going to be making a sprite and you might have a different spot for your box that's fine can have pretty waters it can be big or small doesn't matter we're going to accommodate for any size but I'm just going to make mine a nice boring black box just make sure that the origin is at the top left corner all right so let's come back into the object now we're going to draw this sprite so I'm going to use the function draw and as you can see you've got lots of options here you can draw circles buttons health bars but we want to draw sprite and we have to give it a few arguments we have to give it sprite sub image which is the frame that we want to draw and a location to draw it so we want to draw a box the sub image our frame is just frame 1 which actually with so many images start at 0 so a little bit there and we just want to draw it wherever the text boxes which is just this X&Y location so we also want to draw some text also at the x and y which will just make it up the top left corner of the box and we're going to give it a string but instead of drilling and typing a string here which is just indicated by these quotation marks I'm going to set this equal to a variable so now whatever I set text equal to it will draw that string and you can put whatever you want here but just make it kind of long so that we can test this properly so I'm just going to make this up all right so I come into the room and I'm just going to change the background because I don't want to do black because my text box is black so I'm just going to make this maybe a nice green all right and we're going to drag in the text box and I'm going to have a look at what that will do so we go perfect we've got a nice text box drawing and our string but as you can see it's gone way past the width of the box but what we would like to do is wrap it here and then start on the next line and before we do that actually let's also use our own custom font so let's come over to the fonts create a new one we call this F n te text and I'm going to make mine consultive and we're going to set the font here scroll a set so now whenever I use text from Al and it's going to be in this font alright and now let's fix our wrapping problem so instead of using just draw text I'm going to use a slightly different extended function ext and it's going to basically take care of that wrapping problem for us we just have to give it a couple more arguments so we have to give it Saif and W and so now if you don't know what that means just middle click on this it will bring up the documentation so the separation is basically just the distance between the lines of text which just means how much further below the first line do you want the next line to be and the W is just how far along on that box do you want to make your text before I wrap it to the next line and so that will just be the width of the box so mine is 400 yours might be 300 500 doesn't matter we're just going to get whatever the width of this sprite is using another function and we're going to do this in the create event because I only need to do this once and we can actually move this to the create event - we're going to call it box with and equal to sprite gets the width of spur box and for the separation I'm going to want it to be about the height of our string in pixels so again we can use a function to get this text and taxes just remember just whatever this is set to now we can input this into our draw text expanded function spring heights and box with so now it should be wrapping the text for us perfect all right so now it's wrapping the text properly so now I'm going to explain what we're going to be doing with this text box so in the game you'll probably want this dialog system to be for NPCs or notes that you find and every time you read one of these notes you want a text box to appear so every time you go out to an NPC and hit space or something we want to create an instance of obj text box so the NPC's aren't actually drawing the text themselves they're getting one of these to do it so let's go ahead and make a player object and we're just going to add some basic movements so that I can go up to someone and I'm just going to also add a half function I'm gonna when I click my mouse I'm going to just create an instance of the text log so you don't have to do this this is really just so I can show you a couple things so that just means we're going to be creating an instance of the text box at a certain layer so if we come back to the room there is an instance layer here but I don't want to create the text box in the instance layer through all my MBC's and players and all of those are going to be I want to create a text layer and I want this to be on top of all the instances I always want the text at all on top of the instances sorry so and I want it to appear at wherever the mouse X and mouse wires the layer I want to give it is text and I want to create a text box good I'm also just going to create an NPC you can call this whatever you want and we'll create a couple sprites of them mine edge is going to be some boring boxes but you can be more creative if you like it doesn't really matter where you Center the origin and 1002 and I might just make her I see nice blue color okay back to the player will set the sprite sub Susan's as well we'll drag them into the room I'm going to get rid of this obj text box yeah we don't need that anymore dragging the player and dragging Susan so now I should just be able to move and create text boxes wherever I click there we go and click and make some text boxes good all right so now when I collide with Susan I want Susan to create her text box let's go into Susan go into a step event which is just called every frame and we're going to check for a collision we're going to be checking at her hair abounding box and the collision check is going to be with the player and again we just want to make an instance of the box above the text box at her location in the text layer everyday text box all right now let's test that I could so when we collaborate she makes the text box so now you probably can't tell but she's actually making a lot of text boxes whenever I'm colliding with her as long as I'm flying with her she keeps making text boxes because that that's all that has to be true for us to keep making them so I only want her to make one I want her to have that one text box so we need to check here basically if I haven't already created my text box make one so I'm going to set a variable and it's going to be called my textbooks and it's going to be Nolan at the start but after I created it I want to set my textbox equal to that instance of the textbox so we can literally just put my textbox evils through this whatever this is creating because this function actually returns the unique ID of whatever instance it's creating just like a little barcode so every single instance gets its own its own unique ID and we can save it in here when we create it so just approve this I'm just going to draw what this is equal to you don't have to do this is just to show you alright so you see right here so currently my textbox is equal to minus fault and that's just game makers way of saying that once right and so when I collide with Susan we're hoping that it's going to set my textbox to something else so you see how it keeps going up this is because she keeps making a lot of text boxes so it keeps saving the new one into this variable so we need to do check here if my textbox is equal to no one right that means we haven't created one and we haven't saved its unique ID and then I also want to do if I'm not colliding anymore I want to go and delete my textbox so instance destroy and now I could do obj text box but that would destroy all of the text boxes but I only want to destroy just heroine so again I could just use the unique ID all right let's give that a go actually we also have to put if my text box so is not equal to no one which means it is equal to something which means it exists that's just a bit a way to save it it if it exists all right that's right all right so it's set to Nolan right now we collide it's set to its own unique ID and let me move away it destroys it so that's perfect so now the only problem is that if we go and collide again she doesn't make a new one right and that is because of this we said you can only make one if my text box is equal to no one but after we created the first time it saved the unique ID of that one and we haven't reset it back to no one so just when we destroy it we also have to put my text box back to none and we'll try that again there we go and it's a new one every time see all right so now I want Susan to have her own unique text I don't want her to be printing whatever we put here in the text box right so I don't want her to say this I want her to say hello I'm Susan so she has to basically change the text variable of her text box because that is what it's going to be drawn in by the obj text box so from Susan we have to modify this so let's go back into Susan and you might be tempted to just put text equals hello I'm Susan but this text variable isn't Susan's right it belongs to obj text box so we have to basically say not my text variable but obj text boxes and not just any obj text box I want to change to that one so I'm going to put my text box text so this text belongs to my text box whatever instance that we created so that should only set her one to be hello I'm Susan so just to prove that I'll just make a couple other ones and hopefully hers will only change her text box there we go works perfectly all right so we're going to stop that we have a basic system up and running this is probably fine if as far as basic systems go but we'll expand on it and add a bit complexity in the next video I'll see you then

Channel: FriendlyCosmonaut

Views: 102,568

Keywords: Game Maker Studio 2, gamemaker 2 textbox tutorial, gamemaker 2 tutorial, textbox tutorial, textbox system, game maker textbox tutorial, game maker 2 dialogue tutorial, game maker 2 dialogue system, gamemaker 2 dialogue

Id: I4z5aAg09bM

Length: 14min 39sec (879 seconds)

Published: Sat Apr 29 2017