YT YouTube2Text

YouTube2Text → Transcripts → Frame & ScrollingFrame - Roblox GUI Tutorial #7

Frame & ScrollingFrame - Roblox GUI Tutorial #7 — Transcript

by BrawlDev · 3,342 words · 435 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:00what is this button that says click
0:02me wait what the why did it move up
0:05here uh okay I guess this is trying to
0:08play games with me all right don't worry
0:10I'm going to see what happens if I just
0:11keep clicking on this come on come
0:14on bro you can't be serious right now
0:19all right let's think about this for a
0:20minute so with this button that I kept
0:23trying to click like this it looks like
0:25it's moving the position of this button
0:28to be somewhere that's relative to this
0:30little box here but what does this mean
0:32exactly I think what this is trying to
0:34say is that whenever I click on this
0:35button it's going to pick a random
0:38position that's relative to this little
0:40box that's over here that this button is
0:43literally contained inside so I think
0:46this is with the use case of a frame
0:48which is actually a really helpful um
0:50GUI element inside of Roblox that I
0:52think it's something important that you
0:54should uh be aware of uh so that is
0:56basically what I'm going to be teaching
0:58you how to do in this episode while also
1:00covering another type of frame that is
1:02similar to frames called scrolling
1:05frames so with that being said let's go
1:08straight into implementing the uh frames
1:11and scrolling frames now that we
1:13understand it let's implement it so to
1:15reiterate what a frame essentially is is
1:17that it's a container that contains our
1:20GUI elements put together inside of one
1:24uh frame so that we can change
1:27manipulate and move around that
1:29individual frame that contains all these
1:31GUI elements together so that we have a
1:34much easier time organizing and also uh
1:37changing some stuff around when it comes
1:38to GUI elements so to show you what this
1:41looks like the first thing we need we
1:42need to do on the right side is to of
1:45course add a screen GUI as usual for any
1:48GUI element and then what we're going to
1:49do is hit the plus sign and we're going
1:51to add in a frame and this is what it
1:53should look like so when we add in this
1:55Frame it should be displayed on the top
1:57left of our screen like any other GUI
1:58element and we can move this around but
2:01now what next well to to tell you the
2:04truth this is literally it this is
2:06basically the frame right here that
2:08contains uh every other GUI element that
2:11we can use in order to manipulate move
2:14around and organize our gu inside of our
2:17inside of our Roblox game so our frame
2:19is on the right side and it has all
2:22these properties that we can work with
2:23but there aren't really anything too
2:26special about the frame except for this
2:28property called clip descendants but I'm
2:29going to to tell you what that is in a
2:30second and so this Frame since I
2:32mentioned that this acts as a container
2:34for other GUI elements let's go ahead
2:36and start adding some GUI elements onto
2:38this thing so let's hit the plus sign
2:39next to frame and then let's add in a
2:41text label uh it's kind of hard to see
2:43this text label so we're actually going
2:44to change the background color of this
2:46Frame to something darker so we can see
2:48the other stuff all right and now we
2:50have our text label so when we add it
2:53it's in the origin position of the frame
2:56and not the and not the actual game
2:58because if you remember if we add in a
3:00GUI element it starts at the position
3:02origin of the screen which is somewhere
3:05up here but now uh since we have a text
3:08label that's contained inside of this
3:10Frame the frame is our new container so
3:13the beginning position is going to be at
3:16the origin of wherever this Frame is and
3:19so that's why it's going to start here
3:21so anything we put in here is basically
3:23contained inside of here but we can even
3:25pos position these elements outside of
3:26the guy frame as well there's actually a
3:29property that uh allows us to not do
3:31that it'll just hide it if it decides to
3:33go off of the the container or frame or
3:35whatever um with the property that I
3:38just mentioned earlier called clip
3:39descendant so if we highlight our frame
3:42and then we press clip descendants and
3:44then we take our text label and try to
3:46drag this off the screen you can see
3:48that it's becoming invisible because it
3:50has to be in because it has to be within
3:52the boundaries of the frame in order to
3:55in order for it to be visible but we can
3:57bypass this by uh un checking clip
4:00descendant with the frame and now we can
4:02basically drag this wherever we want but
4:05is still inside of our frame so now that
4:08we understand this we can add in even
4:10more elements to our frame by hitting
4:11the plus sign let's say we create a text
4:13button this time uh we can position this
4:16button somewhere else like off to the
4:17side here make it colorful or whatever
4:19it doesn't really matter too much uh we
4:21can even add more elements like a text
4:23box uh this text box can just go
4:25wherever it doesn't really matter uh and
4:27then once again you can turn turn on
4:30clip descendence so that whatever is
4:32outside of the boundaries of the frame
4:35it will not show so that is basically uh
4:38what a frame does uh it's basically just
4:40a container that contains GUI elements
4:43that we can use to modify uh and
4:46organize our GUI elements inside of our
4:48Roblox games because one thing you might
4:50notice is that if I try dragging this
4:52Frame around it's dragging every other
4:55element that's inside of this Frame
4:57alongside with it because now that that
4:59these GUI elements are um inside of this
5:03Frame basically all of these elements
5:05belong to the frame so if we move the
5:07frame then it moves all the other GUI
5:09elements as well so you can treat this
5:12as like a folder or a model if you're
5:13working with 3D objects but this time
5:15it's going to be 2D objects so that's
5:18kind of what this is like I also want to
5:20add important notes to when you're
5:21changing the position and size of these
5:24individual Parts uh inside of a frame is
5:27that when you put elements inside of a
5:30frame then the position and size
5:33properties are now relative to the frame
5:36that it's located in and not the entire
5:38screen so what I'm what I'm getting at
5:40here is that let's say we had our text
5:42label here so the position here is now
5:46000000 because this position is relative
5:49to the frame that it's at so this is
5:51000000 not this being 0 0 0 0 because
5:55this would be if this was parented to
5:57just a uh screen GUI rather than than
5:59anything else that's uh inside of it so
6:02that's an important distinction to know
6:03about if you're handling positions and
6:05sizes uh with GUI elements that are
6:07inside of a frame you have to make sure
6:10that what you're um changing is relative
6:12to the frame or the GUI container that
6:15it's uh contained inside same thing to
6:17do with size let's say if we're changing
6:19the scale property of these sizes then
6:21these sizes are relative to the frame
6:24and not the entire screen so a size of
6:28one would be from where it started at
6:30the frame to the entire uh way through
6:34for this specific frame and not for the
6:36entire uh roblo screen and we can pretty
6:38much do the same thing with the Y scale
6:40as well uh for it to cover the entire
6:43frame with uh a scale of one for both
6:46the X and the Y AIS it's not covering
6:48anything outside of the frame unless we
6:51decide to go past one so let's say we
6:53had size 1.5 for the Y scale then it's
6:57going to fill up the frame entirely but
7:00then go an extra mile of going through
7:041.5 uh as the scale so that it goes
7:07slightly above the frame unless of
7:10course we had clip descendence on then
7:11we won't see that but now you might ask
7:13what's the difference between a frame in
7:15a folder so if you remember what a
7:17folder looks like we could basically
7:18just go to the screen GUI hit the plus
7:20sign add in a folder right here and then
7:22we can basically take these GUI elements
7:24and put it inside of here so yeah this
7:27already looks kind of messed up because
7:28this isn't Within the bounds of a
7:31relative frame that's why it just
7:32covered the entire screen here's the
7:34thing about frames that make it
7:36convenient over folders is that this is
7:38literally a GUI element in and of itself
7:41so this frame has GUI elements that you
7:44can change that will also change the
7:46properties that are inside of it like
7:47position and size for instance if I
7:49let's say change the size of the frame
7:52itself to 0.5 then it's going to scale
7:55all of the elements that are inside of
7:57the frame alongside with it to match the
8:00new size of this Frame you cannot do
8:02this with a folder because a folder
8:04literally has no properties that relate
8:06to a GUI whatsoever because a folder is
8:10not a GUI element a frame however is a
8:13GUI element that's why we're able to uh
8:15modify all of the properties inside of
8:17this Frame container to whatever we
8:20change with the actual frame itself so
8:23that is an important distinction to know
8:24about now that we understand frames I
8:26now want to introduce you to another
8:28type of frame that's called scrolling
8:30frames and you can kind of guess what
8:32scrolling frames do they basically act
8:35as frames except you're able to scroll
8:37up and down or left and right on these
8:39frames to show a lot more of what this
8:41frame has to offer so you've probably
8:43seen these in Roblox games before uh but
8:45now I'm going to show you how to
8:46implement them inside of Roblox studio
8:49so on the right side of screen GUI let's
8:51hit the plus sign and we're going to add
8:53in a uh scrolling frame which looks like
8:56this um and for right now what we're
8:58going to do is we're actually going to
9:00hide our uh our first frame so we're
9:03going to so we're going to click on it
9:05drop down a little bit and then hit the
9:06visible sign so that we don't see it
9:08anymore and let's take the scrolling
9:10frame and move it over here to the
9:12middle and let's scale this up just a
9:14little bit so one noticeable difference
9:16you can see with this is that there's
9:17this little bar on the right side and
9:19this indicates our scrolling bar uh to
9:22let us know that we can scroll on this
9:25Frame and it'll show a bunch of results
9:27of uh whatever is taint inside of the
9:29scrolling frame by going up and down on
9:31it we're not putting all of the elements
9:34inside of one picture because we're able
9:36to dynamically move up and down to see
9:38all of these different elements that are
9:40supposedly going to be inside of here so
9:42to demonstrate this let's add in a bunch
9:44of objects inside of the scrolling frame
9:46so that we can see it move past us when
9:48we scroll up and down so let's hit the
9:50plus sign next to scrolling frame and
9:51let's add in a text label uh and let's
9:54also change the background color of this
9:56Frame to something different so that we
9:58can see it better uh okay and so now let
10:01okay so now we have this text label if
10:03we scroll down we can see that we can no
10:06longer see it uh within our view because
10:09we're scrolling down onto the page um
10:12unless we scroll all the way back up
10:14then we can see the text label again um
10:16and there's another interesting thing we
10:17can do with this uh scrolling frame with
10:20all these objects inside of it is that
10:22we can create this sort of list with it
10:24and make it go all the way down uh to
10:26the bottom of the page if we so desire
10:27to there is one instance I'm going to
10:29add into this scrolling frame that you
10:31probably don't know of yet and you can
10:33basically just follow along what I do uh
10:35in this case but we're basically going
10:36to add in a UI list constraint so let's
10:39hit the plus sign next to scrolling
10:41frame and let's add in a UI list layout
10:45my my apologies that's what it's called
10:46Uh and then what we're going to do is
10:47we're going to take our text label and
10:49we're going to duplicate this over and
10:51over and over and over again until we
10:53reach the bottom of the page so we're
10:56just going to keep on doing this until
10:57we reach the bottom of the page and now
10:59we have pretty much reached the bottom
11:01of the page where this entire scrolling
11:04this entire scrolling frame is just
11:06filled with all of these different text
11:08labels um that we can pretty much see if
11:10we just scroll up and down we can see
11:12all of them but here's an interesting
11:14thing is that if we keep duplicating it
11:16once we reach the bottom of the page we
11:18can no longer see these um elements past
11:22the scrolling size so there's one way we
11:24can um dynamically change the size of
11:28this um of this canvas and that is by
11:31doing two things so the first way we can
11:34do this is by going on the right side
11:36and changing the canvas size directly on
11:38this y uh position here however I don't
11:41recommend this because if we let's say
11:42change the scale of this manually to
11:45let's say three then it's going to
11:47automatically scale uh these elements if
11:51we choose if we chose to have these um
11:54text labels be scaled with its size
11:57rather than offset rather than pixel by
11:59pixel so you didn't see that here but if
12:01we changed the size of these elements to
12:04use scale instead of U size by size
12:07pixels then it would have been a lot
12:08different and it would have been more
12:09confusing to do so what I recommend is
12:12checking this option right here with
12:14this property that says automatic canvas
12:17size so let's open this up and there
12:19should be three options here there
12:21should be X XY and y basically what
12:24these properties mean is that if we
12:26let's say had elements that kept going
12:28up and down and it reached our canvas
12:30size what we would tell Roblox to do is
12:32if we picked y for instance it'll
12:35dynamically increase the size of our
12:37canvas uh depending on how many elements
12:40we have on this um on the scrolling
12:43frame so let's take our uh text label
12:46and let's keep duplicating and as you
12:47can see the scrolling frame is
12:49automatically sizing resizing itself to
12:52fit all of these elements inside of the
12:54screen and we can pretty much do the
12:55same thing with uh the X as well so so X
12:59meaning that if we go from left and
13:00right it's automatically going to uh
13:03resize itself if we reach the end of the
13:05scrolling label so or you could do this
13:08both ways with X and Y together uh if
13:11you so desire to do so and that is
13:13another way of doing it so that is a
13:15little something I wanted to add to the
13:16scrolling frame which I found to be
13:18pretty interesting there's also a couple
13:20customizable things we can do with the
13:22scrolling bar itself like uh change the
13:25image color to something different like
13:27green or I know just anything really uh
13:30we can even change the thickness to
13:32let's say 20 uh we can even change the
13:35transparency to something even harder to
13:37see uh and just like General
13:38customization stuff like that you can
13:40even change the image of uh each part of
13:43this scrolling bar if you really want to
13:45another property that's interesting to
13:46know about is canvas position which
13:48basically tells us which place in the
13:51scrolling are we uh located in right now
13:54so according to this we are
13:561,526 pixels down into the scrolling
13:59frame and if we go all the way back up
14:02then we're going to reach back to the
14:03origin of 0 and zero so because this is
14:06a scrolling frame from top to bottom
14:08it's going to update the Y position uh
14:11every time we go down or go up the the
14:15scrolling frame another thing we can do
14:17to the scrolling frame is make it go
14:19horizontal from left to right instead of
14:21scrolling up and down the way we would
14:23do this is change the canvas size of the
14:26X property over here rather than the Y
14:28property so the canvas size currently is
14:31two for the Y property so if we change
14:33this to zero and we change this x
14:36property to two instead what we're going
14:38to see are two scroll bars because right
14:41now we have it set up so that it'll
14:42automatically size itself based on the X
14:45and Y uh axes so what we're going to do
14:47is we're going to uh select just X so
14:50that now we can't see what's going to
14:52happen on the right side of the screen
14:54so now what's going to happen is that we
14:55have this scroll bar down here at the
14:58bottom that goes from left and right so
15:00if I scroll down technically speaking
15:02then it's going to go to the right and I
15:04can keep doing this forever until we
15:06reach the end of the scrolling frame and
15:09then we can go back over here seeing all
15:11the stuff on the left side of the screen
15:13so it's basically the same principle
15:14it's just now that we're it's just now
15:16we're able to scroll this from left to
15:18right rather than top to bottom so I
15:20think that's another uh important
15:21distinction to know about and of course
15:23if you want to automatically scale the
15:24size of it just be sure that you have X
15:26and Y or just X set to true it doesn't
15:29really matter which one as long as um
15:31you achieve the result that you do want
15:33from this scrolling frame I hope this
15:35video gave you a good understanding of
15:37frames and scrolling frames because
15:39these are definitely one of those uh GUI
15:42gu elements that should be necessary to
15:44know about especially for the future of
15:46your Roblox games when you create more
15:49complicated GUI elements that you may
15:51have to organize and also be smart about
15:54about how you should go about organizing
15:56your game and manipulating G elements
15:59contained inside of uh frames and
16:01scrolling frames that you may use and
16:03that may help you uh later down the line
16:05so if you want to learn about some of
16:07the elements that uh I included inside
16:09of this video like this uh button for
16:11instance then I encourage you to watch
16:13my text button video that I'm going to
16:15have for you right here to watch and
16:17that's pretty much going to be it for
16:18this episode so if you enjoyed it then I
16:20hope to see you in the next episode take
16:23care

About this transcript

This page contains the full transcript of Frame & ScrollingFrame - Roblox GUI Tutorial #7 by BrawlDev, generated from the public captions YouTube serves with the video. The transcript has 3,342 words across 435 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to choose a caption track available on the video.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, caption language selection, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.