TextButton - Roblox GUI Tutorial #3 — Transcript

Full transcript

1. 0:00hey thanks for stopping by in this episode of my  Roblox GUI tutorial guide we're going to be going
2. 0:05over text buttons so in my last video we went  over text labels and getting to know a little
3. 0:10bit more about GUI properties and in this episode  we're pretty much going to be doing the same thing
4. 0:14I'm going to introduce you to text buttons and  then we're also going to be looking at more GUI
5. 0:19properties and we'll be adding scripts to these  buttons to be able to make them functional inside
6. 0:24of our Roblox games so first things first what  is a text button it's basically like a text label
7. 0:30except you can interact with it by clicking on it  that's like the easiest way I can describe it so
8. 0:35you know how with text labels we were able to show  them up on our screen and we were able to change
9. 0:41the text that was on those text labels and modify  them through script but all we were able to do was
10. 0:46just look at them there was no interactive part  to those text labels but now what if we had a text
11. 0:51label except we can actually interact with it by  pressing on it that's where text buttons come in
12. 0:56so the way we're going to create a text button is  the same way we created a text label we're going
13. 1:00to first add in a screen GUI so on the right side  I I'm going to say this again we need to have a
14. 1:06screen GUI in order to actually display our GUI  elements that's the only way we're going to be
15. 1:11able to do it so make sure you have a screen  GUI and started GUI I called it main GUI and
16. 1:17let's click on the plus sign so we're going to  add in a text button which is down here and as
17. 1:23you can see just like with text labels it's shown  on our screen uh but there are two differences to
18. 1:28this button so the text says button instead of  label and we're able to and we're able to hover
19. 1:35over this button as well so as you can see when we  hover over the button then the color of the button
20. 1:41goes a little darker to represent a button so that  we're able to click on it so same thing with text
21. 1:47labels we can move this around on our screen we  can even change the size of the button as well
22. 1:51so nothing new there and most of the properties  here are very identical to text labels so that's
23. 1:57one good thing about this is that a lot of  the properties properties are transferable
24. 2:01but now what we'll do is we'll go over more GUI  properties that I haven't covered yet in this
25. 2:05tutorial guide so the first property that's unique  to text buttons is this property here called Auto
26. 2:11button color basically what this does is you know  how you can select this button and it changes the
27. 2:17color of the button whenever you hover over it  Roblox does this by default because this is an
28. 2:23easy way for us to recognize this as a button  rather than a text label but if we unselect it
29. 2:29then we won't be able to hover over this button  to not make it seem like we can press this button
30. 2:33if we turn it back on then we're able to make it  look like we can press this now you can do this
31. 2:39manually through scripting but that's like a lot  of boilerplate code that's very redundant because
32. 2:43you're going to have to do this for every single  text button which is why Roblox provided a simple
33. 2:48check mark on whether you want this property to  be enabled or not the rest of the properties in
34. 2:53this episode we'll actually dive deeper into the  text category and the first thing I'll show you
35. 2:59is this text right here that says text scaled so  in my last episode I went over text size which
36. 3:06is basically you know the size of the text that's  inside of our GUI element so with this little tiny
37. 3:12text that says button we can change the text size  to something a lot bigger so that we can actually
38. 3:17see it now there are a couple issues with this  text size property um if we change the size of
39. 3:24this button then it's not going to change the size  of the text alongside with it so that's definitely
40. 3:32an issue so what if we wanted to make it so that  Roblox will automatically scale the buttons text
41. 3:38size along with the size of the text button we  can do that with a property called text scaled
42. 3:46so if we select this you might have noticed that  nothing has changed but if we scale this down we
43. 3:51can see that Roblox is automatically scaling the  text as we scale down this text button so this is
44. 3:59one of the most useful GUI properties that I've  ever worked with when making GUI elements and for
45. 4:07most guis that that you create I highly recommend  turning on this text scaled option but you might
46. 4:12ask if we have text scaled on then what happened  to text size well text size is basically useless
47. 4:20if we have text scale turned on because if we try  changing the text size to something different now
48. 4:26that we have text scale turned on like 100 for  instance you can see that the size of the text
49. 4:31did not change at all but if we turn off text  scaled really quickly we can see that now we see
50. 4:37the effects of text size but if we turn on text  scaled again it'll just go back to what Roblox
51. 4:44automatically scaled it to based on the size  of the button so like I mentioned most of the
52. 4:49time you should have text scaled on rather than  use text size because text size is very limited
53. 4:55and you definitely have to be very precise when  you're using text size compared to text scaled
54. 5:00it just saves a bunch of headache which is why  I suggest using text scaled unless for specific
55. 5:06situations where you want to have a small button  but then you want to have the text size be uh a
56. 5:12very specific size like maybe something that's a  little bit smaller than this or maybe something
57. 5:16that's a little bit bigger than the text button so  it's for like very precise scenarios if you if you
58. 5:22choose to but most of the time I have text scale  turned on rather than using the text size property
59. 5:28so the next property we have is text wrapped so  let's just disable text scaled really quickly so
60. 5:33that I can show you how this uh example works  and let's make the text size something smaller
61. 5:38so that it fits the box like 54 uh so text wrapped  is basically saying how do we want to handle the
62. 5:47text whenever we have a size that's smaller than  the text itself so if we scale this down we can
63. 5:55see that Roblox is putting the text that used to  be on the right side here down to the next line
64. 6:02because it's not going to fit in the first line  so instead of just making it go off screen it just
65. 6:08simply puts it down here so that's essentially  what text wrapped is but if you have text scaled
66. 6:13turned on then you won't find any use with text  wrapped because Roblox just automatically scales
67. 6:18the button down and the same thing can be said  for this next property called text truncate this
68. 6:25is a very specific property that I don't use at  all but if you want to know about this property
69. 6:32but I think it's still pretty good to know  about in case you do want to use it so text
70. 6:35truncate is similar to text wrapped except this  handles uh offscreen text differently than text
71. 6:43wrapped instead of having the text drop the next  line instead what Roblox is going to do is that
72. 6:48it's just going to hide the the text that's not  showing on the button but instead replacing it
73. 6:53with a bunch of dots uh to show that there is more  to the the text so what I mean mean is if we go on
74. 7:00the right here and we click the drop down we can  see that there's an option that says at end if we
75. 7:05press this and we disable text WRA and we scale  this down we can see that Roblox has added three
76. 7:13three dots over here letting us know that there is  more text to be seen if we scale this button back
77. 7:19up again it's very specific I think it's still  pretty good to know but in case you ever want to
78. 7:25use this but I personally never use this so take  it for what you will and then the last two text
79. 7:30properties we'll go over in this episode is text X  alignment and text y alignment so let's just scale
80. 7:37this back up again really quick and let's Center  this to the center of the screen so text X and
81. 7:43text y alignments are basically two properties  that tell us where do we want the text to be
82. 7:48aligned on this text button so right now it's in  the very center of the button but if we change one
83. 7:54of these properties so let's say text X alignment  to left then it's going to go to the left side of
84. 8:00the button and if I change the text to add like  more stuff to it then it's just going to start
85. 8:07from the left and then it'll keep adding to the  right now let's make the same thing happen but
86. 8:12this time on the right side so if we make this on  the right side it'll show up like this and then if
87. 8:17we add a bunch of stuff then it'll still stay on  the right side and the same thing can be done with
88. 8:24uh text y alignments so we can let's put this back  on the center and we can change our y alignment to
89. 8:32bottom and top so top will make the buttons  text go on the top and bottom will make the
90. 8:38text go on the bottom so pretty self-explanatory  stuff I think you'll find great use for this when
91. 8:43you want to put the text somewhere specific in  your GUI elements and so that's also something
92. 8:49important to know about all right now let's get  into the scripting component of this button so
93. 8:53let's just quickly change text scaled back to  true so that we can see the text fully without
94. 8:58having to manually change change the text size so  there's four events I want to introduce to you uh
95. 9:03starting with the first one so first thing we'll  do is we'll go on the right side inside of main
96. 9:08GUI we're going to hit the plus sign and we're  going to add in a local script so let's delete
97. 9:15this and let's first make reference to our GUI so  we're going to say local GUI equals script. parar
98. 9:22and then we're going to make reference to our text  button by saying local button equals guy do button
99. 9:30or text button I mean and the first event I will  introduce to you is mouse hover so when we look
100. 9:37at our button we can see that when we hover over  the button the color of the frame changes when we
101. 9:43hover over it that indicates that the player's  Mouse is currently being hovered over it so we
102. 9:47want to catch that and do whatever we want it to  do when we hover over this button and we can do
103. 9:54this using a event called Mouse enter so we will  do that by by saying button. mouseenter connect
104. 10:04function and then we're going to drop a line down  here and then we're going to say print player has
105. 10:13entered in the button and so when we go into  the game hit test and hit play then what should
106. 10:20happen is that when our when our player Mouse  hovers over this button then we should see the
107. 10:26print statement down below so if we hover over  this then it will print one time in the output
108. 10:32saying player has entered in the button if we  hover over it again then it'll print it again
109. 10:38there's basically another event that complements  this called Mouse leave so this is basically when
110. 10:43the player enters in their Mouse but then leaves  the button after they've entered in so we can do
111. 10:50that by saying dropping two lines down here by  saying button. mous leave colon connect function
112. 10:58open parentheses close parenthesis and then  we can do the same thing here by saying player
113. 11:03has left the button and so this will pretty much  fire whenever the player leaves the button after
114. 11:10entering into the button so Mouse leave cannot  be fired until Mouse enter fires first all right
115. 11:17and so now there's two more events that I want to  introduce to you so now let's make an event that
116. 11:23happens when we actually click on the button and  there's two ways of doing this so we're going to
117. 11:28do that with our left Mouse button or or if you're  tapping it on the iPad or if you're using right
118. 11:34trigger on Xbox or even on Playstation as well  so we're going to do that using an event called
119. 11:42Mouse button oneclick so this is what it will look  like let's drop two lines down here we're going to
120. 11:47say button. mouse button oneclick colon connect  function open parentheses close parenthesis and
121. 11:57so this is basically going to to fire whenever we  click on the button but clicking can also refer
122. 12:04to tapping on the button or using right trigger  on the the button so we will say print button
123. 12:12has been activated so let's go into the game hit  test and hit play and so there should be three
124. 12:19things happening with this button so first thing  is entering into the button oh sorry uh entering
125. 12:26into the button Letting Go the button so just like  going off screen from the button it'll print both
126. 12:33player has entered the button and also player  has left the button if we also click on it we
127. 12:38can see that button has been activated so that  seems to work out pretty well as well so I'm
128. 12:43on I'm on PC and this is only running when I'm  using the left Mouse button and not the right
129. 12:49Mouse if I try clicking on my right Mouse it's  not going to activate because Mouse button one
130. 12:55click is specifically for the left Mouse button  but if we want to to do it for the right Mouse
131. 12:59button we would use an event called Mouse button  to click so we can just copy this by selecting
132. 13:06this and controlling Z and then dropping two  lines and hitting control+ V for pasting and
133. 13:10we can change Mouse button one click to Mouse  button two click so now we're going to print
134. 13:15here by saying button has been right clicked and  we could just get rid of this activated part so
135. 13:23this is going to happen when we rightclick on the  button now we have two cases of when we left click
136. 13:29on it and when we right click on it it'll print  two different things now you kind of have to be
137. 13:35careful with mouse button to click because I'm  pretty sure Mouse button to click does not work
138. 13:41on mobile nor does it work on Xbox or Playstation  this is only a PC exclusive event that's why I
139. 13:48generally prefer not using Mouse button to click  but there may be certain circumstances if you're
140. 13:54specifically playing a PC game on Roblox you might  use Mouse button to click we're mostly interested
141. 14:00in Mouse button one click cuz this is definitely  used way more than Mouse button two click all
142. 14:05right but now let's do something fancy I'm going  to create a prompt for this button every time we
143. 14:11press it through a table full of dialogue options  that we can choose from so how we're going to do
144. 14:16that is we're going to go back to our local script  and we're going to make this happen every time we
145. 14:22left Mouse click the button so first thing we'll  do is we'll create a table full of prompts so
146. 14:29after we make reference to our button let's drop  two lines and then we'll make a table so we'll
147. 14:34call this table phrases and we're going to make  this into a table with the open and close curly
148. 14:40brackets and then we're going to drop a line so  that we can write a phrase for each line to make
149. 14:45it more readable so these phrases are going to be  strings because we're going to update the buttons
150. 14:52text whenever we press it so let's make the first  phrase something like ow that hurt or something uh
151. 15:00and then we'll write a comma to make another  phrase down here so we're going to say stop
152. 15:09clicking on me and then we can make another one  probably saying don't do that and then we can just
153. 15:16make another one by saying this makes me mad and  so you you kind of get the idea so these are going
154. 15:22to be all the phrases um that will potentially be  said in our text so so now need to figure out how
155. 15:29we can pick a random phrase from this phrases  table so down here after Mouse button one click
156. 15:34we're first going to pick a random number uh from  one to however many entries there are in this
157. 15:40table because we're trying to pick the index uh of  whatever we're trying to fetch from this phrases
158. 15:46table so we'll say local random index equals math.  random and our minimum value is going to be one
159. 15:55because the first entry will have a position of  one and the last entry is at position four so
160. 16:00we'll say math. random 1 to4 now there is another  way of picking out our maximum value instead of
161. 16:05hardcoding the number four because we might add  a fifth entry in the future or maybe even more
162. 16:11entries so what we can do instead is that we can  fetch the number of entries that our table phrases
163. 16:18have by saying the hashtag or pound symbol uh  and then the table so our table is phrases so
164. 16:26this will return the number of Entry from our  phrases table because this acts as the maximum
165. 16:33position uh inside of our phrases so basically  the position of this one down here so it's going
166. 16:39to start at one which is up here and then the  last one which is down here so now we have a
167. 16:44random index let's actually get that phrase so  we'll say local random phrase equals phrases and
168. 16:52then if you remember how indexing works if you  watched my uh beginners tutorial guide is that
169. 16:58we do do the hard brackets the open and close  hard brackets and we put in our random index
170. 17:03that we picked out so this will essentially be  our actual a random phrase so it can be this one
171. 17:08it can be this one or even this one or this one  so now let's take that phrase and put that inside
172. 17:14of the button's text so down here we're going to  say button. text equals random phrase all right
173. 17:22so now that we have that let's test the game all  right so I'm joined into the game if we hover over
174. 17:26the button we should see that it's printed in the  output now let's click on it we can see that uh a
175. 17:31random phrase was picked from our phrases table  to then update the text here by saying don't do
176. 17:37that if we click it again it'll say don't do that  again if we click it again or again yeah and then
177. 17:42now it says something different this makes me mad  and then we press it again don't do that don't do
178. 17:47that don't do that don't do that don't do that and  it would say ow that hurts so it's basically just
179. 17:51picking a random phrase and updating the text of  this button to say whatever that random phrase is
180. 17:57so we can just keep on doing this this and it'll  just constantly pick a random uh text to update
181. 18:04this text button so I figured that was something  pretty cool to add all right so for this last part
182. 18:07of the video I'm actually going to have you do a  challenge and this challenge will have a couple
183. 18:13requirements that I want you to follow now again  uh you can try this Challenge on your own and then
184. 18:17come back and see what I do or you could just  simply follow along what I do just to get the
185. 18:21experience so essentially what I want you to do  is create a prompt right here that basically asks
186. 18:28the question do you like Roblox and you could  probably guess that this is going to be a text
187. 18:33label so I want you to create a text label that  asks that question and I want you to create two
188. 18:39buttons that acts as a yes button and a no button  so you'll have one button that's associated with
189. 18:44yes and then one that Associates with no and what  I want you to do is when you click on one of them
190. 18:51I want you to change the text of the text label  to something you think the text will say after
191. 18:57picking the option and I also want you to change  the background color of the text label as well uh
192. 19:03based on the answer that that you picked so for  instance if you picked yes then you can probably
193. 19:07change the color to green or if you say no then  you can change the color to red or something so
194. 19:13let's get started on that all right so on the  right side let's first create a text label
195. 19:18uh text label and we're going to call this text  label prompt label let's move this to the center
196. 19:27a little bit and let's change the scale of it as  well uh just to see the text better let's go down
197. 19:32here and press text scaled and let's change the  text to The Prompt which was do you like Roblox
198. 19:41question mark uh and then let's create two buttons  uh so we'll make this our first button so so let's
199. 19:47rename this to yes button and let's duplicate  it and call this one no button and let's move
200. 19:56the no button to the right side and let's let's  move the yes button to the left side so in order
201. 20:00to differentiate between these buttons I'm going  to change the background color of both of these
202. 20:05so for the green one let's make it green and then  for the no button let's make the background color
203. 20:10uh red and let's also change the text for them as  well so this one's going to say no for the text
204. 20:17and this one is going to say yes for the text  it is kind of off-centered a little bit um I'm
205. 20:21not very good with symmetry just by eyeballing it  so it's like it goes some something like this so
206. 20:29now what we'll do is we'll go to our local script  uh let's actually delete all this code right here
207. 20:34except for our Mouse button one click cuz we don't  really need this anymore so let's delete all this
208. 20:38let's even delete all the code that's inside of  our Mouse button one click and let's re-reference
209. 20:44our yes and no buttons so let's delete this  and we're going to reference both our yes and
210. 20:49no buttons so we'll say local yes button equals  gy. yes button and down here we'll say local no
211. 20:56button equals g guy. no button and then we'll also  make reference to our prompt label so we'll say
212. 21:03local prompt equals guy. prompt label so now what  we'll do is we'll create two mouse button oneclick
213. 21:10events for both yes and no buttons so for this  one this is going to be for the yes button let's
214. 21:16copy this put it down here and this one's going  to be for the no button and then what we'll do is
215. 21:20we will first change the background color of the  prompt so we will say prompt. backgroundcolor 3
216. 21:28equals color 3. from RGB and then uh let's pick a  color that's associated with picking yes so we'll
217. 21:38probably pick a green color and we can do that by  selecting these parameters and then clicking this
218. 21:42color wheel right here to pull up the panel so  we'll make it green and then we will copy this
219. 21:49and put it down here and instead of it being green  let's change this to Red for no and so down here
220. 21:56let's change the text of the prompt by saying  prompt. text equals uh maybe something like yay
221. 22:05I'm glad you like Roblox as well and then we can  just like do a little something like that uh and
222. 22:13then we can pretty much just do the same thing  down here with no by saying a I'm sorry to hear
223. 22:21that or something like that it seems a little  basic but I just want you to get the gist of
224. 22:26these text buttons when we're using these events  so I think we're pretty much done let's just go
225. 22:31to test and hit play and see our change so we're  loaded into the game uh if I press yes then the
226. 22:38text label should change by saying yay I'm glad  you like Roblox as well and the background color
227. 22:43of this text label Chang to Green if we say no  then the background color changes to red and the
228. 22:49text changes by saying a I'm sorry to hear that  and we can just kind of repeatedly do this over
229. 22:54and over again um there isn't really anything too  special happening with these text buttons or text
230. 22:59labels so that's pretty much all I wanted you to  do for this challenge it's pretty simple but just
231. 23:03getting a feel for these GUI elements the more  you practice them I think will definitely help
232. 23:08you when you try to implement more complicated  GUI elements inside of your Roblox game so that's
233. 23:14pretty much going to be it for this episode we  un covered quite a bit on this tutorial in the
234. 23:17next episode I'm going to be covering over  misconceptions with sizing and positioning
235. 23:22and also scaling and offset issues so that one's  definitely going to be a very valuable episode for
236. 23:27you to tune into uh so I'm looking forward to that  but in the meantime I'm going to revert back to
237. 23:33my Advanced scripting tutorial guide so that I can  make videos on that tutorial and make it alongside
238. 23:39this one as well so that you can follow along  with both guides and get the best out of both
239. 23:47tutorial guides as we go through them so that's  pretty much going to be it for this episode join
240. 23:51my Discord server the link is in the description  and I will see you in the next episode take care