YT YouTube2Text

YouTube2Text → Transcripts → Creating a Settings Gui! Roblox Studio Simulator Guide Episode 19

Creating a Settings Gui! Roblox Studio Simulator Guide Episode 19 — Transcript

by MonzterDEV · 3,530 words · 462 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:00hey what's going on this gentleman
0:01hopefully have a great day welcome back
0:02to the simulator series in today's
0:03episode we are going to be creating a
0:05settings gui and in the next episode
0:07we're going to be scripting it so that
0:08you can add settings to your simulator
0:10as always if you guys do enjoy the
0:12episode or it does help you guys out
0:13make sure you smash like button also the
0:14subscribe button and turn this post
0:15notification on if you want to get
0:16notified when i upload more roblox
0:18development content additionally i do a
0:20patreon if you guys like to support me
0:21and gain access to all the scripts and
0:22the game file that i make during this
0:24episode there's a link down below in the
0:25description and you guys can go and
0:26check that out with that being said
0:27let's get into it so to quickly showcase
0:29the feature that we're going to be
0:30making today when we join eating
0:31simulator we can see that they have a
0:33settings gui button on the right hand
0:34side of the screen and when you click
0:36this this pops up with a little menu
0:38that says settings it has a little
0:39subtitle here change these settings to
0:41have more fun and then it has a couple
0:42of settings listed right here once you
0:44click on the button that'll change from
0:46on to off and then that will say disable
0:48the pop-ups or disable the music and
0:50then you can also click off to turn it
0:51back on and that's exactly how it works
0:53and that's what we'll be creating today
0:55so hopping back in roblox studio let's
0:56go into our starter's ui and look inside
0:59of the bunch gui as this is where we
1:01store all of our on-screen buttons
1:03inside of the button holder we currently
1:04have the cell button let's go ahead and
1:06duplicate this and rename this to
1:08settings now if their bun setup was just
1:10one word we could easily just change
1:12this text from cell to settings but they
1:15actually have a little gear icon with
1:16the word settings underneath of it so
1:18it's gonna be slightly more complex what
1:20we're gonna do is we're actually going
1:21to set the text to blank so there won't
1:24be any text displayed directly inside of
1:26this button we also want to resize it a
1:28little bit so we want it to be a little
1:29bit thinner and we'll kind of just
1:31increase the size a little bit something
1:33like that i don't think that's too big i
1:35think that's actually pretty good we
1:37also want to align this to the right so
1:38if we look inside of the ui list layout
1:40we can look at the horizontal alignment
1:42and we can set this to the right and now
1:44that box will be set directly to the
1:45right hand side we also want to change
1:47the background color of this so instead
1:49of it being green we want this to be
1:51some sort of gray so let's put it
1:54something like that and let's also add
1:55to custom colors so that we can reuse
1:57this color later because that's going to
1:59be the same color as that little
2:00settings menu that we're going to open
2:02so now that we got both of those what we
2:03then want to do is we want to add in a
2:05brand new text label we can call this
2:07text label the icon and set the text of
2:09this to the actual gear icon they most
2:11likely use an image label to set up
2:13their gui but since we're making this
2:15simple we'll just be using a gear emoji
2:17instead so now that we rename this what
2:18we want to do is we want to set the
2:20background transparency to one so it's
2:21completely transparent then we wanna
2:23make sure that the text is set to the
2:25gear icon like we have right there we
2:27also want to enable scaled so that it
2:29increases the size we also wanna modify
2:31the size as well we'll set the x to one
2:34so that it stretches the entire width
2:35and then we probably want the height to
2:36be like .5 and then comma zero so that
2:39stretches about halfway through we then
2:41also want to set the position as well we
2:43don't really have to move this too much
2:45we're just gonna move it down on the
2:46y-axis a little bit we'll set this to
2:48about point one two and that looks
2:50pretty good what we then want to do is
2:51we'll duplicate this icon text label and
2:54we'll rename this to title let's then
2:56set the text of this two settings and we
2:59want the text color to actually be white
3:00we'll also change the font from source
3:03sans to gotham black or bold i think
3:06i'll go with black here and then for the
3:07position we're gonna want point five so
3:10that it's halfway down and then for the
3:12size we want to stretch across the
3:13entire x-axis so one is fine and then
3:16we'll probably make this a little bit
3:17bigger so like 0.58 and now that looks
3:20pretty good if we look at the mobile
3:21view we can see that the corners are
3:22really weird it actually looks like a
3:24circle right here and the reason for
3:25that is because the ui corner we
3:27actually forgot to set this to scale and
3:28currently it's an offset so what we're
3:30going to do is we'll set this to point
3:32two comma zero and that actually looks
3:33pretty good maybe we want it to be a
3:35little bit more curved so like .25 and
3:37now if we look at it again we can see
3:39that looks a little bit better
3:40additionally maybe we want the title to
3:42be a little bit smaller so something
3:45like that and then let's center it once
3:46again so 0.5 and then 0.5 for the anchor
3:50point and there we go that's centered
3:52and i think that actually looks perfect
3:53the only thing that i think we want to
3:54do is maybe pick a little bit of a
3:56brighter gray for this because it seems
3:58like that's what they have so i think
4:00this gray is pretty good and we'll also
4:01make sure that we add that to the custom
4:03color as well additionally before we
4:05forget let's go inside of cell and
4:07adjust this ui corner to be scaled and
4:09not offset so let's just try 0.25 comma
4:120 and that actually literally looks the
4:14exact same so if we look on mobile view
4:15again that looks perfect so i think
4:17that's pretty good now the button is
4:18pretty much finished and like i said
4:20we'll do the scripting on the next
4:21episode we'll just be creating guise in
4:23this episode what we're now going to do
4:24is we're now going to create the actual
4:25frame which holds and displays all the
4:27settings so let's go ahead and duplicate
4:29our max food gui and we'll rename this
4:31to settings and let's also enable this
4:33as well now we want to do is we want to
4:35delete the extra frame right there we
4:37then want to change the background color
4:39of this to the same gray color that we
4:40were using before so that one right
4:42there let's rename the notification
4:44frame right here to frame then we can
4:46delete the shot button because we are
4:47never going to use a purple bun but
4:49we're going to keep the cell button as
4:50this is pretty similar to the on button
4:52we just got to change the background
4:53color a little bit rename it and change
4:55the text and we'll leave the message and
4:56title for right now and now we're gonna
4:58do is we're actually going to increase
5:00the size of this frame because their
5:02settings frame is pretty big so i think
5:04that's decent what we're then gonna do
5:06is we'll center it real quick so 0.5 and
5:090.5 there we go just like that i think
5:11that's pretty good then what we're going
5:12to do is we're going to add a brand new
5:13frame and we're going to call this title
5:15and then we will set the size of it to
5:180.5 comma 0 comma 0.5 comma 0 so that
5:20it's scaled and what we want to do is we
5:22want to center this because we're
5:23basically recreating where on their gui
5:25it says settings which is going to be
5:26the title so i think that looks pretty
5:28good it does stick out a good amount on
5:31the top i'd say it's more than halfway
5:33so something like that i think that is
5:35pretty perfect let's make sure that it
5:37is a hundred percent centered so
5:39position point five comma zero and then
5:41change this to point five as well but
5:43don't touch the y at all okay now is
5:45perfectly centered which is great let's
5:46then drag the title text label inside of
5:48here and also change the background
5:50color of this to the same background
5:52color that we have here so just like
5:54that now it's the same color and we also
5:56want to add a ui corner into here as
5:58well so that it's curved a little bit we
5:59want to make this a little bit bigger i
6:01think point four should be good so yeah
6:03that looks pretty good then for the
6:04title what we want to do is we'll just
6:06set the size to the max and then we'll
6:08set the text to settings and let's
6:10change the position to zero zero zero
6:13zero zero zero and there we go that
6:16looks pretty good i think we might wanna
6:17make the text just a little bit smaller
6:20so something like that i think would be
6:22pretty good and now i guess let's go
6:24ahead and re-center the text so there we
6:26go it's now re-centered and that looks
6:27pretty good we're now done with the
6:28title let's rename the text label
6:30message to a subtitle because that's
6:32what this is pretty much going to be and
6:33this is going to say change these
6:35settings to have more fun exclamation
6:38mark there we go and now let's drag this
6:41up here a little bit it's going to be
6:42right under our settings title and i
6:45think that's actually pretty perfect
6:48maybe we'll make it a little bit larger
6:49something like that then of course we
6:51want to center it so 0.5.5 there we go
6:54that's centered and that looks all good
6:56we're then going to do is let's make
6:57this not visible for right now then
6:59we're going to duplicate the title frame
7:01and we are going to rename this from
7:03title to container and then we're
7:05actually going to delete the title text
7:07label that's inside of there and then
7:08we're going to change the background
7:10color from this gray to just a little
7:12bit of a darker gray probably something
7:14like that and then we can also add it to
7:18the screen color so there we go then
7:19what we're going to do is we want wow
7:21that the corners are scaled massively so
7:23we're probably definitely going to
7:25adjust this we want it to be pretty
7:27large and we need to adjust this ui
7:28corner because wow that is gigantic so
7:30point one that probably is what we're
7:32going to go with let's go ahead and
7:34expand it just a little bit more so i
7:37think that is pretty good now let's go
7:39ahead and center it so 0.5.5
7:420.5.5 and there we go that's pretty good
7:45maybe we bring it down just a little bit
7:47more like that we can also expand it on
7:50the sides a little bit too if that's
7:52what we want to do let's center the x
7:54again and that looks pretty good i think
7:56this gray is actually just a little bit
7:58darker so i think that's the gray that
8:01we should actually go with and that's
8:02what i'm gonna do and that'll be the
8:04final time we change the color now that
8:05we have that inside of the container
8:07we're gonna add a brand new scrolling
8:09frame and then of course we want to make
8:10the size scale so point five comma zero
8:12comma point five comma zero there we go
8:14and the background transparency is gonna
8:16be one because we want to be completely
8:17transparent the border size pixel should
8:19be zero so that we can get rid of that
8:21little line right there the scroll bar
8:23thickness we probably wanna make that a
8:24little bit smaller maybe six yeah that's
8:26probably pretty good and then we also
8:28want to make this a decently brightish
8:30gray so i'm just gonna go all the way up
8:32and that looks pretty good then we want
8:34to resize this to fit within this
8:37container so let's do something like
8:41that i think that is pretty good and
8:43then let's also center this as well so
8:46point five comma point five point five
8:48comma zero comma point five comma zero
8:50and that looks pretty good we'll also
8:52rename this scrolling frame to container
8:54so container is inside of container that
8:56might be a little confusing you guys can
8:58name it differently but you'll see why
8:59in the next episode when we're scripting
9:01this why we're naming a container you
9:02might also be wondering why did i create
9:04a frame to hold this scrolling frame the
9:06reason for that is because if you put a
9:07ui corner inside of a scrolling frame it
9:10doesn't actually affect it we can test
9:11this out by setting the background
9:12transparency of the scrolling frame to
9:14zero drag the ui corner into there and
9:16we can see that there is absolutely no
9:19effect on this at all so that's why we
9:21have the scrolling frame inside of
9:22another frame that has the ui corner in
9:24it so that we can make those edges curve
9:26next we're going to add a frame inside
9:29of the container and this is going to be
9:30called template and then we also want to
9:32get a ui grid layout added inside of the
9:35container as well now for the cell
9:37padding we're just gonna set this all to
9:38zero for right now the cell size we want
9:41the x to be point nine comma zero comma
9:45point two comma zero we'll see how big
9:47that is okay so that's pretty big so
9:48we'll we'll actually shorten that but
9:50what we then want to do is we want to
9:51set the horizontal alignment to center
9:53so that's in the center and then back to
9:55the cell size we want to make the y
9:57probably like point one i think that's
9:59pretty good maybe we'll make that like
10:00one two five and i think that actually
10:03might be perfect so we'll leave it at
10:04that next we're gonna copy this ui
10:06corner and put that into this frame
10:08right here so now it's curved a little
10:09bit we probably want to make it a little
10:11bit more curved so we'll set this to
10:12like point two and i think that's pretty
10:14good additionally we could even increase
10:16the cell size from like 0.9 to 0.95
10:19depends on how you guys really want it i
10:20think that looks good next we're going
10:22to set the background color of the
10:23template to this lighter color right
10:26here which seems to be the same color on
10:28the outside border now we're going to do
10:30is let's go inside of the title frame
10:31and copy this title right here drag it
10:33into the template and then let's resize
10:35this so let's put it to about like right
10:38there it seems like this mostly
10:40stretches on the upper half of this
10:42frame right here and then let's set the
10:44alignment from center to left so that it
10:47goes to the left and that looks good
10:48let's also change the font because this
10:50shouldn't be gotham black maybe gotham
10:53or
10:53gotham bold but i think it probably
10:56would just be gotham and let's also
10:57change the text to one of their settings
10:59so pop-up effects there we go that looks
11:02pretty good then we'll duplicate this
11:04and rename this to description and this
11:07will be the bottom half of this so
11:10like that will be probably pretty good
11:12and then we can also drag this out
11:13pretty far as well then what it's going
11:15to say is disable the pop-up effects for
11:20coins and food this is just temporary
11:22you guys don't want to fill this out i
11:23just like to add the text so that we can
11:25actually see what this should look like
11:27if the text is long so we could make
11:30this a little bit smaller and then we'll
11:32make the title a little bit larger so
11:35drag that down that looks pretty good we
11:37could even drag it out further if we
11:38wanted to check on mobile it all looks
11:40pretty good that's all scaled properly
11:42and everything so that's great then the
11:43final thing that we want to do is let's
11:45drag the cell bun inside of the template
11:47and then we want to make it visible
11:49because remember we made it not visible
11:50in the beginning resize this so that it
11:52looks like their bun i think that's
11:54pretty good you can make it a little bit
11:55smaller bigger it doesn't really matter
11:57and then let's also make sure that we
11:58center this as well so 0.5.5
12:02that looks great we'll then rename this
12:04from cell bun to just button it really
12:07doesn't matter you can name whatever you
12:08want to and then we're going to change
12:10the color from that green to a much
12:12brighter green i'd say maybe a little
12:15bit darker so i think that's good and
12:16then let's also change the text from
12:18cell to on sweet so that looks exactly
12:21like how they have it now we're then
12:22going to do is we'll duplicate this
12:24template by hitting ctrl d and now we
12:26can see we need to add a little bit of
12:27space inside of here so inside of the
12:28cell padding we're going to actually set
12:30the y and make sure that you adjust the
12:32scale to 0.01 for right now that's
12:35almost perfect maybe just a little bit
12:37bigger so
12:380.015 that looks like perfect spacing
12:40between them so now on their settings
12:42they have four settings let's see if we
12:44duplicate this we have three four so
12:47only three currently fit inside of here
12:48what you guys could do is you could
12:50adjust the cell size if you want to have
12:52more fit on one screen so instead of
12:54like 0.125 we could make this like just
12:570.1 per se and now 4 fit on the screen
13:00and that actually does look pretty good
13:01so maybe we'll do that but you can keep
13:03duplicating this and see how many you
13:04can actually fit onto here if you want
13:06to fit more what you could do is you
13:07could either adjust the cell size or
13:09inside of the scrolling frame you can
13:11also adjust the canvas size property so
13:14the canvas size property currently it's
13:15two what we could do is we could expand
13:17this to four that will make all this
13:19larger but we then go back to the grid
13:21layout and adjust the y size from 0.1 to
13:23like .05 per se and then that's pretty
13:26similar to how we just had it maybe we
13:27even want to make it a little bit
13:29smaller too we could say 0.25 that's way
13:31too small maybe 0.04 that looks pretty
13:34good but we also have to adjust the
13:36spacing as well so there we go it all
13:38depends on what you guys want to do i'm
13:39going to go back and i'm just going to
13:41undo all these templates real quick and
13:43just go back to where we only had one
13:44and now we have the whole gui completely
13:46made what we're then gonna do is with
13:48this template the reason that we didn't
13:49add all the settings directly into this
13:51get is because rather than adding each
13:53setting individually we're gonna be
13:55doing that with scripting and make it
13:56way easier and way more robust so
13:59anyways ladies and gentlemen with that
14:00being said i hope that you guys did
14:01enjoy the episode and hopefully it did
14:02help you guys out if it did as always
14:04make sure you smash the like button also
14:05subscribe button and turn this post
14:06notifications on if you want to get
14:08notified when i upload more roblox
14:09development content additionally i do
14:11have patreon if you guys like to gain
14:12access to all the scripts and the game
14:13finally made during this episode there's
14:15a link down below in the description and
14:16you guys go check that out with that
14:17being said i hope that you guys have a
14:18great day and i'll see you guys in the
14:20next episode

About this transcript

This page contains the full transcript of Creating a Settings Gui! Roblox Studio Simulator Guide Episode 19 by MonzterDEV, generated from the public captions YouTube serves with the video. The transcript has 3,530 words across 462 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.