Displaying User Input and Auto Scroll (Godot Retro Text Adventure #4)

in this video we're going to adjust our input response to actually display back to the user what they inputted so if i type hello you'll see that hello is inputted and shown back to the user and then what we're also going to do is adjust our scroll bar so that if i continue to type things we're always going to scroll to the bottom which is going to be a nice usability feature while still letting you scroll back up and see the history of what you've typed but every time you type something new right back to the bottom let's get started alright so in the last video we started sending responses back to the user when they type something but these responses are really generic and don't really reflect what was typed in and so what we need to do in this video is actually make it so that we can adjust what is getting sent back to the user based on what they type or at least get that started if not fully complete so the first thing we want to do is take a look at this input response scene that we made so it's really nice we're able to continually reuse it which has been great but the problem is we don't really have much control over what it's outputting and in order to adjust this we're going to add a script to our input response scene here so i'm going to select input response and one thing make sure that you are if you have an input response variable here in another scene for example an instance of it um make sure you're doing this in the base scene itself so if we want to add a script to input response and i do it in our game scene or on an instance if i add a script here you'll notice that i've added this script to the instance of input response but if i go to the scene itself it does not have a script so you want to make sure when you add a script to something you're doing it on the base scene itself in the scene file so what i'm going to do is get rid of this one here this instance and then in input response in the actual scene itself i'm going to add a script you'll see it's actually telling us to load because we just created the script so this is perfect and now whenever we instance our input response scene all those instances will have the same script which is exactly what we want so in this script we want to provide ways for us from code to adjust both the input that the user was gave and the response that the game is giving back to the user so in order to do that we need to get references to both of our input history and response now we could do on ready var like we saw in the previous one so i could say on ready var response for example and set it equal to response and this is fine but with these input responses we are only going to need to set them once when we create them we're going to set their values and then never care about them again and so if we do on ready var here we're going to be saving these response and input history variables in memory for the entirety of the existence of this input response even though we're never going to set them again so it kind of makes more sense in this case for us to not store them as variables but to only access them on the fly as needed the downside is that when you use this dollar sign when you try to access nodes in the tree it's somewhat slow but in our case it's not going to be any issue at all because we're doing it rarely and it's not slow enough that you'll actually notice it unless you're doing it many many many times repeatedly so it's worth it for us to save on memory a little bit and do something that's slightly slower so what we're going to do is have a function and we'll say function set text and here we're going to say input as a parameter and we're going to type this as a string so we're using static types here again if you're not familiar with static types in gd script i've got a video on my channel going over everything you need to know about static types so i would definitely recommend watching that so we're going to have an input here that's going to be a string and this is just going to be a way for us to pass in what the user inputted and we're going to have a response which is also going to be a string no return type and here what we're going to do is say input history dot text equals input now this is going to be good except when we do this we're going to overwrite this caret here so what we really want to do is actually say quotation mark and we'll do space caret space just like we have there and then we'll do the plus sign and then input and what we're doing here is we're taking two strings the input string we're passing in and this hard coded string we're adding to every time we set the text and we're concatenating them concatenation is the word when you add or combine strings so we're going to concatenate both of these strings together so whenever we set our input history text we're always going to prefix it with this carrot which is what we want to make it match what we've got out here right now so now we've got that we're good to start doing that with our response so we're going to say response and we're just going to set this to be response because it's already a string we don't need to know anything there and be aware and make sure you're not just saying response equals response but actually response.text and this is actually setting the text property on that label so if i select this response property or this response scene you'll notice that the property we're actually setting is this text property if you mouse over you see the property is just text so again we're not accessing the response label itself but we're accessing and changing the text property on the response label so that's why we're adding this dot text and not just saying response equals response so now we've got a function where we're able to give the input and a response to our input response scene and see that in our game so now what we can do in our game is when we add this input response child or actually before we do it we can say input response and we can call that function that we just set which is set text and you'll notice that godot is able to autocomplete that function for us because when you use preload it is able to pull the script data from this because this is a static file it's not changing we're pre-loading it we're able to actually pull information from that script and so it knows that this set text function exists on that script now and we can pass in our input and so our input is getting passed into this function here on our game as new text so we'll say new text and then remember we also require a response parameter we don't have responses right now so we'll just hard code something for show this is where a response would go and now and we'll change this later but now if i start our game and start typing something and i type hello you'll see that it's actually printing out whatever we typed what's so cool this is amazing please subscribe oops subliminal marketing in there please excuse me but so anyway you see that um we've got some output actually like we're actually responding to what the user types this is really cool it's so easy now and we've actually got something that's kind of responding to our game it'd be a lot cooler if our response actually matched but we'll get there in a second one other thing is that it'd be a little bit nicer if we kind of had some separation between blocks here so we do want this the the input and the response to be close together but if there's a little bit more space in between here that would be nice so we can set that right now and the way i'm going to do that is come back to our scene and i'm going to hit our history rows here and what i'm going to do is come to our custom constants and change our separation to be about 20 and what this is going to do is it's going to set a bit of separation between each of our input response children we give to it remember it's not going to change the space between these two because this is controlled within the separation of our input response itself but it will set the separation between the instances of each input response what we can actually do here is manually set the separation to zero to make sure it's close together can you can you do negative so you can also do negative we can make it super close together but uh that's not looking very good but we will keep it set at zero just to make sure there's these are it's very clear that this input and this response are tied together so now if we run our game i hit command b and i type something we'll see that our input and our response are close together but if i type something else there's a bit of a space between them so it just is a little bit more clear now which input and which response go with each other it's easier for the user to identify they don't have to keep track of it or get confused about it so just a small change that adds a little bit of readability to our game okay so one other change that would be nice to make is that when we start typing a lot and we get down we can't really see the new things we're typing because our scroll bar is getting stuck at the top and if we scroll to the bottom and keep doing stuff it doesn't really help so if we had a way to automatically bring our scroll bar to the bottom when we type something new that would be kind of nice and godot actually provides a way for us to do that so we're going to do it right now so if we come to our scroll container you'll see that there are a number of properties here or signals here but they're not really super helpful but if i add a scroll bar to our game a v scroll bar and we're not going to keep it here but just for the purpose of demonstration you'll see that there's a changed property here and this change property is or this signal is emitted whenever the maximum or minimum value of the scroll bar changes or the page or the step which is how many pages it's at or how much each step of scrolling does it does not get emitted when the value of the scroll bar so where the scroll bar actually is changed which is good because we don't want that but it does get emitted when the scroll bar is minimum or maximum scroll amount changes so we will get rid of this for now but the reason i wanted to show that is because a scroll container creates a v scroll bar and an h scroll bar under the hood we're not using the horizontal one because we've gotten rid of it but we do have the vertical or the v scroll bar underneath so if we want to have our scroll container automatically scroll to the bottom every time something new is typed we can do that by connecting and using the the change signal that we saw on the v scroll bar so first we need to get access to our scroll container i'm going to just call this scroll i'm going to rename our scroll container so our path isn't as long and i'm going to say on ready var scroll and i'm just going to start typing scroll after the dollar sign and it should fill in for me and so now we've got our scroll container but we need to get the vertical scroll bar that our scroll container has and so what i can say is on ready var scroll bar and set this to be scroll and you'll see there's a get v scroll bar function built into a scroll container and so when we call this it's going to return the v scroll bar that we can use to get our v scroll bar and and connect to our change property so now in our ready function which i'm going to add we can say scroll bar dot connect and you'll see it automatically fills a list of signals on our scroll bar and we see this change signal that we saw before in the editor and so i'm going to connect the change signal and you'll see it wants you to connect or the parameters for connect are the signal to connect to which object to connect that signal to and then which method or function on that object to call so we want our we want to connect to our scroll bars change signal and then the object we want to connect that signal to is our game which we can reference in our code by writing self this is similar to python or java or other object-oriented languages so this is saying connect our scroll bars change signal to this script to whatever script this is which is our game and then we have to give it a function on our game script to use and so we're going to say function handle scroll bar changed and remember if we looked at when we looked at the changed signal there were no parameters so we won't have any parameters here and right now we'll just do pass which is just a placeholder to say ignore this for now and so we're going to need to take this name and give it in our connect as a parameter here and so it tries to fill in sum and we can should be able to find uh it'll be fast if i just paste it in so remember the method is a string here unfortunately in godot 3.2 you have to use a string here but in godot 4.0 you'll be able to actually use this as a symbol so you don't have to you can get good auto completion on it you won't have to change your string here if the function name changes but so what we're doing here is the exact same thing as if we had connected it via the editor so it's like double clicking one of these and then connecting this function here it's doing the exact same thing just via code and there's reasons to do it via the editor vira code typically anything that's ui based or anything that's just a signal that's always on something it's easier to do it via the editor because it's it's easier to see those connections in your editor you can see them that they exist either in the signals tab here or see that it's got a connection symbol on it but sometimes you have to do it via code when you're instancing things programmatically or accessing something via code you also need to connect to those signals via code which is why we're doing it here but whether it's via code or via the editor they're both totally valid and will accomplish the same thing so whenever our scroll bar scroll scroll bar excuse me emits the change signal this handle scroll bar change function is going to get called so what's within here that we need to actually implement are scrolling to the bottom and in order to do that it's actually pretty easy we can just say scroll dot scroll vertical and so this is the if you look at our scroll container you'll see the scroll vertical property here it's called scroll vertical so this is what we're adjusting and we're going to set the scroll vertical to be our scroll bar dot max value and so what we're doing here is we're saying hey scroll container scroll vertically down to as far as your vertical scroll bar can go it's a bit convoluted it's unfortunate that it's not a little bit easier to do this or that we can't do it all within our scroll container we have to actually access our scroll bar but it's a small price to pay to have this functionality and so if i run this now and you'll see that when i tried to type something we actually got an error again it's the same one we had before the can't call a function in null instance and the reason why is because we changed again our history rows from scroll container we changed this to just be scroll and we never updated it so that was my bad but now if i change that and run our game again and start typing things we'll see that once we type enough to get a scroll bar we're always scrolling to the bottom so this is really awesome it's moving us to the bottom and we're always there the problem now is if you try to scroll up it's actually unable to it's not letting us and the reason this is happening is because whenever we try to scroll we are altering the page property of our scroll bar and remember that this changed signal gets emitted whenever the minimum maximum values the step or the page property on our scroll bar are changed so we only want this function to be called when our max scroll value changes but unfortunately the signal is being emitted and this function's being called at other times when we don't want it and it's preventing us from scrolling so the way we're going to get around that is to keep track of our max scroll value and only actually let this function do something and bring us to the bottom if our max scroll length has changed so i'm going to create a new variable called variable max scroll length and this is just going to be an integer i'm going to set it to 0 for now it doesn't really matter and then what we're going to do is we're going to say scroll max scroll length equals scroll bar dot max value and so now we're setting a baseline for our max scroll length and then whenever our we get to this scroll bar change function we only want to do something if our max if our new scroll bar max value is different than our previous max scroll length so i'm going to say if max scroll length does not equal scroll bar dot max value then there's a couple things we need to do one is say max scroll length equals scroll bar scroll bar whoops.max value so we need to update our max scroll length to meet or to match our new max scroll value and then it's only within this if statement that we actually want to scroll to the bottom and i'm going to change this to be max scroll whoops length i missed that i'm supposed to be an m and so now what's gonna happen is we're only going to scroll down to the bottom when our scroll length change and it's important that you actually update our new scroll length here to make sure this works so now if i run this and i start typing you'll see that when i type we're still sticking to the bottom which is good but now if i try scrolling it actually lets us scroll up and move around because our max scroll length is not changing therefore even though that signal is being emitted we aren't actually doing anything so this is perfect and if i type something when we're scrolled up you'll see that it'll bring me right back to the bottom so this is exactly what we want you're able to go back and look at your history but if you type something new it'll bring you to the bottom so this is a perfect medium we've got something where we can scroll up and see our history but also where whenever we type something new it's going to bring us to the bottom of our scroll history again so i think this is a good place to stop for now thanks so much for watching everyone hope this video has been helpful if it has a like and subscribe to support the channel are always appreciated we'd love to have you in our discord server link to that is in the description feel free to ask any questions about the tutorial there and if you find my work helpful donating a coffee on buy me a coffee linked also in the description helps me continue to make great tutorials thanks so much for watching everyone see you in the next video

Channel: jmbiv

Views: 2,242

Keywords: godot, godot engine, godot 3.2, godot tutorial, godot 2d, how to make a game in godot, game development, game development tutorial, game development for beginners, godot for beginners, game dev, indie game dev, gamedev, godot game engine, godot text adventure, godot text adventure tutorial, godot text, godot input, godot user interface, godot control node, godot control, first godot game, my first godot game, godot beginner tutorial, godot scroll container, godot scroll

Id: UtlwA4LU2II

Length: 18min 56sec (1136 seconds)

Published: Mon Mar 01 2021