Appearance Modifiers (UI Corners, Gradients, etc) - Roblox GUI Tutorial #14 (2025) — Transcript

Full transcript

1. 0:00Welcome back to my Roblox GUI tutorial
2. 0:02series. My name is Balv and in this
3. 0:04episode we'll be discussing about
4. 0:06appearance modifiers. Now what do I mean
5. 0:08by appearance modifiers? So basically
6. 0:11Roblox has these objects inside of
7. 0:14Roblox Studio that allows us to enhance
8. 0:17the customization of how our GUI objects
9. 0:21look inside of the game. So things like
10. 0:23adding a gradient effect to the
11. 0:25background of a certain text label or
12. 0:28frame. Same thing with applying a stroke
13. 0:30to a certain text or like a border. We
14. 0:33can even set rounded corners and we can
15. 0:35do all sorts of things. So, in this
16. 0:37episode, I'm going to be showing you a
17. 0:38few of these objects that we can use to
18. 0:40enhance our GUI elements. So, first
19. 0:43thing I'm going to do is go to the right
20. 0:45side in starter GUI, hit the plus sign,
21. 0:47and insert a screen GUI. Uh, and for
22. 0:50this demonstration, I'm going to insert
23. 0:52a text label inside of the screen GUI.
24. 0:55I'm going to move this to the center.
25. 0:57Scale this up just a little bit and make
26. 0:59sure that it aligns perfectly just like
27. 1:02this. Okay. So, the first object that
28. 1:04I'm going to show you is a pretty easy
29. 1:05one. And this one is called UI corner.
30. 1:08So, if I insert a UI corner in this text
31. 1:12label by searching up UI corner, then
32. 1:14what it's going to do is it's going to
33. 1:16make the edges of this text label
34. 1:19rounded, hence the name UI corner. And
35. 1:22we can change a certain property here
36. 1:24called corner radius, which basically
37. 1:26tells us how rounded do we want the
38. 1:28edges to be. So I'm going to reset
39. 1:30offset to be zero. And I'm going to
40. 1:32change the scale to something like 0.2.
41. 1:36So as you can see, the corners are now
42. 1:38more noticeable when it comes to how
43. 1:40round it is. And I believe the highest
44. 1:42scale we can go is 0.5, which looks
45. 1:45something like this. Cuz if you were to
46. 1:46go anything past that, like 0.6, then
47. 1:49nothing is going to be different about
48. 1:50it. But this is basically how we add
49. 1:53rounded corners to a GUI object. And the
50. 1:56next thing I'm going to show you is
51. 1:57called a UI stroke. So I'm going to hit
52. 1:59the plus sign on the text label, insert
53. 2:01a UI stroke, just like this. Now the
54. 2:05thing about this is, as you can see, the
55. 2:07stroke is being applied to the text
56. 2:10label. But what if instead we wanted to
57. 2:12apply the stroke to the border itself?
58. 2:14What we can do is change this property
59. 2:17called apply stroke mode. uh instead of
60. 2:20it being contextual, we're just going to
61. 2:21drop down here. There's another option
62. 2:24here called border. So, if we click on
63. 2:26this, then what it's going to do is
64. 2:27instead of adding a stroke to the text,
65. 2:30it's going to add a stroke to the
66. 2:32border. We can make this more visible by
67. 2:33changing the thickness to let's say
68. 2:35five. And there's also this other
69. 2:37property called line joint mode, which
70. 2:40basically tells us how do we want the
71. 2:42rounded corners to look. And by default,
72. 2:45it's round. So, we can change it to
73. 2:47something like bevel, which looks like
74. 2:48this. We can change it to I think this
75. 2:50is uh mirror, if that's how you
76. 2:52pronounce it correctly. That looks like
77. 2:53this. But for now, we're just going to
78. 2:55set it to round. And that's basically
79. 2:57what UI stroke is. What we can also do
80. 3:00is add padding to our um text as well.
81. 3:05So, if we hit the plus sign and insert a
82. 3:08UI padding just like this. Then the
83. 3:11purpose behind this object is let's say
84. 3:13we wanted to leave some space up here so
85. 3:15that we can fit other elements up here
86. 3:18without having our text label in the
87. 3:20way. Then we can add a padding object.
88. 3:23But to clear any confusion, I'm just
89. 3:25going to show you how we can use this.
90. 3:27So down here we have four options here
91. 3:30with behavior. So we can have padding on
92. 3:33every side of this GUI object. Um and
93. 3:36for each one there's a scale and an
94. 3:38offset. But for the sake of this
95. 3:40tutorial, I'm going to be changing the
96. 3:41scale. So, let's say we wanted to change
97. 3:44padding top to a certain scale. Let's
98. 3:47say we want this to be 0.2. Then, what
99. 3:50it's going to do is with this text
100. 3:51label, it's going to pad the text
101. 3:54downward. So, it's going to leave a
102. 3:55little bit of space up here, which is
103. 3:57going to push the text label downward,
104. 3:59just like this. And if we change it to
105. 4:000.5, then it's going to uh apply even
106. 4:04more padding to push this even further
107. 4:06down. And we can do the same thing with
108. 4:08padding left. So if we change this to
109. 4:11let's say 0.5 as well, then what it's
110. 4:14going to do is add extra padding over
111. 4:16here to the left so that it pushes the
112. 4:18text label to the right like this. And
113. 4:21that is what you want to use padding
114. 4:23for. It's if you want to add a little
115. 4:25bit of space in between a certain
116. 4:28direction and where the GUI element is.
117. 4:32because let's say uh one of the elements
118. 4:33is too far on the edge and we want to
119. 4:36push it a little bit so that it's a
120. 4:38little more centered or it's like not
121. 4:40touching the edge. That's just an
122. 4:42example, but this is basically what a UI
123. 4:44padding object is. And now what I want
124. 4:46to show you is how you can apply a
125. 4:48gradient effect to a GUI element. So
126. 4:50what we're going to do is uh on our text
127. 4:52label, we're going to hit the plus sign
128. 4:54and we're going to insert a UI gradient
129. 4:56that looks like this. Now, the way that
130. 4:58this works is we have this property
131. 5:00called color. And if we click on this
132. 5:03and press the three dots over here. Then
133. 5:05what it's going to do is it's going to
134. 5:06pull up a time sequence timeline that
135. 5:09looks something like this where we have
136. 5:11a key frame at the beginning here and a
137. 5:13key frame at the end here. And what we
138. 5:15can do is select one of these key frames
139. 5:17and click on color. And we can change
140. 5:19this color to whatever we want. Let's
141. 5:21say red. And what it's going to do is
142. 5:23this timeline is going to match the
143. 5:25color of this GY element that it's
144. 5:27placed under. And we can do the same
145. 5:29thing at the end here. We can select it
146. 5:32and we can change the color of this to
147. 5:33let's say yellow. And it's going to
148. 5:35match it to look like what it looks like
149. 5:38over here on the timeline. We can even
150. 5:40add more key frames to this just by
151. 5:42clicking anywhere in the timeline here
152. 5:44and just selecting it. So now we have
153. 5:45another key frame on time 0.478.
154. 5:49But if we want to be specific, we can
155. 5:50change this to 0.5. So it's right in the
156. 5:53middle in between. We can change this
157. 5:55color to let's say something different
158. 5:57like a darker orange just like this. And
159. 6:01now we have a gradient that looks
160. 6:03something like this. And we can just
161. 6:04close this. And that is basically how we
162. 6:07add gradients to our GUI elements. We
163. 6:10can also do things like changing the
164. 6:12offset of the gradient as well so that
165. 6:15it starts at a different position in the
166. 6:18timeline. So that's something we could
167. 6:20do to change that as well. We can even
168. 6:22change the rotation of it so that it can
169. 6:24be rotated in a certain way. We can even
170. 6:26change the transparency of it as well if
171. 6:28we don't want to fully see the gradient.
172. 6:30And that is basically what we do with UI
173. 6:32gradients. So, those are some objects
174. 6:35that we can use to change the appearance
175. 6:38of a GUI element. And I hope you found
176. 6:40this to be really helpful. So, for
177. 6:42today's learning objective, I want you
178. 6:44to recreate this health bar GUI down
179. 6:47here. I want you to focus on the
180. 6:49appearance side of this health bar using
181. 6:52the objects that I taught you in this
182. 6:54episode with things like the rounded
183. 6:56corners, the text stroke, the gradient,
184. 6:58and all of those sorts of things. But as
185. 7:00an added challenge, I want you to make
186. 7:03this health bar functional as well using
187. 7:06scripting. So if I were to let's say
188. 7:08update my health to 80, then what this
189. 7:11health bar is going to do is it's going
190. 7:13to update the text and also the health
191. 7:16bar itself to reflect on how much health
192. 7:18I currently have. But the important
193. 7:20thing here is being able to use
194. 7:22appearance modifiers to make this health
195. 7:24bar look nice. You don't have to focus
196. 7:25on the scripting part. That's just an
197. 7:27added challenge if you want to do that.
198. 7:29But that is basically your learning
199. 7:30objective for this episode. But what I'm
200. 7:32going to do is stop and I'm going to
201. 7:34give you a little bit of time to attempt
202. 7:35making this health bar GUI before I show
203. 7:38you the script. So I'm going to assume
204. 7:39that you spent a little bit of time
205. 7:41trying this out for yourself. So what
206. 7:42I'm going to do now is open up the
207. 7:44health bar GUI. And I'm going to show
208. 7:46you the local script inside of here to
209. 7:48basically show that this is the script
210. 7:50used to update the health bar that
211. 7:53reflects on the player's current health.
212. 7:56So we have a function here that updates
213. 7:58the the health text to the current
214. 8:00humanoid's health and we divide that by
215. 8:02the humanoid's max health and we use
216. 8:05tween service to make the bar move very
217. 8:07smoothly. We do this initially when the
218. 8:10player loads into the game and we also
219. 8:12use this get property changed signal
220. 8:14function to update the health bar every
221. 8:17single time the health changes. So, that
222. 8:20is basically what the script does, and
223. 8:22you might need to change it a little bit
224. 8:23depending on how you make your health
225. 8:25bar GUI, but yeah, that is basically how
226. 8:28you create a health bar inside of Roblox
227. 8:29Studio. Before we end the video, I want
228. 8:31to give a shout out to my Patreon
229. 8:33members for their continued support to
230. 8:35help me continue making these Roblox
231. 8:38scripting tutorials for you guys. And if
232. 8:40you want to get access to my scripts,
233. 8:42get early access to upcoming videos, and
234. 8:45other benefits like that, then I will
235. 8:46leave a link to my Patreon page in the
236. 8:48description for you to check out. I
237. 8:50appreciate your support very much. So,
238. 8:52that is basically going to be it for
239. 8:53this episode on appearance modifiers. I
240. 8:56hope you enjoyed this episode and I will
241. 8:57see you in the next one.
242. 9:00Take