Using a dialog system in GameMaker Studio 2

hey everyone welcome back to game maker cast it's mickey and in today's tutorial we're going to be taking a look at a dialog system that we can create we can see we have an example in front of us after a couple seconds our dialogue starts up and we can go through the dialogue by pressing any key and you can see it kind of just goes at the bottom conversation in between a cat and a dog and when the dialogue finishes it will delete itself so that we could move around or we could carry on with our game so we're going to take a look at how we can do this so let's roll the intro and let's get right to the code [Music] so before we start i just want to tell you that this code will be found on github it's under my gamemaker cast and you can find it on the dialog scripts if you're not sure how to work in github all you need to do is download the code by using a zip file here or you can go over to the releases and you can grab the latest release which is 1.1 you can download this file this file is what we're going to actually use to import into our game so let's switch over to game maker studio and import it and start working so in game maker studio i'm going to go to tools and say import local package i'm going to find the package that i have and i'm going to open it and you can see that it comes with some scripts already i'm just going to go ahead and add all you can see it's added it all over to the right and i'll just say import now all of those scripts are added into my project here so we have a pretty basic room we have just an asset which is our graphic and then we have an object weight and that is our room entirely in the object weight all we're doing is we're waiting a few seconds here or one second to be particular and then we are creating an instance of our dialogue so this would be like if you walk up to something and you press the interaction key we would create an object dialog which would start the object or sorry start to dialog if we take a look at the dialog object it is completely empty so if i were to run my game right now you'll see that we don't have any dialogue we don't have any black bars it's just the screen so the first thing we want to start with is the black bars coming up from the bottom to do this we'll have a create event a step event and finally a draw gui event in the create event we need to figure out where the position of the bar is going to start and where the position of the bar is going to stop so that means that we need two variables we can get away with using a position on a score bar y and a position on the square bar y end and what we want to do is we want to set the bar y to be the display get gui height which will give us the bottom of our gui layer the ending what we could do is we could set it to the y position minus 100 to bring it up 100 pixels now you might be wondering what can we do with this function here well right now because i only have one room and my room is not changing size and i don't have any viewports my gui layer is going to be 1024 by 768. you can set this to anything you want by using a simple command called display underscore set gui size which will give it a width and height so right now this is kind of what it looks like room width and room height so this will cover my entire room making my gui start at zero and going all the way down to the room width and height what we can do is we could easily upscale this by dividing this in half so if we think about this what it's actually doing is taking half the room width which would be here and half the room height so we'll get it somewhere in the middle but game maker studio is going to automatically stretch that to be the resolution of our game so it will be automatically upscaled now i don't want anything upscaled so i'm just going to go ahead and take away my division here and i'm going to leave it like this so in order to get the bar moving let's go to the draw gui and let's start off with some of these draw commands that we imported you can see we have a draw set a draw reset and a draw a line even though they're not really formatted and the draw set will allow us to set a particular color such as c black and an alpha in one single call and then we have a draw reset which will reset the color to white and in full alpha of one so this is just a quick way to set everything up for drawing now what we want to do is we want to use a draw rectangle and as you know a draw rectangle takes the x and y positions for start the ending and then whether or not it's an outline so we want our rectangle if we bring up our room to start over here on the left and expand all the way over to the right so our x position for the first time will be zero our y position we want it to be all the way at the bottom so we will use a display underscore get and we will say get gui height so that will put us all the way at the bottom now we need it to go all the way over to the top or sorry to the right so we could use a get gooey width and now we can use our position on the score bar the score y we don't want this to be an outline so we will say it's false so we have an error here so let's close my room maximize this and see where our air is let's fix that so now if we run everything you shouldn't actually notice anything because we're not moving that position so the next thing we need to do is take this position bar and make it line up with the bar end position to do that we'll switch over to the step event and we're just going to use a lerp command so we'll say whatever our current position is at the y location we're going to learn between the current position and the end position by twenty percent each step so if we do this and we hit f5 you can see after a second our black bar will start to come in nice so the other thing we want to do is we want that bar to come in before we're able to display text so that means that we need a flag or a trigger before we can do that if we go back over to the create event let's create a boolean called can display text let's set it to let's set it defaults right now now in the step event we need to make sure or we need to say when the position y is equal to the end position then we can display the text to do this we could just say if the absolute value of the position bar y minus position bar y end is less or equal to 5 pixels well once that happens then we can say yes you can display text so we'll set that to true now before we even start displaying some text we're going to have to go to the create event and actually create a dialog you can see that over here on the right we have a whole bunch of dialog functions let's start off by initializing the dialog by typing dialog underscore init now if we take a look at this script right here you can see that we're using global variables and we have two variables we have our messages which will be an array then we have an index which will store what position we are in the array once we initialize it we have to add some dialog into the array and we can do this by using the dialog underscore ad the dialogue on the square ad will take a sprite and some text so i'm going to go ahead and copy what i have for a conversation into my project okay so you can see that i'm including a picture and if i go to my sprites you can see i'm referring to the picture of a cat or picture of the dog then i just have some text in here if you look at dialogue ad what we're doing is we're grabbing the picture and the message which are the arguments we're checking to see if the dialogue index is negative one so if it is we want to start at zero otherwise we're going to increase that dialog index by one and therefore adding to the array each time we call this the final things we do is add the picture and the message to the array we're not sure what we're doing here if we take a look at dialog enums for our numerator you can see that we have an enumerator here and all this is doing is transforming picture into the number zero and messages into the number one so that's an easy way for us to figure out which one we want in our raid we want the picture or do we want the message now that we're done adding everything we need to tell it to reset that index well luckily enough we can use dialog reset and if we check that out quickly that's just resetting the dialog index so that we can start at zero okay so now i think it's time to actually display some text let's go over to our draw gui and we need to check that boolean that we had so we'll say if can display text so if can display equals true so we could write it like that if we want it to well i'll keep it as a short form for now so if we can display text what do we want to do well let's set on our alignment so we could use draw set and we can use h line or v line but i'm going to use the draw set align which is a function in the draw here and that just allows us to set both in one go so i want the fa center for the horizontal and the middle for the vertical alignment now i want to draw a sprite make sure i spell that right i'm going to draw a sprite at whatever the index is for our dialogue so that means whatever the current person is or animal or object that's talking we want to grab that sprite and draw luckily we have another dialog function called dialog get picture and then we'll get the current picture of the from the array itself so you can see here we're going to the index and then just passing back the picture now we need to know what index we're going to be drawing at and because i'm not using any animation i'll just use the index of 0. now the x position if we take a look at our room i am going to make a little bit of padding so i'm going to give it 64 pixels over to the right so i'll say 64. and now i need to display it kind of at the bottom well if you remember up here we just we got the gui height so we can just use that and we can bring it back up say 60 pixels and then we are working with a hundred pixels so i could say minus 50 to put it in the bottom now if i have everything set up see what happens if i hit f5 we should have those black bars and hopefully a picture of a cat which is the first item in our array now let's work on the actual text i will be storing the text in a variable called message and i'm going to be using another function that we have written here call called gun get your text if we take a look at it it's very similar to the picture one except we are let me close my room we're just returning the message instead of the sprite so right here this will store whatever the current text is in there so i could easily just say draw underscore text and let's draw it at the x location and let's use let's say display let's put it kind of in the middle so i'll copy my width here and i'll divide that by two and then i will copy my height because coding is all about copying and pasting and i'll bring it up 60 pixels and i will just display the message so let's hit f5 and see how that worked once the game is running you can see that now we have a picture we have a dock at this point you can kind of skip ahead if you didn't want the characters to show up on the screen one at a time but if you do want the characters to show up on the screen one at a time we're going to have to add a few more variables so back in the create event where we have canned display text i'm going to put another variable called character index and set it to zero so this will be the counter for every character that exists in the string and the step event we'll be using this index to increase by one each time however i don't want it to increase every single step so i'm going to be using delta time and i can say if we can display our text then in here i want to say if my delta time which is the number of seconds each frame has passed mod room speed times 0.1 so that would give us a tenth of a second equals zero so that if the remainder of this divided by whatever room speed is which is 60 times 0.01 if the remainder is zero then we'll come into here and i can say character index plus equal one now i'm going to leave this as is but we will get a little bit of an error however we will see some of this working so let's switch back to our draw gui in our draw gui after our message let's make a new variable called text and we want to use the function called string copy now this is a game maker function that allows us to copy a part of a string so i want to copy part of message starting at the index of 0 and go into my character index that means that when i draw my text all i have to say is i want to draw the message or sorry the text and not the message so let's hit f5 and let the game run and you can see the error once our dialog comes up we should see this and now nothing is happening however in the background our character index is still going up and up so we could run into some issues so to get around this i'm going to implement a key press to move on to the next index so let's go to the create event and create a new variable called is waiting for keypress let's set that to false now let's go back to our step event and modify our if statement if we can't display the text and we are not waiting for the key press then we will increase our character index by one however if our character index is bigger or equal to the string length of our dialogue underscore get text so that will be the text of the current dialogue that's happening if it is bigger than that then we will say is waiting for key press equals true now let's switch back to the draw gui and at the very bottom after we draw our text we could say if is waiting for the key press then let's draw some information on the screen to let the player know that they need to press any key we can set our alignment with draw set align and let's use the left align and we'll keep it at f a middle next let's set our text to say something like press any key and now we need to figure out what the length is of that text so we will use a string with function which will take the text and basically tell us how long it is in pixels now we can use our draw text transform and we can draw it at the right side of the screen so we will use the display get gui width and let's take away the full length of that text that we are writing in pixels let's put it almost all the way at the bottom so we will use the draw sorry get gui height and let's take away 20 pixels let's add in the string that we want to draw now we have to add our scaling options in so i'll draw at 75 percent and then the angle will be zero so we hit f5 let's see if we have any errors after we implemented that code we should get our picture and we have our hey dog however we don't get the message let's close it and i can see right here i'm using display get height and i need to use display get guide so let me paste that in and hit f5 now and let's see if this works so we have our text and once it's finished we have a press any key to continue right now we can hammer on those keys and nothing will happen so let's actually make that work so in the step event we know right here that we can display the text and then we know right here we are not waiting for a key press but if we are waiting for a key press so we'll say else we could say if the keyboard underscore check and let's use the release and we'll use the bk any key so anytime a key is pressed we will come in here and once we're in here we could say we are not no longer waiting for a press so we'll set that defaults we might as well reset the character index count to zero the other thing we need to do is we need to tell our dialog to go to the next one so we'll we we will use the dialog next function and all that is doing is is increasing our index by one now let's see if we can make it through a little bit of a dialogue before we get to an error so we have our cat we press that key we have our dog let me try the space key and that's still working how about the letter t and you may have noticed that this actually takes a long time so maybe what we want to do is have something where we press a key it automatically finishes now we should get an error here and we do because even though we're telling our dialogue to go next there is no information at the end of that there's no dialogue after that so we could just check for if we have a dialog end and we'll check that at one second but what we want to do is we just want to destroy that instance all dialogue end is doing is it's saying get me the count of however many items are in the array and if the count is less or equal to the dialogue index then we will return true or false depending on where our index is obviously if this returns true then we're going to destroy this index which will end the dialogue now you may remember it i said some of that was a little bit long so maybe what we want to do is implement some kind of key press so it automatically finishes the sentence that's pretty easy to do we could just copy this code right here and while we're in here so we're saying we can display text and we are not waiting for a key press then we can say up here we'll say if any key was pressed then all we want to do is set the character and if i could spell that right character index is going to be the string underscore length it's actually just this code right here so let's copy and paste this guy in here so we're setting automatically the character index to whatever the character index should be and then uh what will happen is we will wait for a key press so let's hit f5 let's see if this thing is all working now so we should get this hey dog we have any key and that works okay and the next one i will press the button twice and you can see it finishes and now we should end the dialogue and we could carry on with our game so this dialogue system it's pretty easy i'm hoping that you will download it and take a little bit of a look it's using the global variables so that's one thing to make sure you check out that you're not using these variables in any parts of your other games or certain things will mess up i try to keep all my variables named as dialogue but you never know what will happen anyway thank you for watching i hope you've learned some things and i hope you join me in the next video and in today's video we have xcom 2 and 2 dlc's download it's free first come first serve so look for the link in the video above and i hope you enjoy it thanks for watching as we welcome these new inhabitants to our cities we are thankful to the advent administration

Channel: GameMaker Casts

Views: 3,785

Keywords: tutorial, gamemaker studio 2, gamemaker, gamemaker studio

Id: qO6pFJhgNrc

Length: 19min 45sec (1185 seconds)

Published: Tue Jul 28 2020