Intro to GUI - Roblox GUI Tutorial #1 — Transcript

Full transcript

1. 0:00hey thanks for stopping by this is going to be  the start of a new series that I'm creating on
2. 0:05this channel which is going to be an introductory  series to guis on Roblox so I'm currently doing my
3. 0:11Advanced scripting tutorial guide on Roblox and  this tutorial guide will serve as something that
4. 0:16will be done on the side because I feel like a  lot of the advanced scripting Concepts cannot be
5. 0:22explained until there's a firm grasp understanding  of GUI aspects inside of your Roblox game and this
6. 0:28is a whole new aspect P of game developing if  you're brand new to this so that's why a separate
7. 0:33tutorial guide I feel would be appropriate to be  able to understand how important guis actually are
8. 0:39so for this first episode this is going to be  a very broad introduction to what guis are and
9. 0:44how they're used inside of Roblox games and then  for the next couple of episodes I'm going to be
10. 0:48going over uh different instances that we can  uh use that Roblox has provided for us to put
11. 0:54inside of our games and so I think the first  question to answer is what is a GUI a GUI is
12. 0:59B basically short for graphical user interface  and it's the things that you see inside of any
13. 1:06Roblox game that shows any graphical images or  text labels or any onscreen art so things like
14. 1:14labels containers text buttons labels images all  that sort of stuff imagine if I'm playing a game
15. 1:21on the top right side this shows my leaderboard  this is counted as a GUI because this is on screen
16. 1:28so if I move my camera around in the 3D World  this will still remain the same here it's a
17. 1:33user interface that only I can see we even have  another button here which we can press and then
18. 1:38it'll show us a bunch of options we even have our  menu button right here that pulls up a panel that
19. 1:44shows the menu you can see settings report help  record and all this other stuff that Roblox has
20. 1:50for us and so this is pretty much what I'm talking  about here any Roblox game imaginable has these
21. 1:57GUI elements inside of their games whether that  would be a health bar bar or navigational buttons
22. 2:03on the side or an admin commands panel so I  hope you kind of understand what I'm talking
23. 2:08about this guide will teach you how to create  all these things step by step as I go through
24. 2:13each each of the instances that Roblox has made  for us to be able to do these things and before
25. 2:17we start creating I'm going to show you one more  example that was created by the Roblox developer
26. 2:22Hub that I think will capture what we'll be doing  for the rest of this guide all right let's think
27. 2:26about this for a minute so this image is from the  in uction to UI page in the Roblox developer Hub
28. 2:32and I just think this is a great example to show  what we're potentially going to be creating with
29. 2:36GUI elements that we're going to add into our  game modify and make it look nice so you notice
30. 2:42that there's a bunch of things here so you  see that there's a text here that says enter
31. 2:45your character's name you even have uh like a box  where you can enter some text in you even have uh
32. 2:52an arrow right here and it's all wrapped around  inside of this Frame so you might have guessed
33. 2:58this entire border um panel thing you see here is  called a frame so this Frame acts as a container
34. 3:07for all of these other things that are inside of  this Frame so if we want to manipulate this Frame
35. 3:12it'll also manipulate everything else that's  going on inside of this Frame and where we're
36. 3:17able to just put text here this is called a text  label where we just say enter your character's
37. 3:23name uh it's just a text label you can't really do  anything else with it you could just you know look
38. 3:27at it and then down here where it says say enter  your username uh you can actually click on it and
39. 3:33enter in a text inside of this little box here  this is called a text box which like I mentioned
40. 3:40allows you to input text inside of a text box  so that uh whatever script is running this can
41. 3:45uh take this text and do whatever it wants to  do with it and then finally we have this arrow
42. 3:50button right here which is called a image button  because we're taking an image ID from the Roblox
43. 3:56catalog putting it in here and acting as if the  player can actually press this uh label which is
44. 4:03why it's called an image button so these are some  examples of instances we're going to use inside
45. 4:07of our GUI scripts and I just thought this was  a great representation as to what we're going to
46. 4:11be doing now that we understand that let's start  creating our first GUI now you might ask where do
47. 4:16we actually create this GUI and to that I say  I would like to introduce you to a new folder
48. 4:22inside of the Explorer which is called starter GUI  starter GUI is basically a folder that allows us
49. 4:28to create any DUI inside of a Roblox game and  whatever we put inside of this folder will be
50. 4:34copied over to each player whenever they play the  game so I'll go more into detail about this once
51. 4:40we actually start creating one so let's do that  right now now there is something we have to put
52. 4:44inside of the starter GUI in order for us to  actually start creating our GUI elements and
53. 4:50that is going to be called a screen GUI which  basically acts as our main frame to where we
54. 4:56can actually put the contents of our GUI inside of  so if we click this plus sign uh and we search up
55. 5:03screen GUI this is uh what the object looks like  so let's click this and nothing on our screen has
56. 5:09changed but like I mentioned in order for us to  add GUI elements we need to put them inside of a
57. 5:15screen GUI We cannot put them inside of starter  GUI otherwise it just will not show up on the
58. 5:19screen we have to insert a screen GUI and then add  elements inside of that screen GUI so you may have
59. 5:25noticed there's a bunch of properties here which  we are going to go over in this episode um but
60. 5:29just as a test let's create a text label so that  we can actually see what this looks like um inside
61. 5:35of our studio so let's hit the plus sign and let's  search up text label let's click that and as you
62. 5:42can see Roblox has inserted a text label for us  to see inside of studio if we click on it we can
63. 5:48actually see that Roblox has given us a tool where  we can scale this up and down however we please
64. 5:55and we can even move it around inside of Studio  like so so so it's a very nice feature Roblox has
65. 6:00provided for us especially for beginners and  so that's the neat thing about it but now let
66. 6:05me show you what this looks like inside of the  game so on the right side let's quickly rename
67. 6:10our screen GUI so let's right click and rename it  uh let's call this main GUI and now let's go into
68. 6:16the game by hitting test and hitting play and see  what happens so I've loaded into the game and as
69. 6:20you can see our text label is uh on our screen uh  if we go on the right side go to our players our
70. 6:27player and we can see that there's a folder here  which I have not introduced yet this is the player
71. 6:32GUI this is essentially where everything that  we've created inside of started GUI goes into so
72. 6:39if we open this up we can see that there's uh two  screen guis so free cam is something that Roblox
73. 6:44has uh created by default but then we can see that  our main GUI is here inside of our player GUI uh
74. 6:51folder and so when we're working with manipulating  GUI elements it's highly advised to do it inside
75. 6:58of the player GUI and not inside of starter GUI  because let's say for example we want to delete
76. 7:03this main GUI if we delete it in the starter GUI  nothing happens that's because this is just the
77. 7:09starter GUI folder where whatever's inside of  the starter GUI folder gets copied over to the
78. 7:13players but that had no effect if we go to our  player GUI folder and delete the main GUI then
79. 7:19it actually does get rid of it from our our player  side so that's a little interesting detail to take
80. 7:24note of as we manipulate GUI elements later on in  this guide so for the rest of this tutorial I'm
81. 7:30going to be introducing some very commonly used  properties for screen guis and then for the next
82. 7:35upcoming episodes I'm going to be talking about  more of like these text labels and buttons in
83. 7:40Greater detail so let's click on our main GUI  and we and we can see that we have a bunch of
84. 7:45properties here I'm going to be introducing you  to four of them because I know the four that I'm
85. 7:50going to introduce are very commonly used so the  four that I'm going to introduce are display order
86. 7:55enabled ignore GUI inset and reset on spawn but  let's go with enabled first because I think this
87. 8:01is the most self-explanatory one so basically this  determines whether or not this should be displayed
88. 8:06or not if we click on it then as you can see our  text label disappeared uh inside of the game so we
89. 8:12can no longer see uh any of the elements that are  contained inside of the screen GUI which currently
90. 8:18just only has this text label so if we just click  this again then we should be able to see it right
91. 8:24back up again uh when we play the game now you  might ask does this work while we play the game
92. 8:28yeah for sure I'm in the game right now if we go  to our player GUI really quick with our main GUI
93. 8:34and we press enabled then yeah it's gotten rid of  so this is pretty useful if you don't want to show
94. 8:40specific guis on screen at certain points during  the game I think that's pretty much all I need to
95. 8:44explain for that one I think that's pretty easy  the next property I'll introduce is ignore GUI
96. 8:50inset now I don't exactly know why but for some  reason whenever you play a Roblox game there seems
97. 8:56to be like a little Gap from our our onscreen  GUI resolution and from the actual game when we
98. 9:05play the game so I'll show you what I'm talking  about let's take our label so let's select this
99. 9:10let's drag this to the corner of our screen and  we'll scale this uh all the way across now let's
100. 9:18go into the game and hit play and see what happens  so as you can see Roblox has by default allocated
101. 9:26some space up here for their own use and this is  what it's like by default for every single game
102. 9:32so even if we had our label on the very corner  of the screen during Studio it's not actually
103. 9:37at the very corner of our screen so the easiest  way to deal with this is by checking this option
104. 9:44ignore GUI inset and if we go back into the game  we should see that this is no longer a problem
105. 9:49so as you can see the GUI has completely ignored  roblox's inset that used to be up here this little
106. 9:55extra space and so now we're able to freely use  it if we decide to have stuff up here the third
107. 10:01property is reset on spawn and so essentially  by default whenever a player joins the game and
108. 10:07then they reset their character then whatever  was manipulated with that player's GUI it will
109. 10:14be reverted back to its original state so what it  originally was inside of the starter GUI it will
110. 10:20then copy it over to the player GUI every single  time the player resets their character so let me
111. 10:25show you an example so let's open up my player  GUI main GUI and text label let's change the
112. 10:32background color of this text label to let's say  blue so if I reset my character then what should
113. 10:39happen is that it gets reverted back to White  because that was the original state of our text
114. 10:46label uh inside of our starter GUI so whatever  changes we made to the main GUI it's just going to
115. 10:52reset itself uh back to what it originally was if  so if we want to keep the changes then we simply
116. 11:00just uncheck the reset on spawn and if we go back  into our game and make the changes that we made
117. 11:05to our text label by changing its color then we  should be able to uh keep those changes so let's
118. 11:13change the color back to Blue again and let's  reset our character we should then see that our
119. 11:21text label Remains the Same with its color because  main GUI did not refresh when the player resetted
120. 11:28their character and finally the last property I'll  introduce in this episode is going to be display
121. 11:32order there will be cases where we're going to  have multiple screen guis for organizational
122. 11:37purposes um so let's actually duplicate our main  GUI by right clicking and hitting duplicate and uh
123. 11:43let's call this screen GUI main GUI 2 and let's  actually take this text label and just drag it
124. 11:49down here a little bit and let's also change the  color of this text label to Blue again essentially
125. 11:57what display order does is is that it prioritizes  what screen GUI will display over any of the other
126. 12:05screen guis so right now it looks like main GUI 2  is overlapping the first main GUI with the white
127. 12:13text label um but if we change the display order  of main GUI to something that's a bigger number
128. 12:19like one we can actually see that our white text  box our main GUI is now overlapping our second
129. 12:28GUI but if we just do this again by making main  GUI 2's display order something that's larger
130. 12:35than the other one display order 5 for example  then this will overlap the first one I I hope
131. 12:42this makes sense and if it does then I'm glad that  you're getting a a good feel for for guis because
132. 12:48this is going to be something you will use a lot  inside of your Roblox games and so that's pretty
133. 12:52much where I'm going to end it off here with this  tutorial so we introduced guis and screen guis but
134. 12:59in the next episode we're going to be talking  about text labels in more detail manipulating
135. 13:03their properties and whatnot going more in  depth with their properties be sure to join
136. 13:07my Discord server the link is in the description  and I will see you in the next episode take care