UI Constraints (Aspect Ratios, Size Modifiers, etc) - Roblox GUI Tutorial #15 (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:03episode we'll be discussing about UI
4. 0:06constraints and size modifiers. So, when
5. 0:09we've been working with GUI elements
6. 0:11inside of our Roblox games, we've had to
7. 0:14maintain the size of these GUI elements
8. 0:17to make them look good inside of our
9. 0:19Roblox games. Regardless of how big or
10. 0:22how small our screen is, whether we're
11. 0:24playing on a phone or whether we're
12. 0:25playing on a TV, it doesn't matter. But
13. 0:28what if that's not enough? What if we
14. 0:29want to have more control over our size
15. 0:33modifiers to be able to scale our
16. 0:36objects as we want them to or to be able
17. 0:38to automatically rescale them or even
18. 0:41add size constraints to make sure that
19. 0:43GUI elements don't become too big or
20. 0:46don't become too small. That's the
21. 0:48purpose of some of these instances that
22. 0:49Roblox has provided to us to make sure
23. 0:52that we can maintain the size of our GUI
24. 0:55elements. And that's what I'm going to
25. 0:57be showing you how to do inside of this
26. 0:59tutorial with the instances that Roblox
27. 1:01has provided to us. So, what I'm going
28. 1:03to do is go to starter GUI and I'm going
29. 1:05to insert a screen GUI. And I'm going to
30. 1:08insert a frame and move it to the center
31. 1:11just like this. So, the first element
32. 1:14that I'm going to show is called a UI
33. 1:16scale. So, I'm going to hit the plus
34. 1:18sign on the frame and search up a UI
35. 1:20scale just like this. And this only has
36. 1:22one property which is called scale. Now
37. 1:24the basic idea behind UI scale is that
38. 1:27it takes the GUI element and all of its
39. 1:30descendants and it scales it
40. 1:33proportionally so that it maintains the
41. 1:36size while also scaling it upward or
42. 1:39downward. So if I were to change the
43. 1:41scale of let's say from 1 to two then
44. 1:43what it's going to do is it's going to
45. 1:45double the size of the GUI element. And
46. 1:48if I were to do it with three then it's
47. 1:50going to keep doing that. We can even do
48. 1:52it the opposite way by reducing the size
49. 1:54of it in half. And what we can do with
50. 1:57this actually is change the anchor
51. 1:59points to 0.5 and 0.5 and then move it
52. 2:02to the center just like this. So that
53. 2:05when we change the UI scale, it's going
54. 2:07to change the scale from the center of
55. 2:09the frame rather than the top left
56. 2:11corner. So this is a pretty neat feature
57. 2:13with UI scale. And one use case that I
58. 2:16can see with this is if you were to use
59. 2:18tween service to smoothly animate the
60. 2:21size of a frame with its descendants.
61. 2:23And I think that's a really good use
62. 2:25case of using it. Now the next object I
63. 2:27want to show is called a UI size
64. 2:30constraint. So what I'm going to do is
65. 2:32delete this UI scale and I'm going to
66. 2:35hit the plus sign and I'm going to
67. 2:36insert a text label. So as you can see
68. 2:38with this text label, it's currently
69. 2:40bigger than the actual frame itself. So,
70. 2:42it's clipping outside of this GUI
71. 2:45element. But what if we wanted a way to
72. 2:47automatically resize the frame to make
73. 2:51it so that it fits with all the GUI
74. 2:53elements that are contained inside of
75. 2:54it? We can do that by using a property
76. 2:56called automatic size. And by default,
77. 2:58it's set to none. But if we were to drop
78. 3:00this down, then we have three options
79. 3:02here to choose which axis we want to
80. 3:04affect the size for. So, what we can do
81. 3:06is select X. So, as you can see, the
82. 3:09frames size automatically adjusted to
83. 3:12fit the size of the text label. And if I
84. 3:14were to, let's say, insert a grid
85. 3:16layout. And let's say really quickly I
86. 3:18wanted to change the background color to
87. 3:20something different. If I were to
88. 3:21quickly duplicate all these text labels,
89. 3:23then as you can see, the frame is
90. 3:26automatically adjusting its size to
91. 3:28reflect these text labels. But as of
92. 3:30right now, I have it set to X only. So,
93. 3:33if we were to set it to X and Y, then as
94. 3:35you can see, the frame is now adjusting
95. 3:38its size to reflect on all of these um
96. 3:40text labels, which I think is a pretty
97. 3:42neat feature. So, now there's two more
98. 3:44instances that I want to show you called
99. 3:45UI size constraint and UI text size
100. 3:48constraint. So, I'm just going to take
101. 3:50this frame and make it invisible. And
102. 3:52I'm going to insert a text label and
103. 3:54move it to the center. So, the first
104. 3:57object is a UI size constraint. And
105. 3:59basically what this does is we can
106. 4:01determine the maximum size and the
107. 4:03minimum size of a gy element so that it
108. 4:06doesn't become too big or too small. So
109. 4:08if I were to let's say change the max
110. 4:10size to something like uh 100 and 100
111. 4:14for y as well then it can't be any
112. 4:17bigger than 100 pixels and 100 pixels on
113. 4:21the x and y direction. So for our text
114. 4:24label, if we were to, let's say, change
115. 4:26the size of this to 500 and 500, then
116. 4:30it's not going to get any bigger than
117. 4:33100 and 100, which is what we initially
118. 4:35set. So if we were to, let's say, make
119. 4:37this 50 instead, then it actually is
120. 4:40going to become smaller because it does
121. 4:42fit within the range of our max size and
122. 4:45minize. So that's what UI size
123. 4:48constraint does. And the next thing I
124. 4:49want to show is called a UI text size
125. 4:52constraint. So a UI text size constraint
126. 4:56is basically the same thing as a UI size
127. 4:58constraint except instead of for a GUI
128. 5:01element, it's for a text within a text
129. 5:04label. So um I'm just going to change
130. 5:07the size of this to 250. And for this
131. 5:12text size, we have a max text size and a
132. 5:14min size. So if I were to change this to
133. 5:16let's say 40 and I were to change the
134. 5:18min text size to 30, then we can only
135. 5:21fit the text within the bounds of these
136. 5:24two properties here. So if I were to
137. 5:27let's say go down here and turn on text
138. 5:29scaled, then what's going to happen is
139. 5:31if I scale this, the text label is not
140. 5:34going to change size because it's past
141. 5:3640. But if we were to scale it down,
142. 5:38then it's going to go down to 30, but
143. 5:40then it's not going to go anything lower
144. 5:42than 30. And so that's what a UI text
145. 5:45size constraint does. And uh there can
146. 5:47definitely be some practical use cases
147. 5:48for using this. Okay. Now the last
148. 5:51object that I want to show you is called
149. 5:54a UI aspect ratio constraint. And
150. 5:56basically what this does is it maintains
151. 6:00a width to height aspect ratio of a GUI
152. 6:03object regardless of the size of that
153. 6:07element. So this is really useful if
154. 6:09let's say we have a image label and we
155. 6:12don't want to stretch out the image
156. 6:14label to make it look really weird and
157. 6:17non-proportional. We can use a aspect
158. 6:20ratio constraint to maintain the size of
159. 6:23it to make it look good. So if I were to
160. 6:25show you an example of this, I'm just
161. 6:26going to quickly disable the text label.
162. 6:29I'm going to insert a image label just
163. 6:32like this. And we need to take an image
164. 6:35from the toolbox. So, I'm just going to
165. 6:36go to view. I'm going to open up the
166. 6:38toolbox, and I'm just going to pick a
167. 6:40random uh decal from here. So, I'm just
168. 6:43going to rightclick, copy asset ID, and
169. 6:45then change the image of this to um our
170. 6:48image. So, by default, we can scale the
171. 6:51size of this to make it look stretched
172. 6:53out like this if we want. But if we want
173. 6:55to maintain its aspect ratio, then what
174. 6:58we can do is hit the plus sign, and
175. 6:59we're going to insert a UI aspect ratio
176. 7:02just like this. And now if we were to
177. 7:04change the scale of this, we can see
178. 7:06that it's locked to be diagonal because
179. 7:11we now added a aspect ratio constraint
180. 7:13to it. So we can't stretch it out or
181. 7:16make it non-proportional. We can only
182. 7:18have it within this width to height
183. 7:20aspect ratio when we're using these GUI
184. 7:22elements. And I think this is a really
185. 7:24practical use case of using this. So
186. 7:26we've just went over some examples of
187. 7:28using these size constraint modifiers.
188. 7:31And I hope you found this video to be
189. 7:32helpful when it comes to being
190. 7:34introduced with these um size constraint
191. 7:36modifiers that you can use for your own
192. 7:38Roblox games. So for today's learning
193. 7:41objective, I want you to recreate this
194. 7:43HUD panel on the left side here. Uh so
195. 7:45we have things like our health bar and a
196. 7:48coins counter on the bottom of it. And
197. 7:51we also have an image label to show the
198. 7:53the health and also the currency. So
199. 7:56once you have this down, what I want you
200. 7:58to do is I want you to use these objects
201. 8:01that I taught you to maintain an aspect
202. 8:04ratio for this panel to make sure that
203. 8:07when we size it. So if I were to rescale
204. 8:11this frame, then it's going to maintain
205. 8:14the size of the bar and also the image
206. 8:18labels on the left of these bars as
207. 8:20well. And that's the important thing
208. 8:22about this. It's to be able to maintain
209. 8:24the size of these GUI elements that are
210. 8:26contained within this frame using the
211. 8:28things that I've taught you with things
212. 8:29like aspect ratios, text size
213. 8:32constraints, UI scales, and things like
214. 8:34that. Cuz let me show you what happens
215. 8:36if I were to get rid of these size
216. 8:39constraints. So, if I were to get rid of
217. 8:41these and if I were to now rescale the
218. 8:44frame, you can see that the image labels
219. 8:46are being stretched out to make it look
220. 8:48unnatural and we don't have a way to
221. 8:51maintain the aspect ratio or the text
222. 8:53size of these elements. So, that's what
223. 8:56I want you to try and do for this
224. 8:57learning objective. And as an added
225. 9:00challenge, if you do manage to do this,
226. 9:01I want you to use UI scale to have this
227. 9:05toggle HUD button. So when you press it,
228. 9:07then it's going to use tween service to
229. 9:10basically just hide it. And if we were
230. 9:12to click it again, then it's going to
231. 9:13pull back the HUD panel just like this.
232. 9:16So that is what I want you to do for
233. 9:18today's learning objective. And if you
234. 9:20have something that's similar to this,
235. 9:22then I think you're on the right track
236. 9:23to becoming a better Roblox developer by
237. 9:26being able to maintain your aspect
238. 9:28ratios for your GUI elements. So that's
239. 9:30pretty much going to be it for this
240. 9:31episode. Big shout outs to my Patreon
241. 9:33members for the support. And with that
242. 9:35being said, I hope you enjoyed this
243. 9:37video and I will see you in the next
244. 9:39one.