UI Layouts (UI Grids, Lists, Pages) - Roblox GUI Tutorial #13 (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 UI
4. 0:06layouts with things like list layouts,
5. 0:09grid layouts, page layouts, and things
6. 0:11like that. So I want you to imagine that
7. 0:14we're creating an inventory system. And
8. 0:16we want to be able to display all the
9. 0:18items in our inventory to show on one
10. 0:22single frame. And the way that we would
11. 0:24need to do that is to display each and
12. 0:27every one of them onto the frame so that
13. 0:30they have their own space within that
14. 0:33frame. And to show you an example of
15. 0:34what I'm talking about, what we're going
16. 0:36to do is go to starter GUI, hit the plus
17. 0:38sign, and we're going to insert a screen
18. 0:40GUI. Next thing I'm going to do is
19. 0:42insert a frame inside of the screen GUI.
20. 0:45I'm just going to scale it up like this
21. 0:48and move it into the center just like
22. 0:50so. And inside the frame, I'm going to
23. 0:52insert a text button. So with this text
24. 0:55button, I'm just going to change the
25. 0:56color of this to something like green.
26. 0:59And typically the way that we would
27. 1:01display items within a frame is we would
28. 1:03simply just take the item and we would
29. 1:06duplicate it and then move it inside of
30. 1:08studio just like this so that we have
31. 1:11multiple items that are displayed. But
32. 1:14there are some problems with doing it
33. 1:16like this. For one thing, we would need
34. 1:18to manually calculate where the exact
35. 1:22position would be for each item so that
36. 1:25the items are not misplaced just like
37. 1:28this. But another thing is we also
38. 1:30wouldn't be able to do this while the
39. 1:32game is running as well because this is
40. 1:34something we can only do while we're
41. 1:35inside of Studio. So, how do we fix
42. 1:37this? We can use what are called UI
43. 1:40layouts to basically do the work for us.
44. 1:42And I'm going to show you a few examples
45. 1:44of this. The first thing I'm going to
46. 1:46show you is called a UI grid layout. So,
47. 1:49what I'm going to do is delete all these
48. 1:51text buttons except one. And inside the
49. 1:53frame, we're going to hit the plus sign
50. 1:55and we're going to insert a UI grid
51. 1:59layout that looks like this. So, if we
52. 2:00hit enter, then what's going to happen
53. 2:03is we're going to have this button here.
54. 2:05And if we duplicate this button, what's
55. 2:07going to happen is Roblox is
56. 2:09automatically going to place the second
57. 2:10button next to the first one. And if we
58. 2:13keep doing this, then Roblox is just
59. 2:15going to continuously add more and more
60. 2:17buttons in this row by column structure.
61. 2:20So we start from the top left and then
62. 2:22it just keeps going right until it
63. 2:24reaches the other side of the page. So
64. 2:26then it just continues down here and the
65. 2:28process just repeats itself. And there
66. 2:30are a lot of ways that we can customize
67. 2:33this as well using our grid layouts. So
68. 2:35inside of our UI grid layout, what we
69. 2:37can do is change things like the
70. 2:39padding. So how much space is in between
71. 2:42each item? So we can change the scale to
72. 2:45let's say 0.1 and 0.1. So it looks
73. 2:48something like this. We can even change
74. 2:50things like where we want the direction
75. 2:52to be filled. So by default it's
76. 2:54horizontal, but we can change this to
77. 2:56vertical so that it starts upward then
78. 2:59it goes down and then it just keeps on
79. 3:01going like this. We can even do things
80. 3:02like setting where it starts. So instead
81. 3:05of top left, we can do something like
82. 3:07top right where it goes from right to
83. 3:09left instead of left to right. And I
84. 3:11think you get the idea from here. So
85. 3:14those are some things we can change with
86. 3:15the UI grid layout. But rather than just
87. 3:17using grid layouts, we can even use
88. 3:19things like list layouts. So I'm just
89. 3:22going to create a folder really quickly
90. 3:24so that we can place the UI grid layout
91. 3:26inside of there. And inside of our
92. 3:28frame, what we're going to do is insert
93. 3:30a UI list layout just like this. So now
94. 3:34the buttons are displayed as a list and
95. 3:37we can change things like the padding.
96. 3:39So this is going to be the scale. We can
97. 3:41change this to let's say 0.05. So now
98. 3:44there's a little bit of space in between
99. 3:47each button. Now you might have noticed
100. 3:49that these buttons can appear off the
101. 3:51frame just like this if you have so many
102. 3:54buttons inside of one frame. And one
103. 3:56thing we can do is set this property
104. 3:58called wraps. So what it does is if it
105. 4:01goes off frame then it's just going to
106. 4:02continue on the right side and go down
107. 4:04the list just like normal. So those are
108. 4:06some properties we can change. There are
109. 4:08other things like the fill direction. So
110. 4:10instead of going vertically we can fill
111. 4:12it horizontally by going from left to
112. 4:14right, left to right, left to right just
113. 4:16like that. And we can even change things
114. 4:18like the way things are aligned as well.
115. 4:20So we have things like horizontal
116. 4:22alignment. So instead of starting from
117. 4:23the left, we start in the center or even
118. 4:25the right side. We can change things
119. 4:27like the horizontal flex, which
120. 4:29basically says how do we want each of
121. 4:32the items to be separated from each
122. 4:35other. In what style do we want it to be
123. 4:37separated? So, we can do things like
124. 4:39fill so that it fills up the buttons all
125. 4:42the way before it moves on to uh going
126. 4:45further down. We can even do things like
127. 4:47space around, space between, space
128. 4:50evenly. And you can just mess around
129. 4:52with all these settings. There's a lot
130. 4:53of things you can work with here. And
131. 4:54you can pretty much do the same thing
132. 4:56with vertical alignment as well. And
133. 4:58those are just some things that we can
134. 5:00do to make our items be displayed onto a
135. 5:04frame. And finally, uh, one more thing
136. 5:07that I want to show is called a UI page
137. 5:10layout. I'm going to move this UI list
138. 5:11layout inside the folder. And inside of
139. 5:13this frame, I'm going to hit the plus
140. 5:14sign and insert a UI page layout. And
141. 5:18basically what UIP page layout is is
142. 5:20it's a it's a type of layout that
143. 5:23basically displays items onto a frame,
144. 5:27but it's going to be separated by an
145. 5:30individual page. So it's kind of like an
146. 5:32individual frame within a frame. So what
147. 5:34I mean is I want you to imagine that
148. 5:36this is like a an iPhone or like a
149. 5:38mobile device where you can swipe right
150. 5:42to then move on to the next page. We're
151. 5:44now on page two and we can swipe right
152. 5:46to move on to page three and then page
153. 5:48four and so on and so forth. Um, it
154. 5:50basically takes all the items, in this
155. 5:52case, all these text buttons and
156. 5:54separates them as their own pages and we
157. 5:56can flip between those pages. So, that's
158. 5:58basically what that does. And we can
159. 6:00make some pretty cool stuff out of this
160. 6:01as well, which I'm going to show you in
161. 6:03just a little bit. Um, but we can do
162. 6:05things like change the way that the
163. 6:07swiping is animated with easing
164. 6:09direction and easing style. We can even
165. 6:11change things like the padding in
166. 6:13between each page as well. And we can
167. 6:16also change things like the way that it
168. 6:18is inputed as well. And from here, what
169. 6:21we can do is show you how we can combine
170. 6:25UI page layouts and UI grid layout to
171. 6:28create like a home screen. So, what I'm
172. 6:30going to do is I'm going to insert a
173. 6:32another frame here. Uh I'm just going to
174. 6:34change the color of this frame to be
175. 6:36like uh I don't know, some sort of blue.
176. 6:39And I'm going to change the size of this
177. 6:41to one zero one zero. Just like this.
178. 6:45And I'm just going to take a bunch of
179. 6:46these buttons and put it inside of the
180. 6:48frame just like this. And I think I'm
181. 6:51actually going to delete the rest of
182. 6:53these text buttons as well. And now
183. 6:55inside of this frame, what I'm going to
184. 6:57do is insert a UI grid layout just like
185. 7:00this. So now what we have here is a
186. 7:04frame that contains these text buttons
187. 7:07that have a grid layout that displays it
188. 7:09like this. And with this page layout,
189. 7:12this page layout is used for each one of
190. 7:15these frames. So if I duplicate this
191. 7:17frame, then what's going to happen is
192. 7:19there's going to be a second page that's
193. 7:21going to be for these buttons, while
194. 7:24this first page has these buttons for
195. 7:27the first page. So, just like I said
196. 7:30before, we can change the padding a
197. 7:31little bit. So, we can say like 0.05.
198. 7:34So, it really feels like we're swiping
199. 7:36through like a home screen. To display
200. 7:39this even further outward, uh, I'm just
201. 7:40going to make this like 0.5 so we don't
202. 7:42see it at all. So, if we swipe right,
203. 7:44then it's going to swipe the page to go
204. 7:47to the next page. And there are some
205. 7:49methods in Roblox's documentation that
206. 7:51essentially allows us to move to the
207. 7:53next page or to the previous page or to
208. 7:55a specific page if we want. But this is
209. 7:57basically how we use UIP page layout in
210. 8:00combination with UI grid layout. And we
211. 8:02can even do the same thing with UI list
212. 8:03layout as well. There are more layouts
213. 8:06that you can use for your GUIs which
214. 8:08I'll leave a link to the documentation
215. 8:09in the description. Uh but I hope that
216. 8:11this gives you a good introduction to
217. 8:14using UI layouts inside of your game.
218. 8:17And I hope you learned something from
219. 8:18this video. So for today's learning
220. 8:19objective, I want you to recreate this
221. 8:21panel right here that utilizes different
222. 8:23types of frames and different types of
223. 8:26UI layouts as well. So from what you saw
224. 8:29here, this is the first page that
225. 8:31contains all of these different types of
226. 8:33frames and layouts. And we can even flip
227. 8:36through different pages that can lead to
228. 8:39completely different looking frames. So
229. 8:41I want you to be able to recreate this.
230. 8:43And once you think that you've uh
231. 8:45achieved a similar frame to this one,
232. 8:48then I think you're definitely ready to
233. 8:50tackle on more complicated GUI systems
234. 8:54cuz a lot of them definitely utilize UI
235. 8:56layouts. And if you can understand how
236. 8:58to implement them inside of your UI,
237. 9:00then I think you'll definitely have a
238. 9:02better time implementing the more
239. 9:03complicated stuff. I would also like to
240. 9:06give a shout out to my Patreon members.
241. 9:07I really appreciate their support
242. 9:09because it encourages me to continue
243. 9:11making these videos for you guys. And if
244. 9:13you want to get access to my scripts, uh
245. 9:15early access to my videos and other
246. 9:17benefits like that, then I will leave a
247. 9:18link to my Patreon page in the
248. 9:20description for you to check out. So,
249. 9:22that's pretty much going to be it for
250. 9:23today's video on UI layouts. I hope you
251. 9:25enjoy this episode and I will see you in
252. 9:28the next one.
253. 9:30Take care.