Viewport Frame - Roblox GUI Tutorial #16 (2025) — Transcript

Full transcript

1. 0:00These are viewport frames, a very unique
2. 0:03type of frame on Roblox that displays 3D
3. 0:06objects on a 2D screen. This allows us
4. 0:08to create things like shop display
5. 0:10images, mini map systems, and many other
6. 0:12things. And in this video, I'm going to
7. 0:14be showing you how to create these
8. 0:15viewport frames and use them for your
9. 0:17own Roblox games. So, with that being
10. 0:19said, let's get straight into the video.
11. 0:21Now that we understand it, let's
12. 0:23implement viewport frames inside Roblox
13. 0:25Studio. So, just like what we do at the
14. 0:27start of every single GUI episode, we're
15. 0:29going to go to the right side inside of
16. 0:31starter GUI, hit the plus sign, and
17. 0:33we're going to insert a screen GUI. Now,
18. 0:35inside of here, we're going to insert a
19. 0:37viewport frame just like this. I'm going
20. 0:40to scale it up just a little bit. Move
21. 0:42it over here. I'm going to go down to
22. 0:44the properties and change the size
23. 0:46property to use off to use scale instead
24. 0:49of offset. So, I'm going to say 0.2 0.2
25. 0:53and then zero just like this. And then
26. 0:55I'm going to rescale one more time and
27. 0:57then move it to the corner just like
28. 0:58this. All right. So, right now this
29. 1:01looks like a pretty standard frame. But
30. 1:02what's really cool about viewport frames
31. 1:04is that we can take 3D objects and
32. 1:08render them inside of a 2D space. And
33. 1:11the way that we can do that, I'm
34. 1:12actually going to show you a quick
35. 1:13example of how we can do that is let's
36. 1:16go to model and we're going to insert a
37. 1:18part. And with this part, the way that
38. 1:20we render objects inside of a viewport
39. 1:23frame is to directly put these models
40. 1:25inside the viewport frame itself. So I'm
41. 1:28going to take this part and drag it
42. 1:29inside the viewport frame. And now, as
43. 1:31you can see, the part is being rendered
44. 1:34inside of this viewport frame rather
45. 1:36than our in-game workspace as you can
46. 1:38see over here. Now, you might be
47. 1:40thinking that this is actually kind of
48. 1:42like a weird position for this part to
49. 1:44be in. Like why does it look like that?
50. 1:45It looks like that because Roblox is
51. 1:47using a fixated camera that's set in the
52. 1:51the origin of the game and we can't
53. 1:53exactly change the position of this
54. 1:55camera unless we create our own camera
55. 1:58or change it to a different one. And we
56. 2:00can actually do that through a specific
57. 2:01property. So if we go to viewport frame,
58. 2:03there should be a property here called
59. 2:05current camera. And we can actually
60. 2:08change this camera to be something
61. 2:09different. Let's say we were to select
62. 2:11this and change this to our studios
63. 2:14camera. Then what it's going to do is
64. 2:16it's going to replicate the studio's
65. 2:19camera inside this viewport frame. So if
66. 2:21we move around inside the world, then
67. 2:23the viewport frames camera is also going
68. 2:26to mimic what the studio's camera looks
69. 2:28like currently, which is actually really
70. 2:30cool. But the thing that's unpractical
71. 2:32about this is it doesn't exactly work
72. 2:33when we play the game. So if we go and
73. 2:35hit test and hit play, then what we
74. 2:37should see is that this viewport frame
75. 2:40is no longer updating with the in-game
76. 2:42camera. And that's because there's a
77. 2:45difference between the studios camera
78. 2:47and the in-game camera. So, if we play
79. 2:50the game, Roblox is essentially creating
80. 2:51a copy of the studio camera and putting
81. 2:54it inside of this viewport frame without
82. 2:57updating it because we're not using the
83. 2:58studios camera. This is our in-game
84. 3:00camera. So, there definitely are some
85. 3:02tricks that you have to look out for
86. 3:03when you're using viewport frames. But,
87. 3:05this is essentially what a viewport
88. 3:06frame is. And we can do some pretty cool
89. 3:08stuff with the part that's inside this
90. 3:09viewport frame. So, what I'm going to do
91. 3:11is hit the plus sign in viewport frame.
92. 3:13I'm going to insert a local script. And
93. 3:15what we're going to do inside of the
94. 3:17script is make it so that the part
95. 3:19inside this viewport frame is going to
96. 3:20constantly spin around. And what we're
97. 3:22going to do inside the script is first
98. 3:24make our own custom camera that we can
99. 3:27manipulate. And second, we're going to
100. 3:28write some lines that makes the parts
101. 3:31spin around so that we can see that it's
102. 3:32actually moving. So, the first thing
103. 3:33we're going to do is say local viewport
104. 3:36frame equals script.parent. And then
105. 3:38what we're going to do is say local part
106. 3:40equals viewport frame.part. So now what
107. 3:43we're going to do is create our own
108. 3:46viewport camera. So we're going to say
109. 3:48local viewport
110. 3:50cam equals instance new camera. And then
111. 3:53what we're going to do is set the origin
112. 3:56of the viewport cam. So we're going to
113. 3:57say viewport cam.cf frame equals Cframe
114. 4:01new 0000. But we can change this to a
115. 4:04different value later because right now
116. 4:06this is the standard C frame value for a
117. 4:09C frame when you do create it. So then
118. 4:11what we're going to do is we're going to
119. 4:13set the viewport frames current camera
120. 4:17to this camera that we just created
121. 4:19here. So we're going to say viewport
122. 4:22frame.curren camera equals viewport cam
123. 4:25just like this. So, this creates a new
124. 4:28viewport camera specifically for this
125. 4:30viewport frame that we can now
126. 4:31manipulate, which is what we're going to
127. 4:32do later. But as of right now, what
128. 4:34we're going to do is say while true do,
129. 4:37we're going to put a task. And above
130. 4:40here, we're going to make the part spin
131. 4:42around constantly. So, we're going to
132. 4:44say part C frame times equals the parts
133. 4:48C frame with Cframe.
134. 4:51And let's make it spin around on the
135. 4:53Yaxis. So, we're going to say zero. And
136. 4:55if we're going to use degrees, let's say
137. 4:57math.RAD. So we're going to put this in
138. 5:00radians. And then we're going to put one
139. 5:01degree here. And then for Z, we're just
140. 5:03going to say zero. So now if we go into
141. 5:05the game and hit test and hit play, then
142. 5:08what we should see in this viewport
143. 5:10frame is we can now see that the part is
144. 5:13spinning, but it's still kind of like
145. 5:15out of reach. We can't really see it
146. 5:16that well. And that's because we can now
147. 5:19take our viewport camera and modify
148. 5:22where the position of this camera is. So
149. 5:25on the Z, let's say we want to put five.
150. 5:28So what this viewport frame is going to
151. 5:30do is we can now see that it's like a
152. 5:32little farther away. Uh I think what I
153. 5:34actually wanted to do was make it a
154. 5:35little closer. So if I were to go back
155. 5:37to the script and make it let's say -10,
156. 5:40then I think we should definitely see a
157. 5:41difference with this viewport frame
158. 5:43here. So as you can see, the part is now
159. 5:45closer to the camera. Um, and we can now
160. 5:48modify our viewport camera to change
161. 5:51where it's positioned inside of this
162. 5:54viewport frame to basically showcase the
163. 5:57parts inside of here more accurately.
164. 5:59And I hope that this part is making
165. 6:00sense so far. Now, you might be
166. 6:01thinking, is it possible to render a
167. 6:04model inside of a viewport frame? And
168. 6:06the answer is yes. You actually can
169. 6:08render a model inside of a viewport
170. 6:10frame. And one of the best examples that
171. 6:13I can showcase this is through our own
172. 6:16character to be displayed inside this
173. 6:17viewport frame. So what I'm going to do
174. 6:19is go to test and then hit play. And
175. 6:22what we're going to do is copy our
176. 6:24character from the workspace. So I'm
177. 6:25going to open up workspace, then go to
178. 6:27our character. I'm going to rightclick,
179. 6:29copy, and then I'm going to hit stop.
180. 6:31And then inside the workspace, I'm going
181. 6:33to rightclick and then hit paste into
182. 6:35just like this. And now what I'm going
183. 6:37to do with our character is drag it into
184. 6:39the viewport frame. so that it's going
185. 6:41to be rendered just like this. Um, but
186. 6:44in order for us to have a clear view of
187. 6:48our character when we render it inside
188. 6:49the game. So, we want it to look
189. 6:51something like this. Uh, and the way
190. 6:52that we can achieve this specific angle
191. 6:55for the camera is having to create our
192. 6:58own camera to make it be positioned like
193. 7:00this when we play the game. So, what
194. 7:03we're going to do is inside the viewport
195. 7:04frame, we're going to hit the plus sign
196. 7:06and we're going to create our own camera
197. 7:08just so that we can see what it looks
198. 7:10like inside studio so that we can use
199. 7:12our script to replicate the same camera
200. 7:15position. So, for our new camera's
201. 7:17position, I'm going to set it to 0 0.
202. 7:19And then for the orientation, I'm also
203. 7:21going to set it to 0 0. And then what
204. 7:23I'm going to do is go to the viewport
205. 7:25frame. I'm going to go down to current
206. 7:27camera and then select our new camera
207. 7:29that we created. So with this, what
208. 7:31we're now going to do is try to make our
209. 7:34character in view of the camera. So for
210. 7:38our character, I'm going to set the
211. 7:40origin position to 00.
212. 7:44So now it might look a little off frame
213. 7:46right now. So we need to readjust some
214. 7:48values to make it in view. So we're
215. 7:50going to go to the camera and I'm going
216. 7:52to set the C frames position to 005.
217. 7:56And it looks like our character is now
218. 7:58facing the other way. So, what we can do
219. 8:00is set the orientation of our character
220. 8:04to, let's say, 180° on the Y-axis. And
221. 8:06there we go. Now, we can see our
222. 8:08character inside the frame. Now, in
223. 8:10order for us to see it in the actual
224. 8:11game, we need to modify our script to
225. 8:14replicate the same exact camera, but
226. 8:16instead create it inside the script
227. 8:17instead. So, what we're going to do is
228. 8:19go into the script and we're going to
229. 8:22change the position of this viewport
230. 8:24camera to 0 0 and whatever we put here.
231. 8:28Yeah. 0 0 5 just like that. So now if we
232. 8:31go into the game, hit test and hit play,
233. 8:33then what we should see is our character
234. 8:36is perfectly in the viewport frame as we
235. 8:39wanted to. And this is how you render a
236. 8:42model inside of a viewport frame. But
237. 8:44what if I told you that there are some
238. 8:46other pretty cool things we can do with
239. 8:47this? Like we can animate our character
240. 8:50inside of this viewport frame uh rather
241. 8:52than just having our character stand
242. 8:54still just like this. Now,
243. 8:55traditionally, what we would do is if I
244. 8:57were to hit stop, we would typically,
245. 8:59let's say, run an animation for our
246. 9:01character and then we'd be able to see
247. 9:03it inside of the viewport frame. But the
248. 9:05problem is is viewport frames don't
249. 9:08actually apply physics to any models
250. 9:11that are inside of the viewport frame.
251. 9:14Because if this was the case, then our
252. 9:16character should have like an idle
253. 9:18animation here, but it simply just
254. 9:20doesn't because it can't play physics or
255. 9:22any type of animation. So, a solution to
256. 9:24this would be to wrap our models inside
257. 9:27of what are called world models. And I'm
258. 9:29going to show you what this looks like.
259. 9:30So, inside of our viewport frame, we're
260. 9:32going to hit the plus sign, and we're
261. 9:33going to insert a world model that looks
262. 9:36like this. And anything that we add
263. 9:39inside of here is going to allow physics
264. 9:41to be enabled for any of the objects
265. 9:43that we put inside of it. So, I'm just
266. 9:45going to drag our character and put
267. 9:46inside the world model. And now if we
268. 9:48hit play,
269. 9:50what we should see is our character now
270. 9:53has its idle animation playing. And if
271. 9:55we wanted to do other things with it, we
272. 9:57can now do it because we put our
273. 10:00character inside of a world model. So
274. 10:03that's the purpose of what a world model
275. 10:04does. And now let's try and make a cool
276. 10:07little animation with this. So I'm going
277. 10:08to hit stop. And what I'm going to do is
278. 10:10let's say we want to make a script that
279. 10:13plays like a dance animation for this
280. 10:15character just for the heck of it. I'm
281. 10:17going to try and look for an animation
282. 10:19that we can play. So I'm just going to
283. 10:21click on animate. And there should be a
284. 10:23bunch of animations that we can pick
285. 10:25from here. Uh so I'm probably going to
286. 10:27pick dance and I'm going to pick one of
287. 10:29these animations. If you don't see this
288. 10:31option, it's probably because you
289. 10:33imported an R six character rather than
290. 10:35an R15 character. Uh but you can use any
291. 10:37of these animations. It really doesn't
292. 10:39matter which one you pick. So, I'm going
293. 10:40to pick animation one from the dance
294. 10:42animation. So, I'm just going to take
295. 10:44this, copy it, and I'm going to create a
296. 10:47new script inside of our character. So,
297. 10:49I'm going to hit the plus sign, insert a
298. 10:51local script, and I'm just going to
299. 10:52paste the animation inside of here, and
300. 10:54I'm going to rename this to
301. 10:57dance script, just like this. Okay. And
302. 11:00now what we're going to do is first
303. 11:02locate the animation. So, I'm just going
304. 11:03to rename this to animation. So, I'm
305. 11:06going to say local animation equals
306. 11:09script.an animation. And then what I'm
307. 11:11going to do is say local animator equals
308. 11:14script.parent
309. 11:16colon wait for childh humanoid. And we
310. 11:19want to locate the animator of the
311. 11:20humanoid. So, we're going to say wait
312. 11:22for child animator just like this. And
313. 11:24then we want to load the animation. So,
314. 11:26we're going to say local uh loaded
315. 11:29animation equals animator colon load
316. 11:34animation. And then we want to load the
317. 11:35actual animation to it. And then what
318. 11:37we're going to do is say loaded
319. 11:39animation colon play open close
320. 11:43parenthesis just like that. And this is
321. 11:44how we're going to be playing the dance
322. 11:46animation as soon as we join to the
323. 11:48game. So now we're basically done with
324. 11:50that. So if we hit play, then what we
325. 11:52should see is our character should be
326. 11:54playing a little dance animation. As you
327. 11:56can see right here, it's uh it's pretty
328. 11:58cool what you can do with viewport
329. 12:00frames. Uh you can even add backgrounds
330. 12:02if you really want to. You can change uh
331. 12:04some lighting properties which I'm
332. 12:06actually going to show you right here.
333. 12:07So, if we go to our viewport frame, we
334. 12:09have a bunch of settings that we can
335. 12:11work with. We have an ambient setting to
336. 12:13mess around with the lighting a little
337. 12:14bit. We have a light color if we want to
338. 12:19change that property as well. We even
339. 12:21have a light direction and some other
340. 12:23properties that we can just mess with
341. 12:24here to make it look better for what
342. 12:26we're trying to accomplish here. And I
343. 12:28hope that this is helping you understand
344. 12:29how you can apply viewport frames to
345. 12:32your game through what I've been able to
346. 12:34teach you so far. One thing I would like
347. 12:35to add is we can use viewport frames and
348. 12:38apply them to a surface GUI inside the
349. 12:41game, which I think is pretty cool. Now,
350. 12:42if you need a recap of what surface gys
351. 12:44are, so let's say if I were to insert a
352. 12:47part here and just scale it like this, I
353. 12:49want to apply a GUI screen onto a
354. 12:53specific side of this part. Let's say
355. 12:55this one. uh we would be able to add a
356. 12:57viewport frame to the surface of a 3D
357. 13:00object like this one, which I think this
358. 13:02is pretty cool. Uh so I'm going to show
359. 13:03you how to do this really quick. So what
360. 13:05I'm going to do is inside the screen
361. 13:07GUI, I'm going to insert a surface GUI.
362. 13:11And then within the surface GUI, I'm
363. 13:13going to set this adorny property to
364. 13:15this part right here. So I'm just going
365. 13:17to select that. And now what we're going
366. 13:19to do is take this viewport frame. I'm
367. 13:22going to copy it and I'm going to paste
368. 13:24it inside of here. And now you can see
369. 13:26that this viewport frame is a part of
370. 13:29this wall right here. So if we were to
371. 13:31go to the game, hit test and hit play,
372. 13:32then what we should see is the exact
373. 13:34same result of my character just dancing
374. 13:37all about like this. It's uh it's kind
375. 13:40it's kind of freaky looking, but I mean
376. 13:41this is still something really cool you
377. 13:43can do with viewport frames. And I
378. 13:44figured that I would show this to you in
379. 13:46case you ever decide to use this inside
380. 13:47of your Roblox games. So, with what we
381. 13:49have so far, we're about to create
382. 13:50something pretty interesting with this
383. 13:52viewport frame. So, what I have here is
384. 13:55a system where if I were to hover over
385. 13:57this viewport frame with my mouse, then
386. 14:00what it's going to do is it's going to
387. 14:02rotate the character around this
388. 14:05viewport frame, kind of like a display
389. 14:07showcase type of thing. And basically
390. 14:09how it works is when I initially hover
391. 14:11over, it's going to zoom the character
392. 14:13in and then it's going to constantly
393. 14:15rotate the character around until I
394. 14:18hover my mouse out of it. And I've seen
395. 14:20this a lot inside of shop systems where
396. 14:22if we want to display like a model of
397. 14:25some sort, then we can have it where if
398. 14:27you hover over it, then it's just going
399. 14:28to showcase it so that you're able to
400. 14:30see it properly so you can see the
401. 14:32entire thing. And I think this is a
402. 14:33really cool system to make and that's
403. 14:34what we're about to be making with what
404. 14:36we know about viewport frames so far.
405. 14:38Okay, so the first thing that we would
406. 14:39need to do is go to our local script.
407. 14:42And we probably don't need this code for
408. 14:45the part spinning thing anymore because
409. 14:47we're not really going to be using that.
410. 14:49So let's just delete that. And also
411. 14:50delete the reference to the part. Okay,
412. 14:52so what we need to do is create two
413. 14:54events. One for hovering our mouse into
414. 14:57the viewport frame and one for hovering
415. 15:00our mouse outside of the viewport frame.
416. 15:02So inside of our script, we're going to
417. 15:03say viewport frame dot mouse enter colon
418. 15:08connect function open and close
419. 15:11parenthesis enter. And this does bring
420. 15:13us two parameters that we're probably
421. 15:15not going to be using. So we're just
422. 15:17going to leave this empty. And then
423. 15:18we're going to do the same thing for
424. 15:19mouse leave. So we're going to say
425. 15:21viewport frame mouse leave col connect
426. 15:24function open and close parenthesis
427. 15:25enter. Just like that. Okay. Now,
428. 15:29another thing that we need to do is make
429. 15:30a bunch of references to a couple
430. 15:32things. And the first thing that we need
431. 15:34to make reference to is our character,
432. 15:35which I think to make it easier, what we
433. 15:37can do is go to our character. I'm just
434. 15:40going to rename this to character just
435. 15:42like this, so that it'll be easier to
436. 15:44reference. So, we're going to say local
437. 15:46character equals viewport frame.orld
438. 15:50model character just like that. Now,
439. 15:52another thing we need to make reference
440. 15:54to is a debounce variable to check
441. 15:57whether our mouse is currently hovered
442. 15:59over the viewport frame or not. So,
443. 16:01we're going to say local mouse entered
444. 16:06equals false. Just like that. And one
445. 16:09thing that we need is a default C frame.
446. 16:11And I'm going to show you why we need
447. 16:13this in a second. But first, we're going
448. 16:15to set it as a default value of where
449. 16:18our character is currently positioned.
450. 16:20So if I were to let's say select our
451. 16:22character, we can see that the default
452. 16:24position is at 0 0. So that's what we're
453. 16:28going to do here. So we're going to say
454. 16:29local default C frame equals C frame new
455. 16:35open close parenthesis 0 0. Now you
456. 16:37might notice that the default
457. 16:39orientation is -1 180. So we also need
458. 16:42to specify that inside of our default C
459. 16:44frame as well. So we're going to
460. 16:46multiply this by C frame. angles so that
461. 16:49we can apply a rotation to this. We're
462. 16:51going to say 0 math.
463. 16:55And then we're going to put 180° here
464. 16:58and then zero for Z. So once we have
465. 17:02this, we also need one more reference
466. 17:04which is going to be a connection
467. 17:06variable for when we run run services
468. 17:09render stepped function. And I'm going
469. 17:11to explain what that means later. But
470. 17:13let's just type in local rotation
471. 17:16connection. And we're not going to set
472. 17:18this to anything right now. Okay. So now
473. 17:20what we're going to do is inside of this
474. 17:21mouse enter event, first thing we want
475. 17:23to check is if the mouse is not
476. 17:25currently entered. So we're going to say
477. 17:27if not mouse entered, then we're going
478. 17:29to set mouse entered equal to true. And
479. 17:32this is where we can make it so that the
480. 17:34character zooms in for a second and then
481. 17:37it continuously rotates until the user
482. 17:41lets go of their mouse uh outside of the
483. 17:43viewport frame. So, if I were to show
484. 17:44you what this would look like, let's say
485. 17:46we have our character here, and we're
486. 17:48trying to apply changes to the
487. 17:52character's primary part, which for most
488. 17:54characters, it's this humanoid root part
489. 17:56here. So, if we were to make changes to
490. 17:58this humanoid root part, then what it's
491. 18:00going to do is it's going to apply it to
492. 18:02all the other parts of the character
493. 18:04because it's all contained inside of one
494. 18:06model here. And the humanoid root part
495. 18:09is the controller of all position and
496. 18:12rotation changes. So how this is going
497. 18:15to look is if we were to hover our mouse
498. 18:17over, then we're going to zoom in the
499. 18:19character just like a little bit like
500. 18:20this. And then once we do that, we're
501. 18:22going to continuously rotate this
502. 18:24character until the user lets go of the
503. 18:27mouse out of the viewport. And then it's
504. 18:30just going to reset it back to its
505. 18:32default C frame like we did before. So
506. 18:35now that we have that understanding,
507. 18:36let's go back to our script and we're
508. 18:37going to use tween service to move the
509. 18:39character inward. So we're going to drop
510. 18:41a few lines up here. We're going to make
511. 18:43reference to tween service by saying
512. 18:45local tween service equals game get
513. 18:48service tween service just like this.
514. 18:50And then we're going to create a tween
515. 18:52here. So we're going to say local tween
516. 18:54in equals tween service create open and
517. 18:57close parenthesis. So, we're going to
518. 18:59take the characters primary part, which
519. 19:02as I said before, this is the humanoid
520. 19:04group part. And then we're going to give
521. 19:06a tween info. So, we're going to say
522. 19:08tween info.n. And the only thing that we
523. 19:10really care about here is how long it
524. 19:12takes. So, we're going to say this is
525. 19:14going to last for 0.25 seconds. And then
526. 19:16we want to set a property table of the
527. 19:19goal that we want to achieve, which in
528. 19:20this case is the C frame. So we're going
529. 19:23to say C frame equals default C frame
530. 19:28plus default C frame.look vector. So the
531. 19:32look vector is basically this direction
532. 19:34right here that gives us a a bunch of
533. 19:37values that contains ones and zeros. And
534. 19:39if we add the look vector to this, then
535. 19:41it's going to move this character one
536. 19:44stud towards the camera. So once we have
537. 19:46this taken care of, now what we can do
538. 19:48is play the tween. So we can say tween
539. 19:51in colon play just like this. So now
540. 19:54what we're going to do is update our
541. 19:55mouse leave function. So we're going to
542. 19:57say if mouse entered then we're going to
543. 20:00set mouse entered equal to false. And
544. 20:03we're going to essentially take the same
545. 20:05code that we had here, but instead we're
546. 20:07going to push the character back instead
547. 20:10of bringing it into the camera. So we're
548. 20:12going to copy this, paste it in here.
549. 20:14We're going to rename this to tween out.
550. 20:17And then what we're going to change here
551. 20:19is the C frame property. So instead of
552. 20:22default C frame plus default C frame
553. 20:24look vector, we're just going to have
554. 20:25default C frame just like this. So now
555. 20:28what we should see is if we go inside
556. 20:30the game and hit play and if we hover
557. 20:32over our viewport frame, then we can see
558. 20:34that our character is now zoomed in once
559. 20:36we hover over. But then once we hover
560. 20:38out, it's going to zoom back out. So now
561. 20:40the thing that we need to add is the
562. 20:43ability to rotate or spin the character
563. 20:47while the player has their mouse hovered
564. 20:48over. So that's the next thing that
565. 20:50we're going to do here. So if I hit
566. 20:52stop, then what we're going to do is go
567. 20:53back to our local script and we need to
568. 20:55make reference to run service because
569. 20:57we're going to run this every single
570. 20:59frame so that it updates smoothly when
571. 21:01the character rotates around. So what
572. 21:03we're going to do up here is say local
573. 21:05run service equals game get service run
574. 21:09service just like this. And once we play
575. 21:12the tween we want to wait for the tween
576. 21:14to finish before we activate the spin
577. 21:16function. So what we're going to do is
578. 21:18say tween in completed
579. 21:22colon connect function open close
580. 21:24parenthesis enter. Now just for a quick
581. 21:26check what we're going to do is say if
582. 21:28mouse entered then just to be safe. And
583. 21:31now what we're going to do is take our
584. 21:33rotation connection and we're going to
585. 21:36apply run services render stepped
586. 21:38function. So we're going to say run
587. 21:40service dot render stepped. And the
588. 21:43reason we're using render stepped is
589. 21:44because this is a local script and
590. 21:46render stepped is something we can
591. 21:48exclusively use for local scripts
592. 21:50instead of normal scripts. So if we want
593. 21:51to get like the right amount of
594. 21:53smoothness, I think render stepped is
595. 21:54the best function to use. So then we're
596. 21:56going to say connect function open close
597. 21:58parenthesis enter just like this. And
598. 22:00now what we're going to do is basically
599. 22:03spin the primary part just like we did
600. 22:05with that regular part earlier in this
601. 22:07tutorial. So what we're going to do is
602. 22:09say character primary part doc frame and
603. 22:13then we're going to multiply equal
604. 22:16whatever the C frame of this primary
605. 22:18part currently is with CF frame angles
606. 22:22open close parenthesis. And then we're
607. 22:23going to say zero math.rad. We want to
608. 22:26apply one degree to the turn every
609. 22:29single frame. And then for the Z, we're
610. 22:31just going to say zero. Okay. So now our
611. 22:34mouse enters complete, but we want to
612. 22:35make sure that when the player hovers
613. 22:38their mouse out of the viewport frame,
614. 22:40then we want to disable this render
615. 22:43stepped connection. So down here, what
616. 22:46we're going to do for the mouse leave is
617. 22:47say if rotation connection. So if
618. 22:50there's a current connection right now,
619. 22:53then what we're going to do is
620. 22:55disconnect the connection. So we're
621. 22:57going to say rotation connection colon
622. 23:01disconnect. Just like that. And we also
623. 23:04want to make sure that rotation
624. 23:05connection is also set equal to nil as
625. 23:07well. So we're going to say rotation
626. 23:08connection equals nil. And that gets rid
627. 23:11of the variable since we don't need it
628. 23:13anymore. And this is our complete script
629. 23:16for our rotation model viewport system
630. 23:20that we created I guess. So if we hit
631. 23:22play then we should see our finished
632. 23:25result. So if I hover my mouse in then
633. 23:27we should see that first it zooms the
634. 23:30character in and then it spins the
635. 23:32character continuously until I stop uh
636. 23:36hovering over my mouse over this
637. 23:38viewport frame. So if I let go then it's
638. 23:40going to go back to where it started.
639. 23:42And I think this is something really
640. 23:44cool that we can make with viewport
641. 23:46frames. Um, now I kind of noticed that
642. 23:49the character is like zoomed in quite a
643. 23:51lot. So I'm going to uh make the
644. 23:53starting C frame six for the camera
645. 23:55instead of five. And I think that should
646. 23:58basically update the camera to be where
647. 24:00we want it to be. So now we can see more
648. 24:02of the character when we zoom in and
649. 24:04then do the rotation and then stop it.
650. 24:06So that is basically how we use viewport
651. 24:07frames inside of Roblox Studio. Big
652. 24:09shout outs to my Patreon members for
653. 24:11their continued support to help me
654. 24:13continue making high-quality tutorials
655. 24:15for you guys to watch and also just
656. 24:17great videos in general for the channel.
657. 24:19If you enjoyed this video, then I
658. 24:20encourage you to leave a like or maybe
659. 24:22leave a comment of what you plan to do
660. 24:24with this tutorial on viewport frames
661. 24:26inside of your own Roblox games. And
662. 24:28with that being said, I think that's
663. 24:30pretty much going to conclude this
664. 24:32episode on viewport frames. I had a lot
665. 24:34of fun making this tutorial and I will
666. 24:36be seeing you in the next video.