Tween Service - Roblox Advanced Scripting #12 — Transcript

Full transcript

1. 0:00whoa wait a minute I've seen this before what is  it doing all the way out here oh whoa whoa bro
2. 0:10hold up I need to analyze this really quick what  is going on with this part let's see okay we have
3. 0:16a script uh oh it uses tween service okay that  actually makes more sense this syntax just looks
4. 0:25so ugly though I could definitely do a better  job with that I mean no wonder this speeding
5. 0:29wall doesn't look to be a very good programmer  I mean he says right here his family has left
6. 0:33him because he has chronic anger so we probably  wouldn't want to mess with him I will now that I
7. 0:38understand that this uses tween service I think  that'll be the most appropriate thing to talk
8. 0:42about in this episode and if you're still sort of  confused tween service with the ugly line of code
9. 0:47that you saw basically made this speeding wall  move super fast in this direction in order to
10. 0:53kill me and it was able to do it so smoothly  as well like you saw how smooth this wall was
11. 0:58moving across this direction when we gave it  an end goal and also a time to be able to get
12. 1:04to where it needed to be and so I think that's  something we should be able to understand is is
13. 1:09be able to move these parts very smoothly and not  even just that tween service can do a whole bunch
14. 1:13of things for you which we're going to go a bit  more into in a little bit but let's not Implement
15. 1:19these just yet because I want you to fully get a  grasp of the use of tween service and how we can
16. 1:24use them so with that being said let me show you  a little something before we begin all right let's
17. 1:28think about this for a minute we're going to be  re-enabling our script for this speeding wall just
18. 1:34to see what's really happening behind the scenes  when we use tween surface to move this part from
19. 1:40where it originally was to its its uh end goal so  let's hit play and watch as the script changes its
20. 1:48properties through tween service so let's open  up the works Explorer with parts and let's go
21. 1:52to the position so the position should be moving  very incrementally from its original position so
22. 2:00I'm actually going to show you that one more time  just so that you can really see what's happening
23. 2:04so I'm making the part specifically move in its  X or in its X position with the position property
24. 2:12and it's slowly moving from where it originally  was to its end goal which we specified to be -200
25. 2:19studs from its original position so it wasn't  just going from where it originally was and
26. 2:24just simply changed the position to whatever  it was over there it progressively changed the
27. 2:29X property to go from where it was to its end  position over there and so that's essentially
28. 2:34what tween service is tween service allows you  to interpolate or or pretty much tween go from
29. 2:41its starting position to its ending position very  smoothly and incrementally not very suddenly where
30. 2:48we just change the position of let's say it's Z to  200 we just it basically teleported back to where
31. 2:55it originally was um without having that smooth  positional changes and that's basically that you
32. 3:02can do this with most numerical properties like  not just position but you can even do orientation
33. 3:08and you can even do values that go from 0o to  one like transparency reflectance you can even
34. 3:13change the color too and all that sort of stuff  there's a whole bunch of properties you can work
35. 3:17with that's compatible with tween service and  so we're going to be diving deep into a couple
36. 3:22examples of how we can use tween service inside  of our Roblox games so that being said let's get
37. 3:26straight to implementing now that we understand  it let's create tween to quote unquote move these
38. 3:33instances or objects around inside of our game and  the first thing we're going to do is just create a
39. 3:39simple part where we can move the position of that  part and so we can see it move in real time to a
40. 3:46desired end goal that we do have so we're going to  do that by first going to model and then hitting
41. 3:51part uh let's scale this up just a little bit  so that we can make it look nice let's make it
42. 3:57uh blue and let's also make it an ined as well  so now that we have our part let's rename this
43. 4:03to moving part all right and so now that we  have our part let's create a script inside of
44. 4:08this part we're going to hit the plus sign next  to moving part let's create a script and let's
45. 4:13delete this code that's over here and so here's  what we're going to do we need to make reference
46. 4:17to Tween service because that's obviously the  service we're going to use to create these twns
47. 4:23we're going to say local tween service equals  game colon get service tween service and then
48. 4:34we're also going to make reference to our moving  Parts by saying local part equals script. parent
49. 4:40all right so now that we have our script that  references tween service and also our part here
50. 4:45what we want to do is create a tween that has the  part start at its position and then we're going
51. 4:51to specify what specific position we want this  tween to animate this part to move to where we
52. 4:59want it to uh with our end goal before we create  the tween there's two more important pieces of
53. 5:05information that we need before we can get to  creating it one of them is tween info and the
54. 5:11other one is our goal so let's so let me explain  what tween info is it's basically a data type that
55. 5:19provides multiple values that lets us customize  our tween the way we want to animate a part to do
56. 5:26something specific like we can specif spe ify how  fast or how slow this tween is going to animate
57. 5:34we can specify the the style of how it animates  from one place to the next if we wanted to repeat
58. 5:42it more than once and if we want there to be  like a delay of some sort when it goes from its
59. 5:46starting position to its end position there's many  possibilities for this tween info uh data type but
60. 5:52I'm going to be showing you a basic example of  creating a tween info data type so we're going
61. 5:58to say local tween info equals tween info. new  so we're going to use the new Constructor with
62. 6:08the open close parenthesis and as you can see  there's a whole bunch of arguments we can put
63. 6:13inside of our tween info object um I would say  at the very least you should have this argument
64. 6:19here called time and it takes in a number so this  is pretty much how fast or how slow you want this
65. 6:26tween to uh execute when you run it um so I would  say if you have at least that then I'd say you're
66. 6:32good to go all the other stuff like easing style  easing Direction and everything like that I would
67. 6:36say it's pretty important but not as important  as the time we will go over some of the other
68. 6:42properties in a little bit but for right now let's  just set a time which takes in a number we're
69. 6:47going to set this to five because this represents  5 Seconds uh and we could just leave it like this
70. 6:54so that's the second piece of information but now  the final piece of information we need is the the
71. 6:59goal also known as the end result how do we want  this tween to end so remember when I said that we
72. 7:06have a starting point for our instance and then we  have an end goal for our tween once we're finished
73. 7:13with it in this case our end goal for this part  would be moving it to a specific position in our
74. 7:193D World so let's just say we want to move this  in this direction by about 51 studs the position
75. 7:26here will be about 51 studs on the Z AIS with  a position of 452 and 51 so let's specify this
76. 7:34position 452 and 51 as our positional goal and  so how do we write that as our goal so the way
77. 7:42it's going to work is our goal is pretty much a  table full of properties that we want this tween
78. 7:48to achieve so it could be more than just positions  it could even be sizes and other numerical values
79. 7:55that you can put that's compatible with tween  service so here's what it's going to look like
80. 7:59like we're going to say local goal equals open  and close hard brackets because this is going
81. 8:05to be a table full of information and let's drop  a line if you know table syntax then you pretty
82. 8:11much know the different ways you can create a  table but I'm going to do it like this so our
83. 8:16goal is just to Simply change the position to  our specific coordinates which was 45 2 and 51
84. 8:24so let's say position equals vector 3. new because  as you know position is a vector 3 data type we're
85. 8:33going to say 45 2 and 51 and then that is pretty  much our goal right here remember that position is
86. 8:40K sensitive so you should have the p is capital  uh but this is basically our only goal that we
87. 8:45need for this part it's just to move from where it  originally was to this specific place right here
88. 8:52and that's going to be at 452 and 51 all right  so now we have all bits of information to make
89. 8:58this happen now let's create the tween we're  going to drop two lines and we're going to say
90. 9:04local tween equals tween service colon create  open and close parentheses and so this takes
91. 9:14in three arguments with all of the things that we  created previously so the first one is going to be
92. 9:20the instance itself which is just going to be our  blue part right here so we're just going to put in
93. 9:25part comma and then our tween info object which we  already created up here so it's going to be tween
94. 9:33info and then our last bit of information is the  property table also known as our goal what we want
95. 9:40to achieve with this tween so let's pass in our  goal argument there as well Okay cool so now we
96. 9:46have our tween but if we play the game nothing's  going to happen because we haven't activated our
97. 9:52tween all we did was just create it so the way we  activate this tween is by dropping a line where
98. 9:59we're going to say tween and we're going to use  the function play open and close parentheses so
99. 10:06this is basically how we create a tween on Roblox  let's also add in a quick task. weight statement
100. 10:12before this plays so that we can fully see uh the  part move when we load in so let's say task. wait
101. 10:20uh 2 seconds all right so let's go into the game  and hit run so that we can see this part move
102. 10:26while it's animating all right and as you can see  this part is slowly moving from where it began to
103. 10:33the end position just like that we didn't have  to abruptly move the part from where it was to
104. 10:41instantly being where we want the end goal to be  it made a cool little animation that started from
105. 10:47where it was to the end position and there's  a lot of things we can change with this move
106. 10:52property so we can modify it with our tween  info with things like easing style and easing
107. 10:58Direction now with these properties it's going  to require a lot of just experimentation to know
108. 11:04the difference between all of them and which one  works best for you easing style is essentially
109. 11:08how we want this part to animate when it's going  from its starting position to its end position
110. 11:15so an example of an easing style would be if we  had the part go from its beginning to its end in
111. 11:23a very linear fashion without anything fancy  and then it'll just abruptly stop or you can
112. 11:30have it start slow and then it accelerates really  fast until it reaches the end so it's something
113. 11:35along the lines of that I'm going to show you an  example from someone on Twitter that made a great
114. 11:41comparison side by side of these easing style  types all right this is an old gift from 2015
115. 11:47so it is kind of outdated but it still explains  how easing Styles work and this post is by Aussie
116. 11:53Pig and I think he's done a great representation  of showing the difference between these easing
117. 11:57Style enums so let me just play it for you just  to show you all these different types of easing
118. 12:03style options so this is what it essentially looks  like when you go from its starting position to the
119. 12:11end position and you can have it go the other way  around as well if you go from its ending position
120. 12:17to its starting position so this is what it looks  like in reverse and I'm going to play that for you
121. 12:21again this is what it looks like from start to end  and this is what it looks like from end to start
122. 12:27and so we can essentially do this not only with  UI but we can also do this with parts like with
123. 12:33our moving part in studio so I I hope this um gave  you a bit more understanding of easing Styles all
124. 12:39right so now let's add an easing style to our  tween that we previously created in our tween
125. 12:44info so I Believe by default the easing style  is something called sign uh I'm going to show
126. 12:51you what that looks like so let's separate this  with a comma and now we're into our easing style
127. 12:56and remember easing style is an Eno so we have  to so it's kind of like a library of different
128. 13:02values that we have to uh fetch we basically have  to say enum do eing style Dot and now we have all
129. 13:12of these different easing style types that we can  pick from like I mentioned I believe sign is the
130. 13:18default uh easing style so that's why we were  able to see this animate without us specifying
131. 13:24an easing style because Roblox by default picked  sign uh but let's change this to something like
132. 13:31bounce instead to really see the difference with  these tween so this is pretty much it uh let's go
133. 13:38into the game and hit run to see the difference  with our new easing style all right so as you
134. 13:44can tell there was a pretty big difference there  compared to the one we had before with sign with
135. 13:49bounce it was definitely a lot more bouncy I guess  and there's even more properties we can change as
136. 13:55well we can change uh the easing Direction by  saying enum doing direction do in in out and
137. 14:03then out I believe the default is in but you  can change it to out meaning like it's going
138. 14:08in reverse uh you could experiment with these if  you want to it's not too terribly important but
139. 14:13that's another thing you can add there's other  properties like repeat count which is just a
140. 14:17number or reverse which is a Boolean or our delay  time which is also a number so not all of this
141. 14:25really matters too much and you don't need every  single property in tween info I would say the most
142. 14:31important one you need is the time the duration  of the tween when you play it but other than that
143. 14:37all of these other things you can add them if you  want to be more specific with your tween but that
144. 14:42is essentially the tween info data type that you  can use to customize your tweens when you use them
145. 14:47in your games let's add more goals let's say we  also want to change the size of this part as it's
146. 14:53moving along to its end position so the current  size is 4X 4x4 but what if we change it to 10 x
147. 15:0010 x 10 while it's moving a long way to reach  its end so we're just simply going to create
148. 15:06a new entry in our goal by by making a comma and  then hitting enter let's also change the size to
149. 15:14another Vector 3 value uh by saying 10 by 10 by 10  all right so now let's see our part if we decide
150. 15:22to add another goal to it alongside the moving one  so as you can see it's scaling up while it's also
151. 15:27moving so we can do a whole bunch of things with  our end result goal uh inside of the same tween
152. 15:33so that's another useful piece of information to  know about there are also tween functions that I
153. 15:37want to introduce to you the first one I already  did which was tween play which obviously plays the
154. 15:43tween that we created but there's two other ones  that I want to show you the second one being that
155. 15:49we can actually pause the tween Midway without it  completing uh we can do this at any point during
156. 15:55our script because if we play a tween that doesn't  mean it's going to pause the script with whatever
157. 16:02other code that's going to be down here so that's  why we can just pause this tween if we want to
158. 16:07so let's say about after 1 second we simply just  pause this tween uh just abruptly we're going to
159. 16:15put in a task. weight function right here with  1 second and then down here we're going to say
160. 16:20tween colon pause open and close parentheses so  if we go into the game now after about 1 second
161. 16:27the playing tween should then abruptly stop so  it just stopped right here but it hasn't reset
162. 16:35nor has it completed because it's currently uh  stuck in pause mode right now so what we can do in
163. 16:42order to continue the tween uh we can just simply  say well first let's put a task. wa for another
164. 16:49second again we can just simply say tween colon  play again so we're using the same play Method
165. 16:56there's no such thing as like a a Zoom method  or continue method or anything like that we just
166. 17:01simply say twe colon play again to resume where it  left off so if we play this now it's going to take
167. 17:10a second to pause and then it's going to continue  where it left off to then finish what it started
168. 17:17and finally there's one more function which is  just canceling it entirely so after we pause it
169. 17:22uh we're going to wait a second and instead of  playing it again let's just cancel it completely
170. 17:27and now let's see what happens happens when we  play the game so it's going to move and then it's
171. 17:31going to stop after about 1 second it's just going  to cancel the tween it's kind of hard to tell but
172. 17:36this tween no longer exists because we decided to  cancel the tween so now the tween cannot continue
173. 17:42where it left off because we completely canceled  the tween and now there's no more tween for this
174. 17:48part now there's one event that's special with  tween service and that is the event of detecting
175. 17:54when our tween finishes with whatever object or  inst since it was trying to Tween uh we can do
176. 18:00this inside of our script after we play the tween  for the first time so let's delete our code down
177. 18:06here with pausing and cancelling and let's write  in an event that detects when our tween finishes
178. 18:12so let's drop two lines and we're going to say  tween do completed colon connect function open
179. 18:21and close parentheses enter and then we can just  pretty much say whatever we want here with our
180. 18:26print statement we can just say tween has been  completed that's pretty much it we can just go
181. 18:33into the game and see our change in the output  once this tween has finished what it needed to
182. 18:39uh finish so the tween finishes and then in the  output it says tween has been completed so the
183. 18:46event has been fired Su successfully uh after the  tween was finished now this is one way you can use
184. 18:53this event you can basically fire something after  this tween has been completed but there's also
185. 18:58another way of doing this that pretty much acts as  a task. weight function but we have a very precise
186. 19:04way of knowing when this tween finishes what we  can do instead is delete all of this here up until
187. 19:10the function declaration so let's delete that so  we're simply going to say tween do completed colon
188. 19:17weight open and close parentheses this is the  entire code right here and then down here what
189. 19:22we can do is make the print statement saying this  TW uh tween has been finished essentially what
190. 19:30we're doing here is we're creating a very accurate  weight statement uh to wait until this tween has
191. 19:35been completed and then we fire whatever code is  um here with the rest of the script so let's go
192. 19:42into the game and hit run and we should see the  same exact result with our script this was just
193. 19:48one other way of writing it so let's finish  our tween and then down here it prints again
194. 19:53this tween has been finished because we told the  script to wait until the tween's been finished to
195. 19:58to do whatever else was down here which was uh  printing this print statement so those are two
196. 20:03ways you can use the completed uh tween event but  I usually use completed with a weight statement
197. 20:11rather than connecting it to a new function to  do whatever I wanted to do inside of a function
198. 20:16so I hope you'll find great use with using this  completed event and I believe that's the only
199. 20:21event that's unique to Tween I hope this video  served you as a good introduction to Tween service
200. 20:27if the if this is your first time using tween  service um I further made more improvements to
201. 20:32my part by adding in an easing style of Bounce  and I basically wrapped this around in a while
202. 20:38true do statement to give me a random goal every  single time by picking a random color and a random
203. 20:46orientation and then play that tween and then  just simply wait till that tween is done to do
204. 20:50it all over again so you can do some pretty cool  stuff with tween service um and so if you plan
205. 20:56to use this in the future this is definitely  a much greater way of animating your parts
206. 21:01or instances to do what you want them to do uh in  real time it's definitely more efficient than just
207. 21:06using a normal while loop to manually change the  properties of its positions or sizes or whatever
208. 21:12you want it to do tween service just serves as  a great tool to do the really complicated stuff
209. 21:18for you and so that's what I really like about it  my name is baldev and if you found this video to
210. 21:22be helpful then be sure to like the video and if  you haven't joined my Discord server the link to
211. 21:26that is in the description but apart from that  I will see you in the next episode take care