Make this clean and modern UI ✨ in Roblox Studio — Transcript

Full transcript

1. 0:00I'm going to show you [music] how to
2. 0:01create this modern UI style in Roblox
3. 0:04Studio. I'm going to explain the process
4. 0:07step by step so you can do it the right
5. 0:09way, making it eye-catching, minimalist,
6. 0:12and [music] above all, adaptable to any
7. 0:15device. But before we start, you need to
8. 0:18know one thing. [music] For our user
9. 0:20interface to adapt to any device, its
10. 0:23size must be set using scale, not
11. 0:25offset, which is [music] pixels. This is
12. 0:28because scale measures the percentage of
13. 0:30screen space. So it's different for each
14. 0:33screen. And finally, our UI needs a very
15. 0:36important object, the UI aspect ratio,
16. 0:39[music] which automatically adjusts the
17. 0:41scale proportionally while maintaining
18. 0:43the shape. Okay,
19. 0:45>> let's do this.
20. 0:47>> The first thing we're going to do is
21. 0:49create [music] a screen UI. And within
22. 0:50it, we'll create our hot bar where the
23. 0:52buttons will be. As I mentioned, we're
24. 0:56going to adjust the size of all objects
25. 0:58using [music] scale, not offset. It's
26. 1:01also recommended to set the anchor
27. 1:03[music] point to the center of the
28. 1:05frame.
29. 1:06Once it's adjusted to our liking, we'll
30. 1:09create a UI list layout, which will
31. 1:11automatically [music] arrange the
32. 1:12buttons in a row. Since our hot bar is
33. 1:15horizontal, we'll change the direction
34. 1:17[music] to horizontal and center the
35. 1:19buttons. Now, we're going to create a
36. 1:21text button, change its anchor point,
37. 1:24adjust the scale to our liking,
38. 1:26duplicate [music] it, and then adjust
39. 1:28the spacing between the buttons. If it
40. 1:31[music] doesn't look right, like it does
41. 1:33now, we can go back and adjust the size
42. 1:35of the buttons and the hot bar. Once we
43. 1:38have what we're looking for, we'll
44. 1:40delete the other buttons and improve the
45. 1:42first one. First, we're going [music] to
46. 1:44add a UI corner, which softens the
47. 1:46buttons sharp edges. We'll also remove
48. 1:49the text since [music] we won't need it.
49. 1:52And also, we're going to remove this
50. 1:54ugly effect where the button darkens
51. 1:55[music] when the mouse hovers over it.
52. 1:58It's done with this button. Now, I'm
53. 2:00going to rename it and duplicate it.
54. 2:03[music] And I'm going to create the UI
55. 2:05aspect ratio I told you about earlier.
56. 2:07[music] I'm going to adjust this until
57. 2:09the buttons have their original shape.
58. 2:12All right. As you can see, [music] it
59. 2:14adjusts in size without deforming.
60. 2:16However, if I remove [music] it, it
61. 2:18adjusts by deforming.
62. 2:21Once again, we're going to [music] get
63. 2:23rid of the other buttons and fit an
64. 2:24image label inside the button. All of
65. 2:27this using the scale. I'm also [music]
66. 2:29going to put here a text label and make
67. 2:31the text scalable. And for the image,
68. 2:34I'll [music] use a white icon so I can
69. 2:36change its color however I want. Now,
70. 2:39I'm going to duplicate the button and
71. 2:41[music] change the images and text on
72. 2:43the others as well as the color. Once
73. 2:45that's done, [music] we'll test to see
74. 2:47if the element size is adjust. It seems
75. 2:50like the letters aren't. That's because
76. 2:52[music] I hadn't made the text scalable
77. 2:54or adjusted its size with the scale.
78. 2:57Now, it [music] really works.
79. 3:01If we play, we'll see that the hot bar
80. 3:04looks really nice, but [music] it's
81. 3:05pretty bland with no effects. Let's add
82. 3:08the effects I showed you at the
83. 3:10beginning of the video. Sorry, folks,
84. 3:13but it is what it is. We've [music] got
85. 3:14to do a little programming, but I'm
86. 3:17going to make sure the script is well
87. 3:19organized and clean so [music] you can
88. 3:20understand it if you know any loop
89. 3:23programming. If not, you can still take
90. 3:25a look, but you might not get it. Let's
91. 3:28[music] divide the script into three
92. 3:30parts. The variables we're going to use,
93. 3:32[music] the functions, and how we'll
94. 3:34connect those functions to the hot bar
95. 3:37button events. First of all, we're
96. 3:40really going to need our hot bar and the
97. 3:41beloved tween [music] service, which can
98. 3:43handle all kinds of animations. Now,
99. 3:46we're going to set the three [music]
100. 3:48sizes the buttons will adopt. For the
101. 3:50default size, we are going to copy and
102. 3:53paste the button [music] size, the one
103. 3:55it has right now. Then the large size,
104. 3:57the size the button takes [music] on
105. 3:59when the mouse hovers over it. This will
106. 4:01be the normal size plus a small amount.
107. 4:04And finally the small one which will be
108. 4:07the normal [music] size minus a small
109. 4:09amount.
110. 4:10Now we're going to add three sounds
111. 4:12which I [music] already had saved. These
112. 4:15will be the hover sound, the hold sound,
113. 4:18[music] and the release sound. If you
114. 4:21don't find any you like, I'll leave the
115. 4:23IDs for these sounds in the description.
116. 4:26Now let's move on to the functions. The
117. 4:29first [music] function will be executed
118. 4:31when the mouse hovers over the button.
119. 4:33and we're going to make it grow larger
120. 4:35and change color. To do this, we'll set
121. 4:38two parameters, [music] the button and
122. 4:40the buttons color. To create the
123. 4:42animation, we'll use the tween service.
124. 4:45The tween service has three parameters.
125. 4:47The object we're going to animate. In
126. 4:50this case, the button, then the
127. 4:52animation information, and [music] the
128. 4:54goal. In this case, I only need the
129. 4:57duration, so I'll just set that. But
130. 5:00there are other parameters like easing
131. 5:02style, easing direction, delay, and a
132. 5:05few more. The final state of the object
133. 5:08is enclosed [music] in curly braces
134. 5:10because it's a table. Here, we're going
135. 5:12to set the size to [music] the buttons
136. 5:13large size. Now, we play the sound. And
137. 5:17finally, we change the background color
138. 5:19to the new color. And we change the
139. 5:21color of the image and the [music] text
140. 5:23to white. In the following function,
141. 5:25we'll do the same thing but in reverse
142. 5:28since it runs when the mouse is no
143. 5:30longer over the button. [music] So,
144. 5:32we'll set it back to its normal size and
145. 5:34swap the colors.
146. 5:36Now comes [music] the mousehold
147. 5:38function. This function is executed when
148. 5:41we press the left mouse button, [music]
149. 5:42but don't release it. Here, we'll only
150. 5:45need the first parameter. Inside the
151. 5:48function, [music] we're going to run
152. 5:49another animation. Here, we are making
153. 5:52the button smaller. Don't forget to play
154. 5:54the [music] sound.
155. 5:56Finally, let's create the function that
156. 5:59runs when the click is [music] released.
157. 6:01Here, we are simply going to change the
158. 6:03buttons size back to its original size.
159. 6:07And we're also going to play the sound
160. 6:09that's left. We already have all the
161. 6:11functions. [music]
162. 6:13To finish, we're going to connect the
163. 6:15functions to the hot bar buttons.
164. 6:17[music] We'll do it with a for loop
165. 6:19accessing all the hot bars children that
166. 6:21are buttons. Once obtained, we connect
167. 6:24them to the functions using the
168. 6:26corresponding events. For the mouse
169. 6:28enter event, we will call the mouse
170. 6:30hover function with the following
171. 6:32parameters, the button [music] obtained
172. 6:34through the loop and the buttons
173. 6:35characteristic color, which is found in
174. 6:38the buttons image. Now, we'll connect
175. 6:40the remaining events to their [music]
176. 6:42respective functions in the same way.
177. 6:45It should look like this.
178. 6:48It seems I've made a small mistake.
179. 6:50[music] The error is here in the mouse
180. 6:52leave function. The second parameter
181. 6:55changes because the colors are swapped.
182. 6:57So, I'll have to set the background
183. 6:59color. It works [music] perfectly. As
184. 7:02you can see, it's a clean, eye-catching,
185. 7:04minimalist UI that's fully responsive on
186. 7:07any device. To wrap up the tutorial, I'm
187. 7:10[music] going to create a simple window
188. 7:12and connect it to the mouse release
189. 7:13function so it can be opened and closed.
190. 7:17>> Oh my god. I hope you enjoyed this
191. 7:20tutorial. Honestly, I had a great time
192. 7:23making this video and I really love how
193. 7:25the modern UI turned out. I hope it was
194. 7:28helpful [music] to you. If so, you
195. 7:30already know how to support me. Until
196. 7:33[music] next time.