GameMaker Studio: Text Boxes Tutorial

alright guys welcome back so this week we're going to be stunt to take a deeper look at drawing text into our games so this is a subject we've covered a little bit before by using draw underscore tags to draw text into specific parts of the screen but this week what we're going to look at is how to draw text a one letter at a time like you might see in like a dialog box or text box like displayed on the screen we're going to draw it inside of a box as well just to sort of show you how you might go about saying up your own system to draw text or dialogue or anything like that where you might want to draw one letter at a time for that nice kind of like that feel and aesthetic as if someone is talking or you know you're reading reading the text and so on now exactly what we're going to do is we're going to create a script that we can call any point in the game to draw a text box anywhere on the screen and we're going to be able to set what text we want to draw and how fast we want to be able to draw it and first of all though it's a completely blank project we're going to do some basic setup here I'm just going to go create a new room it doesn't really matter what we call and I set 60 fps and then I'm going to go into fonts and add a font for us to draw for our text we're not going to have more than one form so I'm just going to call FNT normally I do FNT underscore something but it's the only font we're going to use so I'm just going to call FNT and tick that entire listing to zero and I'm going to use one called Coda's crooks which is a cool little pixel font by dude named Andrew McCluskey or Nell Gaines no Gaines no Gaines and mixed up with game maker as well so you can check in I'll put him in the description or whatever I'm using his cool little font called coders crooks just as an example font for this tutorial so anyway now we've done that um there's that's all the basic stuff when you just need a room and a font setting up then I'm going to go ahead actually make the script that we're going to use to create our text box and we call SCR underscore text and then as I usually do with scripts I'm going to put a comment at the top using two slashes to show what I want the eventual command to look like so when we're creating a script you can almost think of it as creating a command that you can call from within other code in your game so I'm going to be essentially creating the command or creating the function SCR underscore text and you'll be calling it by typing ser and score text and then putting in the text that you want the call in quotation marks the speed how quickly you want it drawing and the X&Y corner of where you want it drawing on the screen so that obviously without a comment will be eventually what our script will look like when you call it in the edge in code other places in the game so the thing we're going to do with this is we're going to use this script to create an object and that object will carry the text that we want to draw and a bunch of variables with it that will allow us to draw the text to the screen where we want it and do everything we want to do with it so what we're going to do is we can use a variable just going to call it txt and they said equal instance create arguments to argument to I don't remember arguments 0 is the first one argument 1 is the second one argument 2 is the third one so that's the x-coordinate so the x-coordinate that we send through and the command is argument 2 and then the y-coordinate as you may have guessed would be argument 3 so that's the x and y-coordinate that we pass through to the script obj underscore text which will stay white because we haven't made that object yet but we will later on so the next thing I want to say is I'm going to send some variables across to this object now we've created the object the object is run it's create event but now because I set because I did instance creators equal to this blank variable this variable now takes on the ID of this instance so now we can do stuff to this instance that we've just created by referring to this variable so I'm going to say with ext so with that text object that we've just created I'm going to change some of the variables based on other stuff in the script so first of all I'm going to set some things that are really not going to change but I will set them in here so that you could in theory add more arguments into the script and then be able to change it later I'm going to create a padding variable which is what I'm going to use because we're going to draw a text box but obviously we don't want the text like right at the edge of the text box one give some space around lips I'm going to give 16 pixels of kind of breathing room around the outside of the text where the text box will draw you can change that to whatever suits you I guess next length on this is the maximum like length the text is allowed to be before it'll start like scrolling whatever the max length of the box so I'm going to just say it to be the width of the room now you to believe you zero the text itself the text that we are actually sending through to our text object there's going to be argument 0 remember it's this thing that we've just passed through SPD for speed will be argument 1 and the font that we're going to use in the objects of the object noticeable font to use now in theory that's another thing you could set as an argument but like I'm putting in here just to sort of demonstrate it's going to be FNT which is the font that we set up there see it's turned red and now we're going to use those variables to sort of determine a few other things so the next thing we need to know is how long the text is that we're going to draw like in terms of the number of characters because we're drawing it a number of letters at a time or one layer at a time we need to know when we're finished so the next thing you need is to say text I'm just a link it's going to equal string underscore length eggs and that will return a number just a number of characters inside the string that we sent across the next thing I want is the size of the font so our font size is equal font get size font font referring to this variable which is referring to the fun that we sent across so use out how big in terms of like number of pixels the font is for like setting the size of the box then what we need to do is work out how wide the text is going to be at its biggest so I'm going to say tags underscore width equals string width ext so what this is going to do is we're going to draw the text based on like a maximum width which is the width of our room we're going to like virtually draw the text and say like if it goes beyond that with then it will automatically break a line and we'll draw like on the next line um so like one line will go all the way to the maximum length of the room and then like it will start breaking into multiple lines oh so a text width equals string with ext for this thing it needs as the string is also text um the separation between lines and this is where our font size comes in we're going to use font let's go sighs um plus like about on size over two so the separation is going to be like like font size so like already like the height of the font but that would put the font like the next line directly below of light with no gap and we want a tiny a little gap and as I'm showing you is whatever half the height of our font currently is and then the maximum length is next length so that's that and then we do the same thing for the height so we now call our box needs to be string right XK our text on size and this is going to return the height in pixels all now we'll return the height in pixels all off text having been drawn into this virtual space so with this Mike virtual separation and this virtual max width so now that we know how wide and how high the text is in pixels we can work out how big our box actually needs to be distort the text in it so I'm just a box with equals text underscore width that we've already worked out plus our padding value adding times two so it's going to be however wide our text is plus 16 pixels either side of it so it's like a little bit bigger than the box in each direction now you're the same thing with the high box height equals text height plus padding by 2 then we have it we've passed through everything we actually need to know about the box that we're going to draw in the text we're going to draw in its width and its height and everything appropriately now we can go ahead and actually make the object that's going to draw our text I'm going to go to objects create object and create obj underscore text I'm going to create the create event now it's not what I'm going to do in here the only variables I'm going to establish in here are the ones the arm but I'm never really going to change based on like the script or based on like choice or anything like that they're just they're variables that we use to like tick as a time or so on so forth you'll see what I mean was that alpha equals zero we're going to start in text boxes invisible and we're going to like fade it onto the screen so that it doesn't just pop on instant if you do you can just either set out to one or just ignore it Frank equals two quotation marks and a semicolon print is going to be the text that we're going to print the screen at any point in time because we're not drawing the whole piece of the whole string at once what we're doing is we're going to create a variable that we're going to add the text to piece by piece over time and that's what print is going to be so say we were saying hello or something we would like this will be start offers nothing just to quotation marks then on the next frame it will become H then it will become e then it become our egl then will become pachi ll and then I'll give them hello but it's going to start as nothing and it will always start as nothing let's fold in it here and the same goes the time equals zero that variable is just going to be how many frames have passed basically since this object was made and we're going to tick that about um oh I shouldn't take it up by however quickly we want to draw the text every frame and then we used that time variable to decide how many characters to draw in this print variable and you'll see how it works a second and then the last thing I'm going to say is a depth equals death - instance number obj underscore text this just ensures that if we draw one text object then we draw another text object the new text object will draw on top of the old text object so that you know we don't make new ones and they appear underneath type of thing because obviously the lower detect the depth is the further forward it's drawn on the screen that's all we need in that and then the only other event in here we need just the draw event and that and now we're going to add two things to this the first thing I'm going to add is one execute code action which I'm going to name at the start by using a three slapped command and letters over time so all we're going to do here is we're going to as time passes we're just going to add more and more letters to that print variable from the text string that we've already passed across from the script that need this object in the first place so if time is less than text length and you remember text length is the total number of characters in the string that we worked out from the script time plus equals SPD which is the speed that we want to draw so if it was you can start to see how this might work now because then we'll go we're going to do some s a print equals string underscore copy text the the string we want to copy from zero where we want to actually count from and time which is the number of letters we want to copy so what string copy does is as I said it's going to take a take a string it's going to count from a particular letter up to a particular letter and copy that part of the string into this variable now obviously at the beginning time equals zero and with zero zero it's going to copy nothing into print and it's just going to be what it was to begin with which is just two quotation marks but then as time keeps gained SPD the speed add it to it say it was like 2 or no say it was - yeah so time plus equal to so in time becomes 2 on the next frame oh we can't be counting from 0 up to the second character of our string say it was hello that would be H and then E and it would put that into print and then it keeps adding and adding all the time when we keep building until we get the entire of the string and it will draw the entire thing to the screen and that's it that's all you need in order in order to actually build up this variable so now this object is building this uh text variable and then it'll just stop doing this once um once time Mon is equal to or greater than the text length because that means we've got it all we've got the whole string at that point um so that's the first action we're going to have in here then we're gonna have another one in here another execute code action which I'm going to call render Xbox and text you need to keep these separate but I just thought isn't nice way to organize it so in here now that we actually have all the text that we're going to draw to the screen now we just need to actually go ahead and draw it so first of all I'm going to do draw set alpha equal alpha which as you remember is set to zero at the moment and if alpha is less than one which it is alpha plus C equals SPD the speed we're going to draw the text divided by ten else alpha equals 1 so if alphas less than one we're going to increase the alpha so increase the transparency at which we're drawing by just the speed we want to draw a text divided by 10 the only reason I use that is just so that like if we want to draw the text faster it means the box will fade in faster and if we draw it slower it'll fade in slower just so that it just kind of matches with the sort of feel that whether one we draw a text really rapidly because someone's talking really fast or if we want to draw it slowly because we want it to be a bit more dramatic or whatever well and then the ælis alpha is one on the top just means that we don't go over one we just set it to 1 when it gets there so that's that it's a draw set underscore set font is going to be font which is the one that we've already passed through draw a set color now what we're going to do is I'm going to set the color to be just see underscore gray for now when you draw it like a grey box and then we're going to draw like a black border on the box and then we're going to draw the text on top in white so first of all just gonna draw the box so draw rectangle on X Y X plus box with y+ box height and you remember our out current X&Y coordinates are whatever has been passed over to us from the script at the beginning because we made the object and then we set its x-coordinate or on the same frame so we're like we don't even get to this draw event before those variables have been set and it's not an outline so zero and that will draw a gray box at the right size then what we want to do is say draw set color see I'm still black I'm going to draw the exact same rectangle again X Y X plus box with y plus box height but I'm going to put one in here this time to say that it is an outline so we're going to get a gray box with a black outline so that's actually drawing text box now we want to draw the actual text so draw set color C underscore white a draw set each a line so this is like like whenever you've used like word or word processing or anything before you can set the alignment of text the draw from the left or draw from the center or draw from the right we're going to draw from the left so say 10 mins left draw a set and then the vertical align I'm going to draw from the top so when I draw from the top left so we're basically going to pick up any coordinate like like on the screen and then we're going to draw like down into the right essentially from that position so now that we've set that we can actually draw the Texas also draw I'm just got text and store ext the ext stands for extended because a draw text command and there's a draw text extended command which just gives you a few more things that you can pass along and now as opposed to doing a bracket and writing all the stuff like in here as one big function what I'm going to do is I'm going to open that bracket down here and close it down here you can do this and it works in exactly the same way and it just makes it a little bit easier to read these commands sometimes say X first of all the first function we want in here is um the x coordinate of where we want to draw the which is rx go on plus the padding the amount of padding when I draw inside the box that we've created so X plus padding so about 16 pixels into the box and why it was padding 16 pixels into the box downwards the actual text we want to draw is print the variable the separation between each line that we want to draw is going to be font just course size Plus on size over 2 which we worked out earlier or not semicolon Kham Kham and the maximum length is max language which is currently just the size of our room but will be whatever and that works just the same as if we put all that on one line just as long as it's comma separated at the end of each one and then end with just up closing the bracket a semicolon line so and then once that's all done we can say draw set alpha back to 1 so that we don't draw anything else with half transparency and that's really it that's all there is to that so now we have that we have the create event we have the script so we can now try that out if I go in through the room and I just go into the creation code of the room and I type ser sort of text and you see that turns yellow that's the thing we're going to actually do this is a test string we'll draw it a slow speed so we can see it working like north point 5 so it will draw like 1 character every 2 frames and X&Y corner 300 by 300 just to the center so if we run that now we can see I've actually made a mistake and the text is drawing way too long outside of the box and the reason for that so I go into ser and score text here is that when we use these this function here to work out how wide the text was going to be it was doing that based off of the default font um it doesn't know what fun we want to use because we hadn't set of fun so what you need to do in here at any time and draw a set font to equal 1 which is the fun we've just set so that font is ready to use ahead of time so that when we use string with DX T and string height ext it's working out based on if it were using that font to draw the text so now if we run the game you see it works fine and it draws text letter-by-letter into this box now to make that a bit more sort of interesting to test out I'm just going to create a quick object here called I will be J underscore spawner and I'm going to create an object so that we can just click all over the screen and spawn lots of different text boxes um how this works is a really an important part of the tutorial but I can explain it anyway I'm going to say if nice Jack put an underscore release NV underscore left bar str switch i random 4 oops there we go basically long mooing here is i'm just going to create four random scenarios and set this string to be something good don't do that inside the string to be something based on for just a random number between 1 4 so case 0 so in case our random number between or 4 comes at with 0 str equals four lines of text in the object hash symbol if you talk a hash symbol into a string whenever you use a draw text or draw text extended as a function in game maker and it comes across a hash symbol it will interpret that as a line break and it will do an automatic line break for you which can be very useful sometimes so four lines are texting you'll get four lines of text a pink one down i have prepared these in advance i passed it around still on your four lines of text okay so I'll have that as a really big one study go on break just to end the case semicolon a case one STR equals I don't understand I just get understand let me go on break let me call case to STR equals wow this is a long one don't you think question mark SEMICON likes that's all on one line now hash symbols are break case three steel equals haikus have three lines which makes them good for testing within a three push remarks I'm go on break sending on case for STR equals a dot dot it's the most boring one I guess break default xgr equals something went wrong because I shouldn't ever come up break so we're just going to pick one of those strings at random and we're going to set it to be that variable and then all I'm going to do is I'm going to say ser underscore text string a speed one why not Mouse X Mouse y so wherever we just clicked with the left mouse button and ended on a statement I'm going to plug that object in the room though should be called object one now I know we're in the game again it should still draw our test one at the beginning it's a test string but now if I click around I'll start drawing those text boxes that we came up with more or less anywhere yeah they are that's the very basics on like drawing text or drawing dialogue in a specific spot and how that actually works I can go in there here and show you what happens if we want to draw that bit faster so draw like three older like three characters at a time and draw everything really fast you see the first one was quite slow but now these are all zum-zum zum-zum super fast and you can do the same thing by making it like more point to detroit like really slow like one every five frames and fade in slower as well see that's a bit more slow and dramatic and so on till four so it's kind of flexible there's a lot more I could show you how to do this I might follow up this tutorial with more stuff on this um because I've kind of been working on a flexible ish kind of text engine but we'll see whether or not I get to doing that either way I hope this was useful to you guys um and I will catch you guys next week thanks for watching guys you

Channel: Shaun Spalding

Views: 205,172

Keywords: Game Maker (Video Game Engine), Game Development, Indie Games, Indie, Games, Tutorial, Information, Learning, Tutorial Series, Game Maker Studio, Steam, iOS, Android, HTML5, Windows, Making Games, How to make games, Basics

Id: HdJ0ZUIs-AI

Length: 26min 53sec (1613 seconds)

Published: Thu Jan 22 2015