Make Your UI Feel 10x Times Better With ANIMATIONS — Transcript

Full transcript

1. 0:00How are you doing my fellows? It looks
2. 0:03like you guys really enjoyed my latest
3. 0:05videos [music] and since quite a few of
4. 0:07you asked for a second part to the UI
5. 0:09tutorial,
6. 0:11here it is. Today, [music] I'm going to
7. 0:13show you how to properly animate your UI
8. 0:16elements so they stop looking static and
9. 0:18start feeling more alive [music] and
10. 0:20polished. Without further ado, let's get
11. 0:23into it.
12. 0:24When it comes to scaling and animating
13. 0:26UI, one of [music] the biggest headaches
14. 0:28is making everything modular. What this
15. 0:30means is that when we change the size of
16. 0:33our elements, we shouldn't [music] have
17. 0:34to worry about their actual size, but
18. 0:37rather their relative size. So, we're
19. 0:40going to use a system [music] where it
20. 0:41doesn't matter how many pixels an
21. 0:43element is, but instead, we'll simply
22. 0:45adjust its size using percentages.
23. 0:49For example, when my [music] mouse
24. 0:50hovers over a button, instead of making
25. 0:53it 20 pixels bigger, we'll make it 15%
26. 0:56bigger. This way, it will scale [music]
27. 0:59consistently whether you're viewing it
28. 1:00on a phone or a TV.
29. 1:02This is what we're going [music] to be
30. 1:03working with and there's not much code.
31. 1:06We have a local script and a module
32. 1:09script. Don't let the modules intimidate
33. 1:11you. Just think of them as reusable code
34. 1:14that we'll [music] use as a tool. The
35. 1:16module script handles the UI logic,
36. 1:19while the controller connects that logic
37. 1:21to the elements we interact with. That's
38. 1:23it. Now for the technical part. It's
39. 1:26actually pretty simple. We have a table
40. 1:28here that will store the [music] sizes
41. 1:30of our UI elements. This way, we can
42. 1:33access these sizes through this
43. 1:35function. This stores [music] the size
44. 1:37of every new element we add.
45. 1:40The functions down here handle the
46. 1:41buttons tweens using its base [music]
47. 1:43size. The scale factor works as a
48. 1:46multiplier. If it's one, [music] the
49. 1:49size stays the same. If it's 1.15,
50. 1:52the button becomes 15% bigger. And if
51. 1:55it's [music] 0.5,
52. 1:57it becomes half its original size.
53. 2:01The last function [music] simply returns
54. 2:03the button to its base state. As I
55. 2:05mentioned earlier, the controller
56. 2:07detects things like when we hover over a
57. 2:09button,
58. 2:10>> [music]
59. 2:10>> so we can connect those interactions to
60. 2:12our animations.
61. 2:14As you [music] can see, it works
62. 2:16perfectly.
63. 2:19I'm going to add a click effect, [music]
64. 2:20so you can see how it works.
65. 2:23Inside the controller, [music] I'll use
66. 2:25the mouse button one down event, which
67. 2:27fires when we press the mouse button,
68. 2:29regardless of when we release [music]
69. 2:31it. Right here, I'll increase the button
70. 2:34size slightly.
71. 2:36Then, underneath, I'll use the opposite
72. 2:38event, mouse button one up, which
73. 2:41detects [music]
74. 2:41when we release the mouse button. This
75. 2:43lets us return the button to its
76. 2:45original size. I'll make it use an
77. 2:48elastic effect, because it looks really
78. 2:50good.
79. 2:51As you can [music] see, it works
80. 2:53perfectly.
81. 2:55Another really good trick for bringing
82. 2:57your UI to life is creating [music]
83. 2:59states. For example, I'm going to create
84. 3:02another version of my buttons.
85. 3:05These ones will be used [music] when the
86. 3:07mouse hovers over them.
87. 3:09Once we import them into Roblox Studio,
88. 3:12we can add the new logic to the module
89. 3:13[music] we already have.
90. 3:16While making this video, I actually
91. 3:18noticed that there's a new option called
92. 3:20hover image, which literally changes the
93. 3:22image when you hover over a button
94. 3:24automatically.
95. 3:25I'd recommend programming this yourself
96. 3:27if [music] you have more complex plans.
97. 3:29Otherwise, just use this new option.
98. 3:32Thanks for listening. Back to the video.
99. 3:34[music]
100. 3:35Here, we're going to do pretty much the
101. 3:37same thing as before. We'll create a
102. 3:40table to store the images, [music]
103. 3:41a function to register the different
104. 3:43images for each button,
105. 3:45and another function [music] to switch
106. 3:47between states.
107. 3:51I'm going to connect it to the hover
108. 3:52event and with the release and leave
109. 3:54[music] events.
110. 3:56It's important to create a string value
111. 3:59inside each button with [music] the ID
112. 4:01of our image.
113. 4:02If one of your buttons isn't going to
114. 4:04have a hover version, just don't create
115. 4:06one and it won't cause [music] any
116. 4:08errors.
117. 4:09Okay, I think it would be better if I
118. 4:12remove the switch to the idle state on
119. 4:14mouse release.
120. 4:18Perfect. [music] Now this makes the UI
121. 4:20feel much more interactive and polished.
122. 4:24There are many ways to animate the
123. 4:26opening of windows or panels, [music]
124. 4:28but I'm going to show you one that I
125. 4:29really like. This one right here, a fade
126. 4:32slide.
127. 4:34Now that we [music] are also modifying
128. 4:35the position, I've modified the base
129. 4:37sizes table so we can store the base
130. 4:40position as [music] well.
131. 4:42With the fade slide, we can specify its
132. 4:45direction, whether it's in or out, along
133. 4:47[music] with a small change in position.
134. 4:51That way, every time the window opens,
135. 4:54it slides into place and [music] fades
136. 4:56in smoothly.
137. 4:58To detect which button should open a
138. 5:00panel, you can use attributes. For
139. 5:03example, we can use a colors attribute
140. 5:05[music] so the green button knows to
141. 5:07open the shop.
142. 5:10You can add attributes to any object
143. 5:12down [music] here. Make sure that it's a
144. 5:14string value.
145. 5:16In the description, [music] you will
146. 5:18find the complete script along with one
147. 5:20more animation, a zoom [music] in and
148. 5:22zoom out.
149. 5:24One last thing before we finish. In the
150. 5:27previous video, a lot of you had
151. 5:29questions [music] about where to create
152. 5:30your UI text. So let's clear that up.
153. 5:34When should you create text in Figma and
154. 5:36when should you create it in Roblox?
155. 5:39There [music] are three main things you
156. 5:40should consider. First, the type of
157. 5:43text. [music]
158. 5:44If the text is static and never changes,
159. 5:47create it in Figma.
160. 5:48>> [music]
161. 5:49>> If it's dynamic, it depends. If the text
162. 5:52is constantly changing, like a number
163. 5:54that keeps increasing, or you need lots
164. 5:56[music] of different variations, create
165. 5:58it in Roblox.
166. 6:00But if you only have a couple of
167. 6:02possible [music] words for the same
168. 6:03text, create them in Figma if it's
169. 6:06practical. And if the text is
170. 6:08interactive, just create it in Roblox.
171. 6:11Second, [music] the size.
172. 6:14If the text is going to be really,
173. 6:15really large, create it in Roblox so you
174. 6:18[music] don't lose quality when scaling
175. 6:20it up.
176. 6:21And finally, the design.
177. 6:24If it's [music] something simple, like a
178. 6:26Roblox font with a stroke, just make it
179. 6:28in Studio. [music]
180. 6:30But if it has a more complex design,
181. 6:32like depth [music] or special effects,
182. 6:35Figma is usually the better option. That
183. 6:38said, if Studio already has the tools
184. 6:40you need to recreate [music] the design,
185. 6:42just make it in Roblox. And that's it.
186. 6:46Thank you so much for all the support on
187. 6:48my recent videos. [music]
188. 6:50You guys are the best.
189. 6:57>> [screaming]