YT YouTube2Text

YouTube2Text → Transcripts → Creating the Pet Inventory Gui! Roblox Studio Simulator Guide Episode 26

Creating the Pet Inventory Gui! Roblox Studio Simulator Guide Episode 26 — Transcript

by MonzterDEV · 4,844 words · 618 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:00hey what's going on ladies and gentlemen
0:01in today's episode of the simulator
0:02series we are going to be creating the
0:04pet inventory gu as always if you guys
0:06do enjoy the episode make sure you smash
0:07like button also hit the Subscribe
0:08button and turn those post notifications
0:10on if you want to get notified we upload
0:11more Roblox fing content additionally I
0:13have a patreon if you guys like this for
0:14me and access to all the scripts and the
0:16game file that make during this episode
0:17there's link down below description and
0:18you guys can go and check that out with
0:20that being said let's get into it to
0:21showcase the GUI that I'm referring to
0:23let's hop into eating simulator and we
0:25can see that we have this little button
0:26on the left hand side of the screen that
0:28says pets when we click on this we can
0:30see a new GUI pops up which is our pet
0:32inventory so up here we have the title
0:33which says pets and then a little
0:35subtitle which says equip C pets for
0:36multipliers then we have some
0:37information displayed right here so we
0:39have how many pets we currently have
0:40equipped if we unequip a pet that number
0:42changes or if we equip a pet that number
0:44also changes we also have a plus button
0:46which will allow us to purchase Game
0:47Pass for equipping additional pets we
0:49also have the storage information here
0:50as well so currently we have nine out of
0:5250 allowed stored pets and of course if
0:54we click the plus button we also get the
0:56option to purchase another game pass for
0:58this as well we also have a button on
0:59the right hand side of the screen which
1:00says multi- delete and when we click on
1:02this we can click and select basically
1:04all the pets that we want to delete and
1:05if we click confirm all of those pets
1:07will be deleted additionally we can see
1:09that we have all of our pets here the
1:10ones that are equipped have a green
1:11check mark if we click on the pet we can
1:13see that some information pops up right
1:15here such as the name the Rarity and the
1:17stats that it offers as well as an
1:18unequip and an equip bun if it is not
1:21equipped already and we also have a
1:22little Trash Can icon right here which
1:23we can click to delete that pet as well
1:25now that we know all the aspects of our
1:27GUI let's hop directly into Roblox
1:29studio so inside of Roblox Studio let's
1:31go inside of the stargi and let's
1:32actually duplicate the settings guy and
1:34the reason for this is because if we
1:36enable this so we can actually see this
1:37it has some of the components that our
1:38inventory GUI is already going to have
1:40such as the frame setup so we have a
1:42little upper frame right here and we
1:43also have the title and the subtitle and
1:45a little container inside of it as well
1:47along with the exit button too that's
1:48why we're duplicating this to kind of
1:50get a head start so we'll then rename
1:51the duplicated one to pet inventory and
1:54then let's go inside of the GUI inside
1:56of the frame inside of the title and we
1:57can change the text from settings to
1:59pets then inside of the subtitle let's
2:01change this text to equip cute pets for
2:04multipliers there we go then for the
2:06background color of the title and the
2:08frame we can go ahead and set the
2:10background color of this to sort of an
2:12orangish color and we'll go with that
2:13now for the container frame we're going
2:14to want to make this a little bit
2:16smaller because remember we're going to
2:17put the info sort of between this and
2:19the subtitle we also want to make it a
2:20little bit smaller as well because on
2:21the right side of the GUI we're going to
2:23have an info frame displaying
2:24information about the pet when we
2:26actually select them so we actually
2:27might make this a little bit smaller I
2:29think that is pretty good right there
2:32and also we'll stretch this out a little
2:33bit larger towards the side so like that
2:35now I think that's pretty good then
2:37let's go ahead and modify the container
2:38background color to be a sort of Darker
2:41orange so something like that looks
2:42pretty good then we have the exit button
2:44and we'll actually duplicate it and
2:45rename the new one to Delite button it
2:47could be multi- delete because that is
2:49what this button is going to be and then
2:50what we're going to do is basically
2:51resize it a little bit to kind of appear
2:54as they have it so right along here I
2:56think that's pretty good we could make
2:58it a little bit larger if we wanted to
2:59what whatever you guys want to do then
3:00for the actual text we're going to say
3:02multi- delete and all caps and that
3:04looks perfect then we'll add a new frame
3:06inside of here and of course we want to
3:08set the size to scaled so we're just
3:10going to set it to something random real
3:11quick and then we'll rename this Frame
3:13to Stats now this Frame is going to be
3:15the holder to display how many pets the
3:16player currently has equipped and how
3:18many they can actually store inside of
3:19their inventory so we're just going to
3:21kind of resize it and drag it out a
3:22little bit it actually doesn't even have
3:23to be that big we don't want it to be
3:25touching that text up there so I just
3:27want to make it a little bit smaller and
3:28then let's also move the position up a
3:30tiny bit so
3:32like11 I think would be good so now it's
3:34kind of in between the container and the
3:35subtitle then what we can do is we can
3:37set the background transparency to one
3:39because we don't want there to be any
3:40background now that we have the stats
3:41frame what we're going to do is we're
3:42going to duplicate the subtitle drag it
3:44directly into the stats frame and we're
3:46going to rename this to equipped to
3:48equipped this is going to actually
3:49display the amount of pets the player
3:51currently has equipped so we'll set the
3:52text to a dog emoji and say three out of
3:55three then for the size well we want it
3:57to be stretched down and we don't want
3:59it to be that long so for the size we're
4:01going to say for the Y we want it to be
4:03one scaled because we want to be the
4:05entire height and then for the X we'll
4:07leave that at 25 for now for the
4:09position we're actually going to set it
4:11all to zero because we want it to start
4:13all the way at the left side of the
4:14screen just like that so I think that
4:16does look pretty good then we're going
4:17to do is we're going to duplicate the
4:19exit button drag that directly into
4:21stats and we'll rename this to buy
4:23equipped and what that's referring to is
4:25the plus button displayed next to the
4:27amount that the player currently has
4:28equipped so for the side let's just drag
4:30this out a little bit and we want it to
4:32basically be like a square so I think
4:33that actually might be good sizing right
4:35there now we could reposition this
4:36ourselves and we could kind of try to
4:38find the best position for it like maybe
4:400 25 the alternative that we could do
4:42which we've done before is by adding a
4:44UI list layout and that'll add even
4:46spacing between all the elements so what
4:48we can do is we can say the fill
4:50direction would be horizontal the
4:52vertical alignment can be Center and
4:54then the sort order is going to be
4:55layout order so then we also want to
4:56make sure that we adjust the layout
4:57order for all these so this is going to
4:59be zero of course by equipped is going
5:00to be one because we want it to be
5:02displayed to the right of the equipped
5:03text label and then we just have to
5:05adjust the UI list layout a little bit
5:07if we want to add more spacing into this
5:08so maybe we want to say like 0 2 and
5:10that'll make it very far apart maybe
5:12001's good we can modify this as we go
5:14on so the next thing that we'll do is
5:15we'll duplicate the equipped text label
5:17and then we want to set the layout order
5:19of this to two because we want that to
5:21appear to the right of the bmon and
5:22we'll rename this to storage and the
5:24text for this is going to be a box emoji
5:27and we'll say 6 out of 50 there we go
5:30and now before we duplicate the buqu
5:31we'll actually modify this a little bit
5:33so the text of this we just want to be a
5:35plus symbol just like that for the
5:36background color we want this to
5:38actually be a brightish green so like
5:40that actually yeah we want to adjust the
5:42size to just be the entire y width not
5:44any larger than that and I think that's
5:46pretty good we might actually want to
5:47add a little bit more UI padding to this
5:48so maybe 015 I think is pretty good that
5:51adds nice spacing between them so then
5:53we will duplicate the buy equipped
5:54button and we'll rename this from buy
5:56equipped to buy storage and then for the
5:58layout order we're going to set this to
5:59three so that it appears to the right of
6:01the storage text label that we just
6:02created and there we go we now have that
6:04all set up now that we're done with that
6:05the next thing we're going to do is
6:06duplicate the container frame and we'll
6:08rename this one to info and this is
6:10going to be the one that appears on the
6:11right hand side of the screen so that's
6:13what we're going to do we're going to
6:14kind of reposition this over to here I
6:17think that's almost perfect but let's
6:18actually stretch the container frame out
6:20just a little bit longer so like that
6:23and now the info FR is pretty good so
6:24inside of here we're actually going to
6:25delete the container but leave the UI
6:27Corner then let's actually create
6:29another frame inside of the inframe
6:31because remember there's sort of two
6:32modes to how this info frame will
6:34display one is to display a pet that we
6:36just clicked on and the other is with
6:37the multi- delete and when we click on
6:39the multi- delete button it'll display
6:40some text and actually have a button
6:42inside of it as well so we'll rename
6:43this from frame to delete and then for
6:46the size of it we're going to set that
6:47to the entire width and height of the
6:49frame actually you know what so that we
6:51don't have to add a corner to this we'll
6:52just set this to .9 and then we're going
6:54to Center this as well so .5 comma 5.5a
6:5905 comma 0 and there we go then for the
7:02background frame we're going to set this
7:03to one we'll add a text label inside of
7:05here so let's actually duplicate the
7:06subtitle drag that into the delete frame
7:08and we'll rename this to title then we
7:10want to just resize it a little bit so I
7:12think something like that is pretty good
7:15then for the text we're going to set
7:16this to multi- delete two words there we
7:19go then we can duplicate that one more
7:21time drag this a little bit further down
7:23and this is actually going to be the
7:25description so we'll rename that from
7:26title to description and we'll set the
7:29text from multi- delete to click on the
7:31pets you would like to delete and click
7:35confirm there we go now we might
7:37actually want to stretch this out a
7:38little bit longer so something like that
7:40possibly and then let's of course make
7:42sure that we Center this so0 5.5 on the
7:46X that looks perfect then let's
7:47duplicate this one more time and we'll
7:49rename this from description to selected
7:52as this is going to be the selected text
7:54so we'll drag this a little bit further
7:56down below the description that we just
7:58created I think that's pretty good and
7:59we'll set the text of this to pets
8:01selected colon and we'll just say three
8:03for now and then for the text color we
8:05actually want this to be kind of a green
8:07so I don't know like that kind of green
8:09that could be good then we'll duplicate
8:10the exit button once again dragging it
8:12into here and then we just want to
8:13resize this a little bit so let's
8:15actually drag this further down and
8:17resize it to something like that then
8:19for the position let's of course make
8:20sure that we Center this so just like
8:22that now it's centered then for the text
8:25we'll say confirm for the background
8:26color we want this to of course be a
8:28green as well and realistically we
8:30probably want it to be the same green as
8:32the greens that we were using earlier so
8:34we'll use that green right there and
8:35there we go we now have the confirm butt
8:37let's also make sure we rename the
8:38button from exit button to confirm
8:40button and now we have the delete frame
8:42all done then what we can do is we can
8:43duplicate this and we'll rename this to
8:45pet let's make Delite not visible
8:47anymore so we don't see that and now
8:49we'll start working on the pet frame so
8:50the confirmation button that we have
8:52right here we can actually keep this and
8:53we'll rename this to equip button and
8:55then of course we'll set the text from
8:57confirm to equip then what we can do is
8:59so we can actually look inside of our
9:00shop GUI that we made in our past
9:02episodes looking inside of here we can
9:03go inside of the frame we have the info
9:05frame and then inside of here we pretty
9:07much have all the components that we're
9:08also going to be using for this exact
9:10frame as well so what we can do is we
9:11can highlight all of these copy them by
9:14hitting contrl C and then we can paste
9:15them directly into this Frame as well so
9:17now that we paste them them in let's go
9:18ahead delete the title the selected the
9:20description and the buy button that we
9:22just copied over from the shop we can
9:24also delete the image label as well and
9:26now we have a viewport frame let's set
9:28this to visible and just set the back CR
9:29transparency to zero so we can see it
9:31for a second all right so inside of here
9:32we have the viewport frame which is how
9:34we're going to be displaying the pet
9:35then we have the pet name so let's
9:36actually rename this from item name to
9:38pet name and we'll set the text just to
9:40a random pet name so we'll say fox and
9:42below the pet name we actually want to
9:43also display the Rarity as well so let's
9:45make the stats frame just a little bit
9:47smaller I think we'll resize that in a
9:48minute but let's go ahead and duplicate
9:50this and then we will get the pet Rarity
9:52and we'll rename this to Rarity then for
9:54the text we're going to set this to
9:56Common and we'll set the text color to
9:58sort of a grayish so just like that then
10:00for the stats frame we're going to set
10:01the background transparency to one
10:03because we don't want anybody to see
10:05that inside of the stats frame we'll
10:06rename stat to food stat and we'll set
10:09the text to the French fry logo x2.5 and
10:12then really we can just delete the price
10:13we'll duplicate this and rename the
10:15second food stat to money stat and the
10:17text for this will be the money bag
10:18times 2.5 as well to display that stat
10:21then what we're going to do is we're
10:22actually going to set the text alignment
10:24of both of these on the x-axis to be
10:26centered so they appear in the middle
10:27then we probably want them to be a
10:28little bit bigger so let's actually
10:30decrease the size of the equip bun so
10:32that we can stretch the stats out to be
10:33a little bit larger as well so that
10:36looks pretty good then we can close the
10:37statch frame and we want to make the
10:38viewport frame a little bit smaller as
10:41well at least when it comes to the width
10:42let's make sure that we also Center this
10:44on the x-axis as well so.
10:465.5 there we go then we can duplicate
10:49the equip button and we'll rename the
10:51duplicated one to delete button we'll
10:53set the background color of this to a
10:55red we'll then set the text to a trash
10:57can emoji and now that we've done this
10:59we just want to reposition it next to
11:01the viewport frame and there we go now
11:03doesn't look as good as theirs but
11:04they're most likely using an image I'm
11:06just using emojis for the sake of time
11:07now that we've got that we're done with
11:09the pet frame so we can set the
11:10visibility of that to false as well then
11:12for the container we actually want the
11:14we want to modify the canvas size to be
11:15a little bit large as well so instead of
11:17two we might set this to even 10 but for
11:19right now we'll set it to five then for
11:21the UI grid layout we'll adjust the cell
11:23size to make the pet layout look good so
11:24we'll set the x to. 3 and then for the Y
11:27we could set this to like 0.005 maybe
11:30we'll probably actually increase that so
11:31maybe 0075 it depends let's actually
11:33duplicate this a couple of times and now
11:35we see we have six displayed on one
11:36screen the next thing we want to do is
11:38we want to modify the cell padding a
11:39little bit because we want there to be a
11:40lot smaller of a space between them and
11:42we probably even want it to be smaller
11:43than that so maybe 0.001 that's pretty
11:46small we probably want to be a little
11:47bit bigger so .005 and I think that
11:49looks good for the X we want it to be
11:51around the same thing so 05 as well and
11:54I think that's actually pretty good then
11:55for the size we can adjust this a little
11:56bit so maybe 3 to instead of just. 3 and
11:59for the Y we could maybe make this a
12:01little bit larger as well so maybe just8
12:04instead and we could keep going if we
12:05wanted to maybe like 825 and I think
12:07that looks pretty good the next thing
12:08we'll do is we'll actually delete all of
12:10these templates we want to actually go
12:12back to our shop GUI now instead of
12:13being inside of the shop gy we actually
12:15want to duplicate the template button
12:17that's with inside of the manager and we
12:19want to drag that directly into our
12:20container frame now with this we're
12:22going to set the background color from
12:23this color to be a lighter orange so
12:26something like that then inside of here
12:27we're going to set the background color
12:28of the holder to actually be a darker
12:30color just like that and then inside of
12:32the holder we have the viewport frame
12:33which will actually display the pet we
12:35don't need the image label so we can
12:36delete that then for the item name we'll
12:38rename that to pet name and that
12:39actually looks fine if you wanted to
12:40make it smaller you can but we'll just
12:42set the text to Fox for right now to see
12:44how it looks for the equipped we can set
12:46this visibility to true just so we can
12:48see it and we actually want this to be
12:49more positioned towards like the bottom
12:51right of the template so something like
12:53that we could make it larger if we
12:55wanted to too but for the text you could
12:56use an image but for the text we're just
12:58going to use a green check mark like
13:00that and now we have the template all
13:01set up so if we duplicate this template
13:03a couple of times we can see how it
13:05would look and we can see this is how
13:06nine pets would be displayed and that
13:08does look pretty good if we duplicate
13:09them more we can see how more would be
13:11displayed as well and that all looks
13:12pretty good I think the final thing that
13:13we need to do is let's delete all the
13:15existing templates and inside of the
13:17holder we'll duplicate the equipped and
13:18we'll set this to delete and remember
13:20when we go into the multi- delete mode
13:22and we select a pet 2 be deleted it will
13:24actually display a red check mark over
13:26top of it but the only other emoji that
13:28we have is like a blue one so we'll just
13:29set it to that then for the position we
13:31want this to appear basically at the
13:33left hand side of the screen and I think
13:35that looks good enough if you guys want
13:36to make it look better you certainly can
13:37but I'm just showing you guys how we can
13:39make this possible now the last thing we
13:40need to do is add the button on the leth
13:42hand side of the screen which we will
13:43click to display the pet inventory so if
13:45we look inside of our star GUI we see
13:46that we have the button screen GUI and
13:48inside of here we have a frame called
13:50button holder now this holds all the
13:52buttons on the right hand side of the
13:53screen so what we're going to do is
13:54we're going to duplicate this and rename
13:56this to left button holder now the
13:58naming scheme isn't great but the reason
13:59that we're not renaming the original one
14:01to WR button holder is because if we
14:03rename that then we'd have to go into
14:04all the different scripts that we use
14:06this frame in and we'd also have to
14:07change the name in there as well so
14:09that's why we're not renaming this you
14:10can if you want to but I'm choosing not
14:12to then within the left button holder
14:13what we're going to do is we're actually
14:14going to delete the UI list layout and
14:16we're going to add a UI grid layout
14:18because all the buttons on left side are
14:19actually the exact same size then for
14:22the positioning let's go ahead and set
14:23the x positioning to zero cuz we want
14:25that to appear all the way on the left
14:27and then we can kind of just mess around
14:28with this by just dragging it around so
14:30for the width we want it to be a little
14:31bit smaller than the currency frame so I
14:33think something like that's pretty good
14:34and then we just want it to be a little
14:36bit taller so that is probably good
14:39right there maybe we want to make it
14:40just a little bit smaller on the side I
14:41don't know I think that's decent we'll
14:43see how that looks the next thing we
14:44want to do is with the UI grid layout
14:45now for the Buns there are two rows and
14:47three buns in each row so for the XEL
14:49size we're going to want this to be
14:50about like 32 comma 0 comma 5 comma 0
14:55we'll see how that looks and that
14:56actually looks pretty good I'm not going
14:58to lie then we want to adjust the cell
15:00padding and for right now we'll just set
15:01this to 05 comma 0a 05 comma 0 so
15:05there's slight spacing in between and we
15:06might even want to make it a little bit
15:07smaller like maybe 035 and 035 so I
15:10think that actually looks pretty good
15:11now we also want to adjust the cell size
15:13a little bit more because at 32 on the X
15:16we see that we're only able to fit two
15:17in each row so what we want to do is we
15:19want to set this to like 31 and now when
15:21we do that we can see that we are now
15:23fitting three on the same row so the
15:24next thing we're going to do is we're
15:25going to delete the cell and shot button
15:28then we'll rename the setting bun to
15:30Stats and inside of here we can change
15:31the icon to a sort of chart and that
15:33looks pretty similar to what they have
15:35and then for the title we of course are
15:37going to set the text to Stats then for
15:39the background color of the bun we want
15:40this to be a purple so something like
15:43that's pretty good then we can go ahead
15:44and duplicate stats and we'll rename
15:46this to trade we want to make sure that
15:48we set the layout order of this to one
15:50and actually we'll modify stats layout
15:52order as well to zero background color
15:54for this one is going to be a weird
15:56looking blue then of course for the
15:57title it's going to be tra and for the
15:59icon we're just going to set it to like
16:01two people then we can go ahead and
16:02duplicate trade and we'll rename this to
16:04auto click for the background color of
16:06this we want it to be a very very red
16:08for the title we want the text to be
16:10Auto space click and for the icon we
16:12want the Emoji to be a robot all right
16:15there we go and then we also want to
16:16make sure that we set the layout
16:17priority of autoc click to two duplicate
16:18autoc click rename this to pets set the
16:21background color of this to an orange
16:23and we'll just pick that color right
16:25there Then for the title we want that to
16:26be pets for the icon we want it to to be
16:29a dog and then for the layout order of
16:31the bun we're going to set this to three
16:33and then we just have to duplicate this
16:34two more times so we're going to
16:35duplicate once more we'll just rename
16:36this one to food and this is actually
16:38going to be the infinite food one so
16:40we'll set the background color of this
16:41to a dark red for the layout order we're
16:43going to set this to four for the title
16:45we want the text to be in food for the
16:48icon we want the text to be a burger and
16:50then we're going to duplicate this one
16:51more time rename this to VIP set the
16:54background color of this to a yellow
16:56something like that set the layout order
16:58to five now there's probably not like a
17:00VIP icon so I'm just going to set it to
17:02a crown because I don't know that kind
17:04of reminds me of VIP for the title we
17:06want the text to be VIP and there you go
17:08we now have all the Buns set up if we
17:09check on mobile view we can see that all
17:11the buns are still looking fine the only
17:13thing that I would probably make a
17:14little bit of adjustments to is making
17:15the text slightly smaller cuz as we can
17:17see with pets it's almost sticking out
17:19of the frame the same with infinite food
17:21as well but the series is of course not
17:23about perfecting the guis we're just
17:24quickly making this so that we can start
17:26getting to the fun part which is
17:27scripting anyways ladies and gentlemen
17:28with that all being said we are done for
17:30now with the pet inventory GUI as always
17:32if this video did help you guys out or
17:33you guys did enjoy make sure you smash
17:34like button also hit the Subscribe
17:35button and turn this post notifications
17:37on if you want to get notified want
17:38upload more Roblox fing content I also
17:40have patreon if you guys like this
17:41support me and access to all the scripts
17:42in the game file that make during this
17:44episode there's a link down below
17:44description and you guys are go check
17:46that out with that being said I'll see
17:47you guys in the next episode

About this transcript

This page contains the full transcript of Creating the Pet Inventory Gui! Roblox Studio Simulator Guide Episode 26 by MonzterDEV, generated from the public captions YouTube serves with the video. The transcript has 4,844 words across 618 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.