TextBox - Roblox GUI Tutorial #5 — Transcript

Full transcript

1. 0:00bro what is this does this game think I'm a math  professor or something oh okay what is 8 - 4 well
2. 0:10if we really think about this if we're subtracting  four from 8 we're literally taking away the four
3. 0:16from the eight so I think the answer is just eight  let me put that here and let's see what our result
4. 0:21is bro all right let's think about my life choices  for a minute okay but anyways what we just saw was
5. 0:29a question that the game gave to us which was  a math problem and we were able to answer this
6. 0:34question by inputting a number inside of a little  box and whatever answer we put inside of that box
7. 0:41we clicked on the submit button to check whether  the answer was correct or not and the way we were
8. 0:46able to get this user input from the player was  from a new guy element called a text boox which is
9. 0:54the GUI element that I will be introducing inside  of this episode so that we can get user input from
10. 1:00the player through our GUI elements and in order  to create a text box we're of course going to
11. 1:06need to put this inside of a screen GUI so we're  going to go to the right side of the Explorer hit
12. 1:10the plus sign next to start GUI and we're going  to insert a screen GUI we're going to call this
13. 1:15main GUI and then we're going to hit the plus  sign here and we're going to insert a text box
14. 1:22so this is what our textbox should look like and  we're able to drag this uh around like normal but
15. 1:29you might notice that we can actually select this  text box inside of our studio and right now it's
16. 1:36selected or focused in this case so this indicates  that we're able to type something inside of this
17. 1:43text box so if I literally type in hello or just  anything really then it's going to change the text
18. 1:51of this text box to whatever I just typed in we  can delete this and we can even deselect it so we
19. 1:58can unfocus from it to where where it's just now  a blank text box and like I mentioned we can just
20. 2:04select it again so that we can focus on it and  we can put in and we can put in a new text here
21. 2:11like how are you doing and this is the cool thing  about a text box is that it's kind of like a text
22. 2:18label but if it was able to be changed by the user  when they're playing the game that's kind of like
23. 2:25an easy explanation I can give to text boxes  and how they are used inside of inside of the
24. 2:31game so that was just something I I wanted you to  understand a little bit and I mentioned that when
25. 2:36we select our text box we go into this Focus mode  this is just called focusing on the text box and
26. 2:44if we're not focusing from it anymore that's  just called defocusing so those are just two
27. 2:50terminologies that I want you to get a grasp at  because there's going to be properties and events
28. 2:57and functions that we're going to use that require  you to know the difference between focusing and
29. 3:02defocusing it's pretty easy so I think you pretty  much get the basic understanding of that what I'm
30. 3:08going to do now is introduce you to a bunch  of properties that are specifically used for
31. 3:13text boxes but before we do that let's make some  changes to our text box so let's select this text
32. 3:18box and let's just put in some sort of text here  let's say Roblox is amazing now what we'll do is
33. 3:27Select our text box and let's scroll down to the  text category and let's make text scaled turned on
34. 3:35and let's scale this so we can see it a lot easier  and let's also reposition this to the center and I
35. 3:42realize I'm going to have to type that again  uh that's fine so we'll just go to the text
36. 3:45label here and say Roblox is awesome all right so  now that we have that let's scroll back up in the
37. 3:52properties tab so the first property that I want  to introduce that's unique to text boxes is called
38. 3:59clear text text on focus and basically what this  means is that when you focus on the text box that
39. 4:05already has text on it it's just going to wipe  away whatever text was originally on this text
40. 4:13box so that you can put in some new text inside  of here so we can just say Roblox sucks instead
41. 4:21um in order to prevent this to where we defocus  and focus back on it again we don't want it to
42. 4:27just delete all the previous text that was there  what we can do is turn off clear text on Focus so
43. 4:35let's uncheck this and let's type in our original  message let's say Roblox is awesome let's deselect
44. 4:43it and then select it again and as you can see the  text box did not wipe whatever text originally was
45. 4:49in here so we could just continue off what we  were trying to say with this text box prior so
46. 4:55we could just replace awesome with Roblox is bad  there's also another property called multi-line
47. 5:01and basically what this means is that when you  have this turned on you can create text that have
48. 5:08multiple lines inside of the same text box so if  I like so if I hit enter which drops down to the
49. 5:14next line we're able to do this and we can just  write text line by line so we can say nah Roblox
50. 5:22is good and then we can just drop another line  down here and then we can say meh I'm not sure
51. 5:31and so we can just keep doing this over and over  again but if we disable multi-line and we try to
52. 5:38drop down to the next line it's not going to work  if we just hit enter then it just simply deselects
53. 5:43the text box we also have text editable which  basically means if we have this turned on then
54. 5:50whenever our player is playing inside of the game  then we can select this current text label and
55. 5:57update the text however we want it to um but if  we have it turned off let's turn off text editable
56. 6:04then the player will not be able to add any more  text to it as you can see I'm trying to type on my
57. 6:10keyboard right now and nothing is being put onto  this text box because I disabled text editable so
58. 6:17this is useful during the game when there's going  to be certain periods where you just don't want
59. 6:21the player to edit this edit whatever is currently  in the text so I'd say that's pretty much the only
60. 6:28time out finds text editable to be useful but  I think that's just something good to know if
61. 6:33we scroll down there are new properties related  to the the text category so first thing we have
62. 6:40this thing called a placeholder text and pretty  much what this means is that if there is no actual
63. 6:46text on this text box then Roblox is going to put  in a text for you before the player actually does
64. 6:55put a text inside of this text box so it's kind  of like a default text before putting an actual
65. 7:04text in there so let me show you what this looks  like let's delete our text here and as you can see
66. 7:11there's no text inside of our text box but it's  kind of hard to tell that this is a text box other
67. 7:16than our cursor change so one really neat way  we can let the player know that this is a text
68. 7:23box is by adding in a placeholder text so let's  change this for instance to enter your answer
69. 7:31here dot dot dot so Roblox is going to put in a  default text here if you don't already have text
70. 7:38here so if we select this then we can put in text  inside of this text inside of this text box and
71. 7:44the placeholder text will automatically go away  being replaced by the text we just put in and if
72. 7:50we leave the text property empty again then it'll  just go back to the placeholder text so I say this
73. 7:57is pretty neat to let the player know that this  is supposed to be a text box that the player is
74. 8:02supposed to input information into here and so  that's pretty cool to know about another thing
75. 8:05related to placeholder text is placeholder color 3  so by default it's this sort of grayish text color
76. 8:12but if we click on this Square color then then we  have a panel where we can choose whatever color we
77. 8:18want I don't know dark green or something we can  hit okay and this is going to be our placeholder
78. 8:23text but our actual text is going to be whatever  our text color 3 is and that's pretty much the
79. 8:29general gist of it so now I want to introduce  the scripting components of this text box and
80. 8:35first we'll start with two events the first one  being focused and the other one being focused
81. 8:39lost so let's just insert a local script inside  of our text box over here let's hit the plus sign
82. 8:46hit local script let's delete this and we will  make reference to our text box by saying local
83. 8:52textbox equals script. par and down here we're  going to create our first event we're going to
84. 8:59to say textbox do focused colon connect function  open parentheses close parenthesis hit enter so
85. 9:09this event is basically going to fire whenever the  player selects the text before they input any sort
86. 9:16of information onto this text box so let's just  do something simple by writing a print statement
87. 9:22by saying print player has selected the text box  and we can basically do the same thing when they
88. 9:32go out of focus from this text box also known  as deselecting the text box we can say textbox
89. 9:39do Focus lost colon connect function so let's hit  enter and let's write a print statement here by
90. 9:48saying player has lost focus of the text box so  these are the two events that'll simply activate
91. 9:58whenever first the player selects the text box  and then this will fire when the player defocuses
92. 10:07from the text box so let's test this out really  quick all right so I'm in the game when I focus
93. 10:13on this text box it's now saying in the output  player has selected the text box we can put in
94. 10:20some random information here and if we deselect  it then it's going to say player has lost focus
95. 10:25of the text box and what's also interesting about  defocusing is that if we select our text box again
96. 10:33as long as we stay focused it's only going to  print player has selected the text box one time
97. 10:39it's not going to happen every time we click on  this while we're still focusing on this text box
98. 10:45however instead of just clicking away from this  text box in order to deselect it we can also hit
99. 10:51enter and this will also activate the focus lost  event by saying player has lost focus of the text
100. 10:57box and I believe this also works by hitting  Escape as well so there are definitely a bunch
101. 11:04of keys that act as losing focus of the text box  like hitting enter or pressing escape or clicking
102. 11:13outside of the text box so those are just stuff  that you may should be that you probably should
103. 11:19be aware of when you're trying to design your  text boxes uh for your Roblox game so going
104. 11:25back to focus lost there are two arguments here  but the only one that's really important here is
105. 11:30enter pressed input that cause Focus loss doesn't  really matter all too much at least compared to
106. 11:36enter pressed so our first argument is going to be  enter pressed and this is the one we're interested
107. 11:41in enter pressed is basically a Boolean that tells  us whether the player lost Focus from this text
108. 11:48box if they hit enter and not do anything else  whether that was clicking away from the text
109. 11:55box or hitting Escape so let's make that check  down here by saying saying if enter pressed then
110. 12:03this just implicitly checks whether the player has  pressed enter well let's write a print statement
111. 12:08by saying player hit enter to lose focus so  now let's test this so let's just put some
112. 12:16random stuff in here and let's hit enter we're  going to see that not only did a print player
113. 12:22has hit enter to lose focus but it also printed  the other thing that was originally here player
114. 12:27has lost focus of the text box now if we select  this again and then hit Escape for instance all
115. 12:34it's going to say is player has lost focus of the  text box and not because the player has hit enter
116. 12:39so that's something pretty interesting to know  about let's say this is like a confirmation text
117. 12:44box that you're trying to use for your systems and  then finally we have three functions from the text
118. 12:50box that I will be introducing in this episode  so the first function is capture Focus which is
119. 12:57basically forcing the player to automatically  select this text box during a certain point in
120. 13:03the game without the player doing it themselves  so we're going to do that by going to our local
121. 13:08script and let's quickly comment out these uh  print statements so that our output will look
122. 13:15a lot nicer when we test whatever it is we're  going to test for the rest of the time so what
123. 13:19we're going to do first is after about 5 Seconds  we're going to force the player into focusing on
124. 13:27the text box so what we're going to do is drop two  lines down here and we're going to say task. wait
125. 13:33put about 5 Seconds there and then down here let's  say textbox colon capture Focus open parenthesis
126. 13:43close parenthesis so this will basic so after  about 5 Seconds the text box will force the player
127. 13:49to capturing the text box and by doing this it's  going to fire this focused event up here so that
128. 13:57we can make it do whatever we want it to do so  just for right now let's actually uncomment this
129. 14:01again so that we can see whether this works or not  let's test this out so after about 5 Seconds we
130. 14:08should automatically be selecting this text box as  you can see with this little blinking line at the
131. 14:15very beginning while also saying here player  has selected the text box so it's working as
132. 14:19expected and we can deselect it if we wanted to  the next function is called is focused and this
133. 14:25is basically a getter function that just returns  a Boolean as to whether the player is currently
134. 14:30focusing on this text box and it goes something  as simple as this so let's go to our local script
135. 14:37and let's check to see in about 5 Seconds whether  the player is still focusing on this text box and
136. 14:44we're actually going to do this using a task delay  rather than a task wait because we don't want the
137. 14:49script to pause completely if this is the case so  we're going to do this by saying task. delay open
138. 14:56parentheses close parenthesis and we're going to  put in the duration which is 5 Seconds comma and
139. 15:01we're going to create a new function by saying  function open parentheses close parenthesis enter
140. 15:06so let's create a new Boolean here by saying local  is focused equals textbox colon is focused open
141. 15:16parentheses close parenthesis so this Boolean  is going to tell us whether the player is still
142. 15:20focusing on this text box after about 5 seconds  so let's make that check by saying if is focused
143. 15:28then what we will do is say print player is still  focused on the text box so that's pretty much how
144. 15:37it's going to work for this script right here  so after about 5 Seconds the game is going to
145. 15:43automatically make US capture this text box and  it's going to call this focused event and after
146. 15:49about 5 Seconds just by having the script delay  for a little bit without actually stopping the
147. 15:54script we're going to see if the player is  still focused on the text box and if it is
148. 15:58is then we're going to print this statement right  here so let's go into the game and see our change
149. 16:03all right so after about 5 Seconds the text label  should automatically select the text lab the text
150. 16:10box for us but after about another 5 Seconds it  then displayed player still focused on the text
151. 16:16box and we haven't made it do anything else yet  we're still focused on this so this is where the
152. 16:21last function comes in if we don't want this  um to continuously be selected we can use a
153. 16:29function called release Focus so this is what  it's going to look like let's go to our local
154. 16:35script and after about 5 seconds if the player  is still focused on the text box let's make the
155. 16:41script automatically defocus the player from the  text box so that the player doesn't have to do
156. 16:47it themselves so let's drop a line and let's say  textbox colon release Focus open parentheses close
157. 16:56parenthesis and there you go just like that let's  go into the game and see our change all right so
158. 17:01the text box automatically selected for us so  in about 5 Seconds what should happen is that
159. 17:06the script will automatically deselect this text  box as shown right here so the script pretty much
160. 17:13works as intended but there also is an additional  parameter to this release Focus um function called
161. 17:21submitted and we can basically add in a Boolean  here of either true or false and pretty much
162. 17:28this submitted argument tells us whether we want  to override the enter pressed parameter inside
163. 17:35of focus lost because as you know as soon as we  release our Focus then Focus lost is automatically
164. 17:42going to fire so we don't want enter pressed to  be fired if we choose not to so what we can do is
165. 17:50pass in a argument of Boolean true for submitted  so that we can override this enter pressed
166. 17:57parameter and we don't need to check for enter  press because we already know that this submitted
167. 18:03parameter is true I hope that makes a little  bit of sense so that's pretty much the basics
168. 18:07of text boxes I'm clearly not cut out to do math  problems so I need to re-evaluate My Life Choices
169. 18:13after this video is over but I hope you learned  something new from this episode be sure to join
170. 18:17my Discord server the link is in the description  and I will see you in the next episode take care