YT YouTube2Text

YouTube2Text → Transcripts → Creating the Gamepass Shop Gui! Roblox Studio Simulator Guide Episode 21

Creating the Gamepass Shop Gui! Roblox Studio Simulator Guide Episode 21 — Transcript

by MonzterDEV · 6,249 words · 808 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:00what's going on ladies and gentlemen
0:00welcome back to the simulator series in
0:02today's episode we are going to be
0:03creating the game pass shop gui now as
0:06always if this video does help you guys
0:08out or you do enjoy it make sure you
0:09smash the like button also hit the
0:10subscribe button and turn this post
0:11notifications on if you want to get
0:12notified when i upload more roblox vomit
0:14content additionally i do have a patreon
0:16if you guys like to gain access to all
0:17the scripts and the game file i make
0:19during this episode there's link down
0:20below in description and you guys can go
0:21and check that out with that being said
0:23let's get into it to showcase the exact
0:25guide that we're going to be replicating
0:26today inside of eating simulator we can
0:28look on the right hand side of the
0:29screen and we see we have this red shop
0:32button now when we click it it opens up
0:33with a gui and it has a lot of different
0:35game passes and also developer products
0:38as well so in this episode we're going
0:39to be creating the different displays
0:40with all these different products inside
0:42of them heading back inside of studio
0:44let's start by creating the shop button
0:46so let's open up our starter gui inside
0:48of the bun gui inside of the bun holder
0:50and let's go ahead and duplicate the
0:52settings button we can then rename the
0:53bun to shop and what we're going to
0:55quickly do is we're going to set up the
0:56layout order now as you can see in the
0:58image the buttons are lined up with cell
1:00being on top settings being on the
1:02bottom and shot being somewhere in the
1:04middle so what we want to do to make
1:05sure that they're all displayed
1:06correctly is we want to actually modify
1:08the layout order now the layout order
1:09for the cell button considering that's
1:11going to be the first or the top button
1:13to be displayed we'll be set to zero and
1:15then for settings we actually want to
1:16set the layout order to four because we
1:18want that to be the last button
1:20displayed and then for example cell
1:22would be zero go small would be one shop
1:24would be two and codes would be three
1:26and then that's why settings would be
1:28four so for shop we're gonna set this to
1:30two and now that button is displayed in
1:32the middle what we don't wanna do is we
1:33wanna then resize this a little bit so
1:35it seems like it's the same width as the
1:38cell button and then we want to make it
1:39a little bit taller that might be too
1:41big but you guys can make it however you
1:42want to what we don't want to do is we
1:44want to change the background color to a
1:46nice little red and i have this preset
1:48red right here so that looks pretty good
1:49then if we open up the text button we
1:51can see that we have the icon and the
1:52title what we want to do is we want to
1:54shrink the title down a little bit and
1:55then we also want to set the text to
1:58shop and then also for the icon they
2:00probably use an image label similar to
2:02how they do for the settings but we are
2:03just using a text label instead of
2:05inserting an image so we're just going
2:06gonna find an emoji of a house or like a
2:09shop front and i'm just gonna use this
2:10house emoji because it looks pretty
2:11similar so there we go we now have the
2:13shop bun pretty much created we might
2:15even want to make this just a we might
2:17even want to make the text a little bit
2:19smaller as well and then let's make sure
2:21that we center it so that looks pretty
2:22good let's check in the mobile view and
2:24inside of the mobile view it looks
2:25pretty good but if we see they're
2:26actually spaced significantly apart and
2:29we want to fix that inside of the ui
2:30list layout we can see that we actually
2:32set the offset of the padding and not
2:34the scale so what we want to do is want
2:35to set the scale and i think like
2:37probably 0.05 would be good let's check
2:40this okay there's probably like maybe
2:42point one point one is probably pretty
2:43good i think that actually looks pretty
2:45perfect so there we go we now got the
2:47bun set up now that we have the bun set
2:48up we're done with the buns gui what we
2:50don't want to do is we want to then
2:52duplicate the shop gy that we made quite
2:54a few episodes ago and we're just going
2:55to put that into the starter gui we'll
2:57then rename this to game pass shop and
3:00then let's also enable this so we can
3:01see it now that we have this enabled we
3:03can open up the gui and we're going to
3:04delete both the confirmation and the
3:06shadow frame and now we're just left
3:08with the mainframe itself so we can
3:09delete the info frame we can delete the
3:11by all button and the next page button
3:13and the pages all three of those as well
3:15so now we should just be left with the
3:17exit button the container frame the
3:19category frame and the background frame
3:21which is the background for the
3:22container what we now want to do is we
3:24want to change the background color of
3:26the mainframe to this sort of reddish
3:28color then what we're going to do is
3:29we're also going to set the background
3:31color of the background frame to just a
3:33little bit of a darker version of that
3:35color i think that's pretty good and
3:36then what we're going to do is we're
3:37going to select both the background and
3:39the container frame and we're going to
3:40stretch it out a little bit so that we
3:42can kind of fill in the room or where it
3:44should be and we want to leave a little
3:46bit of room on the left side for our
3:48buttons and i think that's pretty good
3:50then we'll stretch it up a little bit
3:51and we'll stretch it further down so i
3:54think that's pretty good then what we
3:55want to do is inside of the settings ui
3:57inside of the frame we want to duplicate
3:59the subtitle and the title and we want
4:01to drag them into our frame right here
4:04now the reason for that is because if we
4:06see this is positioned and sort of
4:07created perfectly as much as it should
4:09be and all we have to do is adjust it a
4:11little bit so for the title we just need
4:13to adjust the background frame to be the
4:15same red as this one and there we go now
4:18it looks perfect except for the buns
4:20that are right there but we'll move
4:21those in a minute and then of course we
4:22want to change the title text from
4:24settings to shop and then for the
4:26subtitle we want to change this text to
4:28buy these items and become even fatter
4:33and there we go now we have the title
4:34and subtitle set up we can then close
4:36the settings and now we want to look at
4:38the category frame and we actually want
4:40to readjust this a little bit rather
4:41than it being very wide we want it to
4:43more so be tall and look sort of
4:45something like this but don't worry we
4:46will adjust how this actually looks in a
4:48second so for the fill direction we want
4:50it to be horizontal and then for the
4:52cell size rather than stretching the
4:54entire y since we're gonna have four
4:57buns we probably want them to stretch
4:58about .24 so that's like 24th of the way
5:02down and then for the x we can set this
5:04to one because we want them to stretch
5:06fully to the left and the right so now
5:08we can see the buns are coming along
5:09pretty well if we want to make these
5:11bigger we could stretch them out a
5:12little bit more and we do want them to
5:15be underneath of the subtitles so i
5:17think that looks pretty good
5:18additionally what i want to do is i want
5:19to resize this entire frame to make it
5:22just a little bit bigger because i think
5:23they have theirs pretty wide and now
5:26since we did that what we're gonna do is
5:27we're going to reposition this and make
5:29sure that it is centered perfectly so
5:32there we go that looks pretty good i
5:33think what we'll then do is we'll also
5:35move this down just a little bit more so
5:37that looks perfect let's also hit it
5:39with a mobile view real quick so we can
5:40make sure everything's looking good
5:41nothing looks out of place so that's
5:43great now for the category buttons let's
5:45start setting these up so what we'll do
5:47is we'll delete all buttons except for
5:48one and we'll start with this one the
5:50first one that we want to have is the
5:52passes so we're just going to name this
5:53passes then for the category we want to
5:55set the text to passes in all capitals
5:58and then we also want to move this
5:59towards the top as that's where they
6:01have it at so
6:02something like that i think that's
6:04pretty good we could even stretch it out
6:05a little bit wider and let's of course
6:07make sure that we center that just like
6:09that and then for the icon we want to
6:11move this down a little bit further so
6:13probably something like that is probably
6:15pretty good of course they most likely
6:16use the image label but we're just going
6:17to use a text label and we'll just leave
6:19the icon as is for the actual symbol
6:21because realistically this is just a
6:23placeholder the last thing that we'll do
6:24is we'll change the background color of
6:26the passes to sort of a little bit of a
6:28lighter orange so i think that's pretty
6:30good so now that we have passes this is
6:32going to be our first bun what we can
6:33then do is we can duplicate it so now we
6:35have our second bun so we'll just call
6:37it pets for now and we want to set the
6:38category text from passes to ultra
6:41pets so there we go and then we also
6:43want to modify the background color of
6:45this bun to be a purple so i think
6:47something like that is pretty good we
6:49also want to adjust the layout order of
6:51this so from zero to one so that this
6:53always appears below passes we'll then
6:55duplicate the pads button and rename
6:57this to coins we can once again adjust
6:59the layout order from one to two and
7:01then also we'll adjust the background
7:03color to a bluish sort of color so i
7:06think something like that's pretty good
7:07then inside of here we want to adjust
7:09the category text to coins and then one
7:12more time we will duplicate this new bun
7:14and we'll rename this to boosts we'll
7:16set the layout order from two to three
7:18the background color will be a little
7:20bit of a darker orange so i think that's
7:22pretty good and then of course for the
7:24category we want to set that to boosts
7:27now that all looks perfect now we want
7:29to do is inside of the shop folder
7:30inside of the manager we have a template
7:33right here and what we'll do is we'll
7:34duplicate that and put that inside of
7:36our container frame so that we already
7:37have a pre-made template basically what
7:39a template actually is now what we're
7:41going to do with this is we're actually
7:42going to have a container for each
7:44category so we can rename the container
7:46frame from container frame to passes
7:48container and this will be the specific
7:50container for the passes and then once
7:52we finish this we'll also duplicate that
7:54modify for the ultra pets the coins and
7:56boost and then we'll have a container
7:57specifically set up for each of the
7:59different categories so let's go inside
8:01of the template that we have right now
8:02and we don't really need a holder we
8:04could just drag and drop all this stuff
8:06directly into the template and delete
8:07the holder we can also delete one of the
8:09ui corners because we just dragged it
8:11from the other one we can also delete
8:12the viewport frame as well because we
8:14won't be using that we'll also rename
8:15the image label from image label just to
8:18image to make it simpler for us so now
8:20we're going to do is let's set the image
8:22to visible so that we can see whatever
8:23the temporary image currently is we'll
8:25center it as well because we want it to
8:27be in the center actually we probably
8:29should have resized it first but i think
8:31the sizing honestly isn't that bad maybe
8:35we'll just make the image a little bit
8:36smaller and now let's also recenter it
8:38once again so there we go now for the
8:40item name what we're going to do is
8:42we're going to resize this a little bit
8:43just make it a tiny bit smaller so there
8:47we go and then let's also center this as
8:50well that looks great and then we'll
8:51change the text to the first item that
8:53they have in their shop which is
8:54infinite food and additionally their
8:56text seems like they actually do have a
8:58bit of a stroke in there so we're gonna
9:00set the transparency to zero so we can
9:02actually see the stroke and maybe we'll
9:04actually set to like point five so it's
9:05a little bit of a lighter stroke or 0.8
9:08i think 0.7 is pretty good it's like a
9:10light stroke you can't really see it too
9:11much and that's how they have it now
9:13rather than calling this item name we'll
9:14just call this title and then we'll
9:16duplicate this and we will just bring it
9:18down a good amount so probably like
9:21right there i'd say maybe we make it a
9:24little bit bigger and then we are going
9:25to rename this to price and we'll set
9:27the text of this to
9:30799 space r dollar sign and that's
9:33exactly how they have it then we just
9:34want to change the text color from white
9:36to a lightish green so i think something
9:39like that's pretty good now the final
9:40thing that we want to do is inside of
9:42the template we want to add a ui
9:44gradient to this so that we can adjust
9:46the background color now for the
9:47template background color we're gonna
9:49set this to white so that we can easily
9:51modify with the gradient that's what
9:52we're using the gradient for is actually
9:54to modify the background color and
9:55you'll see how we're doing that in a
9:56second if we look at how they have their
9:58game passes set up in the shop it looks
10:00like the top of the item template is red
10:03and then it transitions to a yellowish
10:05color so what we're going to do is on
10:06the left side of our ui gradient we're
10:08going to change the color to that
10:10reddish color that we want so i think
10:11like that and then on the right side we
10:13are going to change it to sort of a
10:16yellowish color i think like that maybe
10:20like an orange i think that looks pretty
10:21good then let's click in the middle and
10:23drag the slider down further which means
10:25that the red is a little bit more
10:26dominant than the orange and then we'll
10:29close that and now for the rotation we
10:31want this to be 90. so now we can see
10:33the red at the top and that transitions
10:35to the orange but it doesn't look
10:36exactly how they have it so what we'll
10:38try to do is maybe drag this back a
10:40little bit further kind of something
10:42like that i don't know it's a little
10:43hard to get it perfectly right and make
10:46sure it blends all correctly i'm not
10:48great with colors and stuff like that
10:49but i still think that looks decent i
10:51don't think it's exactly how they have
10:53it but i think it's enough to show you
10:54as an example of how you can use the ui
10:56gradient to adjust the background color
10:58so if you guys want to make it
10:59differently you guys certainly can the
11:01same goes for the image as well this
11:02image is simply just a placeholder they
11:04have a circular image rather than this
11:06big kind of ugly square looking image
11:08the final thing that we want to do is we
11:10want to delete the equipped text label
11:11inside of here because we're not going
11:13to be using it and now we're pretty much
11:14done with the template for the passes at
11:17least let's go ahead and duplicate this
11:18template a couple of times and see how
11:20it fits in the shop so in their shop
11:22they have nine items displayed at once
11:24three in each row and that's how ours
11:26looks now if we wanted to adjust the
11:28size at all like if we wanted them to
11:30look a little bit taller what we could
11:31do is instead of this being set to 0.134
11:34we could set this like 0.15 and now we
11:36can see they all look a little bit
11:37taller of course if we wanted them to be
11:39a little bit thinner we could set this
11:40from point 32 to point three and then
11:42rather than having this align on the
11:44left side we could also align it in the
11:46center and now that looks pretty good as
11:48well i'm not going to do that because i
11:49honestly think these all look good as
11:51they already are so i'm not going to
11:53make any adjustments to the grid layout
11:54but i'm just showing you guys for
11:56example if that's what you wanted to do
11:57you certainly can now that we're done
11:59with the passes container we're then
12:00going to create the ultra pets container
12:02so we're going to duplicate the passes
12:03container we'll set the visibility to
12:05false and then we'll rename one of the
12:06passes container to pets container now
12:09the pets are certainly a little bit
12:10different so we are going to adjust the
12:12ui grid layout now for the pets we want
12:14two pets displayed in each row so we can
12:16set this to be about point 47 maybe so
12:19that's pretty wide let's also duplicate
12:21one of these templates so we can just
12:22see how they look let's actually
12:23duplicate four so we can see how four of
12:26them look what we can then do is we can
12:27then increase the y from point one three
12:30four point one nine i think is perfect
12:33what we could also do if we wanted to we
12:35could make these a little bit thinner so
12:37like 0.4 for example and then we could
12:39also center them as well it really all
12:41depends on how you guys want to set up
12:42your shop i think this looks perfectly
12:44fine so if you guys want to copy my
12:46properties for the cell size and the
12:47cell padding that's what we're going to
12:49be using for the pets container so for
12:50the pets template we're going to open up
12:52the template for the pets they don't
12:53really have a specific title what they
12:55do actually have though are the stats
12:57displayed at the top left corner of each
12:59pet so we'll rename title to food stat
13:02and we'll set the text to our food emoji
13:05times
13:07100.0k and that's exactly how theirs
13:09looks and then we'll kind of stretch it
13:11to be the top right corner how they have
13:13it as well we'll duplicate this and we
13:15will rename it to moneystat and we'll
13:17set the text of this from food we'll
13:20just change the food icon to our money
13:22icon just like that and then we just
13:24want to move it a little bit further
13:25down so i think setting the position to
13:270.2 on the scale looks pretty good if we
13:29check on mobile they don't overlap or
13:31anything so that looks perfect now for
13:32the image the image does display
13:34underneath of the stats like the pet is
13:37literally overlapped by the stats so
13:39this doesn't look good to me and
13:41especially doesn't look good because of
13:42the actual image itself but that is how
13:45they have it i think we just might want
13:46to adjust the size of the image a little
13:48bit so it doesn't hang down so low then
13:50for the price what we'll do is we'll
13:52make this a little bit smaller as well
13:54but we'll drag it towards the bottom and
13:56then we'll make it a little bit smaller
13:58and let's make sure that we position
13:59this in the center so just like that
14:01then for the background color we're
14:02going to set the transparency to zero
14:04and we are going to set the background
14:06color to sort of like a gray but maybe
14:08just a little bit darker so i think that
14:10looks good and then for the text we'll
14:12set this to 19 underscore 900 space rs
14:16then that looks just like how theirs is
14:18and then i don't think they have any
14:20stroke on this so we're going to make
14:21the stroke completely transparent so
14:22that we can't see it so i think that
14:24looks good but i really feel like we
14:26need to expand this so that it's just a
14:28bit taller so we'll try to set this like
14:30.25 and i think even that looks better
14:33additionally i don't think we want it as
14:35wide so we'll set that to like point 45
14:38and now we want to readjust the stats a
14:40little bit so we'll just make them a
14:41little bit longer horizontally and i
14:43think actually i mean they actually
14:44stretch out pretty far i didn't even
14:46realize and then let's set the alignment
14:49from center to left for the x alignment
14:52and that looks good and then for the
14:53image we might want to even stretch this
14:55up a little bit taller i don't know how
14:57you guys are feeling but if you guys
14:58have pet images you can obviously change
15:00or stretch the image however large you
15:02want it to be additionally we're going
15:03to adjust the gradient a little bit
15:05we're going to make our gradients just a
15:06little bit simpler so we're going to
15:08delete the middle color and we're going
15:10to set this side to a little bit of a
15:12darker white and then the first color
15:14which is the red right now we will set
15:16this to a complete bright white and
15:19that's kind of how their gradient is
15:21they have a gradient set for each pet
15:23which we'll also do and i'll show you
15:24guys how to do now the final thing that
15:26i realized is for the background color
15:28this actually has a border size pixel of
15:30one we want to set that to zero so there
15:32is no border pixel at all i almost
15:34forgot about that and we did catch that
15:35luckily additionally for the food stat
15:37and the money stat it looks like their
15:38stroke is pretty large so we want to set
15:41the transparency of that to zero so it
15:43stands out completely let's go ahead and
15:45duplicate the template a couple of times
15:46so that we can see how it looks and
15:48although it doesn't look exactly like
15:49how theirs is where four is displayed at
15:51once it still does look pretty good in
15:53my opinion and of course you can adjust
15:54the ui grid layout to make a display
15:56however you really want to so let's go
15:58ahead and delete all those templates and
15:59we're good with that next we're going to
16:01create the coins container and what
16:02we're going to do is we're going to set
16:04the visibility of the pest container to
16:06false and we're going to duplicate the
16:08passes container because the passes
16:09container is very similar to the coins
16:12container so we're going to rename
16:13passes container to coins container and
16:15then we're going to set the visibility
16:16to true for this so inside of the coins
16:19container let's open up the template and
16:21all we're going to do is adjust the
16:22title text from infinite food to plus
16:25276.4 k space coins and now that looks
16:28good and we'll also adjust the price
16:30from 799 to 79 rs exactly like that and
16:34i think that's all good the only other
16:36thing that we might want to do is maybe
16:37we want to resize the image just a tiny
16:39bit like it looks like their image is
16:41not being overlapped by any of the text
16:43and it looks like it's rather small so
16:45something like that and let's also make
16:47sure that we center it so boom just like
16:50that i think that's pretty good maybe we
16:51even moved the price down just a little
16:54bit so like that and there we go that's
16:57pretty much all that we needed to do
16:58let's duplicate the template a couple of
16:59times so that we can make sure okay it
17:01looks like we're just playing about nine
17:03at once so that looks all good and then
17:04we can set the visibility of the coins
17:06frame to false now the last container
17:08that we need to create is the boost one
17:10so we're gonna duplicate the coins
17:11container we'll rename this from coins
17:13container to boost container we'll set
17:15the visibility to true now configuring
17:17the boost template this is probably
17:19going to be the most dynamic one that
17:20we've made so far currently we can
17:22delete price label because we're not
17:23going to use that one then for the image
17:25we want to resize it a little bit and we
17:26want to position it towards the left
17:28side of the screen and it mostly takes
17:30up the bottom left half sort of
17:32something like this i would say then for
17:34the title we want this to take up about
17:37half of the space as well something like
17:39that probably and we're gonna set the
17:41title to times five luck we then want to
17:44add a frame inside of here and we're
17:46going to rename this to status and then
17:49for the size we want to set that to
17:51scaled and we pretty much just want to
17:53position it very similar to how we have
17:56the title set up but it'll go from sort
17:58of the center of the screen towards the
18:00right side so that is pretty good we're
18:03gonna duplicate the ui corner from the
18:05template and put that inside of the
18:06status and we'll change this from point
18:08one to maybe point three that looks
18:10pretty good and then the background
18:12color of this we want to be a greyish
18:14color so that looks good now finally we
18:17need to add a text label inside of there
18:18so what we're going to do is we're going
18:19to duplicate the title text label and
18:21we're going to set the position to zero
18:23and for the size it is going to stretch
18:25the entire width and height and then the
18:27actual text itself is going to be not
18:30owned and it's not going to have any
18:32stroke so we're going to set the
18:33transparency of the stroke to one and it
18:35will also rename the text label from
18:37title to status as well we could resize
18:40this a little bit more if we for
18:41instance say want this to be a little
18:44bit smaller and we want the status to be
18:47a little bit dragged out something like
18:50that that could work too additionally
18:52let's modify the ui grid layout real
18:54quick so rather than being 0.32 we'll
18:56make it like .45 and then the height is
18:59probably honestly fine i don't think we
19:00really need to adjust that let's
19:02duplicate the template twice three four
19:04times and that all looks pretty good i
19:06think for this though instead of it
19:07being aligned horizontally to the left
19:09we want to horizontally align into the
19:11center and we could even make them a
19:12little bit larger too if we wanted to
19:14like four seven five that makes it even
19:16bigger i think that's a pretty good size
19:18right there so then let's just go ahead
19:19and delete all those other templates and
19:21just leave this one now for this the
19:22background color actually seems to be
19:24one whole color it doesn't seem like it
19:25uses a gradient so we're going to delete
19:27the gradient and then just set the
19:28background color to a green like that
19:31additionally for the title the stroke
19:32transparency seems to be zero so we're
19:34going to set that accordingly and also
19:36the text alignment seems to be left the
19:38line for the x and not centered now
19:40we're going to duplicate the status
19:41frame and we're going to rename this one
19:42to prices and then what we'll do is we
19:45will drag it down mostly towards the
19:47bottom and i think that's pretty good
19:49now for the background transparency
19:50we're going to set that to 1 because we
19:51don't want to see the background at all
19:52we'll also remove the ui corner as well
19:54and then what we're going to actually do
19:55is we're going to add a ui grid layout
19:57to this and we'll also add in another
20:00frame so what i'm going to do is i'm
20:01going to duplicate the prices frame put
20:03that directly inside of here remove this
20:04grid layout and we'll also delete the
20:06status text label as well and we're
20:07going to rename prices to 10. and we'll
20:09see why in a minute so this might be a
20:10little bit confusing but this is what we
20:12have inside of the template we have the
20:13prices frame with the uh grid layout
20:15inside of it and then also another frame
20:17named 10 and then inside of that we have
20:19status which is a text label for the ui
20:21grid layout what we're going to do is
20:23we're going to set the cell padding just
20:24to zero for right now now for the cell
20:26size we want it to stretch entirely
20:28through the x and then about 0.28
20:30through the y so now we're going to
20:31rename status from status to duration
20:34and the text is going to be
20:3610 mins and now let's see the size of
20:39this so rather than it being the entire
20:41x we want it to be about 0.5 probably so
20:45maybe like 0.48 we'll see how it goes we
20:48might even stretch it out a little bit
20:49more then we want to actually add a text
20:51button inside of here and then let's
20:52just set the size to scale and then we
20:54want this to go on the right half of the
20:57frame so something like that looks
20:59pretty good and we're going to set the
21:00background transparency of this to like
21:02a pretty bright even brighter green
21:04although those greens seem the exact
21:06same so we're gonna actually change this
21:08to be i guess just a little bit of a
21:09darker green so it's easier to see then
21:12we want we don't want any border on this
21:13so we'll set that to zero for the text
21:15we don't want any text to be displayed
21:17inside of there and then we also want to
21:18add a ui corner to that as well so we'll
21:20duplicate the one from our template and
21:22put it in there as well we'll set this
21:23like point three so that looks good and
21:26then we'll copy duration put that inside
21:27of the text button and then for the size
21:29we are going to stretch it to the full
21:31size of the button and we're going to
21:33set the text to 149. now that looks
21:36pretty good so we'll rename this text
21:38label from duration to price and we'll
21:40also rename the button to buy
21:43additionally for the duration we
21:44actually want the stroke to be pretty
21:46visible so we're gonna set that to zero
21:48and that looks pretty good what we're
21:50then gonna do is we're gonna stretch out
21:52the prices a little bit further towards
21:54the left so i think that looks great and
21:56we'll also stretch it out a little bit
21:57further towards the right so that looks
21:59pretty good now that we have that we're
22:01going to duplicate the 10 frame and see
22:03how it gets placed next so we want to
22:04modify the ui grid layout and we want to
22:06actually modify the padding at least for
22:08the y a little bit so we'll try like
22:10point one i think a little bit smaller
22:12would be even better so 0.05 i think
22:15that's good enough so we'll try that for
22:16now let's add three and okay that looks
22:18pretty perfect so yeah we got the
22:19padding all down which is great then for
22:21this next frame instead of it being
22:22called 10 we'll call this 30 and then
22:24what we want to do is we want to adjust
22:26the price of this to be
22:29399 and we want the duration to be 30
22:32minutes then finally we'll duplicate
22:34this one more time and we'll set this to
22:3660 and then once again we're going to
22:37change the price from 399 to 699 and the
22:41duration will be one hour so there we go
22:44we now have that all set up if we wanted
22:46to we could stretch the status a little
22:48bit further towards that direction and
22:50then we also could round its corners a
22:52little bit more so 0.4 and then we kind
22:55of had the text sticking out a little
22:56bit so what we'll do is we'll decrease
22:58the size of this 2.8 and then we'll also
23:01make sure that we center it so there we
23:03go now that looks pretty good let's also
23:05hit this with a mobile view to make sure
23:06everything looks good which it all does
23:08perfect except the only thing that
23:09doesn't actually look good is the
23:11category frame so inside the ui grid
23:13layout i thought i fixed this but maybe
23:15i didn't or maybe the changes didn't get
23:16saved so for the padding we're going to
23:18set this to scale for the x it doesn't
23:21really matter before the y will try
23:22point one for right now that's too large
23:24so we'll try 0.05 that's still too large
23:280.015 i think 0.015 is actually perfect
23:31let's take a look at this from the pc
23:33view that looks perfect so there we go
23:35we're done with the category frame now
23:36let's go ahead and duplicate this like
23:37two or three more times and now we see
23:39all these are laid out and they all do
23:41look pretty good i don't see anything
23:42wrong with them and i think they are
23:44actually pretty perfect now the final
23:45thing that we actually need to do is we
23:47actually want to convert this text
23:49button into a frame and we should be
23:51able to easily do that by creating a
23:53frame and just taking everything from
23:54inside of that button pasting it into
23:57there and then deleting the button and
23:58then of course we also need to change
24:00the background transparency to a we're
24:02just going to set it to a dark green
24:04like that and that looks pretty good we
24:06also might just honestly want to align
24:07the text centered and we also want to
24:09make it a little bit smaller so that it
24:10doesn't overlap the status at all and i
24:12think that's pretty perfect so let's
24:14quickly go through and view all of our
24:16containers once again so we have the
24:18booster container which is done let's go
24:19ahead and check out the coin container
24:21which also looks pretty perfect so we're
24:22done with that then we have the pets
24:24container which also looks all perfect
24:26and then finally we have the passes
24:28container as well which also looks
24:29perfect too so with that being said
24:31ladies and gentlemen that's gonna be it
24:32for this episode in the next episode
24:33we'll start actually scripting the gui
24:35hopefully this video did help you guys
24:37out as always if you did make sure you
24:38smash the like button also hit the
24:39subscribe button and turn this post
24:40notifications on if you want to get
24:41notified when i upload more roblox
24:43development content additionally i do
24:44with patreon if you'd like to support me
24:46and gain access to all the scripts and
24:47the game file that i made during this
24:49episode there's a link down below in
24:50description and you guys can go and
24:51check that out with that being said i
24:52hope that you guys have a great day and
24:54i'll see you guys in the next episode

About this transcript

This page contains the full transcript of Creating the Gamepass Shop Gui! Roblox Studio Simulator Guide Episode 21 by MonzterDEV, generated from the public captions YouTube serves with the video. The transcript has 6,249 words across 808 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.