YT YouTube2Text

YouTube2Text → Transcripts → Creating the Pet Egg Gui! Roblox Studio Simulator Guide Episode 24

Creating the Pet Egg Gui! Roblox Studio Simulator Guide Episode 24 — Transcript

by MonzterDEV · 4,076 words · 519 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 in
0:00today's episode of the simulator series
0:02we are going to be creating the pet egg
0:04guy as always if you guys do enjoy the
0:06video or it does help you out make sure
0:07you smash like button also hit the
0:08subscribe button and turn this post
0:10notifications on if you want to get
0:11notified when i upload more roblox
0:12velvet content additionally i do patreon
0:14if you guys like to support me and gain
0:15access to all the scripts and the game
0:16file they make in this episode there's a
0:18link down below description and you guys
0:19can go and check that out with that
0:20being said let's get into it so if we
0:22hop into eating similar we can see
0:23exactly what i'm referring to by the pet
0:25egg gui when we walk up to a pet egg we
0:27can see guy pops up it displays the name
0:29of the egg that we're gonna open a
0:30little description which says hover over
0:32a pet to see its chances we can see that
0:34when we do hover over a pet it changes
0:36the rarity to the actual chance of us
0:38getting the pet from this egg of course
0:40it displays all the pets that we can
0:42obtain from this egg it also displays
0:43the price of the egg then we have three
0:45buns at the bottom which are also
0:46keybinds so t e and r and those
0:49represent the triple hatch the auto
0:50hatch and then the e of course is the
0:52one time hatch when we open an egg we
0:54then get an egg opening animation which
0:56we will not be creating in this episode
0:58we will be focusing solely on this gui
1:00so hopping directly in the studio the
1:02first thing that we want to do is we
1:03want to find an egg model now if you
1:05have your own model you can obviously
1:06add that directly into your game i found
1:08this random egg model from this user
1:10right here and i just imported that
1:12directly into my game of course this is
1:13just for showcasing the actual features
1:15i probably wouldn't use this model in my
1:18own game now we're gonna add this into a
1:19world and we're gonna compare the size
1:21quickly to a normal avatar so that we
1:23can easily resize it to how it should
1:24look now when i go to resize this if i
1:26just drag it upwards we see that we only
1:28actually make it taller but we also want
1:30to make it wider as well without having
1:32to adjust that ourselves the way that we
1:34can actually do this is by holding shift
1:36dragging it up and we can see the entire
1:38model is scaled on all sides so it looks
1:41perfectly scaled now if we compare this
1:43to our player we can see he's pretty
1:44much as tall as the player and that's
1:46good enough for us we just want it to be
1:47relatively within the same size so that
1:49we can get a good idea of how to scale
1:51this gui properly now that we have the
1:53egg added let's go ahead and rename that
1:54to basic underscore egg and we'll also
1:57create a folder and we'll rename that to
1:59eggs and then we will duplicate this one
2:01time move it over a little bit and we're
2:03gonna rename this from basic egg to rare
2:06egg and we'll have two different eggs
2:07that we added gui to so that we can see
2:09how we can easily create guise for
2:11multiple eggs now i'll put both of those
2:13eggs in the same folder and then what i
2:14want to do is i want to add an
2:16attachment directly into both those eggs
2:18which i'll just duplicate and put into
2:20both of them the next thing we want to
2:21do is go into the starter gui create a
2:23folder and we'll call this eggs then
2:25we're going to add a billboard gui
2:27inside of here now the reason that we're
2:28adding the billboard gui into the
2:30starter gui instead of adding it
2:33directly onto the egg models is because
2:35we're going to be using text ones or
2:37image buns for certain components in
2:38this gui and for some reason when you
2:40have the billboard gui parented to
2:42somewhere other than the starter gui the
2:44buttons don't actually work now the next
2:46thing we're going to do with this
2:47billboard ui is change the door knee
2:49property and we're actually going to set
2:50that to the attachment inside of the egg
2:53so now basically what this does is in a
2:54way it kind of parent without actually
2:56parenting the billboard gui to whatever
2:58part we set the adorning to continuing
3:01to configure the billboard ui we're
3:02going to set the always on top to true
3:04so that it always displays through the
3:06egg and it's not like the egg is
3:07blocking it the distance we don't want
3:08this to be displayed from all the way
3:10over here we want the distance to
3:12probably be about 17 so that we have to
3:14get pretty close to it for it to
3:15actually pop up we do not want it to
3:17reset on spawn so we're gonna set that
3:19to false then for the size we want it to
3:20be about eight scaled on the x-axis and
3:23then for the y-scale we want it to be
3:24about ten because we want it to be a
3:25little bit taller than it is wide now
3:27the reason that we adorned this to an
3:29attachment is so that we could easily
3:30move the gui around without having to
3:32mess with the offset at all so if we
3:33want to move the gui up a little bit we
3:35can do that then let's select the gui
3:37and actually let's just add a frame real
3:38quick so that we can easily see how it
3:40actually looks so let's just set this to
3:42completely scaled the entire size so now
3:44we can actually move around the
3:46attachment freely and see how this will
3:47look so if it's too far down it'll look
3:49like the gy is through the ground so
3:51that's why we want to probably have it
3:52up higher than rather than having it
3:54down further and i think that looks
3:55pretty good i don't know we can change
3:57it eventually as we play it's really
3:58simple you just have to move the
3:59attachment and then you'll be all good
4:01additionally we're going to rename the
4:02billboards ui from billboards ui to
4:04template and we're actually going to use
4:06this frame this was just to show you so
4:07that you can get a quick easy look at it
4:09we're actually going to duplicate the
4:11frame that we created with the settings
4:13and the reason for that is because the
4:14frame has pretty much all the components
4:16that the egg hashing frame has so we
4:17have like the title right there the
4:19subtitle and the little container right
4:20here we just have to of course change
4:22some of those components a little bit so
4:23for the frame we're going to modify the
4:25size and we're going to set the size for
4:27the entire x-axis and then for the y we
4:29want it to be about 0.7 so now that
4:32looks pretty good then inside of the
4:33frame we want to delete the exit button
4:35because there is no exit button on our
4:37gui now for both the frame and the title
4:39we want to change the background color
4:41to a nice little blue you can copy the
4:43exact color from here if you want to or
4:45use your own color inside of the title
4:46we are going to change the text from
4:48settings to basic egg or the name of the
4:50egg and then for the subtitle we are
4:52going to change the text from what it
4:53currently is to hover over a pet to see
4:55its chance now for the container we want
4:57to modify the background color from this
4:59gray to a little bit of a darker blue
5:00and then we want to delete the container
5:02inside of this container frame because
5:03that's a scrolling frame and we don't
5:05need a scrolling frame for this ui then
5:07we're going to add a ui grid layout to
5:09the container and then we also want to
5:10add a text button inside of the
5:12container as well and we are going to
5:13rename that to template and this is
5:15going to be the template for all of our
5:16pets that we're going to be displaying
5:18within the egg so we're actually going
5:19to set the text to blank for the button
5:21we'll also modify the background color
5:22to be the same color as the outside
5:25frame and then we also want to drag a ui
5:27corner in there as well so we'll just
5:28duplicate the one that we already have
5:30now for the ui grid layout we're gonna
5:31set the cell padding to point zero one
5:34so there's a small space in between them
5:36and then once again point zero one as
5:38well for both the x and the y we can
5:40also duplicate the template a couple of
5:41times so we can see how the spacing and
5:43the sizing is actually looking for the
5:44size we're gonna set the x to point 25
5:47and the y to point three and then we're
5:48gonna set the horizontal alignment to
5:50center as well as the vertical alignment
5:52so there we go they appear directly in
5:54the middle then what we can do is we can
5:55duplicate this so we see how nine pets
5:58are displayed now we should keep this
5:59the maximum amount of pets that will
6:01ever be able to hatch from one single
6:02egg otherwise we're going to have issues
6:04if we want wanna display more than nine
6:06and now that we see that nine pets can
6:07fit in here looking pretty decently
6:09we're going to delete all the templates
6:11except for one additionally you can
6:12modify the ui grid layout however you
6:14want to if you're not gonna have nine
6:15maybe you only wanna have three you want
6:17them to appear at the center if not
6:19maybe you want them to appear at the top
6:20you can do something like that but
6:21obviously you can configure this however
6:23you want to now within the template
6:24we're going to add a text label and
6:26we're going to rename this to pet name
6:28then for the text we're going to set
6:29this to dog we want the text to be
6:31scaled we want the text color to be
6:33white for the font we're gonna set this
6:35to a gotham bold but we can't see right
6:38now so let's go ahead and set the
6:39background color to one so there we go
6:40for the size we're gonna set this to
6:420.9.2 and then we want to center this so
6:44for the position we're going to set the
6:46x anchor 2.5 and the x position 2.5 as
6:50well there we go now we're going to
6:52duplicate this text label and rename it
6:53from pet name to pet rarity and then for
6:56the text here we're going to set it to
6:57common and then we want to adjust the
6:59position so that it appears towards the
7:00bottom of the gui so for the position on
7:02the y we're going to set it to 0.8 and
7:04we can see it appears perfectly at the
7:06bottom if we check on mobile view it's
7:07still appearing within the gui so it's
7:09not too far down or anything and that
7:11looks great the only other thing that we
7:12want to do with this is we want to
7:13change the color from a white to a
7:15little bit of a gray not too dark or
7:18gray i think something like that looks
7:19pretty good then the final thing that we
7:20want to do is we want to insert a
7:22viewport frame we want to set the size
7:24to 0.6 for the x and 0.5 for the y then
7:27for the anchor point we're just going to
7:28center this entirely so point five point
7:30five and for the position point five
7:32comma zero comma point five comma zero
7:34and that's centered perfectly and of
7:35course for the border size pixel we're
7:37gonna set that to zero and most likely
7:39we're gonna set the background
7:40transparency to one once we actually
7:42start using this but for right now just
7:43so we can see how this will all be
7:45displayed let's go ahead and leave it
7:46not transparent so that we can actually
7:47see how the gui currently looks and that
7:49actually looks pretty perfect for the
7:51template once again we can duplicate it
7:52nine times see how it would look with
7:54all nine they all look pretty good check
7:56the mobile view they all look perfect in
7:57there as well so that is going great now
8:00we're pretty much done the container and
8:01the template we actually just need to
8:03adjust the size on this a little bit so
8:04because we need to fit a couple of
8:06things below it we need to make the size
8:07of the y a little bit smaller so instead
8:09of 0.841 we're just going to set the 0.6
8:12and now we need to move it up a little
8:13bit so rather than setting the anchor
8:15point for the y we're going to set that
8:16to zero so that we can just move around
8:18with the position and for the position
8:20we're just gonna set the point one and
8:21that appears perfectly below the
8:22subtitle and that gives us enough room
8:24to add the rest of the components so the
8:26next thing we're going to do is we are
8:27going to add the price section so we're
8:29going to actually duplicate the
8:30container and we're going to rename it
8:31to price then inside of here we can
8:33delete the ui grid layout and the
8:34template then for the size we're going
8:36to leave the x the same but for the y we
8:38want to actually set this to 0.15 for
8:40the position we're going to modify the y
8:42to 0.725 from point 1 and there we go
8:45now we might want to round the corners a
8:46little bit more so we can increase the
8:48ui corner to maybe 0.25 depends on how
8:51you guys like it then inside of here
8:52we're going to add a text label but we
8:53could just duplicate the subtitle and
8:55add it directly into here because it has
8:56most of the properties that we already
8:58want anyway then rather than calling it
8:59subtitle we're just gonna call it price
9:01we're gonna set the text from whatever
9:03it is currently to our money symbol so
9:05there we go we've got the money symbol
9:07space
9:082.0 k and then for the size we're going
9:10to make it 0.8 for the x and maybe 0.9
9:13for the y we'll see how that looks and
9:15for the position we do want it to appear
9:17on the left side of the box not in the
9:19middle if we're making it how they have
9:21it so for the y we want to make sure
9:22that that is perfectly centered in the y
9:24and then for the x we might just want to
9:25put that more towards the left a little
9:27bit so we'll set the position to just
9:29zero for the x and the anchor point as
9:31well and see how that looks but of
9:32course for the text we also have to set
9:34the alignment from center in the x
9:35alignment to left and now that appears
9:37on the left side we can check mobile
9:39view it all looks pretty good it's not
9:40appearing out of the box so that's good
9:42depending on what you guys want to do
9:43you can modify this a little bit more if
9:45you want it to appear in the center or
9:46anything like that obviously make your
9:48own changes however you want it to look
9:49now the final component that we need to
9:50make is the buttons so we're going to
9:52duplicate the price frame that we just
9:54created and for the size we're just
9:55going to slightly increase this so for
9:57the y instead of 0.15 it's going to be
10:000.175 so it's slightly larger and then
10:02for the position instead of 0.725 we
10:04want it to be at 0.9 so it's at the edge
10:06of the ui and it's actually appearing a
10:08little bit off of it then we also want
10:10to rename this from price to buttons and
10:12then of course we want to set the
10:13background transparency to 1 because we
10:15don't want there to be any background to
10:16this inside of the frame we can also
10:18delete the ui corner and the text label
10:20as well and then we are going to insert
10:22a text box now the first text bond is
10:23going to be times three and we're just
10:25gonna name it by the action so remember
10:27on the left side we have the times three
10:28then in the middle we have the times one
10:30and on the right we have auto so we're
10:32gonna say times three now we're actually
10:33not gonna have any text here because
10:35we're gonna make a text label inside of
10:36it so for the size we want it to be kind
10:38of small and definitely smaller than the
10:40one in the middle so we're gonna say
10:410.275 one because we want it to be the
10:43entire height now for the background
10:45color we want it to be a little light
10:46green so that looks good and now
10:48actually we want to add a ui corner to
10:50this so we're going to throw that
10:50directly into there and we want to make
10:52it a little bit more curved so we'll
10:54maybe set this to like .25 and i think
10:56that actually looks good then inside of
10:58here we'll add a text label but once
10:59again i'm just gonna duplicate the
11:00subtitle throw it directly into here and
11:02we're gonna call this key as this is
11:04gonna be the top text which is gonna be
11:06the key the player has to press to
11:07automatically activate this they can
11:09also click on the button as well but
11:11they have the keys here too so that's
11:12what we're gonna also do and then for
11:14the text we're gonna say t as that's
11:16what the keybind is for this now for the
11:17size we want this to stretch the entire
11:19x-axis and about half of the y-axis so 1
11:22and 0.5 and that looks decent then for
11:24the position we could just set this to 0
11:260 as it's just gonna appear directly at
11:28the top and that looks good we'll then
11:30duplicate this and rename this from key
11:33to maybe effect as that's what times
11:35three will be if you think of a better
11:37name to name it you definitely can do
11:38that as well i don't think we're really
11:40gonna be scripting with this so it
11:41shouldn't really matter now the text for
11:43this is going to be times three and then
11:44i think they have a little bit of a
11:46different thought so instead of gotham
11:47black so it's not as bold we're just
11:49gonna use gotham and for the position we
11:51want it to be at the bottom so we're
11:52gonna set it to 0.5 because remember the
11:54y is already 0.5 and that looks perfect
11:57then we're going to close that button
11:58since we're done with it and then we're
12:00actually going to add in a ui list
12:02layout and this is going to help us
12:03easily position all three of our buttons
12:05so the spacing is the exact same in
12:07between each of them so let's go ahead
12:09and duplicate this three times just so i
12:10can show you what i mean now that we
12:11have three of them inside of there we're
12:13going to set the fill direction to
12:14horizontal so that it fills to the right
12:16instead of filling down the horizontal
12:18alignment we want to be centered and
12:20then also for the vertical alignment we
12:21want that to be center as well although
12:22that shouldn't really have an effect on
12:24this and then we can adjust the padding
12:25to make there be a little bit of a space
12:27in between them so 0.1 that seems pretty
12:29big so maybe like 0.075
12:31that's a little bit smaller maybe 0.05 i
12:34think that's good spacing between all of
12:35them and now we have a sort order in
12:37here and we're doing this by the layout
12:38order or the name we're gonna choose
12:40layout order and we're gonna say this is
12:42gonna appear all the way on the left
12:43side so we also modify the layout order
12:45for this one but let's go ahead and
12:46rename this one to times one and we
12:49wanna make sure that appears in the
12:50middle so let's adjust the layout order
12:52to one so that we can make sure that
12:53that appears after the times three and
12:55the final one which is currently in the
12:57middle because the layout order hasn't
12:58been changed we're gonna rename that
13:00from times three to auto and then for
13:02the layout order we want this to appear
13:03all the way on the right so we're gonna
13:04set that to two and of course two is
13:06higher than one so that's why it appears
13:08on the right one is higher than zero
13:09that's why that appears in the middle so
13:11let's go into the times one and we're
13:12going to adjust the effect from times
13:14three to just times one and the key is
13:17no longer going to be t it's gonna be e
13:19and we can do the same thing for auto so
13:21the effect for auto is gonna be auto and
13:23the key is gonna be r the last thing
13:25that we need to do is make the center
13:27one a little bit taller than both the
13:28left and the right ones so let's go
13:30ahead and do that so all we have to do
13:31is change the height and we're also
13:32gonna change the width a little bit so
13:33that it kind of scales nicely if we just
13:35change the height i'll actually show you
13:36let's change this from 1 to 1.115 and
13:39that actually looks pretty good so i
13:40think leaving it like that looks good if
13:42you guys want to change any of the
13:43sizing or anything like that you guys
13:44can certainly do that to your preference
13:46this is just a quick little guide to
13:48show you how we can actually create
13:49tutorials so that we can move on and
13:50start scripting it let's go ahead start
13:52up our game and check it out to see how
13:53it looks in game maybe we want to make
13:55some adjustments and oh i actually
13:56forgot to anchor this egg so it's going
13:58to be moving around and looking a little
13:59weird but now that it's standing still i
14:01think the gui looks pretty good if we
14:03hover over the buns we can see that we
14:04can actually click them the same goes
14:06for this pet as well so we're going to
14:07be using those button effects to
14:08actually do certain things and perform
14:10the different actions but yeah if we
14:11walk away we can see that the gui closes
14:13if we get closer we can see that it
14:15opens up and everything like that so i
14:16think the gui is pretty much finished so
14:18that's gonna be it for this episode in
14:20the next episode we're actually gonna
14:21start scripting and adding the ability
14:22to open and hack pets from the eggs as
14:25always smash like button also the
14:26subscribe button and turns post
14:27notifications on if you wanna get
14:28notified we'll upload more roblox
14:30bombing content of course i have a
14:31patreon if you guys like to support me
14:32and gain access to all the scripts and
14:34the game file they make during this
14:35episode there's a link down below
14:36description and you guys can check that
14:37out with that being said i hope that you
14:38guys have a great day and i'll see you
14:40guys in the next episode

About this transcript

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