GameMaker Tutorial #1: Adding Text Input to Your Game!

hi and welcome to this game maker tutorial today we're going to be coding a text box that receives input from the user and then this input can be used for pretty much anything you want most commonly it's used for storing a name a K the name of the player this sort of aim towards beginner to intermediate game maker programmers so without further ado let's get started I created this in game maker 1.4 but all this code is usually pointed over I pour it over to 2.0 so here we have this little name tag that's not really important if we click in here then the box gets highlighted and this little blinking cursor appears if we click out then we can't type anything but if we click back in then we can type in the string that will make our name I'll call mine hello world the outside rectangle is based on the the color that you specify here but that's we're not going to implement anything like that and then if I hover over here we get this little cursor that sort of says hey you can type here and if you hover her out then turns back into a mouse I mentioned the blinking cursor I think one other thing is that you can't type over this box which is good if you want to be a specific number of characters for whatever reason for your game and that's pretty much all the behaviors of the box so without further ado let's get started with coding this so the first thing we want is we want to start a new project so I'm just going to do that here and then we want game maker language and this is gonna be just I'm gonna call it text box but you can call whatever you want so what we need well we already have a room it gives us 1 by default so let's create an object and this object doesn't need to have sprite we're just going to call it text box I can type correctly you can do this with a sprite you could just make a little dot PNG of a box and then you know link it up to your object and then draw it in the world as you normally would but we're not going to do that because game maker already has functions for drawing rectangles so I figured that would just be easier but like I said it's up to you um so let's drag this object over into the world before we forget and you can see that little question mark is in there that means it doesn't have a sprite let's go back to our object oh and for beginners this stuff down here don't worry about this right now persistent just means that it's gonna exist as you move across rooms but we only have one room so that's not really a problem and also this isn't a real game so but if you make a global variable then that's also gonna exist throughout the room so if you store the name in a global variable that'll work the same way and that way when you switch rooms you don't to worry about that data going away so we're gonna need three different events here we're gonna need a create event we're gonna need a draw event and we're gonna need a step event if I can find it there it is so you can actually put all the code from your step event in the draw event because I believe that the draw event is executed every time step runs but we're just gonna separate them here so that it looks a little cleaner okay so create so what do we need when this object is created well we need a way to store the name of the player and when it's first grade we want that string to be empty my string is just a line of text for beginners so we're just gonna call it name and we're gonna set it equal to nothing just these blank quotes and you don't really want to put any spaces in between here because that's gonna be treated as an extra character so don't do that okay for our draw event let's get started drawing the rectangle it's good to put some comments in your code so let's do that draw the rectangle the box for input beautiful okay so we're going to use a built in game maker function for drawing the REC it's gonna be called draw rectangle color because we want to specify what kind of call everyone and it gives us way too many arguments for color but that's life so you can see down here all the different arguments x1 is the left side of the box y1 is the top x2 is the right side of the box y2 is the bottom and I only know that because I've done the million times use this function but if you middle click on it then um it brings up this documentation for the function it's gonna tell you everything you need to know but I'm gonna walk you through it so where do we want the left side of the box to be well let's kind of put it in the middle of the screen and then shift it over a little bit so we have a way of writing that using some built-in variables for a game maker so let's do room with built-in function that tells us how big our room is basically across divided by 2 minus 100 we'll shift it over and then the top side of the box that's going to be room oops height divided by 2 and then it's going to be minus a hundred because the screen increases in pixels as you go down that's just the way game maker does it and then let's make the right side of the box room with over to plus 100 and then for the BOM of the box we want it to be room 8 over 2 plus 100 so this is gonna make actually if you're smart or if you've been paying attention a square so we're gonna want that changed eventually but let's just get this running first so what color do we want our Box today let's make it white okay let's copy and paste some of these because it's given us so many arguments 1 2 3 4 yep outline so if you put true here then it's going to just be an outline for your rectangle it's not going to fill it in so we want this to be false because we want the whole thing ok let's run it beautiful we have a beautiful beautiful square so how do we make this more like a rectangle well let's make it longer and we'll make it shorter as well we'll make the width longer and the height shorter so how do we do that let's do this minus 300 plus 300 and let's just leave it like that because that'll make it all stretched yeah still too fat so let's make it less fat so let's make it - fifty how's that sound plus fifty run that looks nice okay now what do we want to do well let's make sure that the game is storing the input from the keyboard into our name variable and for this we have a built-in variable that game maker has that stores all of like the most recent key presses and that is called keyboard string okay so every step it's going to store name in keyboard string now let's draw the text to the screen sorry I said that backwards we want to store keyboard string in the name so let's draw the text to the string and let's do draw text let's do extended transformed that way we can really tell them exactly how we want our text to look down to the T okay so where do we want to draw this text well first you know what let's align our text so that goes to the right place so that we know exactly where the origin of the text is draw text housekeeping we'll call it because these are functions you're gonna have to use a lot if you're drawing text in your game so the first thing we want to do is we want to set the alignment of the text okay and where do we want that to align so we want the alignment of the text to be towards the left and that's a built-in constant and this is a built-in function if you use middle click it brings up the documentation so if I say FA left that means that the x-coordinate is gonna be all the way over to the left of the text like this you can say Center to put it in the center you could say right to put it over to the right but no we want FA left and then we're just gonna copy this line because we also want to set the vertical alignment and for this we want to be let's do FA top and we're just gonna make okay so now which actually draw our text so we have 10 million arguments down here so we want our x-coordinate to be the left side of the box so we have that right here we can just copy that and then we want our y-coordinate to be the top of the box so we also have that right here awesome and let's shift it over a little bit that way it's not on the edge of the box and it won't look all weird so let's shift over to like 25 pixels and so what are we storing or sorry what are we writing to the screen well that's just gonna be the string our name that we're stored from the keyboard input and we have a variable for that called name beautiful and then the separation how much space do we want between lions well that doesn't matter because we want all of our text to be on one line that way it all fits inside the box so we'll just put in 100 for that doesn't matter and the width says how big can our text be before we put it on a new line and we don't want it to be on a new line so we're just gonna make this mm that sounds like a good number let's make this one let's make this one 0-100 mm let's just set the color to be safe draw set color what color should we make this let's make it blue that's a built-in constant and what else do we want to do to it while we create a font and we'll just call it box font and then we'll set it equal to 72 for the size that looks good let's go back to our text box draw set font and then we'll call it box font let's try typing something beautiful so beautiful I'm at a loss for words okay obviously there are a few different problems for when we were running that most notably it runs over the box so what we want to do is we want to limit how big our string can get so let's get rid of well actually we're just gonna wrap this in an if statement we're gonna say if string length and you can also do like the width on the screen of how big the text box is but if you want to limit the number of characters that are in your string this is a good way to do it to string length name how many characters do we want this to be um let's say let's say less than 20 ystem is how many characters you can have okay easy enough else we're gonna set the keyboard string to our name because we don't want to increase anymore I don't want to swap these probably not the efficient way to do that name it's just gonna keep the name that we already have and not increase any more okay let's run it let's make it let's make it 10 for now that looks nice now you can't go off the screen um all right so that's pretty well and good so let's try and add a couple more features to our box the first thing we want to do is we want to determine whether or not we can write in the box and we won't want to do that until the users actually clicked on it so let's make a variable called writable and what set that equal to mmm do we want them to be able to write at first no we don't want them to be able to write once we just start running it we want them to write once they've clicked on the box if that then we want to set our writable variable equal to true otherwise if the player clicks and they click outside then we want to set our writable variable equal to false because that's going to mean that you can we only want this to happen if it's writable oh sorry this is mouse check button release yeah I feel it highlights yellow that means it actually has a function for us and let's just fix that sorry about that okay now we can only write in it if we've clicked if we click out we can't write if we click in we can write again so what do we want to do now now let's make a cursor so the first thing we want to do is we want to create a little cursor icon and we're just gonna make the string and this string is gonna be appended to the text that we draw to the screen and we're just going to put it at the end of our string at the end of our name string so you can just do this little character here and then let's go to the step event and we're also gonna want a timer to control how fast the cursor is blinking one way to do that is with alarms but usually a more efficient way than alarms is to actually control so let's make it a default time so let's just say def time and we'll just set that to 10 times 1 over the room speed again the room speed is how fast the game is running so we don't have to we'll always make sure that this is measured in the same amount of seconds because we the room CD will be constant basically there or as the room speed changes if your game starts to lag or it's not running at 60fps or whatever this will accommodate for that so that's why we have one over room speed and then we're going to set our time equal to default time so we want the time to be ticking down every step so we're going to set time equal to - equal to one over the room speed okay so if the time is less than zero then we're gonna want to change our character for the cursor and then I'll just show you what this looks like so for one minute it's the little line and then when it gets to zero then we're going to change it we're gonna blink it so if time is less than zero let's set this name of our variable variable cursor what's that cursor equal to an empty string and then we're gonna restart the timer we'll set time equal to our def time and then else if if our time is greater than or equal to zero and it's writable we can type inside our box then we're going to set our cursor equal to the character that we had at the create of the variable okay so one thing we forgot to do is we forgot to concatenate ins had strings together you forgot to concatenate the string with our name to the cursor string and we should do that where we drove our text which is here we want our cursor to be added at the end of our name so we're going to do plus cursor let's run it okay now you can see it's playing me pretty fast if we want to slow that right down then we can go to our create event which is where we specified the default time which is set to every time it takes down to zero and we can make it like 30 or something like that and let's initially make this blank because we don't want to appear right away okay now if we click away it goes away so let's add one more feature let's make it so that if you hover over the box then we get a cursor so let's do we don't want to put it in here because this only happens if we click the button we want it to be if we just hover it over it then do a certain type of behavior aka change our cursor so let's just do that right here and then let's set our cursor we'll use this function here equal to see our beam I'll just show you this documentation here middle click and there is see our beam so that's what it looks like so otherwise if we're not inside the rectangle let's just set our cursor equal to the default that way when we come out of there it's not going to keep it as a beam because this is sort of like turning on a switch when we set it to that it's gonna stay as that what's running okay so there we go we're bounded in the box when we go over it our cursor changes and it changes back that is all looking good so what's one more thing we could add let's just say if it's writable we'll create another rectangle behind the one that we have so let's do if writable we'll draw another rectangle and we can just copy this and then we'll set it equal to and we're gonna change all these to blue copy and then we're gonna set that equal to false because we want it to be right outside of our rectangle okay so let's do - say 320 and then we'll do - 73 20 70 and this will just be a slightly bigger rectangle than the one that the text is drawn in and this will sort of just create like a highlighted effect when we click on it and then when it's not able to be written - then it's just going to turn off again so that's all fine if you actually put this draw rectangle color after the draw event this one here then that would make it so that it covers up our initial rectangle and we don't want that we want it to be behind it okay see okay I think that's gonna be it for this tutorial thank you for watching I hope you enjoyed it if you have any questions about this tutorial or you'd like to see some different tutorials in the future feel free to leave a comment um it was fun doing this stay tuned until next time and we'll be doing some other stuff some what's plays some other game maker tutorials all sorts of fun stuff hope you have a nice day thanks bye

Channel: Chris W

Views: 2,208

Keywords: game development, gamemaker, tutorial, tutorials, programming, game maker studio, text boxes, gui programming, code, my first game

Id: H1xXmpAktq4

Length: 26min 39sec (1599 seconds)

Published: Sat Nov 18 2017