YT YouTube2Text

YouTube2Text → Transcripts → Roblox UI Importing Masterclass

Roblox UI Importing Masterclass — Transcript

by Kek · 41,305 words · 5,606 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:00Hello everyone. Welcome to another
0:01tutorial. My name is Kakuza and today in
0:03this tutorial I'm going to be teaching
0:05you how to import UIs into Roblox
0:08Studio. This is going to be a very
0:09lengthy video. I want you to stick till
0:11the end. I would like to stress that in
0:13this entire video I'm going to be using
0:14this plugin that I've created myself.
0:16It's called KUI and I'm going to be
0:19updating it throughout the following
0:21years. The best things about this plugin
0:22is that it doesn't have any unnecessary
0:24stuff. Um, every single thing in this
0:27plugin I will be showcasing in the
0:29video. In order to get this plugin, all
0:31you have to do is go to my Discord
0:33server, discord.gg/ugen.
0:35Once you're in, you're going to want to
0:36go down until you see KUI plugin. Click
0:40on this. And then you're going to notice
0:42that I have all these patches and
0:44updates here. Scroll to the top and
0:47click on this link. As soon as you click
0:49on the link, this should open up. All
0:51you have to do is get the plugin from
0:53here. Read all of this description. Go
0:56in Roblox Studio. Click on plugins.
0:58Manage plugins. And there should be an
1:00option for KUI here. I think there might
1:03be something else here. Something like
1:05install. Once you install, then it
1:08should open up. There's going to be a
1:09table of content for you guys. If you
1:11would like to jump to any specific part
1:14of the tutorial and only watch that bit.
1:17So, please utilize that. And apart from
1:19that, let's get into the video.
1:28Before we even begin, we should probably
1:30try to figure out what's meant by UI
1:31importing. Importing is the process of
1:34inserting UI elements from a third party
1:37software into Roblox Studio. Perhaps you
1:40designed a UI in Figma or Affinity or
1:42Photoshop and you would like to put it
1:44inside Roblox Studio. You would have to
1:46follow some specific protocols or some
1:48specific procedures. um without doing
1:51them you will end up with a badly
1:54positioned or sized UI and we don't want
1:56that. So in this video you're going to
1:57be learning how to properly make your UI
2:00functional in studio. Before we continue
2:02these are some tips for you guys. Please
2:04don't skip this part. You have to
2:06understand the basic differences the
2:08basic rules of importing so that you can
2:09finally start importing in an actual
2:11good manner. A lot of people always ask
2:14me how do I import from Figma? How do I
2:16import from Photoshop? If you're making
2:18an importing tutorial, please don't make
2:19one for Photoshop, make one for Figma,
2:21make one for Affinity. You guys have to
2:24understand exporting and importing are
2:26different. Exporting is different for
2:28each software. The way that you have to
2:31export as a PNG all these separate like
2:34images and then convert them into PGs,
2:36that's a different procedure for every
2:38single software. However, importing is
2:42the same no matter what software you're
2:44using because softwares aren't involved
2:46in importing. When you export, when
2:48you're done exporting, you already have
2:50the images, no matter what software it
2:52is. Now, you have the PNG files. The
2:55rest is all the same. No matter what
2:57software you used in the past, if you
2:59have the images, all you have to do now
3:01is to match the same structure of your
3:04UI that you created in your third party
3:06software, whether it be Figma or
3:07Photoshop or anything else. and match it
3:10one to one in studio. So the rest of the
3:12procedure is going to be same. Every
3:14time we export an image or something
3:16from a third party software into studio,
3:18we're always going to be using PGs. The
3:20reason is because JPGs don't support
3:23transparency. Um, every time you export
3:25something as JPG, it's always going to
3:28have an opaque background, which means a
3:30solid color is the background perhaps
3:31black. And we don't want that. Sometimes
3:34you're exporting something that requires
3:35transparency. For example, if it's a PNG
3:37of a circle, the image itself is still
3:40going to be a square, but the four
3:42corners around the circle are going to
3:44be transparent. JPGs don't support that.
3:46It's just going to set the color is
3:48black or gray. However, PGs will keep or
3:50retain that transparency, which is what
3:53we want when we're exporting the image
3:55from a third party software into studio.
3:56Apart from that, PGs also don't lower uh
3:59quality. However, JPGs do. And above
4:02all, the file size. PNGs unfortunately
4:05have more file size and JPGs have less,
4:07but it's not noticeable in modern
4:09computers, so you don't have to worry
4:10about that. We're going to be exporting
4:12everything as PGs and nonjpgs. When
4:14we're exporting from a third party
4:16software into Studio, we're not going to
4:19export texts. Text is always going to be
4:23customizable or modifiable inside Roblox
4:26Studio. We're not going to export this
4:29because if we exported this text as for
4:31example an image, it would not be
4:33editable inside studio and that's not
4:35what we want. This is not always the
4:38case. For example, if you have this text
4:40here and let's say that I'm using a text
4:43that doesn't exist in Roblox Studio. For
4:45example,
4:46this one. And this this is the exact
4:50text that I want to be on the header.
4:52Something like this. Uh maybe make it a
4:54bit smaller. So in this case that I know
4:57that I don't want it to be editable
4:59inside Roblox Studio. And this is
5:00exactly how it's going to be. Then I can
5:02rasterize it and then export, right? But
5:06since I don't want that, I want it to be
5:07editable in Roblox Studio. We're going
5:08to keep it this way. Before importing or
5:10uploading images to Roblox, make sure
5:12that you never ever use your main
5:14account. Always have an AL account for
5:16importing every single thing into
5:18Roblox. It could be an SFX file as sound
5:21effect or it could be a texture. It
5:23could be an image like we're doing in
5:25this UI importing tutorial. It could be
5:27anything. Just never do it on your main
5:29account because Roblox moderation is
5:31really weird and they will flag you, ban
5:33you, perhaps sometimes they won't even
5:35unban you even if you're in the right.
5:37So, what you have to do is never ever
5:39use your main account. One more thing
5:40that you guys have to keep in mind is
5:42that when you're exporting an image, if
5:44the file size or the size of the image
5:46or the resolution is above 1024x 1024
5:49pixels, Roblox is going to downsize it.
5:51So, every time you're exporting an
5:53image, even if it's a full screen UI,
5:55you'll have to cut it in bits, perhaps
5:56by using scale that we'll be looking at
5:59in this video, or by cutting it into
6:02different parts, separating it into
6:03different uh pieces. However, even a
6:05full screen UI normally doesn't require
6:07you to export an image that's bigger
6:09than 20 24x 1024 pixels. You can always
6:12just do it in a different manner,
6:14different sections of the entire UI. So
6:16yeah, always export under 1024 x 1024
6:20when you're importing UIs or basically
6:22doing anything lengthy like making UIs
6:24or anything. This is a general advice.
6:26Please always remember to control S or
6:29save your work while you're doing it.
6:31Most of the time what happens is that
6:33people will be working and then their
6:34computers are going to crash. This
6:36happened to me personally while
6:37recording my last video. Sometimes the
6:39file gets corrupted and there's no way
6:41of obtaining it back. So, it's just more
6:43advised that you guys always save. So,
6:46throughout this video, while you're also
6:47importing, make sure that you keep
6:49saving or downloading a copy or saving
6:51to Roblox. So, to start off, I'm going
6:54to be teaching you guys how to export a
6:56UI from different softwares. We're going
6:59to be exploring Photoshop, Figma,
7:01Affinity, Photop, and we're going to be
7:03seeing what's the proper method to
7:06import from all of these various
7:08softwares. So, once we're in Photoshop,
7:10we're going to open up our UI. This is a
7:12UI that was created by a person called
7:14Slick. So, as you can see, we have a
7:16header here. This is our cross button.
7:18This is all the text. This is going to
7:20be a text box inside the UI. We're going
7:23to expand on that in Roblox Studio. And
7:25this is going to be a button. So, we can
7:28see that we have these layers here.
7:30We're going to expand this the way that
7:32we've designed our UI. So, first thing
7:35that we're going to do is we're going to
7:37go to the header. And we can see that
7:40there are all these layers here. We have
7:41a gradient overlay on the header and
7:44everything. We have a texture on top and
7:45then we have the text. So what we're
7:47going to do is we're going to hide the
7:51text layer. And then we're going to
7:53select all of this stuff. So you can see
7:55that this is just the header. Even
7:57though the selection is showing it as if
7:59it's way more, but we're only using this
8:01stuff, right? So we're going to select
8:04only this stuff. And then we're going to
8:05press Ctrl E or we're going to
8:07rightclick and then click on merge
8:09layers. As soon as we merge them, this
8:11is now going to become one specific
8:13image. Now this image can be exported
8:15into Roblox Studio very simply. If we
8:18were to export all of these separately,
8:20there would be way too much problems.
8:22You know, we would have to first of all
8:23separate these. We would have to open
8:25the uh texture. We would have to convert
8:29the texture from a smart object into a
8:30normal rasterized layer. And then we
8:33would have to delete everything outside
8:35of the header like this. And then we
8:38would have to separate like export all
8:39of them separately. And that's not what
8:41we want when we're importing. We want
8:43our job to be simplified. Anything that
8:45does not need to be exported separately
8:47does not have to be exported separately.
8:50So we're going to merge all of these
8:52three layers. Now that we have this one
8:54layer, as you can see, you know, we have
8:57only one layer. If I was to go ahead and
8:58change the color only the color of like
9:00the entire header is going to be
9:02changed. So what we're going to do is
9:03we're going to name it differently.
9:05We're going to change the name to
9:06perhaps header bg. So this is the
9:09header's background and then there's
9:11going to be text on top in studio,
9:12right? So we're going to right click
9:14this and click on quick export as PNG.
9:16It's already going to be named like this
9:18because we already renamed it to
9:19headerbg in Photoshop. So, I always
9:21recommend naming layers uh when you're
9:24working in Photoshop so that when you
9:26have to quick export them, it will
9:27always be named that way. So, we're
9:30going to save. Now that we're done, we
9:32can quickly verify that we have this
9:34same specific image by going in file
9:37place.
9:39[snorts] We have the same image that we
9:41just exported without any loss in
9:43quality. Apart from that, uh there are
9:46some other stuff that we have to keep in
9:47mind. For example, sometimes we will
9:50have a image that has a glow beneath it.
9:53So for example, in Photoshop we have
9:55this. Now if we have to export this, we
9:58already know what we have to do for like
10:00without the glow, right? We have to
10:02separate the text, hide it. So we if we
10:05have these, we can see that these are
10:06the five layers for everything, the
10:08entire cross button. We're going to Ctrl
10:11E or right click, merge layers. Now we
10:15have the entire cross button. So in this
10:18scenario that we also have a glow, what
10:20we need to do is we are going to go to
10:23the group that has it or if the layer
10:25has it, it could also be on this layer.
10:28We are going to rightclick and create
10:30layer. Now the glow is automatically
10:32going to pop up beneath the group. As
10:35you can see, if I was to hide the entire
10:37group, I already have the glow here. So
10:39what we're going to do is we're going to
10:40rightclick it and then click on quick
10:42export as PNG. And then we can call it
10:44cross button glow and then enter. And
10:48now we should have it. And we can also
10:50quickly go and export this call it cross
10:55button. Now if we were to embedded both
10:58of these, place them. As we can see, we
11:00have both of them together. So we can
11:02move them around and we have the same
11:04thing that we had in earlier. One more
11:07thing that we might come across when
11:08exporting from Photoshop is that we
11:10might sometimes have a mask on any
11:13specific layer. For example, if you have
11:15this header, we can go ahead and create
11:17a mask on it. Right? So, if we have a
11:19mask and let's say that this mask is
11:21hiding a specific part of this image
11:23like maybe this part or whatever else
11:27part you know everybody might have on
11:29their header. So if we have this
11:32specific thing like we have this block
11:34that's cut off from the header, we have
11:36to export it with that mask that should
11:39be applied before we export it. What we
11:42have to do is we have to right click and
11:44then click on apply layer mask. Now this
11:48image itself has lost the mask and it's
11:51become this way. Now we can export it
11:53and we would get the same intended
11:55result. Headerbg2
11:58place embedded.
12:01There we go. Alternatively, if you guys
12:04don't want to export with the mask, we
12:06can also rightclick it and delete layer
12:08mask and we should have it. So, that's
12:11how you export from Photoshop. I'm going
12:12to be explaining the importing very
12:14detailed. So, please stick around and
12:17keep watching. So, in Figma, I'm
12:19currently using the website version.
12:21However, you can use the desktop
12:23application if you'd like. I opened this
12:26UI that was created by not war. It's
12:28also being given away for free in my
12:30discord server. So you can go and get
12:32the FIG file from there. Open the file
12:35in Figma. We should have this in front
12:37of us. We have to follow the same thing
12:39that I told you guys earlier. We're not
12:40going to be exporting text labels. We're
12:42going to be exporting everything that is
12:44not a text. So in this case, for
12:47example, we have this main frame right
12:49here. Apart from this, we have these
12:52small blocks that are holding like
12:55everything here. For example, this icon
12:57and then this text, stock, currency,
13:00buttons, and then this rarity. Um, we
13:03have to export these blocks separately
13:07from the main frame and then this
13:08separately and then this separately.
13:10Keep it all modular and easy to use.
13:13This is also going to be, I'm assuming,
13:15turned into a scrolling frame, but we're
13:17going to get into all of that later.
13:18What we're going to do for now is we're
13:20going to get started on the main frame.
13:22So, we're going to come here, expand the
13:24layers. We have this stuff. We're going
13:27to select the main frame and the header
13:29together. And then we're going to group
13:30them by pressing Ctrl G. As soon as we
13:33group them, we're going to expand
13:34everything. We're going to hide all the
13:36text layers. And now we should have
13:38this. If we clicked this, and then went
13:40to export on the bottom right,
13:43expanded it, and we should be able to
13:44see this. We're going to select PNG and
13:46then we're going to change the size to
13:48whatever we want. I'm going to go with
13:501x because we want to keep the size the
13:52same so there's no compression or loss
13:54of quality. And then we're going to
13:56click on export. As soon as I clicked on
13:58that, I opened this thing. I'm going to
14:00put this back in. And as you can see, we
14:02have the same thing that we exported. So
14:04this is how you export a basic image in
14:06Figma. In order to do glows, we're going
14:09to follow a bit of a different method in
14:11Figma than we do in Photoshop. So, this
14:13is our close button. There's two ways to
14:16export glows in Figma or even create
14:18glows in Figma. What we're going to do
14:20is we're going to go to the main frame
14:22that's holding this little rounded
14:25rectangle. And then we're going to
14:26duplicate it, place it beneath
14:28everything, so it's beneath in the
14:32Z-indexes or the order of precedence.
14:35And then we're going to click on
14:37effects, drop shadow, and then we're
14:39going to change the Y position to zero.
14:42We're going to change the blur to
14:43something like 30. We're going to change
14:45the spread to something like 20. And
14:48then we're going to change opacity 100.
14:51We can change the color to whatever you
14:52want. Something like this maybe. And now
14:55if we zoom out, I want to export the
14:58glow like this. Even if it doesn't look
14:59good, just for the sake of the tutorial.
15:02We're going to select the glow that we
15:05got earlier. We can move it around. We
15:07see that this thing here exists. Now,
15:10when we're exporting the glow, we don't
15:12want anything like this to be present
15:14because of how Roblox scaled stuff. The
15:17there were like some small edges that
15:19were being shown. This would mess up the
15:21entire look of our UI. So, what we want
15:23to do is we want to click on this. We're
15:24going to remove the fill, one of them.
15:27And then this fill, we're going to
15:29change it to 0.1%.
15:32So, we still have this thing, this
15:34little rectangle, and that's because a
15:36main frame has a stroke on it. we can
15:39just go ahead and hide the stroke. So
15:41now we [music] have this and this is how
15:42a glow in Figma can be. So now there is
15:45a different way of doing this which is a
15:47better way in my opinion. What I'm going
15:49to do is I'm going to delete this. I'm
15:51going to come here. I'm going to
15:52duplicate this. Put it beneath
15:54everything again. But this time instead
15:56of using uh drop shadow, we're going to
16:00be using layer blur. So we're going to
16:01come here, change this to layer blur.
16:05Now we can change it to something like
16:0630 or maybe 50. Now we're just going to
16:10remove the stroke. We're going to remove
16:13the fill. And this is going to stay the
16:16same. We we need this fill for the sake
16:18of this glow.
16:21And now we have the glow. And if we want
16:24to make this glow more intense or we
16:26want to make it more visible, what we
16:29have to do is we have to duplicate the
16:31glow right here. And then we have to
16:33duplicate it again. And so now what
16:35we're going to do is we're going to
16:36select all of these, select the first
16:38one, and then hold control, select the
16:39second one, and then the third one. And
16:41then we're going to press CtrlG or right
16:44click and then group selection. Now we
16:47have the glow separately. We can change
16:49the name to glow. And then we can come
16:51here, export glow.
16:55And there we go. So now we have the glow
16:58as a normal basic PNG. We can put it
17:00back here. And there we go. That's how
17:02it's going to look in studio. So in
17:04designers affinity, what we're going to
17:06do is we're going to open up the
17:07application and then we're going to open
17:09up the UI. This one was created by
17:11Radical. We're going to expand the
17:14layers here. This is our frame. And then
17:16we're going to expand this. And now I
17:18have this UI. So I'm going to be
17:20exporting this bar like this sort of
17:22header. In order to export the header,
17:24what I need to do is I'm going to hide
17:26the text. So, as soon as I click on
17:27this, I'm going to hide the text cuz
17:30remember, we're never going to use text
17:32in exporting because text is always
17:34going to be written inside studio. We're
17:37going to create the overall design and
17:39then we're going to export everything
17:40that's not a text unless the text has
17:42something extra on it that cannot be
17:44replicated in studio. That's when we'll
17:46have to export the text as an image
17:48label. However, we need to understand
17:50that once we do that, we will never be
17:52able to modify that text inside studio.
17:56So only export text that you really
17:58really want to look the same without any
18:01minor differences. I'm going to click on
18:03this and then I'm going to change it to
18:06like title bar and then I'm going to
18:08click on export PNG right here. So now
18:11that I have it, let's go and see what it
18:13looks like. There we go. We have it
18:15right here. So that's how you export a
18:17basic bar in Affinity. You'll have to go
18:19through every single layer and export it
18:21one by one. um if it has any effect on
18:24it, for example, it has an inner shadow
18:26or something else, something of the
18:28sort, then you'll just have to rasterize
18:30the main layer and then export it. For
18:32example, this is a main frame that I
18:34have. This is an inner shadow with an
18:35effect on it and whatnot. All I have to
18:38do is I have to click on this rasterize.
18:41Now, this is completely rasterized. It's
18:43one layer. Then I can export it and it
18:45will be done. As you can see, it's just
18:47one layer. In order to export a glow in
18:50Affinity, what you would have to do is
18:52let's go here to this frame and we're
18:54going to expand it. We hit the text a
18:56while ago. We're going to add glow to
18:59this frame. So, let's quickly go in
19:01effects, add our glow, make it a bit
19:05bigger.
19:06Something like this. And for the sake of
19:09this video only, I know it doesn't look
19:10good, but bear with me. Now, what we're
19:13going to do is we're going to hide the
19:16stroke.
19:17So we can see it's [music] hidden. And
19:19now what we want to do is we want to
19:21change the fill color to white. So now
19:24as you can see the entire thing has
19:26become white. If you were to export this
19:28as a PNG for example, let's quickly
19:30export this. And now if I opened it in
19:32Infinity, this is what it looks like. So
19:34as we can see it's a PNG. So now if you
19:37export this into studio, you'll have to
19:39color it in studio. Um which is a bit
19:42more of a flexible approach which I
19:43like. So in studio you would just
19:45perhaps change the image color three
19:47after importing this or you would add a
19:49UI gradient on it so that you can also
19:51modify it as a gradient which is a very
19:54nice thing to have. That's how you
19:55export a glow in definity. So now I'm on
19:59photo. So in order to export this header
20:03what we're going to do is in photo we
20:05have a very difficult or lengthy way to
20:09do this. So I don't recommend using
20:10photo anyways. the interface is quite
20:12old and it has conventional methods.
20:15There's much more newer ways to do
20:17stuff, but if you're still going to
20:18stick to photop, what we're going to do
20:20is we're going to, for example, go to
20:22this header. We're going to merge all of
20:24this together, right? And then you're
20:27going to convert this to a smart object.
20:29And then you're going to doubleclick
20:30right here. A separate file is going to
20:33open up. And then you can go to file,
20:36uh, export as PNG. Save. Now you have a
20:40PNG file. You can go back to the codes
20:42file. And then if you were to drag it
20:45here, you can see that we now have it.
20:47There's also another way to do this. You
20:49can go to file and then export layers.
20:52This is going to open up this menu. You
20:54can select uh only exporting layers
20:57whose name starts with minus E minus or
20:59dash E dash. Um you would have to name
21:02all these layers separately. Uh add a
21:04dash Eyee dash before them, the ones
21:06that you want to export. Or apart from
21:08that, you could just uncheck this
21:10option. It would export everything as a
21:12PNG. And there's like a bunch of options
21:15here. But again, this is going to be a
21:17bit tricky cuz most of the time you
21:19don't want to export everything. There's
21:21going to be text labels and then there's
21:23going to be blending options. Sometimes
21:24you want to uncheck something, masks,
21:26and it gets a bit tricky. So this um is
21:29not [music] a very satisfactory
21:32application or website to use. Lastly,
21:35if you have a glow on, for example, the
21:37close button like we did in Photoshop.
21:41So, we made the glow. So, what we can do
21:42now is we can easily go to the layer.
21:45Uh, click on the effect, create layers,
21:47and then we can move around the effect
21:49pretty simply. If you are trying to move
21:51it around and you can't select it, it's
21:53because you have auto select selected
21:54right here, which is making you select
21:57everything on top. So, turn this off,
21:59then select the outer glow, and then you
22:00can move it around. And then you can
22:01also do the same thing to it. convert to
22:04smart object and then double click right
22:06here and then you can go to file export
22:09as PNG. Done. Once we're in Roblox, what
22:13we're going to do [music] is we're going
22:15to first come here, turn off KUI for a
22:17second. We're going to go back to it
22:19later. You're going to see this small
22:20settings icon right here. Click on the
22:23settings icon and then turn on device
22:25emulation. You're going to be using this
22:27a lot in your UI making or importing
22:31process. This is very important. It will
22:33allow you to scale your UIs across
22:35different devices. If you click on it,
22:37you are able to see a lot of different
22:38resolutions. These are your phone
22:40resolutions, your tablet resolutions,
22:42your desktop console, and virtual
22:45reality. Um, the main ones that I would
22:48recommend using is obviously 1080p and
22:51then VGA just to see how nicely you've
22:54scaled your uh entire UI. VGA is
22:56probably the one that I use the most
22:58apart from iPhone 14 Pro. These are the
23:01three that I use the most. iPhone 14 Pro
23:031080p and VGA. They show you all these
23:06different resolutions like very
23:08landscape uh you know the normal
23:10resolution 1080p that you will be
23:12playing on and the sort of square
23:15resolution that is VGA. So we're going
23:17to enable 1080p for now. Uh another way
23:20to open device emulator if you have it
23:22off right here or if you can't find it
23:23here is by going in test device
23:25emulator. And there we go. Now, we're
23:27going to see how to upload images into
23:29Roblox. There are two main ways. This is
23:31the basic basic step of importing. So,
23:33please focus and try to replicate what
23:35I'm doing. You're going to go to
23:36homepage and then click on asset manager
23:39right here. You're going to see all
23:41these different options, places, images,
23:43meshes, packages, audio, and models.
23:45We're only going to be using images. So,
23:47what you're going to do is you're going
23:49to click on this bulk import icon. Also,
23:53you can call it the upload icon. You
23:55click on this and then this menu will
23:57open up. You're going to select the
23:58image that you want to import into
24:01Roblox. You can also select multiple
24:03images, which is the best thing about
24:05this method of importing. So, come here
24:07and for example, if I want to upload
24:09this circle, I'm going to click on this.
24:12As you can see, this small menu popped
24:14up and it told me that I'm done
24:16importing my little circle. It tells me
24:19the name and a small icon uh detailing
24:22that it's an image label. Same as here.
24:24This stuff does not have any relation to
24:27your images. So you don't have to worry
24:29about that. Just close it. And then you
24:32have your image here. After you're done
24:33importing, in order to use this image in
24:36your UI, uh we will have to get its
24:39asset ID in order to put it inside our
24:41image label and then let Studio
24:43understand that this is the image that
24:45we want to be shown in our UI. So the
24:47way to get your asset ID is by
24:49right-clicking this image right here and
24:50then clicking copy ID to clipboard. If I
24:53was to go ahead and quickly controlV
24:55this ID, you can see that I have my ID
24:58right here. This is what we're going to
25:00be using. Another way to upload images
25:02into Roblox is by going on
25:04create.rollbox.com
25:06and then clicking on creations. Click
25:08development items. Select decals and
25:12then you should have an option for
25:13uploading assets. You can click images
25:15to see that it says here images can only
25:17be generated by the system. Upload a
25:19decal to add images to your inventory.
25:21meaning we have to upload decals in
25:23order for them to be treated as images
25:25rather than uploading images ourselves.
25:28So we're going to come to decals and
25:29then we're going to click on upload
25:30asset. This small page is going to pop
25:32up. What we have to do now is click on
25:34upload. Select the circle that we
25:36selected before and it's going to be
25:38selected right here. We can change the
25:40name as we want. We can add a
25:42description but we will not be needing
25:43anything like that. What we're going to
25:45do is we're going to click on upload.
25:47Now as you can see I have my circle
25:49right here. In order to get its asset
25:51ID, all I have to do is hover my mouse
25:53over it and then click on these three
25:55buttons, leftclick, and then copy asset
25:58ID. I can paste it again to see if it
26:00worked or not. And there we go. I got
26:02the asset ID itself. So, this is what we
26:04will be using. You might also be
26:06wondering, there was some text behind it
26:08earlier. Uh, this is just Roblox's way
26:11of labeling an asset ID. We will not be
26:13using this part to put in our image
26:16labels, but you can also type it in the
26:18back. it won't really change much, so
26:19you don't have to worry about that. So,
26:20that's how you upload images into Roblox
26:22Studio. Now, we're going to talk about
26:24GUI objects and how they work and also
26:26some extra stuff like how to import
26:28round progress bars and how to properly
26:31make imported bars work. So, let's go
26:33and start a GUI and create our first
26:35thing that we're going to be looking at,
26:37screen GUI. So, what is a screen GUI? A
26:40screen GUI is basically a storage
26:42container for all your 2D objects inside
26:45of your game. It will only work if it's
26:47placed under starter GUI. It will not
26:49work anywhere else. We're going to
26:51quickly go through the properties of
26:53screen GUI and we're only going to
26:55mention the important ones. Um, if you
26:58see here, we have screen insets. Uh,
27:00sometimes what you're going to do is you
27:02are going to create a full screen UI and
27:04it's going to scale weirdly on mobile.
27:07As you can see, the blue line is drawn
27:09here. This means that the full screen UI
27:11will not be scaling across here because
27:14this part is going to be clipped and
27:16this part is going to be clipped. Um, so
27:19this option allows you to decide whether
27:21you do want it that way or not. You
27:23could click on none. And as you can see
27:25now, it's going to show the entire UI
27:27all over your mobile screen. Um, this is
27:30a matter of choice. Maybe you would like
27:32it, maybe you won't. So, it's your
27:34decision what you want to do with it.
27:35Next up, we have display order. This
27:37practically acts like a z-index for
27:39screen GUIs. If we have multiple screen
27:41GUIs that have frames inside of them and
27:43the system has to decide which screen
27:45GUI is going to show up on top of which
27:47screen GUI, the display order is what
27:49handles that sort of behavior. Next up,
27:51we have enabled. If there's something
27:53inside of the screen GUI, we can enable
27:55or disable it. Ignore GUI insert
27:57basically does it so that the UI will
28:00show up where it needs to without
28:02getting influenced by the position of
28:04the existing UI that Roblox has in their
28:07system. Next up we have name. This is
28:09just to change the name of the screen's
28:10UI. Something like this would change the
28:11name to that. And we're going to control
28:13Z that. Then we have parent reset on
28:15spawn literally does it so that if you
28:18have the UI visible on your screen while
28:20you're playing the game and you die, the
28:23UI would reload. And then Z-index
28:25behavior. You don't have to get into
28:26that. Just keep it sibling all the time.
28:28Next up, we have billboard GUI. As you
28:30can see, billboard GUI is actually a
28:32storage container for objects that are
28:34present inside of the 3D world. We're
28:36going to quickly go through its
28:37properties. First, we have the option
28:39active. You will notice that some
28:40objects are clickable and some objects
28:42are not clickable. You will notice that
28:44your mouse changes to that sort of
28:46little clicking icon. Uh active is the
28:49property that decides whether it's going
28:51to happen or not. If you have this
28:52deselected, it won't do that. And if you
28:54have it selected, it will. Always on top
28:57will make sure that the UI completely is
28:59always on top. If you were to select
29:01this, you can see that it shows up on
29:03top. Uninfluenced by anything. So, we're
29:05going to disable that real fast. Enable
29:07just means whether it's showing or not.
29:09Light influence will determine how much
29:11your atmosphere or the lighting in your
29:13game is going to be influencing your
29:15billboard GUI and the objects present
29:17inside of it. Max distance is just a
29:20value that you can put to choose how far
29:23away the camera would still spot the
29:25billboard GUI. Reset on spawn again just
29:27means that if the billboard GUI is
29:29showing and the player resets, then the
29:31Billboard GUI will just reload. Sizes
29:34can just be in scale or offset. It's the
29:36basic concept. If you don't understand
29:38what sizing and positions are, please go
29:39and check my first video. Start offset
29:41means how much you want to change its
29:43position from its existing point. The
29:45existing point would pretty much be the
29:47primary part of its parent or exactly in
29:49the center of whatever it's a child of.
29:52You could go ahead and maybe change the
29:54studs offset to 10 in the center to put
29:57it vertically up by 10 studs. As we can
30:00see, it moved up by 10 studs. And yeah,
30:02that's pretty much all studs offset
30:04does. X-axis would move it a bit to the
30:06left side or the right side. And Z would
30:08bring it closer to the camera or farther
30:10away from the camera. clip descendants
30:11just does it so that everything that's
30:13inside this billboard GUI would get
30:15clipped and wouldn't show if it extends
30:18outside of the box of the billboard GUI.
30:21As we can see, we have this little
30:22rectangle here. If there was a frame
30:25inside of it that was to extend outside
30:27of this box, it would not show the part
30:30that's extending outside of it. So, a
30:32surface GUI is basically again a storage
30:34container for your GUI objects. And this
30:36attaches itself on top of an on top of a
30:39part inside of your Roblox Studio. This
30:41can also act as a texture. If you were
30:43to click it, you can see that it shows
30:45up on top of this part right here.
30:47Active just means whether you can select
30:48it or not. If you were to hover your
30:50mouse on top of this, you would be able
30:52to click it. Otherwise, if it was
30:55disabled, you would not be able to click
30:56it. Adori means the part that it has
30:59been attached to. As we can see, the
31:01part exists in workspace, but the
31:03surface GUI exists in starter GUI. So in
31:06order to attach the surface GUI to the
31:08part, we would have to put its adorni on
31:10that part. Always on top just means that
31:12even if the camera is being blocked by
31:15some other object, the surface GUI would
31:17still show on top regardless of the
31:20obstacle. Enabled just means if the GUI
31:22is enabled or disabled. Face means on
31:24what side of the part the surface GUI is
31:28being shown. It could be the left,
31:30bottom, right, front, back. Light
31:32influence is basically a factor of how
31:34much the existing atmosphere or the
31:36environment is influencing [music]
31:38the brightness or the texture or the
31:42contrast of the frames inside of the
31:45surface GUI. Max distance is a value
31:47that you can manually put. It will
31:49determine how far away you can look at
31:51the surface GUI from. And if you're
31:53beyond that specific value of studs, you
31:55will not be able to see the surface GUI.
31:57It will get instantly hidden. Reset on
31:59spawn just means that if you were to
32:01die, the UI would instantly do a reload.
32:03It will not save. Clip descendence means
32:05that if there was any part inside of the
32:07surface UI that was extending outside of
32:09it. The surface UI would clip it and it
32:11would not show outside of the box
32:13itself. Pixels per stud is just a simple
32:15unit for measurement. It determines how
32:18much pixels are going to be present per
32:20stud. Quite literally, no need to think
32:22too hard about it. Just think about it
32:23in a very simplistic way. It's very easy
32:25to understand. Next, we're going to
32:27focus on screens UI and we're going to
32:28understand how hierarchies work. So, a
32:31hierarchy basically means an order of
32:34how the UI has been laid out. So, if you
32:37were to go to starter GUI and create a
32:39screen GUI and inside the screen GUI,
32:42let's create a frame and put this in the
32:44center. Remove background and fit to
32:46parent size. Um, we have just quickly
32:48created a very small hierarchy. Our
32:51hierarchy would just be a frame that is
32:53a child of a screen GUI which is a child
32:56of starter GUI. So this is our small
32:59hierarchy right here. While importing it
33:01is absolutely crucial to understand that
33:04we have to be very careful with how we
33:06lay out our UI. If we have a button
33:09that's below a holder frame, we
33:11obviously won't be able to see that
33:12button. So we have to understand
33:14Z-indexes and how the overlapping and
33:16parenting works. Let's go ahead and
33:18quickly understand what a frame is. Now,
33:20a frame is basically the main object
33:22that we use to hold all of our GUI
33:26information. It could be an image. It
33:29could be a text label. It could be a
33:31text box. It could be anything that we
33:33want to store inside of the frame. Frame
33:35has a lot of properties. So, let's
33:36quickly go through them. Active just
33:38determines whether the frame is
33:40clickable or not. If you hover your
33:42mouse on top of the frame, you will be
33:44able to see that the mouse is going to
33:46change to a clickable cursor. This means
33:48that you can interact with the frame.
33:50Anchor point. In order to understand
33:51that, watch my first YouTube video.
33:53Automatic size is very important to
33:55understand. If you have a text label
33:57inside of the frame and the text label
33:59is supposed to retain its size when it's
34:02changing its values. For example, if you
34:05have a text that says five and you have
34:08a frame that has been made to hold only
34:12two digits of value, if you were to
34:14change that five into a 500, since the
34:17frame is small and it's only meant to
34:19hold two digits, it will not be able to
34:22go beyond 99. So, it's going to break
34:24apart. So, what you want to do in that
34:26case is you want to turn on automatic
34:28size. This will ensure that even if the
34:31value increases, the frame size will
34:33also increase with it. When you turn on
34:35automatic size, it is also important to
34:36understand that you have to put the size
34:380 comma 0 right here so that it will
34:41only affect the size of the children
34:44that are inside of it. Background color
34:46is just the color of the frame itself.
34:48If we were to quickly unhide the frame,
34:51we can see that this is the background
34:52color. We can change the color right
34:54here. The background transparency just
34:56hides or unhides the frame and it can
34:58also make it a bit transparent. If we
35:00could put something like 0.5, we can see
35:03that it becomes semi-transparent. Next,
35:05we don't use borders. We only use UI
35:07strokes. We will get into that later.
35:08Next, we have layout order. Layout order
35:10is only used if you're using something
35:12like a UI grid layout or a UI list
35:14layout. Um, this determines in terms of
35:17a list whether this frame is going to
35:20come first, second or third or fourth or
35:22so on. It's the value that you put in
35:24order to determine its position in a
35:26list. Name is just the name of the
35:28frame. Maybe I could put something like
35:29heck for now. The parent is what it's
35:32parented to. Position and size. Please
35:34watch my first YouTube video to
35:36understand position and size in a very
35:38thorough detail. Rotation just
35:40determines whether the frame is going to
35:42be rotated at a certain angle or not.
35:44Let's quickly go and put 45. We can see
35:46that the frame rotated 45°. Visible
35:48determines whether the frame is going to
35:50be shown or not on the screen. The
35:52z-index just means whether this will
35:54show above or below other objects that
35:57are present inside of the same parent.
36:00So for example, if I was to go ahead and
36:02create other frames, uh we can quickly
36:05go ahead and change all of these
36:06background transparencies to zero and
36:09make them a bit small. We can put them
36:11in the center. Let's go ahead and move
36:13one of them to there, one of them to
36:16there. So now if we were to click on the
36:18center one and change its z-index to
36:21zero, let's color both of the other ones
36:24to something like green. As we can see,
36:27both of the other ones are above this
36:28one. And this is because the z-index of
36:30the one below is set to zero and the
36:32other ones are set to one. If you were
36:34to quickly click on the white one and
36:36change the z-index to something like
36:37two, now it shows up on top of it
36:39because it has a z-index that's higher
36:41than the other ones. Alternatively, we
36:43can also put values in negative. So
36:45there we go. What clip descendants
36:47basically does is that anything that's
36:49inside of this frame that's extending
36:51outside of it will not be shown. Next
36:53up, let's go ahead and add a text label
36:55inside of this. So what a text label
36:56essentially does is that most of the
36:58basic properties are just like the
36:59frame. Please go ahead and check out the
37:01frame section. If you would like to
37:02learn the basic properties, let's
37:04quickly center this. Um, a text label
37:06has these extra options. As you can see,
37:07there's like a panel for text. Um, you
37:10have the option to select the font face.
37:12We can quickly go ahead and test this
37:14out. If we click on a font and then we
37:16use our arrow keys to move it up and
37:18down, we can quickly scroll through
37:20different types of fonts. I'm going to
37:22go for Monster Extra Bold, which is my
37:26favorite font. Uh, style allows us to
37:28either put bold or italic, and weight
37:31allows us to choose the thickness of the
37:33font. I'm going to put extra bold. Line
37:35height is how much spacing there will be
37:38if there are two lines of text. So for
37:41example, if there's label and then
37:42there's another label below it, the
37:45spacing between both of these labels is
37:47determined by line height. Next up, we
37:49have rich text. So rich text basically
37:51allows us to use formatting for the
37:54text, maybe through scripting or maybe
37:56even in the text itself. Let's quickly
37:59go ahead and add something like label
38:01label. As we can see, there's two texts.
38:04Now, if you would like to color the
38:06capitalized label differently, we cannot
38:08do that without enabling rich text. If I
38:10quickly go ahead and enable rich text
38:12and then I come here maybe type
38:14something like this. One color is equal
38:16to quoted quotation marks hash ff00
38:22and then I come here and then close it.
38:25We can see that it changed the color of
38:27it. Maybe I can go with something more
38:29red.
38:31And as you can see now it completely
38:33changed the color even though it's the
38:35same text label. I'm going to quickly go
38:36ahead and disable that. As you can see,
38:38it does not allow us to color it
38:40anymore. Let's remove it all for now.
38:42Um, next up, we have the option for text
38:44color 3. This just allows us to change
38:46the color of the text. Let's quickly go
38:48ahead and try to color it around. And as
38:51we can see, it is allowing us to color
38:53it differently. Text scale just makes
38:55sure that it doesn't read the text size
38:57right here. But it scales the text
38:59according to your screen size, which is
39:01what you will always want to enable. You
39:04will never practically have to use a
39:06specific text size. No one uses text
39:09stroke anymore because everybody uses US
39:11stroke. It is the only feasible option.
39:13We will not be using text strokes here.
39:16Text transparency determines how
39:18transparent the text is. We can quickly
39:20go around and play with the numbers. And
39:21as you can see, the transparency is
39:22changing. In the end, we have text
39:24wrapped. Let's quickly go ahead and add
39:26something like label label label label.
39:30If you were to disable this, we can see
39:33that it only does it in one line and it
39:35would keep going on and on and on. If we
39:38turn on text wrap, then it will freely
39:40adjust itself as needed on different
39:43multiple lines. Last but not least, we
39:44have the text alignments. Um, if we were
39:46to change the text X alignment to left,
39:49it would move itself to the left side,
39:51even though the Y alignment is still
39:53going to be in the center. If you were
39:54to change the Y alignment to something
39:56like bottom, we can see it comes to the
39:58bottom. Let's change it to top and then
40:00change the X alignment to right. Now
40:01it's top right. So these are the
40:03multiple properties for text label.
40:04Let's go ahead and quickly add an image
40:06label. Now an image label practically
40:08functions the absolute same as a frame
40:10apart from the fact that it has a panel
40:12for image right here. To understand all
40:14of the different properties, please
40:15redirect yourself to the frame section.
40:17Right here we have the option to put an
40:19ID for the image. If we were to put
40:22something like this for example that I
40:23imported a while ago, we can see that it
40:25updates itself to put that specific
40:28image there. Um, we have the option to
40:30change the image color of this specific
40:33image. If you were to go around and play
40:35around with the color, we can see that I
40:36have the option to color it differently.
40:38Image content is basically the same as
40:40the image. This is mostly used in
40:42scripting for multiple purposes. Image
40:44rect offset and image rect size is very
40:46good for flip books and sprite sheets.
40:48We will get into that in a different
40:49video. Image transparency just
40:50determines how transparent an image can
40:52be. If we go around and play with the
40:54transparency, we can see that it becomes
40:56very transparent. Resample mode just
40:58determines whether the UI is going to be
41:00a bit pixely or not. If you were to
41:01click on pixelated, it it becomes a bit
41:03sharp and very boxy, but that's not what
41:06we want. Scale type is the most
41:08important thing out of this entire
41:09section. Scale type allows us to use
41:11different scaling methods for our image.
41:14If you were to go with crop, we can see
41:16that it basically retains the size of
41:19the image, but it will always try to
41:21maximize itself across the size of the
41:24frame itself. Let's change the scale
41:25type to fit. As we can see now, it will
41:28not try to match the size of the frame
41:30itself, but it is going to retain the
41:33size of the image itself. As we can see,
41:36the proportions aren't messing up, but
41:38it's not cropping itself. And this is
41:40very ideal when importing UI. So please
41:43make sure to use this a lot. Stretch is
41:44the basic property. Stretch just does it
41:46so that the entire image will get
41:48stretched according to whatever pixels
41:51you put inside of the image property. In
41:54tile scale type, you can just duplicate
41:56the same image multiple times. This is
41:58very good if you are making a loading
41:59screen or something similar like that.
42:01Let's quickly go ahead and put something
42:02like 0.5. As you can see, it quickly
42:05divided itself across the entire frame.
42:08If you were to go around and move it,
42:09it's going to keep itself divided, but
42:11it is still going to move around and
42:14scale with the actual size of the image
42:16label. So, the next thing that we have
42:17is text box. It basically functions as a
42:20frame and a text label with some added
42:22[music] special properties. Um, if you
42:24would like some basic insight in this,
42:26please go ahead and check out the frame
42:27and text label sections. This is
42:29basically a text label which you can
42:31click and type in. So, as you can see, I
42:33clicked on it. It's instantly hid inside
42:36of it. And now I can type whatever I
42:37want and then press enter. The first
42:39property that we have that's unique here
42:40is clear text on focus. If you have this
42:42selected, what it will do is that if you
42:44click on the box, it's going to hide the
42:46text that already exists. If you were to
42:49unselect this and then we were to type
42:51something, as you can see, it doesn't
42:53instantly delete that. Multi-line allows
42:55you to type text that's going to
42:58separate itself into multiple lines. You
43:00can press enter while typing to make a
43:03new line. To understand position and
43:05size, please go ahead and check out my
43:06first YouTube video. Rotation just
43:08allows you to change the rotation of the
43:10text box. Something like this would put
43:12it on a diagonal. Text enabled is just a
43:14solid protocol. If it's enabled, then
43:16you can edit whatever is written inside
43:18here. If it's not enabled, that you will
43:20not be able to write anything yourself.
43:22And then we have the text panel here.
43:24It's basically the same thing apart from
43:26the placeholder thing that we have right
43:28here. Um, placeholder text just means
43:30what's going to be written before you
43:31click on it. If I was to go ahead and
43:33write something like search and then
43:36remove the text right here, as you can
43:37see, the search shows up right there. I
43:40can also make it a bit darker depending
43:41on what I want. So something like this
43:43could work. Moving on to a text button.
43:45A text button functions the same way as
43:48a frame would. If you would like, please
43:49go ahead and check out the section on
43:50frame and text label to understand more
43:52about the text button basic properties.
43:54The unique properties we'll be going
43:56over. So the first one is auto button
43:57color. If you were to hover over a text
44:00button or an image button in Roblox,
44:02what it normally does by default is that
44:04it's going to add a little black
44:06transparent frame on top of it. It's
44:08going to make it look like you're
44:09hovering over it. By unselecting or
44:11deselecting this option, you will remove
44:13that feature from Roblox. Next up, we
44:15have the haptic effects. This is very
44:17good for Roblox's in-built hovering and
44:20clicking effects. Basically, if you
44:22hover over, it resizes and if you click,
44:24it does like a little bounce effect.
44:27This is what Roblox offers, but you can
44:29also script it manually if you would
44:30like to. The rest is pretty much the
44:32same. The only difference is that text
44:34button is a button that you can click
44:36and it can be told to do a certain
44:38action while a normal frame cannot.
44:40Moving on to image buttons. Image
44:42buttons functions the absolute same as a
44:44frame or a text button would. If you
44:46would like, please go ahead and check
44:47those sections out. The unique property
44:49in an image button is the fact that we
44:51have these two options here. Hover
44:53haptic effect and press haptic effect.
44:55If you were hovering over it or clicking
44:56it, it would have like a little bounce
44:58effect or a resizing effect. That's
45:00what's unique to buttons in Roblox.
45:02Apart from that, we have this auto
45:03button color right here. If you were
45:05hovering over the image button, Roblox
45:07normally makes the button darker to show
45:10that you're hovering over it, but you
45:12can turn this property off if you would
45:13like to. Next up, we have these two
45:15properties right here. Hover image and
45:17hover image content and pressed image
45:18and pressed image content. If you are
45:20hovering over the image, you have the
45:22ability to change the image ID. And if
45:24you click on the image, then you also
45:26have the ability to change what the
45:28image looks like after it has been
45:29clicked. Next up, we have a canvas
45:31group. A canvas group is basically the
45:33same as a frame. The only difference is
45:35that canvas groups collide with quality
45:37a bit. They are going to ruin the
45:39functionality of your game. Because
45:40canvas groups take up a lot of
45:42resources, they do stuff that normal
45:44frames cannot, and hence they eat up the
45:45resources a bit more than a frame would.
45:47Canvas groups can be useful for one
45:49thing. It is for rounded corners not
45:51being clipped by the frame, which is a
45:53very common problem in Roblox Studio. As
45:55you can see, a canvas group clips out
45:57the corners of a rounded frame. But a
46:00frame, normal frame cannot do that. This
46:03problem becomes very annoying when you
46:04are making a health bar or you're making
46:06a shop GUI or any GUI that uses rounded
46:08corners and you cannot get the entire
46:10thing to work. Um, if you have 50 frames
46:12inside of this canvas group and you
46:15change a value here, it would
46:17consecutively apply the same
46:18transparency to all those 50 frames,
46:20which eats up a ton of resources. That's
46:22why it's not recommended to use canvas
46:24groups inside of your game. Next up, we
46:26have a viewport frame. What a viewport
46:27frame basically does is that it allows
46:30you to view something, as the name
46:32suggests, in a 3D setting inside of your
46:34game. If you, for example, have a
46:36character that you want to show inside
46:38of your viewport frame, that can easily
46:39be done. Let's quickly go ahead and do
46:41something similar. I'm going to insert a
46:43rig of my character in workspace. As you
46:46can see, I'm done with that. I used a
46:47plugin called load character by already
46:50pro. Uh next up, what I'm going to do is
46:52that I am going to create a camera angle
46:54somewhere here, which I like. And then
46:58I'm going to go to the camera and then
47:00I'm going to duplicate the camera right
47:02there. I'm going to call it second
47:04camera.
47:06And then I'm going to hold control and
47:07select both of these and I'm going to
47:09put it inside of the viewport frame.
47:12Then what I'm going to do is that I'm
47:14going to click on the viewport frame and
47:16I'm going to change current camera to
47:18second camera. As we can see the
47:20character has now popped up. It is that
47:21simple. And we can move the character
47:24around using the rotate button right
47:27here.
47:29And as you can see it is moving in the
47:31viewport frame actively. And this is
47:33very useful for showing characters and
47:35showcasing UIs. Let's quickly go ahead
47:37and hide the background of the viewer
47:39frame. You can see that there's an
47:41annoying outline that has popped up
47:42around the character. This is a very
47:44common mistake beginners do. They don't
47:45know how to fix this outline. In order
47:47to fix the outline, there are a number
47:48of steps. The easiest one that I'm going
47:50to be showing is just by changing the
47:52background color to something like 100.
47:54When you do this, the outline basically
47:57gets a very grayish color and it will
47:59not show that outline anymore. This is
48:02the most easy to do and feasible method
48:04to remove the outline. Moving on, we
48:07have a lot of other options. We have the
48:08ambient and light color. This is
48:10basically the lighting for the 3D
48:12objects inside of your viewport frame.
48:14If you have built on Roblox before or
48:16modeled even, you would probably know
48:18something about lighting. And this is
48:19where you apply that. For all the basic
48:21properties, please go ahead and check
48:22out frame sections or other sections.
48:24Then you guys must have noticed that we
48:26also have an option for image right
48:28here. Um this is just to change the
48:29overall hue of whatever is present
48:31inside the viewport frame. You can
48:33quickly come here and change it like
48:34this. And you can also change the image
48:36transparency to something like this.
48:38This is essentially a background
48:40transparency but also keeping in mind
48:43the character or the render that's part
48:45of your viewport frame. Everything else
48:46is pretty much the same. So yeah, so a
48:48scrolling frame is basically a frame
48:50that can be scrolled as the name
48:53suggests. It's very simple. We're going
48:54to remove the background and then we are
48:56going to reduce the size a bit.
48:58Maybe something like that works. As you
49:00can see, it can be moved up and down.
49:03Let's click on the scrolling frame and
49:04understand some things. The entire
49:06scrolling frame just functions like a
49:07normal frame. Please go and check out
49:09the section on frames a detailed
49:10explanation on the basics. Let's scroll
49:13down. And now the unique elements that
49:14we have are the scrolling properties. Um
49:17the entire scrolling properties has some
49:19very unique stuff. So please bear with
49:20me and watch this entire section
49:22thoroughly. First we have the automatic
49:24canvas size. Um the entire uh scrolling
49:27space inside of the scrolling frame is
49:29called a canvas. The canvas size can be
49:31a preset value. You can put it hardcoded
49:34or you can also scale it with how many
49:37objects are present inside of it. Let's
49:39say you have five different objects and
49:40you want the scrolling to stop when the
49:42fifth object ends. That's when you will
49:44have to turn it on. Next up we have
49:46bottom image. So a scrolling bar is made
49:49up of three images. The bottom one is
49:51the bottom image. The middle one is
49:54right here. mid image and the top one is
49:56called top image. If you were to quickly
49:58go ahead and remove the mid image, we
50:00can see the top and bottom ones are
50:01still there, but the mid one isn't.
50:02Let's control Z that. Let's remove the
50:04bottom one and then let's remove the top
50:07one. As you can see, it has become a
50:09very sharp rectangle. Next up, we have
50:11canvas position. The canvas position is
50:13basically what's inside of the box. We
50:15can move it left, right, up, and down uh
50:18depending on what we need, but no one
50:20ever really uses that. It's not a very
50:22feasible option to be using. Next up, we
50:24have canvas size. This is what we were
50:25talking about initially. Um, this is
50:27what determines how expansive the size
50:30of the canvas is inside of the box. Um,
50:33if we want to automatically size our
50:36canvas, we are always going to put the
50:37canvas size as zero so that it can only
50:40scale in respect to what's present
50:41inside of the box and not add any
50:44additional size on top of it. So, this
50:47is going to change to zero if we were to
50:48ever do that. and then change the
50:50automatic canvas size to something like
50:51X, X, Y or Y. Next up, we have scroll
50:54bar image color. This changes the image
50:56color for all the three different images
50:58that we have for the scrolling frame. If
50:59you were to quickly go ahead and change
51:01this to something like white, we can see
51:03that it goes to this color here.
51:05Unfortunately, the scrolling bar is
51:07always going to be at a bit of a
51:09transparency. It's not going to become
51:10fully opaque. This is because the image
51:12that is being used for the scrolling bar
51:14was not imported by the devs themselves
51:16on full opacity. So, we have to struggle
51:18with this unless you want to import your
51:20own scrolling image. Next up, we have
51:22the scrolling bar thickness. This
51:23stretches the scrolling bar. Let's go
51:25with something like 30. As you can see,
51:26it becomes very huge. If you were to go
51:28with something like five, it becomes
51:30very thin. And then we have scrolling
51:32direction. What scrolling direction does
51:34is that it will allow you to either
51:35scroll left to right, up and down, or
51:38everywhere. So, a very good example of a
51:41scrolling direction on Xaxis would be
51:44something like a battle pass. If you
51:45were to scroll left to right, you would
51:47be able to see 1, 10, 20, 30, 40, and so
51:50on. A good example of a Y scrolling
51:52direction would be a shop GUI. You can
51:54just scroll down and you can buy
51:55whatever you want. And an XY would be
51:58something like a skill tree in RPG
51:59games. You can unlock the first section,
52:02and then you can go here to unlock some
52:03healing abilities, and then you can go
52:05here to unlock some fighting abilities
52:06and whatnot. Scrolling enabled just
52:08chooses whether you can scroll down or
52:10not. Last but not least, we have the
52:11vertical scroll bar position. We can
52:13change the scroll bar on the left or
52:15right side depending on what we want.
52:17Next up, I'm going to go ahead and show
52:18you guys how automatic canvas sizing is
52:20done. Let's quickly go ahead and add a
52:21UI list layout. Um, in a UI list layout,
52:24if you were to quickly go ahead and add
52:25some frames, maybe duplicate them like
52:27this. Now, we have some frames that go
52:30all the way here. We don't want the
52:32frame to go beyond that. So, what we are
52:33going to do in this scenario, we are
52:35going to change the automatic canvas
52:37size to Y and then we are going to
52:39change the canvas size to zero itself.
52:42Now, if you were to scroll down, we can
52:43see that it does not go beyond that. So,
52:45next up, what we're going to be looking
52:46at is UI properties for any single GUI
52:49object. Let's quickly go ahead and add a
52:51frame. We're going to position the frame
52:53in the center and maybe increase the
52:55size a bit. Now, let's quickly go ahead
52:58and add a UI corner to this frame. We're
53:00going to search UI corner. As you can
53:02see, we added a UI corner. Um, UI corner
53:05is basically a property or a extra GUI
53:09object that you can insert underneath
53:10your main GUI object which rounds the
53:13corners of that specific object. For
53:16example, if we were to go ahead and put
53:18something like 0.2, change this back to
53:20zero, you can see that it would round it
53:22and then we can go something as big as
53:240.5. Um, 0.5 and 0.6 and onwards
53:28basically function the same. Some people
53:30like going ahead and putting two. Um,
53:32you can also put 0.5 or you could also
53:34put one. It doesn't really change much.
53:37Um, as you can see, if I was to make it
53:38this big and then put something like
53:400.5, it would still be the same. So, if
53:42I put something like two or sorry, 2.0
53:45in order to keep it scaled, it still
53:46functions the same way. So, next up,
53:48what we're going to do is we are going
53:49to go ahead and add a UI stroke. UI
53:51stroke is basically a property or a
53:54descendant that allows you to add a
53:56stroke or an outline around the GUI
53:58object that it is a child of. If we were
54:00to go ahead and quickly increase the
54:01thickness to something like three, we
54:03can see it appear. We have like a
54:05thickness around the main frame. Now, um
54:08we have a lot of options for this. We
54:10have the apply stroke mode to contextual
54:12and border. Um this is going to become
54:14more easy to understand. If I was to
54:16quickly go ahead and add a text label.
54:18Now, if I was to quickly go ahead and
54:19put this UI stroke inside the text
54:21label, you can see if it's contextual,
54:23it is going to be adding the stroke to
54:25the text. If I was to quickly change the
54:26outline to white, as you can see, it's
54:28adding it to the text. But if I was to
54:30change the mode to border, it adds it to
54:33the frame itself. So contextual is
54:35whatever is inside of that uh GUI object
54:39in terms of context and border means the
54:41absolute boundaries of that GUI object.
54:44We're not going to go to border because
54:45it's rarely ever used. So we have some
54:47basic options like border, stroke
54:49position. Uh this can be changed to make
54:51the stroke either appear inside the
54:53frame or outside of it or maybe even on
54:56the absolute edge so that it overlaps
54:58both the inside and the outside part. As
55:00we can see center would be something
55:02like that and inner would be only inside
55:04of it. So this is pretty useful. Uh most
55:07people now have started using center
55:09ever since Roblox has pushed this new
55:10update. But I would still use outer for
55:13most of the stuff that I'm doing for
55:14absolutely proper uh alignments and
55:17whatnot. Next up we have UI strokes. Um
55:20we can change the US stroke to become
55:22white. We can change the color around.
55:24This is pretty nice for some glowing
55:26parts in your game. Uh apart from that
55:28we have line join mode. This is this can
55:30be either bevel, miter or round. Round
55:33makes it so that it's soft even if you
55:35increase the thickness. Let's go with
55:36something like 50. As you can see the
55:38edges are round. If I was to change it
55:40to something like bevel, it makes it
55:42very sharp and it also divides the ends.
55:45It does not keep them absolutely sharp.
55:48However, what miter does is that it is
55:50going to keep them very sharp. It is not
55:52going to lose its absolute proportions
55:54no matter how big it becomes. So, round
55:56US stroke is easier on the eyes. So, we
55:58stick with round. Then we have the
55:59stroke sizing mode. This is a new update
56:00by Roblox. Fixed size is basically a
56:03thickness in pixels. And then the scale
56:06size is how well it's going to scale in
56:09terms of scaled values. Um, if you were
56:11to go ahead and put something like 0.05
56:1305 or 0.1 maybe. As you can see, now it
56:16is going to scale with the screen size.
56:18And then we have the basic properties
56:20like thickness. Thickness is just how
56:22thick the UI stroke is going to be.
56:23Transparency can be fiddled around with.
56:25Now Z-index is something nice. Um, if
56:27you have more than one UI stroke, let's
56:29go ahead and quickly add another UI
56:31stroke. And then we are going to change
56:33the Z-index of this UI stroke to zero.
56:35Let's increase the thickness to 0.2. And
56:38change the color of this UI stroke to
56:40white. As you can see, we now have two
56:41UI strokes on the same frame. And the
56:43second one is below the first one. So
56:45then we can use two in the same way. We
56:47can also use multiple. Let's quickly go
56:50ahead and change this to 0.4. Uh change
56:52this one to 0.3. Put this one as minus
56:55one. And then put this one as minus2. Uh
56:59sorry, change the color. This one is
57:01going to become black. And this one is
57:02going to become white. As we can see,
57:04now we have two extra UI strokes. And it
57:07works perfectly. Next thing that we have
57:08is UI padding. I quickly gone ahead and
57:10made like a little hierarchy. What UI
57:12padding basically does is that it adds a
57:14little breathing room in your UI. Let's
57:16quickly go ahead and add a UI padding.
57:18And now let's quickly put a value like
57:210.05. As you can see, padding bottom
57:23means that we have added some breathing
57:25room in the bottom side. Let's quickly
57:27go ahead and add it to the top as well.
57:28Now we have space on both the upside and
57:31the downside. It is completely scaling
57:33the UI's positions with regards to the
57:36UI padding. If we delete that, we can
57:38see that they return to their original
57:39size. So, if you um lay out your UIs
57:43perfectly, you will never have to use UI
57:45padding. I also am not a personal fan of
57:47UI padding because it can cause problems
57:49with animations and whatnot, causing
57:51stuffs to not work the way that it's
57:53intended to. So, maybe you're better off
57:55not using UI padding and just laying out
57:57your UIs in a perfect manner. After
57:59that, we have a property called UI
58:01scale. It is very useful for animation
58:03such as hovering and resizing and then
58:06um clicking for a little bounce effect.
58:08If you were to quickly go to this frame,
58:10we added a UI scale to it. Let's change
58:12this to something like 1.5. As we can
58:14see, it became very big. Uh the reason
58:17why it did not increase on this axis is
58:19because the anchor point is set to here.
58:21Let's quickly go ahead and put the
58:22anchor point in the center. Now, if we
58:24were to change the scale, it would
58:26change in the center. As we can see, now
58:28it is changing in the [music] center.
58:29Let's quickly go ahead and put something
58:31like 0.5. And now it's resizing in the
58:33absolute center. Something like two
58:35would resize it there as well. So next
58:37up is UI aspect ratio constraint. What
58:39it basically does is that it's going to
58:40retain the proportions of the GUI object
58:43that it is a child of if it's browsed on
58:46different devices. It is going to keep
58:47that specific proportion that it was
58:49meant to have. If you were to quickly,
58:51for example, see this UI and change it
58:53to something like VGA, we can see that
58:55it stretches on the vertical axis. We
58:58don't want that happening. Let's go back
58:59to HD 1080p and then add a UI aspect
59:02ratio constraint to this. Um, this would
59:04cause problems adding it manually. So,
59:06let's quickly just go ahead and add it
59:08with my plug-in. Uh, now we have the UI
59:10aspect ratio constraint that has a very
59:12fixed aspect ratio right here. Um, let's
59:15go and check it with the VGA device.
59:17Now, as we can see, it is not causing
59:20any stretching problems. And this is
59:21because we now have a constraint on its
59:23aspect ratio. As we can see, the aspect
59:25ratio for this is 1.935. You guys can
59:28understand what an aspect ratio is by
59:30using certain mathematical values to
59:32divide the aspect ratios. For example,
59:35uh if your screen is 16 ratio 9, you can
59:39divide 16 by 9. And the result would be
59:41your absolute aspect ratio. And next up,
59:44we have a UI gradient. So what a UI
59:46gradient does is let's go to this frame
59:48in the center and add a UI gradient to
59:50it. A UI gradient is basically a color
59:54scheme that you can apply to a frame.
59:56It's a gradient of two different colors
59:58or maybe more than two colors depending
1:00:00on what you're going for. Let's quickly
1:00:02go ahead and see the properties of a UI
1:00:05gradient. We have appearance right here.
1:00:07And then we have color. This looks like
1:00:09one color, but if you were to click on
1:00:11it, you can see that these three buttons
1:00:12pop up. You can click on these and now
1:00:14you will have this little interface pop
1:00:16up. If you click on this button right
1:00:19here or this little sequence right here,
1:00:21you can select the color of it and then
1:00:23you can change it to something like
1:00:24green. Uh if you select the other one
1:00:27and then you were to change the color of
1:00:29that one, you can select something like
1:00:31red for example. In the center, you can
1:00:33create another point by selecting
1:00:35anywhere on this entire slider. Let's go
1:00:38ahead and put it there. And then change
1:00:39it to 0.5 because we want it in the
1:00:41absolute center. Change the color to
1:00:43something like pink.
1:00:46And there we have it. We have a nice
1:00:49little gradient right here. We're going
1:00:50to close this. Um we have a lot of
1:00:53options now. We can change the offset.
1:00:54This is good for like replicating a
1:00:56shine effect on a UI. Let's quickly go
1:00:58ahead and change this to, for example,
1:01:000.1. And you can see how it would get
1:01:02animated from one point to the other. It
1:01:04would move like 0.1, 0.2 quickly. It's
1:01:07going to become like 0.3, 0.4, all the
1:01:10way until it goes out of the screen and
1:01:12then comes back in a small little loop.
1:01:14Next up, we have rotation. We can change
1:01:16the rotation of the UI gradient. We
1:01:18could put it 90, we could put it 45, we
1:01:21could put it 135. We have a lot of
1:01:23options there. And lastly, we have the
1:01:25option to change the transparency. Do
1:01:27note this does not only remove the
1:01:29color, but it will also remove the
1:01:31transparency of the frame that it is a
1:01:34child of. If we were to go ahead and add
1:01:36a transparency here, we can see that
1:01:38it's also hiding the frame itself. This
1:01:40is an intended feature and there are
1:01:42ways to bypass this, but this is rarely
1:01:44ever bypassed because transparency is a
1:01:47very good feature to have and people
1:01:48love it. So, we can also quickly go
1:01:50ahead and do a lot of things with it.
1:01:51Um, we have these basic properties right
1:01:54here. Something like this. And lowering
1:01:57these sliders around. You won't ever
1:01:59have to get into anything else just for
1:02:00UI. So, you don't have to worry about
1:02:02that. Now, let's move on and understand
1:02:04layouts. The first layout that we have
1:02:05is a UI list layout. Let's quickly go
1:02:07ahead and add a UI list layout inside of
1:02:09this. So, as we can see now, it has
1:02:12automatically moved all of the frames
1:02:14into one specific sequence. Whenever we
1:02:17add a layout, we lose the ability to
1:02:18control the positions of the GUI objects
1:02:21that the layout is affecting. One way to
1:02:23bypass that is by making placeholder
1:02:25frames that are affected by the position
1:02:27of the list layout and then moving the
1:02:29positions of the content inside of those
1:02:32placeholder frames so that you can still
1:02:34have flexibility and maybe animate your
1:02:36layouts. Apart from that, let's look at
1:02:38the properties of the list layout. We
1:02:39have appearance right here. This is
1:02:41basic padding. Um, if you were to go
1:02:43ahead and change it to something like
1:02:440.05, 05. We can see that it creates
1:02:47space between all of them. Uh the second
1:02:49one is just offset. So we're not going
1:02:50to ignore that. Let's keep it at 0.01
1:02:53perhaps for now. Next up, we have the
1:02:55fill direction. The fill direction just
1:02:57basically insinuates whether you're
1:02:59going to list the GUI objects that are
1:03:01being influenced in a vertical or
1:03:03horizontal manner. If I was to change to
1:03:04horizontal, we can see that it changes
1:03:06to [music] the X-axis instead of the
1:03:08Y-axis. Sort order determines what frame
1:03:10is going to come first or what GUI
1:03:13object that it's influencing is going to
1:03:15come first. Um, if we have the layout
1:03:17order selected, you can go to the frame
1:03:19and you can see as we mentioned in the
1:03:21frame section of this video that we have
1:03:23a layout order right here. Um, we can
1:03:25either lay out the list in terms of a
1:03:28layout order. So, for example, if I
1:03:30change the color of this to green,
1:03:33change the layout order of this to one,
1:03:34it's going to pop up at the end. And
1:03:36this is because all of these are set to
1:03:38zero. So it's just going to randomize
1:03:40all four of these and put this one at
1:03:42the end of it. If I was to change the
1:03:44color of this to red, for example, and
1:03:46put it at, [music]
1:03:48let's say, layout order 2, it's going to
1:03:49add it at the end. So it's like 0 0 1 2.
1:03:52And if I was to change the sort order to
1:03:55name, now it's just going to base it off
1:03:58of names. So A is going to come first
1:04:00and Z is going to come in the end. Let's
1:04:02see the green one. Let's quickly change
1:04:04this to something like since all of the
1:04:06other frames are called F and F comes
1:04:08before let's say G, let's call this
1:04:11Graeme as a joke. As you can see the F
1:04:13are all in the start and G is at the
1:04:16[music] end. If we were to call this
1:04:17something like Zim, this is going to end
1:04:20up at the end as well. Next up, we have
1:04:22something simple like wraps. What wraps
1:04:24does is that it's going to make sure
1:04:26that every single GUI object being
1:04:28influenced by the list layout is not
1:04:29going to go outside of the borders of
1:04:32its parent. For example, if we made the
1:04:35size of all of these frames a bit
1:04:37bigger, as you can see, it is now going
1:04:39outside of the main frame. If we turn on
1:04:41wraps, it would make sure that it will
1:04:43not go outside no matter what. Even if
1:04:45we were to make more of these, you can
1:04:46see that it is all going to stay inside
1:04:48of it. Uh we can also go ahead and turn
1:04:50on clip descendants. And you can see how
1:04:52it all functions together. Let's quickly
1:04:54go ahead and duplicate more. It tried to
1:04:56go outside of it, but since clip
1:04:58descendants was enabled, it won't let it
1:05:00show anything outside of it. And then
1:05:02you can use a scrolling frame. And
1:05:04that's how you make an inventory. Last
1:05:05but not least, you have the alignments
1:05:07right here. Horizontal alignment just
1:05:08means where the GUI objects are going to
1:05:10show up in terms of X-axis. Are they
1:05:13going to show up in the left or the
1:05:14center or the right? Um, the vertical
1:05:17alignment just means whether they're
1:05:18going to show up at top, center, or
1:05:20bottom. Let's go with bottom. It's going
1:05:21to show up right there. So, lastly, we
1:05:23have the vertical flex and the
1:05:24horizontal flex. Let's quickly go ahead
1:05:26and see what that does. It just
1:05:27basically makes sure that all of the GUI
1:05:30objects inside of the main frame are
1:05:32going to um sort of flex into the
1:05:35extreme ends of the main parent frame.
1:05:37So, if we were to quickly go ahead and
1:05:39put this on fill, for example, you can
1:05:40see that the horizontal space completely
1:05:43gets covered. Um, if we were also going
1:05:45to put this back to none and then put it
1:05:48vertical flex at fill, we can see that
1:05:50it completely stretches on the vertical
1:05:52axis. This is honestly rarely ever used.
1:05:55If you scale out your UIs properly, you
1:05:57will never have to use this. So, you
1:05:59don't have to worry about this stuff.
1:06:00Anyways, let's quickly go back to none.
1:06:02And yeah, next up, we have a UI grid
1:06:04layout. This is largely the same as UI
1:06:05list layout except that it also allows
1:06:08you to put the sizing of each cell
1:06:10inside the layout. It is good and bad in
1:06:13some terms compared to UIL layout. There
1:06:16are some pros and cons. UI grid layouts
1:06:18are generally harder to manage and they
1:06:19are also harder to animate. However,
1:06:21they offer more uh flexibility since you
1:06:24can just change the sizing of all of the
1:06:26cells inside of the UI grid layout
1:06:27without having to manually change the
1:06:29sizes of all the GUI objects that are
1:06:31present inside that layout. So, let's
1:06:33quickly go ahead and try changing the
1:06:35frame size. As we can see, there's a
1:06:37exclamation mark here. You couldn't
1:06:38change it even if you wanted to. I can
1:06:40try dragging it around, but nothing
1:06:41happens. Um, we're going to come back to
1:06:43the UI grid layout and try changing this
1:06:45to something like 140, 180 maybe. And
1:06:48you can see that it changes pretty
1:06:50nicely. Next up, we have the cell
1:06:52padding. We can just change this. Uh,
1:06:54unlike Bliss layout, you can also change
1:06:56the padding on the Y-axis, not only the
1:06:58X-axis or not only in one direction, but
1:07:01both directions. So if we were to
1:07:03quickly go ahead and make five more
1:07:04frames, we can change the padding not
1:07:07only on the x-axxis, but we can also
1:07:09change it on the y-axis. As you can see,
1:07:12we have increased the spacing on the
1:07:14vertical axis. The fill direction is
1:07:16simple just like list layout. If you
1:07:18were to select vertical, it would just
1:07:20go like this instead of going like this.
1:07:22Next up, we have fill direction max
1:07:24cells. If I was to quickly go ahead and
1:07:26put this back to horizontal and change
1:07:27this to two, as you can see, it will not
1:07:29allow me to put more than two. If I put
1:07:32this back to zero, it's just going to
1:07:33think that it's infinite and it will go
1:07:35as much as it wants until it tries to go
1:07:38outside of the parent size. Um, for UI
1:07:40grid layouts, unlike list layouts, wraps
1:07:43is always enabled. You cannot disable
1:07:45wraps. And then we have the sort order
1:07:46just like UI list layout. Please go
1:07:48check that for a deeper understanding.
1:07:50Start corner can be changed. You can
1:07:51change it to something like bottom
1:07:53right, top right. What this essentially
1:07:54does is that it's not going to change
1:07:56the position of the frames. rather it's
1:07:58going to change where the first frame
1:08:00pops up that is uh in terms of sort
1:08:03order. So for example, if this was on
1:08:06zero and everything else was on first or
1:08:08on one layout order and we changed that
1:08:11the start corner would be top right
1:08:12instead of top left, the zero is going
1:08:15to show up here and then everything else
1:08:16is going to be one. Next up we have a UI
1:08:18page layout. What this basically does is
1:08:20that it allows you to change your UIs
1:08:23into individual frames of their own. For
1:08:26example, if you have these five frames,
1:08:28it's going to consider each frame as if
1:08:30it was a page of its own, no matter its
1:08:32size, and you can turn on animated. And
1:08:35then if you were to scroll up and down
1:08:36your mouse, you can see that it would
1:08:38animate the pages. And this is a very
1:08:40handy feature to have if you are new to
1:08:43uh animations and whatnot. However,
1:08:45honestly, no one really uses UI page
1:08:47layouts anymore. Everybody just animates
1:08:49them, animates the UIs, and makes them
1:08:51function using normal grid layouts, list
1:08:53layouts, and whatnot. behavior and
1:08:55everything is the same as what we had in
1:08:56UI list layout and grid layout. In
1:08:57appearance, we can see that we have an
1:08:59animated option. If you were to deselect
1:09:01this, we can see that if we try to
1:09:03change the animations wouldn't play.
1:09:05Circular just means is the page going to
1:09:07allow you to scroll back from the fifth
1:09:10page in this case to the first one or
1:09:12not. For example, if we don't have it
1:09:14selected and we scrolled to the end, we
1:09:16cannot scroll anymore. We cannot go back
1:09:18to the first one. We'll have to scroll
1:09:20upwards and then go back to the first
1:09:22one. However, if we have circular
1:09:24selected and we scroll to the last one,
1:09:26this is in this case our fifth one, and
1:09:28I try to scroll lower, we can see that
1:09:30it pops up again without me having to
1:09:32scroll upwards. So, this is basically
1:09:34infinite rotation. The rest of the stuff
1:09:36is pretty much tweening. Um, I would
1:09:38urge you to go ahead and watch an
1:09:40animation tutorial if you would like to
1:09:42understand this stuff better because
1:09:43tweening can take some time to get
1:09:46inside your head. Last and yes,
1:09:48absolutely the least, we have UI table
1:09:50layout. No one uses this in 2026. No one
1:09:53used this in 2025, 2024. This is a very
1:09:56deprecated layout. You basically lay out
1:09:58each frame as its own row, almost as if
1:10:00you were on Microsoft Excel. I urge you
1:10:02guys to learn list layouts, grid
1:10:04layouts, and page layouts more, and
1:10:05they're going to help you a lot more in
1:10:08your UI journey rather than table
1:10:10layouts. Now, I'm going to be brushing
1:10:11up on some terminologies that we use in
1:10:14UI importing and some concepts here and
1:10:16there so that you guys can learn more
1:10:18about importing. First up is grayscale.
1:10:20Grayscaling basically means that instead
1:10:22of uploading an image with color you
1:10:24basically import it as white and black
1:10:26so that you can color it inside Roblox
1:10:28Studio. So here I have two images both
1:10:30of them are different colors um as you
1:10:32can see. However in studio both of them
1:10:34are image color set to white. As you can
1:10:36see image color is set to 255 which
1:10:39means it is white. Um this one is also
1:10:41set to 255. However we're going to see a
1:10:44very key difference. Um, if you tried to
1:10:46change the color of this one, for
1:10:47example, it is going to change very
1:10:49weirdly. As you can see, green doesn't
1:10:51even turn into pure green and all of
1:10:53this just turns into very weird color.
1:10:56This is because Roblox cannot properly
1:10:58color it because you have imported it as
1:11:00red. Um, if you went to this one,
1:11:03however, and try to color it, you can
1:11:05see that it turns into an absolute pure
1:11:07color, whatever color you want it to be.
1:11:09I can also replicate that color one to
1:11:10one, as you can see right here. Um, we
1:11:13can play around with so many colors and
1:11:14put it any color that we'd like. This is
1:11:16one of the best features for grayscaling
1:11:18your UIs. Very so often you're going to
1:11:20see people um in their UIs, they animate
1:11:23it so that when the mouse hovers over a
1:11:25unit, for example, in an inventory UI,
1:11:28the glow beneath the unit is going to
1:11:30change colors. That only happens if the
1:11:32glow itself was imported white and then
1:11:35they change the color on Studio. We're
1:11:37also going to go around and play with
1:11:38some more stuff. If I was to add a UI
1:11:40gradient to this for example and I was
1:11:42to change the gradient color to
1:11:44something like I'm going to hide that
1:11:45for now you so you guys can see it one
1:11:46go pink and then something like blue.
1:11:49Now you're going to see that it also
1:11:50changes the color depending on the
1:11:52gradient which is one of the best things
1:11:53about grayscaling. We can go around and
1:11:55play with more gradients from my plug-in
1:11:57right here. As you can see it just all
1:11:59looks so splendid and nice. Let's
1:12:01quickly go ahead to a third party
1:12:03software and I will show you how to
1:12:04grayscale. So this is the uh icon that
1:12:06we had. Um, as you can see, it is
1:12:08currently colored red. There are a lot
1:12:10of ways to change this to white. Um, the
1:12:12way that I'm going to be sticking with
1:12:14is that I'm going to in Photoshop simply
1:12:16come to image adjustments and then click
1:12:18on desaturate. This is a beginner
1:12:20mistake that people make. They're going
1:12:21to try and desaturate it and then import
1:12:24it to studio. This is not going to work
1:12:26because the color is set to gray. If you
1:12:29were to pick the color, you can see that
1:12:30it's set right around here. If you
1:12:33imported this into Roblox Studio and
1:12:34tried to color it around, it will not be
1:12:37able to pick the brightest colors
1:12:39because the value simply does not go
1:12:41that high. If you imported it as gray,
1:12:43it will only if you tried to change the
1:12:46image color three to something like
1:12:47bright red, it would only go as far as
1:12:50here in Roblox Studio. So, you have to
1:12:52make sure that the color is absolutely
1:12:54pure white so that you can also make it
1:12:56dark yourself if you want it in Roblox
1:12:58Studio. So, in order to fix that, what
1:13:00we're going to do is we're going to go
1:13:01to image adjustments and levels. And
1:13:03then we going to move this bar slightly
1:13:06down until we cover this entire peak
1:13:10that we see right here. If we quickly
1:13:12click on preview and on preview, we can
1:13:14see that the white color has dominated.
1:13:17Uh maybe maybe the black color has been
1:13:20dominated a bit as well. So, what we're
1:13:22going to do to fix that is we are going
1:13:23to simply put this somewhere safe like
1:13:25three. And now we are absolutely certain
1:13:28that it's completely white and black.
1:13:30And if we were to go and import this
1:13:33into Roblox Studio now, it is going to
1:13:35be pure white. There is a blending mode
1:13:37that Roblox uses in order to color the
1:13:39grayscale images. And it is multiply. If
1:13:42I was to go ahead and quickly clip this
1:13:44new layer to that icon and then maybe
1:13:46use the red color and then I would color
1:13:50it all over it. As you can see, it
1:13:52doesn't function the way it has to. Even
1:13:54if I put the blending mode to color, it
1:13:56doesn't. However, Roblox uses multiply.
1:13:59As we can see, this is the blending mode
1:14:00that Roblox uses. I'm also going to
1:14:02prove to you guys that if you import as
1:14:04gray, it's not going to function the way
1:14:06you guys intend for it to do. And now we
1:14:08are going to turn on the same thing that
1:14:10we had earlier without any change. It's
1:14:12still set to multiply. As soon as we
1:14:14turn it on, you can see that it's not
1:14:16bright red anymore. And this is because
1:14:17the blending mode that Roblox uses is
1:14:19multiply. It's going to make it darker
1:14:21no matter what you do. That's why it's
1:14:23heavily advised that every single
1:14:25grayscaleed images that you upload in
1:14:27Roblox follow absolute pure white color.
1:14:30Next, we are going to learn what a
1:14:31hitbox is. More often than not, when you
1:14:33are importing UIs or doing some stuff,
1:14:35asking for help, you are going to hear
1:14:37people tell you to add a hitbox to the
1:14:39button that you are trying to import
1:14:41into Roblox Studio. What that basically
1:14:43means is that let's say this is your
1:14:45intended button. Now, you can see that
1:14:47this is an image label and you cannot
1:14:50actually click this. it is not going to
1:14:51function as a button. So you have to
1:14:53turn it into a button. Perhaps for
1:14:55whatever reason, maybe you're done with
1:14:57everything and you don't find it
1:14:58feasible that you want to turn this into
1:15:00an image button. Maybe you've already
1:15:01written all the scripts and you don't
1:15:03want to go back and redo anything. What
1:15:05you're going to do is simply you are
1:15:06going to add an image button inside of
1:15:08this. You're going to center it. Remove
1:15:10background fit to parent size. And then
1:15:12let's lower the image transparency just
1:15:14a bit for now. And then we are going to
1:15:17make the size absolutely what we want.
1:15:20Maybe something like this. And then
1:15:22something like this. And then let's
1:15:25lower it to something like this.
1:15:30Maybe something like 67 or maybe 0.65.
1:15:39There we go. And you can now rename this
1:15:41into a hitbox. This is going to act as
1:15:43the intended hitbox that you have. What
1:15:45a hitbox basically means is that you've
1:15:47seen in combat games, every single
1:15:49character has a sort of a hitbox. If you
1:15:51fire or hit outside of that hitbox, it's
1:15:53not going to drain their HP. If you move
1:15:55your mouse on top of it, you can see
1:15:57that your mouse turns into this clicking
1:15:58icon or clicking cursor. So, UI
1:16:00designers call this sort of image button
1:16:02under this image label a hitbox. So,
1:16:04I've quickly gone ahead and made a
1:16:06mockup UI just to explain to you guys
1:16:08how to properly apply constraints.
1:16:09[music] Um, a lot of people make this
1:16:11beginner mistake. What they do is that
1:16:13they add aspect ratio constraints to
1:16:15basically everything that they're doing.
1:16:17So what they're going to do is for
1:16:18example they're going to click on the
1:16:19scrolling frame. They're going to add
1:16:21aspect ratio constraint to that. They're
1:16:22going to click on the holder aspect
1:16:24ratio constraint background aspect ratio
1:16:26constraint. Everything else
1:16:28simultaneously aspect ratio constraint
1:16:30until they come to the container again
1:16:32aspect ratio constraint. Maybe in some
1:16:34cases as well they are going to make the
1:16:36beginner beginner beginner mistake of
1:16:37adding an aspect ratio constraint to the
1:16:39main screen size like this. This is a
1:16:42horrible way of adding constraints to
1:16:44your UI. Um, for example, if you are
1:16:46making a full screen UI, if you are
1:16:48making a player HUD, for example, and
1:16:50you were to keep this size and then add
1:16:52an aspect ratio constraint underneath
1:16:54this, what would happen is that the 16
1:16:56ratio 9 format would be constrained. And
1:16:59if someone tried to play the game on,
1:17:01let's say, a mobile that was wider than
1:17:0316 ratio 9, maybe something like 19
1:17:05ratio 9 or 1 ratio 1, like a VGA for a
1:17:08PS5, the main frame would still be stuck
1:17:10to 16 ratio 9. As we can see right here,
1:17:12it's 1.781. This value would not change.
1:17:15So there would be empty space on the
1:17:18borders in the end and the top. So we
1:17:20don't want to go that path at all. What
1:17:23we're going to do, the perfect way to
1:17:24size a UI is simply by, let's first show
1:17:28you guys what it would look like without
1:17:29any aspect ratio constraints. If we
1:17:32removed all aspect ratio constraints,
1:17:34this is what it would look like. As you
1:17:35can see, it is stretching and this is
1:17:37not what we want. Um, and let's go back
1:17:39to 1080p.
1:17:40All we have to do is since all of this
1:17:43is already scaled, what we are going to
1:17:44do is we are going to simply add an
1:17:46aspect ratio constraint to the container
1:17:48that holds all of these frames. Let's go
1:17:51there. And that's it. You don't have to
1:17:53add an aspect ratio constraint anywhere
1:17:55else. If we were to change this to VGA,
1:17:57we can see that it perfectly scales.
1:18:00This is so much more cleaner, not an
1:18:02isore to look at, easy to script and
1:18:04animate, and so much more. One more
1:18:05thing that I want to teach you guys is
1:18:07that when you are laying out your UI, it
1:18:09is always recommended that you make your
1:18:11entire UI and lay out all the elements
1:18:14and then you make a container frame on
1:18:16top of that like this one that I made.
1:18:18As you can see, I made all of these
1:18:19three things in the start. And if you
1:18:22select all of them, you can see this box
1:18:24appear. I just made another frame that
1:18:26is basically this box that's showing the
1:18:28selection for everything uh inside it.
1:18:31And then I put all of these like three
1:18:33things inside of that container frame.
1:18:35And then I put an aspect ratio
1:18:36constraint on that container frame. No
1:18:38matter what device they look at it from,
1:18:40it's not going to mess up. This is the
1:18:42perfect way of doing it. So, please
1:18:43follow this method. Next thing that I'm
1:18:45going to show you guys is how to add a
1:18:46fading effect on your scrolling frame.
1:18:48As you guys can see, I have my little
1:18:50scrolling frame right here. It has all
1:18:52these units inside of it. Um, what I
1:18:54want to do is that I want to add like a
1:18:56little fade here so that it doesn't look
1:18:58like they're just simply cutting off
1:19:00into nothingness. The easiest way to do
1:19:01this would simply be to put a frame on
1:19:03top of everything else. Let's quickly
1:19:05like understand what's going on. This is
1:19:07a frame and then the scrolling frame
1:19:09inside of this. You see this space
1:19:11between the scrolling frame and the
1:19:12holder somewhere around here along this
1:19:16small gap? That's where we're going to
1:19:18create another frame. So, let's go ahead
1:19:20and create a frame inside of this holder
1:19:22frame. Let's center it completely fit to
1:19:25parent size. And then we are going to
1:19:26resize it a bit bigger. And then we're
1:19:28going to make it a bit smaller as well.
1:19:30Let's do that with our systematic keys
1:19:33rather than doing it manually with our
1:19:35mouse. Let's quickly do something 0.99.
1:19:37And then 0.99 here as well. And then
1:19:41let's quickly go ahead and make this
1:19:43smaller. Somewhere here. That's how far
1:19:46we want this fading effect to go. And we
1:19:48don't want it to affect the scrolling
1:19:49bar. So we're going to resize it there
1:19:50and keep it somewhere here. Next up,
1:19:53what we are going to do is maybe make it
1:19:54a bit bigger still. And yeah, now we are
1:19:58going to go ahead and add a UI gradient
1:20:00to it. The UI gradient is going to
1:20:03simply be used for transparency. Let's
1:20:06quickly go ahead and do this. So, what I
1:20:08basically just did there is that I am
1:20:10going to make it fade away into the
1:20:11distance. I'm going to change the
1:20:13rotation to 90 or sorry minus 90. And
1:20:16then I'm going to change the color of
1:20:17the UI gradient to uh pick the screen
1:20:20color and then select this color. Okay.
1:20:24As we can see now, it's already
1:20:25replicating that effect that we wanted.
1:20:27We can make it a bit more darker if we
1:20:29want to. Uh we can just move it up
1:20:31slightly up. Let's go ahead and move it
1:20:33right here. As we can see, it has become
1:20:35so much more darker. We can also just
1:20:37make it a bit bigger depending on what
1:20:39we want. Something like that. Uh, a lot
1:20:41of people make the beginner mistake of
1:20:43using a canvas group for this fading
1:20:44effect. I would not recommend that
1:20:46because canvas groups can be very uh
1:20:48resource demanding. I can also quickly
1:20:50go ahead and make the ends of all of
1:20:52these a bit smoother. So, let's quickly
1:20:54go ahead put put this like this.
1:20:57Something like this perhaps. And then
1:20:58let's go and do this as well. As we can
1:21:01see now, it looks much more smoother.
1:21:03and it looks like it is actually being
1:21:05faded away rather than a sharp cut. So,
1:21:08I've quickly gone ahead and made like a
1:21:09little imported bar. As you can see,
1:21:11this is any random bar. This could be
1:21:13used as a health bar, a boss HP bar, or
1:21:15anything of the sort. Um, in this UI,
1:21:17what I'm trying to show you guys is a
1:21:19lot of people make this beginner
1:21:21mistake. They're going to try and make
1:21:23the health bar function, but they'll be
1:21:25lost on how to make it happen. First of
1:21:27all, the hierarchy that I've gone with,
1:21:29you can go with something different, but
1:21:30it's not really necessary. Um, I'm just
1:21:32going to quickly go ahead and add
1:21:34[music] an aspect ratio constraint to
1:21:35this. And I'm going to make sure that
1:21:37it's ultra scale. So everything is
1:21:38scaled inside of it as well. Let's go
1:21:40ahead and call this the base and call
1:21:42this the HP. So this is the red part.
1:21:46The proper way is not by moving it or
1:21:49scaling it from one side to the other.
1:21:51This is not going to work. If you also
1:21:52have the scale type set to stretch, this
1:21:54is going to cause a lot of problems.
1:21:55Make sure it's fit. So we're going to
1:21:57quickly go back and put it fit. So the
1:22:00proper way of making this health bar
1:22:03work is by using a UI gradient with
1:22:06transparency. Let's add a UI gradient.
1:22:08And now what we're going to do is we're
1:22:10going to go to the transparency and
1:22:12click on the three dots. Move this
1:22:14completely higher and make another
1:22:16vertice and bring it all the way near
1:22:19the end just to just enough so that it's
1:22:22slightly behind it right here. You know,
1:22:24maybe one step ahead right here. So now
1:22:27if you were to move this entire gradient
1:22:29to the left using offset it is going to
1:22:32start becoming empty. So for example
1:22:33look at this if I was to go minus0.1
1:22:37as you can see it is now going to start
1:22:39lowering
1:22:41-0.2
1:22:43maybe -0.5
1:22:45I can also put it something like -0.9
1:22:48near the end maybe just let's go with
1:22:50-0.1 it is now completely gone. This is
1:22:53how you exactly work with imported bars.
1:22:55So, next up, what we have is Slice.
1:22:58Slice is one of the greatest things that
1:23:00Roblox has to offer when it comes to
1:23:01images. This is very, very versatile for
1:23:04stretching your UIs without losing any
1:23:07pixels on things that you don't want to
1:23:09stretch. Let me quickly go ahead and
1:23:11give an example. Um, this looks very
1:23:13confusing, but trust me, it is very,
1:23:15very simple. All you have to do is
1:23:17scroll your mouse all the way here,
1:23:18click right here, and as you can see,
1:23:20these three dots will pop up. You're
1:23:22going to click on this and then you will
1:23:24have this sort of interface pop up. All
1:23:26you have to do is try to understand
1:23:28what's happening here. Let's drag this
1:23:31right here. And then we are going to
1:23:33drag this bit right here.
1:23:36Something like this. [music] We're going
1:23:38to go with the same values and then we
1:23:39are going to click on close. So what it
1:23:41does is that it's going to scale
1:23:43everything apart from the things that we
1:23:45selected on the left side and the right
1:23:47side. Let's quickly go and demonstrate.
1:23:49If you were to make it slow, if you were
1:23:51to make it smaller, we can see that the
1:23:53UI looks absolutely proper. The right
1:23:55and the left side is completely fine.
1:23:57Let's quickly go ahead and resize it. As
1:23:59you can see, nothing is messing up. The
1:24:02left and right side is perfectly fine,
1:24:04even though the entire UI itself is
1:24:07still being stretched. It is a very
1:24:10advanced version of stretch. And slice
1:24:12is used in a lot of loading screens, a
1:24:14lot of uh flip books, a lot of
1:24:16spreadsheets, and it is just one of the
1:24:18best features that Roblox has to offer
1:24:19overall. Similarly, if I was to position
1:24:22this in the center and quickly go back
1:24:24to slice, and this time, instead of
1:24:26doing it here, let me just quickly go
1:24:28ahead and put it somewhere here. So, 55
1:24:31on the top and 55 on the bottom. Let's
1:24:33quickly go ahead and close this. Um,
1:24:35let's try to resize this on the Y-axis.
1:24:38Now let's go back to something like
1:24:41this. And now let's make it um resized
1:24:44like this. As you can see, our original
1:24:47frame was something like this. But now
1:24:49it can be stretched all the way here.
1:24:53It's not losing any quality on the top
1:24:55and bottom. All it's doing is that it's
1:24:58stretching without ruining the actual
1:25:01quality of the image label itself. I've
1:25:03gone ahead and created a round progress
1:25:05bar for you guys. Um, I'm going to break
1:25:07it down to you and show you how I did
1:25:09it. So, basically, first we made like a
1:25:11container. We just made a square,
1:25:13positioned it in the center, and it
1:25:15doesn't matter what values you used.
1:25:17Just keep it any size and put it in the
1:25:19center. Then, we added an aspect ratio
1:25:21constraint to it. Made sure it was all
1:25:22scaled. And now the container part is
1:25:24over. We're not going to go back to the
1:25:26container. After that, what we did was
1:25:27we simply added a bottom. Now, I'm going
1:25:30to hide everything else so I can show
1:25:31you what this is about. This is just a
1:25:34round circle with a UI stroke inside of
1:25:37it. Um, it's basically a square frame
1:25:39with a UI corner that's set to one. So,
1:25:41it's a complete circle. And then a UI
1:25:43stroke so that it can uh exceed the
1:25:46boundary that I want it to exceed. So,
1:25:48that's the bottom frame. After that, I
1:25:50have two left frame, two left and right
1:25:53frames. I'm going to go ahead and make
1:25:54them visible. As you can see, this is
1:25:56the left frame. Basically what I do in
1:25:58this is that uh if we click on the left
1:26:00frame and hide the frame inside of it.
1:26:02This is just a simple frame that is um
1:26:05anchored to the left side. As you can
1:26:07see the anchor point is set to 0, 0.5,
1:26:10which means right here. And I just put
1:26:13the size to 0501.
1:26:16Basically, it needs to be completely in
1:26:18the half and cover the Y-axis completely
1:26:20apart from the stroke. That's the bottom
1:26:22frames stroke. Um so it covers it
1:26:25completely. But we added a small value
1:26:27higher just for the sake of it so that
1:26:30there's no empty space when it's
1:26:32actually working. I'll show you in a
1:26:33second. So um let's go ahead and make
1:26:36the frame visible. As you can see this
1:26:38is how it is. It's like a semicircle and
1:26:43uh what we do after that is we literally
1:26:45go inside the frame and then we have
1:26:47this UI gradient. This basically has a
1:26:49transparency set to this and it is like
1:26:511 1 0 0. And then all we have to do is
1:26:55we just have to change the rotation of
1:26:57that UI [music] gradient. If I was to go
1:26:59ahead and do it, you can see it
1:27:00functions like that. So this is all I
1:27:03have to do. Uh this is all stuff that's
1:27:06meant to be scripted. And then if I was
1:27:08to go ahead and quickly enable the right
1:27:10one. Um as you can see this is also a
1:27:12white circle. Uh the reason why I put
1:27:14both of them as 0.501 instead of 0.5 is
1:27:17let me show you. If I put a 0.5 for
1:27:19both, this is what happens. um I don't
1:27:22want to risk this small uh thing. So I'm
1:27:25going to put a 0501. Apart from that, we
1:27:27can also um quickly go ahead and do the
1:27:30same UI gradient thing that we did right
1:27:32here. Uh sorry, let's just change the
1:27:34rotation. And as you can see, it's
1:27:36functioning exactly how we want it to.
1:27:39So let's go ahead and put this at zero
1:27:40again. And next up, um what we're going
1:27:43to do is we are going to enable the top.
1:27:46Uh let me first hide the text label so
1:27:48you don't get overwhelmed. enable the
1:27:50top. And as you can see, this is just a
1:27:52round frame on the top with a UI stroke
1:27:55on it. And this is just made so that it
1:27:58can give the illusion that we have the
1:28:01actual circle uh beneath it. And this
1:28:05[music] entire thing is just one image
1:28:07label when that's not the case. So after
1:28:09that, what I'm going to do is I'm going
1:28:10to enable the text label that I added.
1:28:12This is just like a placeholder. You can
1:28:14see it increase and decrease. Um, if I
1:28:16was to go and try to make something
1:28:18similar uh or make something actually
1:28:22represent 67, what I could do is I can
1:28:24change the rotation to something like
1:28:26something like this maybe. As you can
1:28:29see, this looks pretty much like 67%.
1:28:32So, yeah, this is how it would work in a
1:28:34real setting. Um, obviously if you do it
1:28:37manually, there could be some problems
1:28:39like something like this and this is not
1:28:42what we want. So, in the script itself,
1:28:44the scriptor can easily script it. so
1:28:46that this issue does not happen. One
1:28:47more thing that I'd like to brush up on
1:28:49is the Z-indexes. As you can see, the
1:28:51bottom frame is set to zero Z-index.
1:28:53Left one and right one are set to one
1:28:54and then top is set to two. This is the
1:28:57exact order of Z-indexes that we need.
1:28:59Apart from that, you might be wondering
1:29:00why I have a left frame and the right
1:29:02frame and then another frame inside of
1:29:04it. This is only because I have to turn
1:29:06on clip descendants. If I turn it off,
1:29:08it will start causing problems. As you
1:29:09saw, something popped up right here. So,
1:29:11you have to do it in this specific
1:29:13manner, otherwise it won't work. So now
1:29:15we're going to look into Kqui. KUI is a
1:29:17plugin that I created myself for the
1:29:20sake of helping people import and manage
1:29:22their UIs better in studio. It is a very
1:29:25versatile and fun to use plugin for a
1:29:27plugin that is free. It's possible that
1:29:29by the time you guys are watching this
1:29:31video, I've made some changes to the
1:29:32overall interface of the plugin, but
1:29:34please rest assured the main idea of the
1:29:36plugin is always going to stay the same,
1:29:38so you don't have to worry about that.
1:29:39So the first thing that we're going to
1:29:40do is we're going to quickly go to
1:29:42starter GUI and create a screen GUI.
1:29:48After creating a screen GUI, we're going
1:29:50to insert a frame inside of it. So KUI
1:29:53has a lot of features that are very,
1:29:55very nice to have. They speed up the
1:29:57process insanely much when you're
1:29:59importing. So on the top we can see that
1:30:01we have our transform section. The
1:30:03entire plug-in is divided into certain
1:30:05sections. We have transform, quick
1:30:07actions, recclass, and then UI
1:30:09gradients. In the transform section, we
1:30:11have two buttons called scale and
1:30:14offset. What this essentially means, if
1:30:15you've seen my first video where I
1:30:17explained this in a bit more detail,
1:30:18every single value in Roblox uh related
1:30:22to UIs has two different properties,
1:30:25offset and scale. So if I was to move my
1:30:28frame here for example and I was to
1:30:30quickly resize it, you can see that the
1:30:34size of this frame is set to offset. Um
1:30:36what this essentially means is that it's
1:30:38using pixels to scale instead of a value
1:30:41that should be relative to our screen
1:30:42resolution. So if this is the value that
1:30:46we have in offset, let's say 500 by 100,
1:30:50and we have to turn this into scale. If
1:30:53I do it manually without any plug-in, I
1:30:55would have to think about the right
1:30:57values. For example, in scale, we can
1:31:00see that this from here to here on the
1:31:02x-axis is one, right? This would
1:31:04probably take me to like this would be
1:31:060.5. This would be 0.25.
1:31:10So, I'm assuming it would probably be
1:31:12somewhere around 0.25. But for sake, for
1:31:14the sake of safety, I'm going to go with
1:31:150.3. On the y-axis, we can see that this
1:31:17would be a very short amount. I'm
1:31:19assuming probably something like 0.08.
1:31:22If I was to put both of these values, we
1:31:24can see that I was quite close but still
1:31:26very far off. Now, I can't get that
1:31:29exact value back no matter what I do.
1:31:32Um, I would have to constantly keep
1:31:35adjusting it to see like what the proper
1:31:37value is. But with KU, what we can do is
1:31:39we can instantly select size. We have
1:31:43the offset value here in pixels and we
1:31:45can click on scale. It has scaled the
1:31:49entire frame properly. Now we have the
1:31:51scale values without any deformation in
1:31:54its shape. So for example, if I was
1:31:56totrl + z and control shift z, you can
1:31:58see the difference before and after.
1:32:00It's the same. Apart from that, we're
1:32:03going to see some more stuff. Um,
1:32:05sometimes this is already scaled. But if
1:32:08you had a position that's set to offset
1:32:11and you moved it, for example, here and
1:32:14now you wanted to scale it because every
1:32:16time you change your window, it's not
1:32:17scaled. For example, here we can see it
1:32:19literally goes outside of the screen. So
1:32:21if we wanted to scale this, do the same
1:32:23thing that we did with sizing. We would
1:32:25have to think of a proper number. So
1:32:27thinking about the position, I'm
1:32:29assuming that this position, since the
1:32:31anchor point is set to here, it's
1:32:33probably somewhere like 0.5, 0.6, 0.65,
1:32:37and then 0.4. Something like 0.65 and
1:32:420.4. I was pretty close, but still quite
1:32:44far off as you guys can see. So with my
1:32:46plug-in, we can instantly just scale the
1:32:48position. See, it's scaled with the
1:32:50exact proper numbers just by clicking
1:32:52the scale button here. And now I wanted
1:32:55to, let's say, add a UI stroke to it. I
1:32:59can go here and select UI stroke. And
1:33:03now you can see it's set on fixed size.
1:33:05What fixed size essentially means is
1:33:07that it's set in pixels. This is still
1:33:08offset. If I was to go with five pixels,
1:33:11this is what I want. Now, if I wanted to
1:33:14turn this into scaled, I would have to
1:33:16again think about the proper number
1:33:18manually. This is the only way that it's
1:33:20possible without a plug-in. If I go 0.5,
1:33:21it's way too big. I'm going to have to
1:33:23go lower. 0.1 is still too big. 0.5 is
1:33:26still too big. 0.2.
1:33:29015 0.12. I see how annoying it is. So,
1:33:33the simplest solution is just by using
1:33:35the plug-in. If the pixels are set to
1:33:37five, which is a fixed size, we can go
1:33:40here, change the property to UI stroke,
1:33:43and click on scale. As you can see, it
1:33:46quickly set the thickness to the proper
1:33:48value, which is in this case 0.01. And
1:33:51that's it. We don't have to worry about
1:33:53anything else. Similarly, if on this
1:33:55frame we have a corner radius. If we can
1:33:58quickly go and add a corner radius UI
1:34:00corner and put the uh offset to
1:34:04something like 30. As you can see, the
1:34:07corners are pretty round. Now, if I
1:34:08wanted to turn this into scale, I would
1:34:10again have to think about the proper
1:34:11value as we've already covered so many
1:34:13times. I can quickly go on the list
1:34:16here, click on corner radius, and then
1:34:17click on scale. Boom. It's quickly set
1:34:20its value to scale. And now we don't
1:34:22have to worry about manually selecting
1:34:24it or whatever.
1:34:27Now what I've done is I've quickly gone
1:34:29ahead and made this little frame inside
1:34:31of this frame. And what I'm going to do
1:34:33now is I'm going to make a layout inside
1:34:36of this smaller frame.
1:34:39I'm going to add some frames inside of
1:34:41it and duplicate them. So if I wanted to
1:34:45quickly change the padding, it would
1:34:47again be something like if I just
1:34:48quickly went and set it to like maybe 14
1:34:50pixels.
1:34:52And I like this gap a lot. And now I
1:34:55want to change it to scale. I would have
1:34:57to do the same thing. I would have to
1:34:59start thinking about okay, what's the
1:35:01proper uh value? It would be something
1:35:03like 0.05 maybe. And no, still too big.
1:35:07The easiest way is to just come here,
1:35:09click on padding, and then scale. As you
1:35:13can see, it quickly set the proper
1:35:14number without me having to select it or
1:35:16choose it or think about it. If instead
1:35:18of a list layout, I was to add a grid
1:35:20layout
1:35:24and delete the list layout. You can see
1:35:26that we have this sort of section here.
1:35:29Now, as you can see, all these preset
1:35:31values are already in offset. They're
1:35:32not in scale. Uh, quickly, if I wanted
1:35:35to make it them a bit bigger, maybe
1:35:37change this padding to something like 10
1:35:40and 15 and change the cell sizes to
1:35:44something like 250. and 150 something
1:35:48like this and maybe duplicate them a lot
1:35:51more and turn on clip descendants on
1:35:54this frame. Now you can see that I have
1:35:56this specific gap and like the spacing
1:35:59between each frame. Perhaps I like it,
1:36:01perhaps I don't. But the values are set
1:36:03in offset. If I want to change them to
1:36:05scale, again the same thing. I would
1:36:07have to go one by one by one. But KUI
1:36:09allows us to scale them instantly
1:36:11without having to put in our own input,
1:36:14which saves us so much time. If I was to
1:36:16come here quickly and change and click
1:36:18on cell size and click on scale, we can
1:36:20see that it quickly scaled all the cell
1:36:22sizes. So, I've quickly gone ahead and
1:36:24made like this little minor frame with a
1:36:27scrolling frame inside of it to show you
1:36:29guys how canvas sizing works. So, let's
1:36:32say that I have a scrolling frame with
1:36:34so many frames inside of it, a little
1:36:36list layout and with wraps on so that it
1:36:39can, you know, treat it like a sort of
1:36:42an inventory. for example. Now, if I go
1:36:45to the scrolling frame and I have the uh
1:36:49canvas size here, which is basically the
1:36:51amount of space that it's going to cover
1:36:52inside of the scrolling frame. Let's say
1:36:55that the canvas size is currently set
1:36:56to, as you can see, 1,000, which is
1:36:581,000 pixels. Um, you can keep scrolling
1:37:01for 1,000 pixels or maybe, you know,
1:37:03maybe if I change to 1,500, can keep
1:37:05scrolling to 1,500 pixels. The gap
1:37:07changed because of the UI list layout,
1:37:08[music] which is being scaled. This is
1:37:10currently set into uh offset. We don't
1:37:13ever want offset because it's always
1:37:15going to make problems when we view the
1:37:17UI on different resolutions or different
1:37:19devices. So, what we're going to do is
1:37:22we're going to click on canvas size
1:37:24right here. Canvas size as we can see.
1:37:26And then we're going to click on scale.
1:37:28As you can see, it quickly set like the
1:37:30proper uh scaled value right here for
1:37:332.906
1:37:35from 1,500 which gave it the perfect
1:37:38positioning and sizing. Now that we're
1:37:40done with the basic transforming, the
1:37:41scaling and offset, we have this grid
1:37:44right here. Uh you can see all these
1:37:46arrows. We have like [music] the top
1:37:48right, top, top left, left, and all
1:37:50these different arrows like the center
1:37:52one here. Um what this basically does is
1:37:55it changes the position of the currently
1:37:57selected object. For example, I have the
1:37:59frame selected right here. It's going to
1:38:01change its position or anchor or both
1:38:05depending on what you have selected. So
1:38:06a quick demonstration. If I have both of
1:38:09them selected, right, as we can see
1:38:11right now, the anchor point is set to 0
1:38:120, which means it's right here. If it
1:38:15was 0.5 and 0.5, it would be right here.
1:38:18And 1, 1 would be right here. Um, if you
1:38:21don't understand what that means, please
1:38:23watch my first video. It's going to help
1:38:25you a lot. So, if I was to quickly go
1:38:27ahead and click on this button right
1:38:29here, as you can see, it changed to the
1:38:32bottom right of my screen. Uh, it also
1:38:34changed the anchor point and scaled the
1:38:36position and put it 1, one. If I was to
1:38:40change it now, the anchor point would
1:38:41still stay the same and the position
1:38:43would update in respect to this. So,
1:38:46let's go back and put it in the center
1:38:48of our screen. Now, it's in the center.
1:38:50The anchor point is 0.5, 0.5. Position
1:38:53is 0.5 and 0.5 as well. So many times
1:38:56when uh you're importing UI, you're
1:38:58going to make this mistake. you will
1:39:00import all of it, position it properly,
1:39:02and then you're going to realize that
1:39:03the anchor points are all messed up,
1:39:05which is going to cause insane problems
1:39:07for the scriptor. Uh, when he's trying
1:39:09to animate the UI, we always have to
1:39:12make sure, unless it's otherwise really
1:39:14needed, always use 0.5 and 0.5 anchor
1:39:17points. If we have this anchor point
1:39:19selected, 1, one, and we put our UI in
1:39:22the dead center. And now we're like, oh
1:39:25man, it's already in the center. Now I
1:39:27just want to change the anchor points.
1:39:28But if I was to put them 0.5, 0.5
1:39:31manually, it would mess up the position.
1:39:33I don't want to risk changing the
1:39:34position. All you have to do is deselect
1:39:38position and click the center icon.
1:39:42Boom. As you can see, only the anchor
1:39:44point changed. No position changed. The
1:39:46position is still the same. And [music]
1:39:48that's it. You can also change the
1:39:50anchor point all over. As you can see,
1:39:52the position won't change. Only the
1:39:54anchor point of the main frame will
1:39:56change. Apart from that, the other way
1:39:58around also works. If you only wanted to
1:40:00change the position, now we can see
1:40:03since it's in regard to the center
1:40:04anchor point of the frame, you can set
1:40:06it anywhere and it will function
1:40:08properly. This is an extremely handy
1:40:11tool to have. I cannot even begin to
1:40:13explain how many times I use this tool
1:40:14when I'm importing my UI personally. So,
1:40:17apart from that, what we're going to do
1:40:18now is since we're done with the entire
1:40:20transform section, we're going to go to
1:40:22quick actions. And there are some very
1:40:24fun things in this uh plug-in in the
1:40:26quick action section. Let's quickly
1:40:28delete this frame and then add a new
1:40:31frame. What if I wanted to quickly scale
1:40:34this uh frame to the size of its parent,
1:40:37which in this case is the entire screen.
1:40:39Maybe it is supposed to function as a
1:40:41container or a parent frame for
1:40:43something else. What I would have to do
1:40:44manually is I would have to come here
1:40:47and then
1:40:51it's so many like small things like this
1:40:54which is why I developed this quick
1:40:56action section. You can just click these
1:40:57buttons and it's going to do everything
1:40:59for you. So let's quickly undo all of
1:41:01that. We have this frame right here. So
1:41:03what I can do with this plugin is
1:41:05instantly put it in the center fit to
1:41:07parent size. Remove background and done.
1:41:10That's all. It took less than 2 seconds.
1:41:12and the other way around. It took at
1:41:14least like 15 seconds and these minor
1:41:16things add up a lot and it's going to
1:41:18delay you for hours when you're
1:41:20importing. You can also read all the
1:41:22descriptions of these buttons right
1:41:23here. Uh next up that we're going to see
1:41:25is fixed aspect ratio. This is a very
1:41:28very very important uh quick action to
1:41:31have. Some plugins actually don't have
1:41:33this which surprises me. It's impossible
1:41:35to import UI properly without having
1:41:37this specific quick action uh button
1:41:40right here. So what this essentially
1:41:43does is that it adds a UI aspect ratio
1:41:45constraint without uh ruining your
1:41:49actual existing size of the frame that
1:41:51you have in studio. It's going to
1:41:53respect the boundaries that the frame
1:41:54currently has and just lock it into that
1:41:56size. For example, let's say that my
1:41:58frame looked like
1:42:00this and I wanted to add a US aspect
1:42:04ratio constraint so that it wouldn't
1:42:05change uh sizing on different screens.
1:42:08For example, right now if we went to
1:42:09VGA, we can see that it becomes sort of
1:42:11a square. I don't want it to do this.
1:42:13So, if I wanted it to keep this specific
1:42:16size, what I would have to do is I would
1:42:18have to [music]
1:42:19plus like add something new and then UI
1:42:22aspect ratio constraint. Now, the main
1:42:25problem again is that I would have to
1:42:26manually try and find the proper value
1:42:29that it had before. If I quickly control
1:42:31Z, it has to be somewhere here. So,
1:42:34finding the proper value is going to
1:42:35take such a long time. you would have to
1:42:37think about something like maybe I think
1:42:38that's going to be like 1.7. Uh, as we
1:42:42can see that's not the right value.
1:42:43There's so much differences. Um, maybe I
1:42:46would have to go back and change it to
1:42:48something like 1.5.
1:42:50A bit still messed up. Probably [music]
1:42:521.6. So instead of getting into all of
1:42:54this algebra, what we would have to do
1:42:56essentially with this plug-in is we have
1:42:58the size, it's centered and everything.
1:43:01We can come here, fix aspect ratio done.
1:43:03That's it. It's all done. And now we
1:43:06quickly click on this and we can see
1:43:07that it already has like a very specific
1:43:09uh aspect ratio selected. This is why
1:43:12plugins are so nice to have and this
1:43:13plug-in is being offered to you for
1:43:15completely free. So use it as much as
1:43:17you can. Nothing brings me more joy than
1:43:19looking at you guys being creative and
1:43:21putting out more works and allowing me
1:43:23to contribute in some way. Apart from
1:43:25that, if I was to quickly add a text
1:43:28label inside of it, uh this is just a
1:43:30very minor quick action. Uh it's nothing
1:43:32big. You can just quickly press it here.
1:43:34uh you would have to like scroll all the
1:43:36way down. Maybe you're typing something
1:43:38and you would have to come back here and
1:43:39select that. Click it again. Scroll down
1:43:42and then turn on skip text. Uh with this
1:43:45button, you can just instantly do it
1:43:46without any problems. For example, you
1:43:48know, just if I was to quickly make a
1:43:50text label uh center, fit to parent
1:43:52size, remove background text. It's all
1:43:54just so quick. As you can see, it's like
1:43:56so good for buttons and the cross button
1:43:59on the top right of most UIs. It's just
1:44:01so handy to have this specific tool.
1:44:03Now, in this plug-in, there's a hidden
1:44:06secret gem that I've made for you guys.
1:44:09Uh, this button [music] is gamechanging.
1:44:13So, ultra scale, what ultra scale does
1:44:16is it changes every property of every
1:44:19descendant from offset to scale. If you
1:44:21guys can't understand what that means,
1:44:23let me break it down for you. If I have
1:44:26this frame and let me just quickly mess
1:44:29it up.
1:44:33So, as we can see, everything is now
1:44:35messed up in this UI. Every single
1:44:37thing. We look at it in different
1:44:39resolutions. It's all completely ruined.
1:44:43So, in order to fix this, we would have
1:44:46to go by each and every single one of
1:44:48these. Select all of these frames maybe
1:44:50to be fast as fast as possible. Click on
1:44:53position and then scale. And we can see
1:44:56the positions are all scaled for these
1:44:58frames. Now, however, we still have to
1:45:00do the sizing and then the canvas sizing
1:45:02and then this US strokes and corners
1:45:04inside of them and then the ones
1:45:05outside. So much stuff. So, all you have
1:45:08to do is select the parent frame that's
1:45:10holding everything. Move your mouse,
1:45:12click on ultra scale.
1:45:15Now, if you were to scroll down, moment
1:45:17of truth, everything is scaled. The
1:45:20position is scaled, the sizing is
1:45:23scaled, the frames inside, position,
1:45:26sizing, everything is scaled. The UI
1:45:28stroke is scaled. The UI corner is
1:45:30scaled. [music] The scrolling frame is
1:45:32scaled completely.
1:45:35The canvas size is scaled.
1:45:37Everything [music] in the entire UI goes
1:45:40from offset to scale. It saves you quite
1:45:43literally hours of effort. This single
1:45:46button. So now we'll quickly look at
1:45:48recclass. What it does is that um let's
1:45:51say you've already made something. you
1:45:53were making a scrollable inventory for
1:45:55units UI for a TD game perhaps for a
1:45:57tower defense and um you forgot to use a
1:46:01scrolling frame. [music] You made it
1:46:03inside of a frame and then you realized,
1:46:05oh wait, I can't even scroll in a frame.
1:46:08I did something wrong. So, how am I
1:46:10supposed to fix this? You would have to
1:46:11recreate the scrolling frame, match the
1:46:13properties to the frame, and then change
1:46:15the children and then put them inside of
1:46:17the scrolling frame. And then just so
1:46:20much stuff, literally like 15 to 20
1:46:22minutes of work. Reclass. This reclass
1:46:26is extremely detailed and advanced. All
1:46:29you have to do is click the button.
1:46:31That's it. Done. Now it's a scrolling
1:46:33frame.
1:46:35Now it's an image button. Now it's an
1:46:38image label. Text button.
1:46:41Enable text field. Now it's a text
1:46:44label. Now it's a viewport frame. remove
1:46:48background, anything you want to do. Now
1:46:49it's a text box. I enable text scale
1:46:52again, fit to parent size, everything
1:46:55that you want to do, it does without any
1:46:58sort of effort, without any sort of
1:47:00problems, it fixes everything. One thing
1:47:02that you guys have to keep in mind when
1:47:03reclassing is that sometimes Ctrl Z can
1:47:06cause problems. [music] So it is advised
1:47:08if you guys were to reclass something,
1:47:10for example, let's say I have this frame
1:47:12right here, quickly make it bigger and
1:47:14resize it a bit bigger. and I wanted to
1:47:18uh recclass it into a scrolling frame.
1:47:20Now, instead of pressing Ctrl Z, it is
1:47:23advised that you guys just convert it
1:47:25back to a frame. Last but not least, we
1:47:27have some preset UI gradients in the
1:47:29plug-in that so many front page game
1:47:32designers use. Uh these can be used for
1:47:34a variety of purposes. Um for example,
1:47:37if I was to quickly go ahead and make
1:47:39something like this, change the color to
1:47:43here. Now, if I wanted to add a cross
1:47:44button inside of this, right, let me
1:47:45just quickly uh do that.
1:47:49Now, if I wanted to turn this into a
1:47:52close button, I would have to first uh
1:47:56add a UI gradient.
1:47:58And remember, you can only change the
1:48:00colors of the UI gradients properly if
1:48:03the color of the main frame is white.
1:48:05So, we're going to go ahead and change
1:48:06the color of the main frame back to
1:48:07white. And we're going to play around
1:48:11with the colors, see what we like. And
1:48:13it's a whole sort of like you know
1:48:15figuring out what the proper color
1:48:16should be. Maybe something like this and
1:48:18then putting it something like you know
1:48:21something I don't know something like
1:48:22this. It is so simple. You can just
1:48:25click on the main frame and then click
1:48:26on this button right here red which we
1:48:28really like for close buttons and boom
1:48:30it's done. And a very handy uh feature
1:48:33in this UI gradient selection is that if
1:48:35you were to click on different UI
1:48:36gradients, instead of adding more UI
1:48:39gradients and then you having to
1:48:40manually delete the ones that you don't
1:48:43want, you can just add a new UI gradient
1:48:45and it's going to replace the one that
1:48:47already exists inside of that frame. So
1:48:49you can click on this one, this one,
1:48:51whichever one you like, and it just
1:48:54keeps replacing the existing one. Let me
1:48:56just go ahead and quickly add a UI
1:48:58stroke to it.
1:49:00Uh we can go back to the main frame and
1:49:02then change the gradient again.
1:49:04Something like this perhaps cuz I like
1:49:05that more. And yeah, it's that simple.
1:49:07So that's Kakui and we're going to be
1:49:09using it to import a whole UI uh in the
1:49:12section that follows this one. So please
1:49:14stick around guys and yeah, above all
1:49:16have fun. So I'm going to be exporting
1:49:19this UI that I created a while ago on my
1:49:21YouTube. You guys can buy this UI for $5
1:49:24only on my Gumroad. I'm just going to be
1:49:26exporting images from this UI and then
1:49:29we'll see how to import them into Roblox
1:49:31Studio. I've sped up the entire process
1:49:32so that you guys don't get bored of the
1:49:34procedure. I also explain what I'm doing
1:49:37throughout the sped up time lapse. So,
1:49:39please don't mute the video and keep
1:49:40watching.
1:50:43So here I've just gone gone ahead and
1:50:45separated the traits and all the icons
1:50:47in the UI into one specific group so
1:50:50that it's easier for me to export them
1:51:07here. What I'm doing is what we talked
1:51:09about earlier. You can go to the table
1:51:11of content and jump to the topic called
1:51:13grayscaling. I've just colored the
1:51:15entire glow white so that I can color it
1:51:17manually in Roblox Studio however I
1:51:19want. Maybe black, green, blue or white
1:51:21or anything. And I can also adjust its
1:51:22transparency in Roblox Studio.
1:51:39So, as you guys can see, I'm now done
1:51:41exporting all the images. I skipped all
1:51:43the text labels and everything else that
1:51:45I can manually make in studio so that
1:51:47it's more versatile and flexible. And
1:51:49yeah, let's get into studio. All right,
1:51:52guys. So, we're finally in studio. One
1:51:54thing that I want you guys to focus on
1:51:55is the fact that I changed my Roblox
1:51:57account. So, now I'm not on my main
1:51:59account, but on an alt account. And the
1:52:01reasoning is because I mentioned earlier
1:52:03in the video, if you use your main
1:52:04account, there are chances that Roblox
1:52:06is going to flag your UIs or images that
1:52:08you upload on Roblox. You don't want to
1:52:10take the chances. So, just get a new
1:52:12account and upload UIs on that one
1:52:14instead of your main one. So, what we're
1:52:15going to do now is we're [music] going
1:52:16to open asset manager and we're going to
1:52:19come here to bulk import. We're going to
1:52:21open bulk import and then we're going to
1:52:23come here. Now, these are the images
1:52:25that we uploaded from our software. Um,
1:52:28what we're going to do is we are going
1:52:30to press Ctrl+ A and then we're going to
1:52:32press enter.
1:52:34It's going to import all of them. Now,
1:52:36as you can see, it's going to take its
1:52:38little time to import. So, I'm going to
1:52:39speed up this process.
1:52:42So, now that we're done, we're going to
1:52:44quickly come here and close the bulk
1:52:46import menu. Now, we have all these
1:52:48images right here. These are all the
1:52:50images that we will be needing. So, now
1:52:52let's get started. We're going to go to
1:52:54starter GUI and we're going to create a
1:52:56screen GUI. As soon as we do that, we're
1:52:59going to enable ignore GUI insert and
1:53:02disable reset on spawn. Now, we're going
1:53:05to go ahead and add a frame to the
1:53:07screen GUI. We're going to position the
1:53:09frame in the center and fit to parent
1:53:11size. After that, we're going to remove
1:53:13background. And voila, this is our
1:53:16holder frame. So, what I'm going to do
1:53:18now is I'm going to rename it to holder
1:53:22frame and I'm going to rename the
1:53:23screen's UI.
1:53:25So, now what we're going to do is we're
1:53:27going to add the main image that we had
1:53:29from our third party software that we
1:53:31took uh near the end so that we can
1:53:32follow it one to one. Uh we're going to
1:53:34quickly go ahead and add an image label
1:53:36to this. And we're going to center it,
1:53:39fit to parent size, remove background.
1:53:41And now we're going to come here, copy
1:53:44ID to clipboard. And if we're going to
1:53:46scroll down in image label, we're going
1:53:48to replace the image with this. As you
1:53:51can see, I have the image one to one
1:53:53now. And I can easily position every
1:53:56single UI element and object on top of
1:53:58this image. So what we're going to do
1:54:00now is we're going to rename this to
1:54:02overview. And then we're going to change
1:54:05the Z-index to something like minus 50.
1:54:08So now this ensures that this will
1:54:10always be beneath everything else and
1:54:12not on top of it. So now what we're
1:54:14going to do is if we quickly were to
1:54:16change resolutions, you guys can see
1:54:18that the image gets stretched and this
1:54:20is not what we want even when we're
1:54:22looking at the UI on different
1:54:24resolutions. So what we're going to do
1:54:25is we're going to go back to 1080p.
1:54:28We're going to add a fixed aspect ratio
1:54:29constraint to this. So now if we were to
1:54:32quickly change the resolution back to
1:54:33VGA, we can see that it won't cause any
1:54:35problems. Don't worry about these
1:54:37borders on the top and bottom. This is
1:54:39not a full screen GUI, so that won't
1:54:41cause any problems in the future as
1:54:42well. We're going to go back to 1080p.
1:54:44And now we're going to start finally
1:54:46building our UI on top of this. The
1:54:48first thing that we always do when we're
1:54:49making a UI is we are [music] going to
1:54:52center it and we're going to make a main
1:54:56container [music] frame for the entire
1:54:58UI so that it all stays together even
1:55:00when we have to position it around. So
1:55:02what we're going to do is we are going
1:55:03to quickly remove background and we are
1:55:06going to increase the size of this UI to
1:55:09match the visible size that's being
1:55:13covered by the UI that we want to make.
1:55:16So as you can see with the shadow
1:55:18combined it's somewhere around here.
1:55:21And
1:55:23on this side we can see that it's
1:55:24somewhere around
1:55:27here.
1:55:30There we go. So on the technical level,
1:55:33because of glows and everything, this
1:55:35will still have to become a bit bigger,
1:55:37but we can easily work our way around
1:55:40when we're positioning everything inside
1:55:41of this frame. So what we're going to do
1:55:43now is we're going to rename this to
1:55:45container frame. This is going to be our
1:55:48container for the entire UI. Now we're
1:55:51going to make another frame inside of
1:55:53this. And we are going to center it
1:55:55again. Remove background. Now we're
1:55:58going to make the size as big as the one
1:56:01on the left side. The anchor point is
1:56:03going to still stay 0.5 and 0.5. You can
1:56:06see that the entire UI is divided into
1:56:07two parts. The left one and the right
1:56:09one. This is going to be the main frame
1:56:12for the left one. What we can do [music]
1:56:14is we are going to click right here and
1:56:18fit to parent size. So now the entire
1:56:22frame is as big as the container frame.
1:56:24All we have to do is we are going to
1:56:26select this one. Uncheck position, keep
1:56:30only anchor selected and change the
1:56:31anchor point back to the center. So now
1:56:34the anchor point is back to the center
1:56:35but the position is still the same. We
1:56:37are going to make it smaller from the
1:56:39right side and fit it somewhere around
1:56:42here. There we go. Now only this main
1:56:46holder frame has been selected and we
1:56:48can easily position all our UI elements
1:56:51inside of this frame. We are going to
1:56:52rename this frame to something like main
1:56:55inventory.
1:56:57Now we're also going to duplicate this
1:56:58so that we can do the same thing on the
1:57:00right side. So come back here, position
1:57:03it to the right side and uncheck
1:57:06position and put the anchor point in the
1:57:08center. So now what we're going to do is
1:57:11we are going to resize it back and make
1:57:15it somewhere around here. There we go.
1:57:17So this is going to be our right side.
1:57:20We're going to come to this frame and
1:57:22we're going to change the name to
1:57:23something like inventory
1:57:26details.
1:57:28Now we have a nice little hierarchy. We
1:57:30can see that all the values are scaled
1:57:33and the anchor points are set so it can
1:57:35easily be animated and scripted in the
1:57:37future. The next step that we're going
1:57:38to do is we are going to make it easier
1:57:41for ourselves to contrast or compare
1:57:44between both of our overview image
1:57:46labels and what we're currently doing.
1:57:48So, we are going to quickly come here to
1:57:50this image label that we had and we're
1:57:51going to change the transparency from
1:57:53zero to something like 0.6.
1:57:56I'm going to change the camera to make
1:57:57it easier for myself to import. We are
1:57:59going to start adding our images into
1:58:02our UI. So, the first thing that I'll be
1:58:04adding is the header. I'm going to make
1:58:06an image label since the header does not
1:58:08have to be a button or anything. It's
1:58:10going to be an image label. And we are
1:58:11going to uh change the anchor point to
1:58:13the center. Something like this. And now
1:58:16we're going to size it to the size of
1:58:19the header that we have somewhere here.
1:58:25There we go. We're going to remove
1:58:27background. And we're going [music] to
1:58:29come here, look for our header. That's
1:58:32our header. And we are going to quickly
1:58:34copy ID to clipboard and paste it right
1:58:36here.
1:58:38As you guys can see, it changed to the
1:58:40header. And now I'm going to change the
1:58:42scale type from stretch to fit to keep
1:58:44the absolute proportions. And we are now
1:58:48going to manually place the headers.
1:58:49[music] It is recommended when you're
1:58:51doing this that you hold shift left
1:58:53shift on your keyboard while you're
1:58:55positioning it around so that you can
1:58:57easily resize it without losing
1:58:59proportions.
1:59:01And there we go. That looks pretty
1:59:02similar to me.
1:59:04As we can see, it is quite similar. So
1:59:06now we're going to come here and we are
1:59:08going to call it the header. Inside
1:59:11this header, as we can see in the
1:59:13original photo, we have some text. What
1:59:15we're going to do now is we are going to
1:59:17make a text label inside of it.
1:59:20And we're going to center it,
1:59:23remove background, make it a bit bigger.
1:59:26Enable [music] text scaled. And we are
1:59:30going to resize it and call it
1:59:34inventory.
1:59:36And also here something like actually
1:59:39here we're going to say header text for
1:59:42easy hierarchy.
1:59:45Um we're going to position it as it's
1:59:47meant to be positioned. Let's change the
1:59:49zindex of overview from minus 50 to 50
1:59:52for now. And as we can see we won't be
1:59:55able to select this easily now. What
1:59:57we'll have to do is we'll have to click
1:59:59on it right here. So now we're going to
2:00:01position it the way we want it to be
2:00:03positioned. Something like this. We're
2:00:05going to change the font to what we
2:00:07used, which is Fredoka one. And I'm
2:00:11going to keep matching it until it
2:00:13becomes the same.
2:00:15So, something like that seems pretty
2:00:18satisfactory to me. Something like that.
2:00:21We're going to make some quick
2:00:22adjustments right here in case anything
2:00:24needs to be fixed. There we go. That
2:00:27seems perfect. We can also see that the
2:00:29text in our UI had a little stroke to
2:00:32it. So, what we're going to do is we are
2:00:34going to make it visible again and we're
2:00:36going to add a UI stroke to it.
2:00:40Now that we added the stroke, we're
2:00:41going to change the color to white and
2:00:44we're going to change the transparency
2:00:45of the UI stroke to something like 0.5.
2:00:48And then we're going to scale the UI
2:00:51stroke after changing the thickness to
2:00:52something like four. Hold on, let me
2:00:55change this back to minus 50.
2:00:58We're going to change the fix size to
2:01:01something like five maybe
2:01:04five looks pretty nice to me. And then
2:01:06we're going to scale the UI stroke.
2:01:10So as you can see this is now scaled.
2:01:13The text the text sizing needs to be
2:01:15scaled. So we're going to come here,
2:01:17select size, and then click on scale. So
2:01:20the text size is now also scaled. The
2:01:22header size needs to be scaled. So we're
2:01:24going to do that real quick. And that's
2:01:26scaled. Now, one main thing that we
2:01:28forgot to do is we have to add an aspect
2:01:31ratio constraint to the main container
2:01:33frame. So, we're going to do that real
2:01:34fast. We can also see that the size I
2:01:36forgot to scale that. So, we're going to
2:01:38scale the size real quick. And then
2:01:39we're going to add an aspect ratio
2:01:40constraint. So, now the main container
2:01:42frame has the aspect ratio constraint.
2:01:44You don't you never add the aspect ratio
2:01:46constraint to the holder frame because
2:01:47that's meant to scale the UI to your
2:01:50entire screen size. If you select both
2:01:53of these, inventory details is already
2:01:54scaled. This UI so far should not have
2:01:57any problems if we were to go ahead and
2:02:00change the screen resolution.
2:02:02As you can see, everything is perfectly
2:02:04scaled so far. So, we're going to go
2:02:06back and continue the UI. Since we can
2:02:08visibly see, we can make it out that our
2:02:10header is going to cover everything else
2:02:12in our UI. So, we're going to come to
2:02:14the header and change the Z-index to
2:02:16something like 10. Now, we're going to
2:02:19add the holder frame beneath everything
2:02:20that's meant to hold everything
2:02:22together. We're going to go here and
2:02:23we're going to click on image label.
2:02:25We're going to center it and then we're
2:02:27going to click on holder. Right click
2:02:30and then change [music] the ID of the
2:02:32image label into what we just copied.
2:02:36As you can see, we got the holder right
2:02:37here. We're going to remove background.
2:02:39We're going to click on fit to parent
2:02:41size. [music] And now we're going to
2:02:42manually resize it until we find the
2:02:45proper size.
2:02:47And then we're going to change the scale
2:02:49type to fit. And now we're going to do
2:02:50it again. Always make sure that you use
2:02:52the scale type as fit before anything so
2:02:55you don't have to go back once you're
2:02:57done.
2:03:00As we can see now, I have the main
2:03:02background for the entire frame right
2:03:04here. So, what we're going to do is we
2:03:06are going to change the name of this to
2:03:08background. We're going to put the
2:03:09Z-index of this background since it's
2:03:11going to be beneath everything to minus
2:03:1310. And next up, we're going to add the
2:03:14close button. I'm going to make an image
2:03:16label again as we did before. Center it.
2:03:18Remove background. We're going to come
2:03:20here, search for the close button right
2:03:23here, right click, copy ID to clipboard,
2:03:25replace the ID, and there we have it.
2:03:28I'm going to change the scale type to
2:03:29fit, and then I'm going to resize it.
2:03:32And now I'm going to manually position
2:03:33it where it needs to be positioned.
2:03:36So, what we're going to do again, we're
2:03:37going to make the overview bigger
2:03:40quickly. See if it's proper, visible,
2:03:42and unvisible. It looks pretty nice to
2:03:45me. Now, we're going to start making
2:03:47everything else. We're going to go to
2:03:49main inventory and we're going to make a
2:03:52frame. The frame is supposed to
2:03:54replicate this search bar. So that's
2:03:55what we're going to do. We are going to
2:03:57center it and then we're going to change
2:04:00the position to something like 0.35 0 32
2:04:050.3.
2:04:06Remember you can't select it on the
2:04:08screen because you have made the
2:04:11overview frame much higher in Z-index.
2:04:14So we're going to change the position to
2:04:16somewhere here.
2:04:19Now, we're going to resize it manually.
2:04:21What we're going to do now is we are
2:04:23going to scale the size, scale the
2:04:26position,
2:04:28and we're going to add a corner to it.
2:04:32We're going to change the corner to 0.1.
2:04:35It's already scaled, so we won't have to
2:04:36scale it since we're dealing in scaled
2:04:39values. Probably something like 0.15.
2:04:42There we go. We're going to change the
2:04:44frame color to pure black since that's
2:04:46what's in the UI. And now we're going to
2:04:48add a UI stroke to it. In order to get
2:04:50the proper stroke color, what we can
2:04:52easily do is we are going to quickly
2:04:54click on overview. We're going to change
2:04:56the image transparency back to zero. So
2:04:58it's the normal image that we had. We're
2:05:00going to go back to UI stroke and we're
2:05:03going to click on color in this option.
2:05:06Now you can see we have an options
2:05:08called pick screen color. We're going to
2:05:10select that and then we're going to move
2:05:12our mouse precisely on the point that we
2:05:14think is the color. You can see on the
2:05:17right side that the color is jumping
2:05:19from here which is almost black to this
2:05:21one which is sort of like bluish
2:05:24purplish. This one is the only bright
2:05:26color that I can find this one. So we're
2:05:29going to select this and that's going to
2:05:31be our stroke color.
2:05:33So if we go back and quickly hide this
2:05:37back to 0.5
2:05:39[snorts] and perhaps make it invisible
2:05:41just to see.
2:05:44Oh, the US stroke needs to be a bit
2:05:45thicker. Something like three, four or
2:05:49three. So as you can see now we have the
2:05:51UI stroke which is the same color as the
2:05:53one that we had in our uh UI. What we're
2:05:56going to do now is we are going to scale
2:05:57the thickness really fast with my
2:05:59plug-in. Click on scale and we have the
2:06:02scale UI stroke. We're going to make the
2:06:05overview visible again with the
2:06:07transparency lowered and we're going to
2:06:09start doing everything else. So we're
2:06:11going to come back here in our frame.
2:06:14We're going to call this the search bar
2:06:17and we're going to add a image label
2:06:19inside of it. This is going to be our
2:06:21search icon. Center it. Remove
2:06:23background. Uh quickly change the value
2:06:26to something like 30, 30, maybe 50, 50.
2:06:29and we're going to scale the size.
2:06:33As soon as we're done with that, we're
2:06:34going to come to the asset manager and
2:06:36we're going to look for the search icon.
2:06:38We have this right here. Copy ID. Paste
2:06:41the ID. And voila, we have it. So, we're
2:06:44going to make it a bit more smaller.
2:06:47And now we're going to move it around
2:06:48with the values. You have to get used to
2:06:50moving stuff around with the values.
2:06:53It's not easy to move it around with the
2:06:56screen because it's always going to mess
2:06:58up the resolution. Let's put it at
2:07:00something like 0.08 maybe.
2:07:08Now it should be okay. If you were to
2:07:10quickly change the transparency from 0.5
2:07:12to zero, it's almost the same. We're
2:07:15going to fix the transparency and it
2:07:16should be fine. Let's quickly go back to
2:07:19the image label. We're going to call
2:07:21this the search icon just for easy
2:07:23navigation. I change the transparency to
2:07:26something like 0.5 0.6 maybe scale type
2:07:30to fit.
2:07:35And that's the same. So what we're going
2:07:36to do now is we're going to make it
2:07:37visible again and lower the image
2:07:40transparency or increase it sorry to
2:07:42something like 0.5. And now we're going
2:07:44to make this text box.
2:07:46Come here. Make a text box.
2:07:50Put it somewhere in the center. Remove
2:07:52background. Enable text scaled. Make the
2:07:55size something like this.
2:07:59And on this side, we're going to make it
2:08:01something like this. We won't have to
2:08:03worry about the header overlapping with
2:08:04it because the header is on top of it.
2:08:06Speaking in terms of zindex. So that
2:08:08won't be the problem. We're going to
2:08:10come here. We're going to change the
2:08:12font to Monerat extra bold, which was
2:08:14our font for the entire thing.
2:08:181 weightight is going to be extra bold.
2:08:21Text color is going to be white and text
2:08:24transparency is going to become
2:08:26something like 0.5.
2:08:28So now if we were to change the
2:08:30placeholder text, let's call it search.
2:08:34We can see that it popped up which
2:08:35almost looks the same. So we're going to
2:08:38quickly change the text X alignment to
2:08:40left and it's almost the same. What
2:08:42we're going to do now is we are going to
2:08:45lower the size of on the Y-axis
2:08:49and match it to the search. There we go.
2:08:52That's pretty much the same. So, we just
2:08:54hit the nail. And what we're going to do
2:08:56now is we are going to quickly hide the
2:09:00overview and we're going to just play
2:09:02around with our UI and make it look a
2:09:04bit nicer.
2:09:07So, now it looks pretty consistent. This
2:09:09looks nice and we can also change it as
2:09:11we go. So this is how we make it
2:09:14functional. So we can see that a bit of
2:09:16stuff here and there like text box um
2:09:19hasn't been scaled. Search icon we
2:09:21forgot to scale. So in order to skip all
2:09:24of this stuff I'm just going to click on
2:09:25search bar and then ultra scale. Now
2:09:27everything inside of it should be scaled
2:09:29which is why this feature is so good.
2:09:31You can just quickly scale everything
2:09:32without having to worry about any
2:09:34specific thing. We're going to click on
2:09:36our close button and we are going to
2:09:38rename it by pressing F2 to something
2:09:41like close button. One thing that I
2:09:44forgot to mention is that I've made a
2:09:46mistake and it's the fact that the close
2:09:49button cannot be an image label. It has
2:09:52to be a button. So now there's three
2:09:54ways to fix this. You can either
2:09:55recclass this image label into an image
2:09:57button. You can either add a new image
2:09:59button inside of this image label. Or
2:10:01the third way, which I'm going to go
2:10:02with, you can make an image button and
2:10:05then add this label inside of that. Why
2:10:08that's the best option is because if
2:10:10[music] we have the image button, we can
2:10:12easily animate it. And we can also
2:10:14easily modify the size of the icon
2:10:16inside of it. So, let's go ahead and do
2:10:17it. What I'm going to do is I'm going to
2:10:19duplicate it and I'm going to reclass
2:10:21this into an image button. And then I'm
2:10:24going to remove the image from this
2:10:26image button. And then I'm going to
2:10:29offset this entire thing. Size and
2:10:33position.
2:10:35Going to put it inside of this [music]
2:10:37image button. And then I'm going to
2:10:39center it. As you can see, we have the
2:10:41same thing that we did before. Uh the
2:10:44size of the image button is the same as
2:10:45the uh image label. What we're going to
2:10:48do is we're going to call this texture.
2:10:49So now what we have to do is we have to
2:10:51make sure that the button is small. We
2:10:53don't want the player to move their
2:10:54mouse here and be able to click the
2:10:56button since the image button is this
2:10:58big. So what we're going to do is we are
2:11:00going to come here. As you can see the
2:11:01size is 216 by 216. We can put something
2:11:05like 100 which is pretty nice but I'm
2:11:08going to make it a bit bigger. Something
2:11:10like 120 maybe 126 maybe. This is pretty
2:11:14satisfactory. So now what we're going to
2:11:16do is we are going to scale everything.
2:11:18Just click on ultra scale and it should
2:11:19be done. I'm going to move my camera up
2:11:21a bit more because that looks a bit too
2:11:23dark for me. I'm going to put it
2:11:25somewhere like here perhaps. Now, what
2:11:28we're going to do is we are going to
2:11:30make the filter buttons that were next
2:11:32to the search bar. I'm going to quickly
2:11:34make the overview visible again. We can
2:11:37see that we have these two buttons right
2:11:39here. That's what we're going to do. So,
2:11:40we're going to collapse all of this
2:11:42stuff. And then in the main inventory,
2:11:44we're going to add a frame. We're going
2:11:47to put the frame in the center again.
2:11:49Same thing that we did before. I'm going
2:11:52to position it somewhere here.
2:11:57So, what I want to do now is I want to
2:11:58add a UI list layout inside this main
2:12:01frame. So, we are going to quickly
2:12:03change this to the physical size so that
2:12:05we can position it a bit better.
2:12:07So, that looks pretty nice to me. What
2:12:09we're going to do now is we are going to
2:12:10go back to fit window and we are going
2:12:15to hide the background. Now we can add a
2:12:19UI list layout inside of this.
2:12:22Fill direction is going to be horizontal
2:12:24and the horizontal alignment is going to
2:12:27stay to left and the vertical alignment
2:12:29is going to be changed to the center.
2:12:31We're going to quickly go ahead and add
2:12:32two image buttons inside of this image
2:12:35button. Remove background. What I'm
2:12:38going to do now is I'm going to put the
2:12:39position to the center. You can't really
2:12:41change the position in a UI list layout
2:12:43cuz that manages everything. But what
2:12:45we're going to do now is we are going to
2:12:46make it a bit smaller.
2:12:49Something like this. And we are going to
2:12:53add the texture inside of it. The same
2:12:55thing that we did with the close button.
2:12:57So we're going to press the plus button.
2:12:58We're going to add an image label. We're
2:13:00going to put it in the center. Remove
2:13:02background fit to parent size. And we're
2:13:05going to copy paste this uh ID into this
2:13:09one. So there we go. It's the same
2:13:11thing. Now we can see that it's pretty
2:13:14much the same. The next thing that we're
2:13:16going to do is rename this into texture.
2:13:18Uh we're going to add another image
2:13:20label below this one. We're going to
2:13:22center it. Remove background. And this
2:13:24one is going to be the glow that we had
2:13:27earlier. I also forgot to mention that
2:13:29we're going to change all the scale
2:13:30types to fit instead of stretch.
2:13:35There we go.
2:13:37This is also going to change to fit. And
2:13:39then we're going to copy the glow and
2:13:41put it in the image.
2:13:44Now we're going to change the z-index
2:13:46because we can see that it's overlapping
2:13:47and we don't want any overlapping to
2:13:49exist. So we're going to come to the
2:13:51z-index and change that to minus one.
2:13:53One thing that we forgot to do is we
2:13:55forgot to make the button image
2:13:57transparency to one. So we're going to
2:13:59quickly go here and change the button
2:14:01transparency to one. And now we can see
2:14:02that the corners are fine. Now this is a
2:14:05proper button. And you can see that it
2:14:07only becomes that clickable icon when
2:14:09you move your mouse on top of it. So now
2:14:12what we're going to do is we are going
2:14:13to duplicate this. Same thing. And we're
2:14:15going to change the ID from the filter
2:14:18button to the lock button. So we're
2:14:19going to expand this. And then we're
2:14:21going to paste this here. There we go.
2:14:24We're going to change the padding a bit
2:14:26to 0.1.2
2:14:29maybe. No, 0.1.08
2:14:33somewhere there. We're going to enable
2:14:35overview to see what it should be. And
2:14:37yeah, looks pretty similar to me now. So
2:14:39that's pretty nice. So now what we're
2:14:41going to do is we're going to quickly
2:14:42rename these. Change the name of this to
2:14:44filter button and change the name of
2:14:47this one to lock button. We're going to
2:14:50select the main frame.
2:14:52And now we're going to move the position
2:14:54slightly higher
2:14:57just to position it a bit better. I
2:14:59really like this. So I'm going to stick
2:15:01with this one. uh make sure that for
2:15:03this uh buttons and everything you did
2:15:06not have clip descendants enabled. If
2:15:09you enable them, it's going to cause a
2:15:11lot of problems with the edges and
2:15:12whatnot, and you don't want that. So,
2:15:14now that that's done, we're going to
2:15:15come back here, call this something like
2:15:17the extra buttons. We have an issue
2:15:19here. We can see that the size is not
2:15:21scaled, and maybe we forgot something
2:15:22else. We're just going to click on ultra
2:15:24scale, and everything should be scaled
2:15:26instantly. We click on overview, and we
2:15:28need to add the unit capacity right
2:15:31here. So, we're going to do that right
2:15:32now. Hide that again. And then come
2:15:34here. Add a text label. Put it in the
2:15:38center. Remove background. Enable text
2:15:40scale. Make the size a bit bigger. And
2:15:44what we're going to do now is we're
2:15:45going to change the color to white so
2:15:48that we can easily read it. We're going
2:15:50to change the text to moneterate. Change
2:15:52the weight to extra bold. And then we're
2:15:56going to see what we had in the
2:15:58overview.
2:16:00we had 49x 100. So we're going to
2:16:02quickly change it to 49 by 100 as well.
2:16:05Now we are going to position it
2:16:07somewhere here and we are going to make
2:16:10the size a bit smaller.
2:16:12So now it should be pretty much the
2:16:14same. As we can see we nailed
2:16:16everything.
2:16:19So we're just going to copy the colors
2:16:20again. Uh for this part we have to
2:16:23enable uh go to text label. So, what
2:16:25we're going to do now is we're going to
2:16:27quickly enable rich text because we want
2:16:29to color the text differently on both
2:16:30sides. Copy the color that we had on the
2:16:33right side. Um, we're going to first
2:16:35make the overview visible again. We're
2:16:38going to change the transparency to
2:16:39zero. And we're going to come here,
2:16:41click on the text label even though we
2:16:43can't see it. Uh, we're going to click
2:16:45on text color. Pick screen color by
2:16:48moving uh this to the right. And we're
2:16:52going to go for the perfect color. You
2:16:53can see it's making some variations here
2:16:55and there. Just go for the one that
2:16:57you're most satisfied with. I'm most
2:16:59satisfied with this one. So, as we can
2:17:03see, the hex is this. We're going to
2:17:06quickly select that. And okay. And then
2:17:08we're going to control Z it cuz we don't
2:17:10want to put the main text color as that
2:17:12one. Hide the overview again.
2:17:16Go back to the text label. And in rich
2:17:18text uh we have this property where we
2:17:22can put a custom hex color uh in the
2:17:25text label. So the syntax is as follows.
2:17:30Font space color is equal to quoted
2:17:34marks # the value and then quoted marks
2:17:39and then close the bracket. And then
2:17:42here we are going to say open bracket
2:17:46slash font close bracket. If we enter we
2:17:50can see that it quickly copy pasteed the
2:17:52exact same thing that we had earlier and
2:17:54it works perfectly fine. So we're going
2:17:56to quickly uh come and scale the size
2:17:59and then we're going to change this to
2:18:00something like opacity and leave it
2:18:03there. So, next up, I'm going to go back
2:18:06to the overview and make it visible.
2:18:09And then I'm going to lower the increase
2:18:11the image transparency to 0.5. We're
2:18:13going to see what's missing. I think I
2:18:15need to create this holder now. So,
2:18:19that's what we're going to do. We are
2:18:21going to hide this real fast. We're
2:18:24going to come back, duplicate the search
2:18:26bar, center it, and we're going to
2:18:29delete everything inside of it. The text
2:18:32box and search icon. We're going to keep
2:18:33these two. And then we're going to size
2:18:36it.
2:18:37We're going to click on UI corner. We're
2:18:40going to do something like 0.05,
2:18:45maybe 0.04.
2:18:47And then we're going to lower this uh
2:18:49stroke of the UI stroke to fixed size
2:18:54three. There we go. Now, I think it
2:18:56needs to be made a bit more sharper. So,
2:18:59it's going to put it something like
2:19:000.03. I like this.
2:19:03So now what we're going to do is we're
2:19:04going to call this holder
2:19:06and we're going to make overview visible
2:19:09again and we're going to see the
2:19:11positions. So we can see that it needs
2:19:13to be lowered a bit more and made a bit
2:19:15taller. So that's what we're going to
2:19:17do. We're going to quickly select the
2:19:19holder and we're going to make it
2:19:23somewhere here and then we're going to
2:19:25make it a bit taller here so that we can
2:19:28increase size on both axis on both ends.
2:19:31Sorry. There we go. I really like this.
2:19:34So now what we're going to do is we are
2:19:37going to quickly hide the overview and
2:19:41we're going to go back to our holder
2:19:44frame. We're going to change the name to
2:19:45units holder.
2:19:47And then we are going to ultra scale the
2:19:52main thing.
2:19:54There we go. So now everything should be
2:19:56scaled. Yep. Now what we're going to do
2:19:59is we are going to add a scrolling frame
2:20:00inside of this
2:20:03scrolling frame. Center it fit to parent
2:20:06size. Remove background. And then we are
2:20:08going to go back to the overview. Make
2:20:11it visible again. Um we are going to
2:20:14change the image transparency to zero.
2:20:16So we can pick the color of the
2:20:17scrolling bar. And then we're going to
2:20:20come here, scroll down, scrolling bar,
2:20:22image color. We're going to select this,
2:20:23pick screen color. And then we are going
2:20:26to this won't work because the scrolling
2:20:30bar image transparency is 0.5 preset. So
2:20:34we need to go for something brighter so
2:20:36that even if it's 0.5 in the back end,
2:20:39it will still look the same. So we're
2:20:40going to select something like this.
2:20:43Make it a bit vibrant. And now if we
2:20:46quickly hit the overview, we can see
2:20:49that it would
2:20:51largely look the same. We have to
2:20:55do some stuff real fast. What I'm going
2:20:57to do is I'm going to make the size
2:21:01something like 0 some 0.98
2:21:05and then the Y size 0.98 as well. 0.96
2:21:10maybe. So now I'm going to go to the
2:21:11scrolling bar transparency and I'm going
2:21:14to make get something like
2:21:19something like this.
2:21:21Maybe make it a bit thinner.
2:21:24So something like
2:21:28nine. And then this looks pretty nice.
2:21:32So now what we're going to do is we are
2:21:34going to quickly scale this. Click on
2:21:35ultra scale. Everything should be done.
2:21:37So what we're going to do next is we are
2:21:39going to add a UI grid layout inside of
2:21:41this.
2:21:45So what we're going to do now is we are
2:21:46going to quickly go ahead and add frames
2:21:48inside of this. So, let's go and add
2:21:50some frames. Let's duplicate these five
2:21:52times cuz the row in our frames in our
2:21:55original UI had five in one row. Um,
2:22:00let's go ahead and give it a size of
2:22:01like 150 maybe. That looks pretty nice.
2:22:04Let's give it something like 0.2.1.
2:22:11That looks pretty nice. So, what we're
2:22:13going to do now is let's quickly
2:22:14duplicate these five frames this many
2:22:16times. And we can see that it looks
2:22:18pretty good. Um, we should probably try
2:22:21to make it a bit more uh equal on the Y
2:22:24and X axis.
2:22:28Okay, these are my final values. I
2:22:29really like them. So, what we're going
2:22:31to do now is we're going to go into the
2:22:32properties of the scrolling frame. Let's
2:22:34scroll down and find automatic canvas
2:22:37size. Click on this and then click Y.
2:22:40What this basically does is it's going
2:22:42to scale the space inside of the
2:22:44scrolling frame in relation to what's
2:22:46present inside of it. like if we have
2:22:49this many uh bars, it's only going to be
2:22:52this big. So, as we can see right now,
2:22:54it's not that big. We're going to fix
2:22:55that issue. This is because we have this
2:22:57set to two. If we quickly go and set
2:22:59this to zero, we can see that it's all
2:23:01fixed now. And we are going to add more
2:23:03padding on the cells. So, we're going to
2:23:06quickly click on this. Something like
2:23:080.04,
2:23:100.08.
2:23:12Nope, that's too much. 0.06.
2:23:15This is nice. So, this is what we like.
2:23:17And these are all very nice squares that
2:23:19we have. Now, um, one thing that we want
2:23:22to do is that the entire, uh, gap that
2:23:26we have around the entire thing is very
2:23:28tight, and that's not what we want. So,
2:23:30we're going to quickly fix this. Um,
2:23:32we'll have to do some minor adjustments
2:23:34here and there. We'll have to make the
2:23:35entire scrolling frame a bit smaller.
2:23:40So, now what we're going to do is we are
2:23:42going to delete all our extra frames and
2:23:43we are going to decorate only one frame
2:23:45and then replace that the stuff inside
2:23:48of that frame with the stuff that we
2:23:50need. So, if we were to quickly enable
2:23:53overview. So, as we can see, I made a
2:23:54small issue that I'm going to fix real
2:23:56fast. The original frame actually had
2:23:58six squares in a row, not five. And that
2:24:01messed up my entire orientation. So, I'm
2:24:04quickly going to fix that. And I'm going
2:24:05to speed that bit up. So, rest assured.
2:24:14And I'm done. So, we're going to quickly
2:24:16enable overview again and see how I did
2:24:18it.
2:24:19And there we go. It looks pretty much
2:24:21the same. So, now I'm going to quickly
2:24:23delete all the extra frames. And then
2:24:25I'm going to uh add the stuff that needs
2:24:28to be added.
2:24:31So, what we're going to do now is we're
2:24:32going to quickly call this unit and we
2:24:35are going to go inside it and add an
2:24:37image label. We're going to put this in
2:24:39the center. Fit to parent size. Remove
2:24:41background. We're also going to remove
2:24:42the background of the main unit.
2:24:44uh frame. So, we're going to click on
2:24:46remove background. And there we go. One
2:24:48thing that we should remember, as I've
2:24:50mentioned before, is we're going to keep
2:24:51the anchor point to the center to avoid
2:24:54uh any issues popping up in the
2:24:55animation process. So, what we're going
2:24:57to do now is we are going to quickly add
2:24:59the background of the card to it. So, in
2:25:01this case, I think we had the red card
2:25:03on the top. We're going to copy the ID
2:25:05and then we're going to put it here.
2:25:07So, that's our background for the card.
2:25:09Um, let's quickly go and put the Z-index
2:25:12of this to zero cuz this is sort of
2:25:15going to be in the in the bottom apart
2:25:17from the glows and everything. And so,
2:25:19yeah, let's call this the card
2:25:22BG. Now, what we're going to do is we
2:25:24are going to add a viewport frame on top
2:25:26of that. So, we're not going to be
2:25:28adding a PNG because in the actual game,
2:25:31they're going to use a viewport frame
2:25:33and not a PNG. I've explained what
2:25:34viewport frames are earlier in the
2:25:36video, so please go and check that bit
2:25:37out. So let's quickly go and center this
2:25:39viewport frame. Um we are going to scale
2:25:43the size of this viewport frame. And
2:25:44then it's always good practice to make
2:25:47it slightly bigger than the boundary
2:25:49that's supposed to hold it. Um let's
2:25:52quickly go and put it 0.78 or something
2:25:54like 0.79.
2:25:56Maybe 0.8 works. Let's keep it at 0.8.
2:25:59Next up, we're going to make sure that
2:26:01the Z-index is one, which is above the
2:26:02card BG. You can see the Z-index of the
2:26:04card BG is zero. Next, we're going to
2:26:06add the glows for this card. We're going
2:26:08to duplicate the simple card BG. Keep it
2:26:10in the center. And then we're going to
2:26:12change the name to card glow. Let's make
2:26:16it slightly bigger than the card we
2:26:18have. Something like 1.1 perhaps. And
2:26:21grab the card glow. And then change the
2:26:24image to this one. As we can see, it
2:26:27sort of worked and sort of didn't. We're
2:26:29going to quickly go and change the scale
2:26:31type to fit. And we're going to change
2:26:33the z-index to minus one. The size needs
2:26:36to be a bit bigger. Something like 1.2
2:26:38maybe. Maybe bigger 1.3.
2:26:42Now we're going to change the image
2:26:43color of the card glow to something like
2:26:46something like this.
2:26:49And voila. That looks pretty nice. Um,
2:26:51we're going to make it a bit more
2:26:53bigger. Maybe 1.3 works. And then we're
2:26:56[music] going to change the color a bit
2:26:58more to this.
2:27:01and change the image transparency to
2:27:02something like 0.5. This looks pretty
2:27:05nice to me. So, one thing that you guys
2:27:07might be noticing right now is that the
2:27:09scrolling frame is currently clipping
2:27:10the glow [music] of the frame. Um, a lot
2:27:13of people make the mistake of adding UI
2:27:16padding and doing a lot of stuff, maybe
2:27:18adding uh border modes to the scrolling
2:27:20frame. But the proper way to uh scale a
2:27:24scrolling frame uh with UI grid layout
2:27:27is to simply make sure the frame itself
2:27:31has the glow inside of it. I
2:27:32intentionally made this mistake
2:27:34throughout the process so that I can
2:27:35show you guys how to fix it. If we
2:27:37quickly click on the unit frame and turn
2:27:39on physical size, we can see that the
2:27:41glow that we made goes outside of the
2:27:44box, the scrolling frame does not care
2:27:46about this. The scrolling frame is going
2:27:48to clip everything that's not inside it.
2:27:50So the solution is to simply make sure
2:27:52that this box has the glow inside of it.
2:27:55So what we're going to do now is we are
2:27:57going to literally select all of this
2:27:59and size it down. We're going to make
2:28:03sure that we put it in the center.
2:28:05Something like this.
2:28:07And then we are going to click on this
2:28:09frame and turn on clip descendence.
2:28:12Now we can see that it's all perfectly
2:28:14in sync. Um probably make it all a bit
2:28:17smaller as well. Something like this.
2:28:21Maybe
2:28:23something like this works. Sure. So
2:28:26we're just going to quickly go through
2:28:27them and see all of them are squares.
2:28:29And yeah, let's go back to normal
2:28:31sizing. And then we can change or reduce
2:28:35the glow by increasing the image
2:28:37transparency. Something like 0.5
2:28:40maybe 0.4 0. This works. Okay. So now
2:28:44we're going to quickly open overview.
2:28:47And as we can see the original frames
2:28:49are a bit bigger. So in order to fix
2:28:51this problem what we're going to do is
2:28:53we are going to simply turn this
2:28:54invisible again. Uh click on the
2:28:56scrolling frame put it in the center and
2:28:59fit to parent size. And we are going to
2:29:02make the size cell size bigger.
2:29:06And then we're going to click on
2:29:08physical sizing. Again, as we can see,
2:29:09it's still a bit off. So, this is all a
2:29:12matter of just understanding and putting
2:29:15it how you like it. We'll make it
2:29:17slightly smaller. Probably something
2:29:19like 0.9 0.99.
2:29:22Probably 0.985.
2:29:26That's good. And I change this to
2:29:28something like 0.9
2:29:300.98
2:29:330.97 perhaps.
2:29:37This is good. This is how it is. So,
2:29:39we're just going to quickly go ahead and
2:29:41duplicate this six times. And now we're
2:29:44going to fix the padding for the last
2:29:45time. Um, we're going to quickly go and
2:29:47put this to maybe one 0.01
2:29:510.0
2:29:53five 0.005
2:29:560.0 000 02
2:29:59something like that perhaps
2:30:02or maybe just turn it off completely
2:30:03because we have the glows. We don't need
2:30:05this. And then we're going to go and
2:30:08duplicate this a mult multiple times and
2:30:10see how it looks in the end. Uh we're
2:30:12going to remove cell padding all over.
2:30:14Maybe add like a little negative cell p
2:30:17cell padding.
2:30:19Minus 0.01
2:30:21- 0.02
2:30:25maybe - 0.0 03. How does it look in the
2:30:28overview?
2:30:30That's exactly how it looks. So, we've
2:30:33pretty much nailed the cross on this
2:30:35one. Um, what we're going to do now is
2:30:37we are going to uh resize the scrolling
2:30:40frame just a bit. We're going to drag it
2:30:42in from this side so that the scrolling
2:30:45bar is is exactly where we want it to
2:30:47be. So, we're going to quickly go and do
2:30:48this. And there we are. So, if we were
2:30:52to quickly uh just do it slightly more
2:30:56and let's maybe make a bunch more of
2:30:59these. We can see that the result is
2:31:02exactly what we wanted. It's perfectly
2:31:04scaled all over. And this is exactly how
2:31:06you scale a UI grid layout with a
2:31:09scrolling frame. One thing that we need
2:31:10to quickly fix is we need to go to the
2:31:12scrolling frame and then we need to
2:31:15scroll down and change the scrolling
2:31:16direction to Yaxis only to make life
2:31:20easier for mobile players. And then
2:31:22let's go and delete all the other unit
2:31:24frames so that we can continue with what
2:31:25we had earlier. And yeah, we're going to
2:31:28change it to physical scale for easier
2:31:30understanding. Now let's add a text
2:31:33label inside of it. Let's put it in the
2:31:35center. Fit to parent size. Remove
2:31:36background. Enable text scale. Um,
2:31:39probably make it a bit smaller.
2:31:42Then we're going to change the font to
2:31:44what we had earlier, Monserat. And
2:31:46weight is going to be extra bold. Color
2:31:49is going to become white for now. And
2:31:52then we are going to add a UI stroke.
2:31:57And let's change this to level 125. Or
2:32:01was it level LV25? There we go. So, I'm
2:32:05assuming the position becomes a bit more
2:32:06smaller. Just like that. And then we're
2:32:09going to change the position to
2:32:10something like 68.78.
2:32:15And let's change this to executioner.
2:32:20Go back to normal. And that's how it
2:32:22looks like. Let's turn on overview and
2:32:25see a glimpse.
2:32:35It's almost the same. Um there is some
2:32:38uh differences. So we're going to go
2:32:40back to this and change the text X
2:32:43alignment to center.
2:32:45And then let's change this to X assassin
2:32:48for the sake of it.
2:32:50Now we're going to change the color of
2:32:51this to something like yellow. Uh
2:32:54somewhere
2:32:57here. And I'm assuming both of these had
2:33:00USI strokes on it. So let's add a UI
2:33:02stroke. Put this to two.
2:33:06Uh add this. Add it here as well. Select
2:33:08the UI stroke. Select the UI stroke. And
2:33:10then click on UI stroke scale. And there
2:33:13we are. Let's quickly compare both of
2:33:16them.
2:33:22And there we go. Uh this text needs to
2:33:24become a bit bigger.
2:33:27And this is what we had in our overview.
2:33:29So we're going to stick with this. Um,
2:33:31apart from that, let's quickly hide
2:33:32these. Name this level. Name this tune
2:33:36name. Next, what we're going to add or
2:33:38make sure first of all is that the
2:33:40z-indexes of these are going to be
2:33:42higher than viewport frame. So this is
2:33:44going to become three, viewport frame is
2:33:46one, and card is zero. Yep, these can
2:33:49also be Z-index 2, but for the sake of
2:33:51it, we're going to keep it three. Apart
2:33:53from that, now we need to add the
2:33:55traits. So the traits are going to be on
2:33:57the top left side. Let's quickly go
2:33:59ahead and put the image labels. Put them
2:34:01in the center. Remove background. Um
2:34:03quickly make the size smaller. Something
2:34:06like 20. Maybe 30 works. And then we're
2:34:11going to turn off anchor only keep
2:34:13position and put it somewhere here. And
2:34:16let's play around with the position. Now
2:34:20what we're going to do is we are going
2:34:22to [music] rename this to trait. And
2:34:25let's quickly scale the size of it.
2:34:29Now let's change the icon to the trophy
2:34:33icon that we had and put it here. Let's
2:34:36change the scale type to fit.
2:34:39And we can see that it's quite small
2:34:41because of the glow around it. So we
2:34:43have to make it a bit bigger. Let's go
2:34:44with 0 0.4 is going to work.
2:34:48While making this trophy, I just
2:34:50remembered that this has to be in a UI
2:34:51list layout. We can't just put it like
2:34:53this because units will have to uh have
2:34:56their traits [music] being swapped every
2:34:58now and then and we need it to be in a
2:35:00list layout rather than a specific
2:35:02image. So what we're going to do quickly
2:35:04is we're going to put this on the side
2:35:05and go to units. Add a new frame inside
2:35:08of units
2:35:10and remove the background. Put it in the
2:35:11center
2:35:13with anchor equipped. And then we're
2:35:16going to quickly go here somewhere
2:35:20and somewhere here.
2:35:24And then when we're somewhere here,
2:35:27let's quickly uh change this to traits
2:35:30and add a UI list layout inside of it.
2:35:34The UI list layout is going to be
2:35:36vertical. Horizontal alignment is going
2:35:37to be center. And um let's quickly put
2:35:42this trait uh inside of it. Uh let's
2:35:45quickly add a fixed aspect ratio to it
2:35:46so it retains its uh dimensions when put
2:35:49inside of the ULS layout. Uh so here we
2:35:52are. We have to make it a bit bigger so
2:35:54that it looks nice. Something like this.
2:36:04Now we can quickly add another trait and
2:36:06then change the UI padding to something
2:36:08like minus0.1
2:36:10maybe -0.3.
2:36:12Nopeus 0.2. two. That looks nice. Um,
2:36:15let's change the second trait to the
2:36:18blood one that we had, the bleed one.
2:36:21Uh, let's change this one to bleed.
2:36:25And there we are. So, if we quickly go
2:36:27on overview to compare,
2:36:31we have it the other way around. So,
2:36:32let's quickly fix that. The trophy uh
2:36:35layout order is going to become one. So,
2:36:37it's now higher than the bleed ones. So,
2:36:39now let's quickly go and compare again.
2:36:44We can see that the level in the image
2:36:46is much smaller. But for the sake of UX
2:36:49so that it's easier for players to see,
2:36:51let's keep it as big as it is. Um, one
2:36:54thing that we need to do is we have to
2:36:55move frames a bit more to the top left.
2:36:58So let's quickly go and do that.
2:37:02And now if you were to compare, it is
2:37:05almost the same. So now let's quickly uh
2:37:07for our own ease of comfort go ahead and
2:37:10put this to the right side. Um, we're
2:37:12going to go right here.
2:37:15Put it 875. There we go. We're going to
2:37:18call this access.
2:37:20So, in access, we need to have um, if we
2:37:24look in the overview real quick, we have
2:37:26the equipped button and the lock button.
2:37:28So, what we're going to do now is we are
2:37:30going to uh, copy the icon equipped and
2:37:35put it right here.
2:37:39And we're going to make the size of the
2:37:41equipped icon much smaller.
2:37:44We can hardcode the sizes for these ones
2:37:46because they are going to be uh swapped
2:37:48around. We don't have any problem for
2:37:50these ones. [music] It's all going to be
2:37:52okay. Apart from that, let's quickly
2:37:54change this one to locked.
2:37:59So, we'll have to make the size smaller
2:38:00for this one as well. Let's copy the
2:38:03same sizes for both of them.
2:38:08And then on the left of the equip
2:38:11button, we will have the favorite icon.
2:38:13Now the favorite icon can be an image
2:38:15label because it's not supposed to be in
2:38:17a list. So let's quickly go ahead and
2:38:20[music] copy the trait from here. Put it
2:38:22here inside of this by pressing control
2:38:24shift V. And then let's position it
2:38:27somewhere like this.
2:38:31And then let's copy the favored icon and
2:38:34then put it here.
2:38:36This looks pretty nice. Uh let's put fit
2:38:39to window and then let's try to compare
2:38:42both of them from a bit of a distance.
2:38:45As we can see, there are some minor
2:38:46differences. The differences are pretty
2:38:48much just because of some uh cell sizes
2:38:52and some small stuff here and there. You
2:38:53can never truly copy a UI one to one
2:38:56from a third party software. There are
2:38:58always going to be minor differences
2:39:00present all over. But what we can
2:39:02change, we should uh let's quickly move
2:39:04the favored icon a bit higher.
2:39:07Something like this. And the traits as
2:39:10well. Sorry, the axis as well.
2:39:14This looks pretty nice. So next up, what
2:39:17we have is we are going to um quickly
2:39:21add the card selected below the card BG
2:39:24and above the card glow. So, we're just
2:39:27going to simply copy and duplicate the
2:39:29card glow and change it from card glow
2:39:33to card selected. Let's add this and put
2:39:36this right here. As we if you remember
2:39:38right, it's a white color. So, it would
2:39:42look like this with um zero
2:39:44transparency. What we have to do now is
2:39:46we have to copy the exact color that we
2:39:48want it to be. What we're going to do is
2:39:50we're going to turn on overview
2:39:52right here and we're going to see that
2:39:55this is the color that we want. So, same
2:39:57thing as before, what we're going to do
2:39:58is we are going to click on image color,
2:40:02pick screen color, and then we're going
2:40:05to select the color that we want.
2:40:08And there we go. So, now uh if we were
2:40:11to quickly hide overview, we can see
2:40:13that we got our color. We're going to
2:40:15call this card selected. and we're going
2:40:19to make it smaller completely.
2:40:23Uh, all the important parts of this card
2:40:25have been added to it. And even the
2:40:28viewport, we're just going to quickly go
2:40:30ahead and do one thing. We want the
2:40:32cards to be selectable. We don't want
2:40:34them to be frames for this reason. What
2:40:36we want them to do is let's quickly
2:40:38recclass them, simple stuff, into an
2:40:42image button. Done. So now all the cards
2:40:45are easily selectable. An image button
2:40:47functions basically the same as a frame.
2:40:49You don't have to worry about anything
2:40:50else. So yeah, let's just duplicate this
2:40:54around five or six times. And we can see
2:40:59that it looks pretty nice. For the sake
2:41:02of matching our UI in the picture, we're
2:41:05going to hide the selected and we're
2:41:09going to
2:41:12hide the favorited and the trophy. So,
2:41:15let's quickly do that. Favorite is going
2:41:17to be hidden. Uh, trophy is going to be
2:41:21hidden and the selected is going to be
2:41:24hidden.
2:41:25So, let's quickly go to this card,
2:41:27delete this one, and delete the rest of
2:41:30them. And then duplicate this card
2:41:32again. Let's see if the other cards are
2:41:35the same. Um, one of them is. Yeah. And
2:41:37then we're also going to hide the locked
2:41:40icon. So, let's quickly go and do that.
2:41:42Let's hide the locked icon. And now um
2:41:46let's go back enabled
2:41:48and after this one the equipped one is
2:41:50also going to be hidden. So let's go
2:41:52that
2:41:53hide this one. And now let's copy paste
2:41:56again. So this is how our UI is laid out
2:41:59in our image. What we're going to do
2:42:01next is we're just going to duplicate
2:42:02it. And now we have to get a different
2:42:06color for the card. So, we can easily do
2:42:08that by going to card yellow and then
2:42:11copying this one and then coming back to
2:42:14card BG and pasting the ID.
2:42:18As we can see, since this wasn't
2:42:19grayscale, this was easily done. Um,
2:42:21we're going to quickly go to card glow,
2:42:23change the color as well to something
2:42:25like
2:42:27maybe something like that works. That
2:42:29looks pretty nice. Um, we're going to
2:42:31change the trait to what we had in the
2:42:33overview. Let's quickly see what we had.
2:42:36We had yinyang. So, we're going to copy
2:42:38it with yin. Right click this, copy ID,
2:42:41and then we're going to go in traits and
2:42:44we're going to change this trait to this
2:42:48one. So, as we can see, we have it right
2:42:51here. So, what we're going to do next is
2:42:53we are going to quickly go and duplicate
2:42:54this six times as well. And now, let's
2:42:57go and um quickly rename these six to uh
2:43:02minus one layout order. That's zero. And
2:43:04then the next ones can be one and it
2:43:06would just read it like these need to
2:43:08become first, these need to come second
2:43:10and then these need to come third. So
2:43:11let's select um for example this one,
2:43:15duplicate it real fast and change the
2:43:17layout order to one. So now it's in the
2:43:19end. Now we just need to change the um
2:43:22card BG to green. So let's quickly do
2:43:24that.
2:43:28Let's change the glow to green as well.
2:43:36Now we just need to change the icon from
2:43:38bleed to something like the uh the fire
2:43:42that we had. So where is our fire? Right
2:43:45here. Copy ID to clipboard. Click on
2:43:48this and then put the ID here. There we
2:43:50are. That's our fire. What we're going
2:43:52to do next is we are going to simply uh
2:43:55go ahead and duplicate this frame six
2:43:57times.
2:43:59There we go. So this is how our frames
2:44:01are looking like in Roblox Studio after
2:44:03being imported. So let's quickly go and
2:44:06com compare them and we'll see the
2:44:08differences. So you can see how similar
2:44:11they are. The only differences might be
2:44:13the sizing. And the scroll bar color is
2:44:16slightly different. So let's quickly go
2:44:18and fix that.
2:44:20Yep, that's pretty much like 99% the
2:44:23same. Um, one thing that we can do is
2:44:25because I feel like it's looking a bit
2:44:26too tight is I'm going to increase the
2:44:28padding right here. Something like this.
2:44:31So, now that we're done with that, what
2:44:32we're going to quickly do is we're going
2:44:34to collapse this and go to UI grid
2:44:36layout. Um, one thing that we've noticed
2:44:37is that we have used offset cell size.
2:44:40Um, unfortunately, uh, we forgot to use
2:44:43scaled cell size in the start. Um, this
2:44:45is the third mistake I've made
2:44:47throughout the video so that I can show
2:44:48you how to fix this. Um what we have to
2:44:50do in order to fix this issue is we can
2:44:52[music] simply go here, select cell size
2:44:55and click on scale. Now as we can see
2:44:57the entire sizes of the cells have
2:44:59become a bit smaller. Um there's no
2:45:02problem with this. All you have to do is
2:45:04you have to change the cell size in your
2:45:06mind to match the value again. So if you
2:45:09were to go with 0.2 doesn't work. 0.3 n
2:45:12something like 0.35
2:45:15maybe 0.37.
2:45:17Nope. 0.38. This looks pretty nice to
2:45:20me. Um, I think this is the perfect
2:45:22size. Uh, the reason why you might be
2:45:25thinking uh why it's not messing up is
2:45:27because the plug-in automatically adds a
2:45:29UI aspect ratio constraint to the UI
2:45:31grid layout. You can see the aspect
2:45:33ratio is set to one here, which means it
2:45:35is going to uh force it to stay a square
2:45:38no matter what we do. So, you don't have
2:45:41to go ahead and add an aspect ratio
2:45:42constraint to all of these image buttons
2:45:44separately. it will just add one to the
2:45:45UI grid layout and everything else will
2:45:47function as intended. So, that's a very
2:45:49big perk of using the plug-in. Um, we're
2:45:52going to quickly click on scrolling
2:45:54frame and then we're going to click on
2:45:55ultra scale just to make sure that
2:45:58everything is perfectly scaled inside of
2:46:00it. Um, we're done with our main units
2:46:02holder. The next thing we're going to do
2:46:04is we're going to collapse this as well.
2:46:06We're going to come in main inventory
2:46:08and we are going to create the three
2:46:11buttons that we have right here. uh
2:46:13click on extra buttons for our ease of
2:46:15comfort. We're going to duplicate them.
2:46:16We're going to change the position into
2:46:18the center and then we are going to move
2:46:20them down.
2:46:22We're going to increase the size to make
2:46:25sure that we're matching it properly. Um
2:46:27as we can see it the one one of the
2:46:29lines is here, one of it is here, which
2:46:30means it's not properly scaled yet. Uh
2:46:33we have it to just quickly scale it
2:46:35nice. And what we're going to do for
2:46:37that is we're just going to keep playing
2:46:38with the position and the sizing. Uh,
2:46:41let's put it somewhere.
2:46:45And there we go. That looks perfectly
2:46:47centered. So now what we're going to do
2:46:49is we're going to go back and make the
2:46:50background transparency one. And we're
2:46:52going to lower the size again. Something
2:46:54like 0.3. Nope. Something like 0.6.
2:46:59Uh, we're going to quickly enable the
2:47:00overview and see what it's like. As you
2:47:03can see, it's almost here and here. So
2:47:05these four uh sparkles. So, let's
2:47:09quickly go ahead and do that. Uh, we're
2:47:11going to click on the extra buttons that
2:47:12we had again, and we're going to small
2:47:16lower the size until we can match those
2:47:18four sparkles. So, I'm assuming it's
2:47:21going to be 0.53. Something like that.
2:47:24And that looks pretty nice to me. Let's
2:47:26quickly call this main buttons and then
2:47:29go inside it. And now we're going to
2:47:31delete one of these. Keep one of them.
2:47:33and the UIS layout. We're going to make
2:47:35sure that we put it uh horizontal
2:47:38alignment is going to turn into center.
2:47:40It's not really required, but we can do
2:47:42it this way. Um the next thing that
2:47:44we're going to do is we are going to go
2:47:45to the lock button and we're going to
2:47:47simply delete this stuff. Uh in lock
2:47:50button, we're going to change this just
2:47:52to a button for now. We're going to
2:47:53click on the U main button green copy ID
2:48:00and then we're going to paste it in a
2:48:02text label inside of this. So let's
2:48:04quickly go here remove background fit to
2:48:07parent size and then change scale type
2:48:10to fit and then put it right here. So as
2:48:13we can see it's uh looking like that.
2:48:16All we have to do is quickly increase
2:48:18the size of it.
2:48:21duplicate this three times and then
2:48:23lower the UI padding.
2:48:27This looks pretty nice to me. So, we're
2:48:29just going to change the colors real
2:48:30fast. Uh let's put this to
2:48:34uh something like this. And let's put
2:48:37this one to something like
2:48:40um something like this. Uh let's go in
2:48:43overview and see the color scheme that
2:48:44we have. So, it goes green, pink, and
2:48:48then yellow. All we have to do is change
2:48:50the layout order. So we're going to go
2:48:51here. Green is going to be zero. As we
2:48:53can see it's already zero. Pink is going
2:48:55to be one and then yellow is going to
2:48:58become two. So as we can see now it's
2:49:01green, pink, yellow. All we have to do
2:49:03now is name them. Uh if you click on
2:49:06overview again, we can see it's called
2:49:07teams equip best and sell mode. So, what
2:49:10we're going to do is we're going to
2:49:11quickly call this button button themes
2:49:18button
2:49:20equip best
2:49:22and then button cell mode. So, the next
2:49:25thing we're going to do is increase the
2:49:27padding just a bit to match it more to
2:49:30our UI. And then we are going to quickly
2:49:33uh ultra scale this, ultra scale this,
2:49:37and then ultra scale this. Next up,
2:49:40we're going to go ahead and add a text
2:49:41label inside one of these. Scale it. Fit
2:49:44to parent size. Remove background. Uh
2:49:46enable text scaled. Change the text to
2:49:50Monserat. Extra bold.
2:49:54And then we're going to make the size of
2:49:56it entirely small. something like 0 0.7
2:50:01perhaps 0.6.
2:50:05This looks pretty nice. Maybe 0.55. This
2:50:08looks nice to me. Uh remember the yaxis
2:50:11should always be smaller than the x-axis
2:50:13because of a lot of reasons. Um let's
2:50:16call this teams. Change the color to
2:50:18white just for our readability. And then
2:50:20add a UI stroke to it. the UI stroke is
2:50:23going to become I think three pixels or
2:50:25maybe two three pixels bigger. Uh let's
2:50:28quickly go and scale our UI stroke
2:50:30scale. Uh we can quickly see what it's
2:50:33like in our original UI. As we can see
2:50:36it's a bit smaller. So what we're going
2:50:38to do is we are going to quickly go
2:50:39ahead and make it a bit small. Our text
2:50:42click on the text and [music] then
2:50:44reduce the size to something like 0 0.45
2:50:480.46 maybe. [music] And then we're going
2:50:51to make the X-axis a bit bigger.
2:50:54Next, what we're going to do is we're
2:50:55going to rename this to name. Let's
2:50:57quickly select all of these image labels
2:50:59and rename it in the properties so that
2:51:01it renames all of it to texture. Uh
2:51:05we're going to make sure that the
2:51:06Z-index of all of these is zero. Let's
2:51:09do that quickly. Uh duplicate after
2:51:11changing the UI [music] stroke scale
2:51:13size to 85. Let's keep that. Uh let's
2:51:18quickly copy and paste this in both of
2:51:20these by pressing control shift V. And
2:51:23then we are going to change this to
2:51:24equip
2:51:26equip best. And this is going to change
2:51:29[music] to cell mode. This looks pretty
2:51:32nice to me. Let's quickly go ahead and
2:51:34see what it was like in our original uh
2:51:38uh UI.
2:51:40As we can see, it looks pretty similar.
2:51:42Very very similar. There might be some
2:51:44minor differences here and there. If you
2:51:46want, you can go ahead and fix them. I
2:51:48don't I I like it the way it is, so I'm
2:51:50not going to be fixing them. Uh, one
2:51:52thing that I'm going to do quickly is
2:51:54I'm [music] going to show you guys how
2:51:55to fix the button. As we can see, the
2:51:58button is really big right now. Uh, we
2:52:00don't want this because if a player was
2:52:01to move their mouse here, he would be
2:52:03able to click both this button and this
2:52:04button. Same with this one and this one.
2:52:06So, what we're going to do is we are
2:52:08going to quickly open both of these uh
2:52:10select everything inside of it. Change
2:52:13uh the size to offset and then change
2:52:16the position to offset as well. Once
2:52:18we're done with that, we're going to
2:52:19select all of these buttons and then we
2:52:21are going to make the sizes a bit
2:52:22smaller.
2:52:25What we're going to do now is we are
2:52:26going to quickly go ahead and scale all
2:52:28of them. Quickly click on scale, scale
2:52:30position, scale size. Once we're done
2:52:33with that, we're going to uh quickly go
2:52:36back and increase the UI padding.
2:52:39So, as we can see after doing that, 0.01
2:52:420.005. This looks pretty nice to me. So,
2:52:45now uh it is pretty much done. We have
2:52:47fixed the scaling and everything of this
2:52:49entire UI. And this looks pretty nice to
2:52:51me. Um, one thing that we're going to do
2:52:53quickly is let's uh increase the number
2:52:57of units we have near the end just so
2:52:59that it looks nice and fun to use.
2:53:03uh something like that. As we can see,
2:53:05we have all these units and they're
2:53:06perfectly scaled. Uh one thing that
2:53:08we're going to quickly do is we are
2:53:09going to enable overview again.
2:53:15As we can see, uh swapping them back and
2:53:17forth fast, we can see that it's all
2:53:19looking so much similar to our original
2:53:21UI, which is a great thing. This means
2:53:23that the UI has been made very, very
2:53:25nicely. Um the buttons need a bit more
2:53:28padding. I'm going to go ahead and do
2:53:29that real fast. Apart from that, we need
2:53:31to get started on the right hand side.
2:53:32So, let's do that. So, let's quickly go
2:53:35here.
2:53:38Main buttons. Let's increase the padding
2:53:41to something like 0.15.
2:53:44Now that we're done with that, uh let's
2:53:46get started on our right hand side. So,
2:53:49we're going to close this. Uh main
2:53:52inventory is going to be closed
2:53:53completely. Uh inventory details now is
2:53:55going to be open. Uh, one thing that we
2:53:58can do is we can add an aspect ratio
2:54:01constraint to the main frame, main
2:54:02inventory. Just to be safe, in case this
2:54:05is the only frame that's enabled and
2:54:07maybe they're be they're doing the
2:54:09entire thing a bit differently than what
2:54:11we expect, we're going to do this for
2:54:13the sake of clarity. Apart from that,
2:54:16uh, we're going to get started on the
2:54:17inventory details. So the first thing
2:54:19that we're going to add in the inventory
2:54:20details is we are going to quickly go
2:54:22here and we're going to lower the
2:54:25Z-index to minus 50 again and we're
2:54:27going to reduce the image transparency.
2:54:29Something like 0.6 works. Okay,
2:54:34next up we are going to get started. Uh
2:54:36let's quickly go in inventory details
2:54:38just like we did everything here. We are
2:54:40going to make sure it's all scaled. So
2:54:42let's quickly go ahead and add an image
2:54:44label to this. Uh we're going to search
2:54:48and then put it in the center. What
2:54:50we're going to do next is we are going
2:54:51to simply uh size it to what we think is
2:54:54right. Uh let's just for our ease of
2:54:56comfort put it to the left for now. And
2:54:59then something like this. Looks pretty
2:55:01nice to me. Um we're going to change the
2:55:03anchor point to the center again. And
2:55:04then let's move it higher. Something
2:55:07like 0.2. Uh let's increase the size
2:55:10first. We'll have to scale it. And then
2:55:12let's increase the size to something
2:55:14like 0.15.
2:55:16Maybe 0.17 works. That looks pretty nice
2:55:19to me. Maybe 0.172.
2:55:22Uh let's remove the image background.
2:55:26And then what we're going to do is we
2:55:27are going to simply change the image
2:55:30texture. So we are going to go to the
2:55:33top right container right here. We're
2:55:36going to copy the ID and put it here. Uh
2:55:38one thing that we're going to do is we
2:55:39are going to change the scale type to
2:55:41fit something like that. And then we are
2:55:44going to simply uh make it bigger. So uh
2:55:46we have a lot of ways to do this. Um we
2:55:49can there wouldn't be any problem with
2:55:51resizing this bigger as well because
2:55:53this is not something like a clickable
2:55:56button or anything. So it doesn't need
2:55:58to be uh sized small. But for the sake
2:56:01of cleanliness, let's just quickly
2:56:02duplicate this and put it inside of
2:56:04this. Uh what what we're going to do now
2:56:06is we're going to center it and fit to
2:56:08parent size. And then we can offset the
2:56:11size and then the position. Uh we are
2:56:14going to reclass the image label into a
2:56:16frame. And now that we have a frame,
2:56:18let's quickly go ahead and call this top
2:56:21right. Click on the image label that we
2:56:23had. Scale the size really fast
2:56:27and then center it. Uh let's just call
2:56:30it one. And then let's make the size a
2:56:32bit bigger depending on what we want.
2:56:34Maybe something like 1.2, 1.3,
2:56:371.35,
2:56:401.36.
2:56:41I can see a problem here. We're going to
2:56:43have to move this just a bit.
2:56:48So, all we have to do now is let's just
2:56:49quickly go ahead and make sure that the
2:56:51inventory details is below this cross
2:56:52button. So, we're going to change the
2:56:54Z-index to zero. As you can see, the
2:56:57close button has now popped over the UI
2:56:59stroke. Uh next up what we're going to
2:57:01do is we are going to go ahead and
2:57:04quickly uh change this to texture and
2:57:06put it below everything. So this is also
2:57:08going to be zero zindex. Um next up what
2:57:12we have is we need to copy everything
2:57:14that we had in our original thing. Um
2:57:16let's quickly change the zindex of the
2:57:18overview to 50 and [music]
2:57:21start adding stuff on top of it. So, in
2:57:23order to uh add the text label, there's
2:57:26multiple ways, but I'm just going to go
2:57:27ahead and copy this one that we had uh
2:57:29instead of having to remake everything.
2:57:31I'll just click on capacity, Ctrl + C,
2:57:34and then go here and Ctrl +V. I'll
2:57:37center it fit to parent size instantly
2:57:39and turn off rich text cuz I don't think
2:57:41we will be needing that. And then change
2:57:44this to something like XYZ for now.
2:57:46Let's enable overview again right here.
2:57:50And now we can position it. So let's
2:57:52change this to unit name. And then let's
2:57:57make it a bit smaller. Something like
2:57:590.5.
2:58:00Nope. 0.4 I think. Maybe 0.35.
2:58:05Okay. Let's now change the X-axis to
2:58:09something like
2:58:18so. So next up, what we're going to do
2:58:20is we are going to simply duplicate
2:58:22that. Let's change that to unit rarity.
2:58:25Uh and then we are going to position it
2:58:27low again. Maybe something like five.
2:58:31Let's make it a bit smaller. Something
2:58:33like 23 maybe. And change the text to
2:58:36mythical.
2:58:39We'll have to make it a bit smaller.
2:58:40Something like 0.2. Nope. 0.2. Exactly.
2:58:44Yep. There we go. And we are going to
2:58:47lower it even more. A bit less.
2:58:51And that looks pretty nice. Um, let's
2:58:53quickly go ahead and duplicate that
2:58:56again and change this to unit level.
2:59:01Now, as we had right here, we are going
2:59:03to simply go ahead and turn on rich text
2:59:05again. [music]
2:59:06And we're going to position it lower.
2:59:11And we're going to change this to LV.25.
2:59:15So, we can see that we have to make it a
2:59:17bit smaller. Again, this is just going
2:59:19to become 0.17
2:59:21perhaps. That looks pretty nice. Uh,
2:59:24we'll probably have to move it slightly
2:59:26lower. Um, that's what I'm going to do.
2:59:29That looks nice to me. Um, next up, what
2:59:31we're going to do is we are going to uh
2:59:34get the color that we had. So let's
2:59:36quickly change the overview [music]
2:59:37image transparency to zero and click on
2:59:40unit level and then text color pick
2:59:44screen color
2:59:46and then we're going to click on
2:59:47precisely the point that we think is the
2:59:49right one. I'm looking at the slider and
2:59:51this one looks very nice. I'm just going
2:59:53to memorize the hex so it's F168 FF. So
2:59:57I'm going to cancel all of that. F168 FF
3:00:01F168 FF F168 FF So now we're going to
3:00:06come here. We are going to click this.
3:00:08We're going to type the same syntax
3:00:10where is equal to F # F168 FF and we're
3:00:15going to close it. And then we're going
3:00:16to type the same thing here. Font uh 25
3:00:19will have to be outside of it. So let's
3:00:21just quickly go ahead and do that. And
3:00:22there we go. That's exactly how it is.
3:00:24Uh next up, what we're going to do is we
3:00:26are going to make the size of this
3:00:28smaller. something like this. It won't
3:00:29have to be bigger than that. Same for
3:00:31this. Something like this. Perhaps unit
3:00:35name can be this big. Um we're going to
3:00:37enable overview again.
3:00:39Uh what we're going to do next is we are
3:00:41going to copy the gradient. So we are
3:00:45going to go to the unit name. We are
3:00:46going to simply add a UI gradient to it.
3:00:49And then we're going to go here and
3:00:51we're going to choose the colors. So we
3:00:54are going to click on pick screen
3:00:56colors. Again, the screen color for
3:00:58that, I'm assuming, is just white. Uh,
3:01:00let's just quickly go and select white
3:01:02cuz I think that's pretty much just
3:01:04going to be it.
3:01:06So, that's what we're going to go with.
3:01:08Uh, let's hide overview. And, yeah,
3:01:11looks so much nice. Looks very similar
3:01:13to what we need. If we can quickly go.
3:01:16Yep, that looks nice. Uh, apart from
3:01:18that, let's enable overview again and
3:01:20copy this one now. So, we're going to
3:01:22duplicate this one into rarity.
3:01:25And then we're going to change it again.
3:01:27So let's select this button and then
3:01:31click on pick screen color and we're
3:01:33going to select something like this.
3:01:34Let's just go and make this bright and
3:01:37then select this one and then color and
3:01:38then pick screen color and then select
3:01:40this one or sorry not that one. The
3:01:43color is going to be this one. Let's
3:01:46make this fully bright as well. And
3:01:47there we go. So we're going to close
3:01:48that. And then we're going to hide
3:01:51overview again for a second. And that
3:01:52looks pretty nice. Um, I'm just going to
3:01:54make a small adjustment cuz I think that
3:01:56looks a bit off. Um, I'm going to go
3:01:58here and perhaps make it a bit more
3:02:04I actually like it being more on the
3:02:05orange side. So, I'm going to put it
3:02:07something like something like this. I
3:02:09like this. So, I'm going to close that.
3:02:12And then what I'm going to do is I'm
3:02:14going to enable overview again and then
3:02:16put the image transparency to 0.6. And
3:02:19now we're going to copy the level. And
3:02:23then we're going to duplicate it. And
3:02:24we're going to call this tradable.
3:02:27So let's just quickly go and position it
3:02:29right here to this. And then right here.
3:02:35And then all we have to do is change the
3:02:37text X alignment to right. And then uh
3:02:40sorry, we're going to change the text to
3:02:42tradable
3:02:44unit. Uh all we have to do now is we
3:02:47have to just resize it a bit to perhaps
3:02:49this. And yeah, that looks pretty nice.
3:02:51Uh, it needs to be systematic. So, I'm
3:02:53not going to resize this smaller to
3:02:54match the original photo cuz that's
3:02:56something wrong with the original one,
3:02:58not this one. So, the next thing that
3:03:00we're going to do is we're going to add
3:03:01a UI gradient to this. Let's just
3:03:02duplicate this one into tradeable.
3:03:05And we're going to make overview very uh
3:03:09opaque again. And then we are just going
3:03:11to simply change the gradient. So, let's
3:03:14just expand that.
3:03:16It's fully transparent.
3:03:19Click this one.
3:03:22something like this. And yeah, let's
3:03:23close that. And then we can close the
3:03:26overview again and see what it looks
3:03:27like. And that looks pretty nice to me.
3:03:29I'm going to stick with that. So, I
3:03:31think one thing that we'll have to do is
3:03:33I'll have to move the tradeable a bit
3:03:34more to the left cuz I don't like that.
3:03:36Maybe something like 0.73 works. And
3:03:39yeah, that looks pretty nice. So, let's
3:03:41just quickly go ahead and make the
3:03:43traits on top of the tradeable. Um,
3:03:45let's go and make a frame right here.
3:03:49Let's put it in the center. And let's
3:03:52maybe position it right here.
3:03:56And then we have to make the overview
3:04:00visible again so that we can copy
3:04:02nicely. Uh let's put it 0.6 as we had
3:04:05before.
3:04:09Now let's quickly go ahead and add a UI
3:04:12list layout inside. This time the list
3:04:14layout field direction is going to be
3:04:15horizontal and it's going to start from
3:04:17the right side. So horizontal alignment
3:04:19is going to be right. Vertical alignment
3:04:21is going to be center. And then let's go
3:04:24in and add [music] our traits. So since
3:04:25we have already exported our traits, uh
3:04:28imported our traits, sorry. We're going
3:04:30to come here and select both of these.
3:04:32And then we can just duplicate them and
3:04:34put them inside this one. There we go.
3:04:37Uh one thing that we're going to do is
3:04:38we're just going to resize them.
3:04:40Something like this. And then we are
3:04:43going to lower the padding.
3:04:49So let's quickly go ahead and duplicate
3:04:51this. Put it inside of the main frame
3:04:53that we had earlier. So now that we did
3:04:55that, we are going to quickly reclass
3:04:57this into a frame. And then we are going
3:05:00to uh make sure that we can easily
3:05:03increase the trade size. We won't need a
3:05:05UI aspect ratio constraint for this. Uh
3:05:07we can just easily go ahead and keep it
3:05:10for that one. And then we can increase
3:05:12the size. Let's go with something like
3:05:141.1 perhaps. I like that. Uh, next thing
3:05:17that we have to do is we can just simply
3:05:19duplicate that and then put a trait
3:05:21inside of that one, the new one. Uh,
3:05:23let's delete the old one and remove the
3:05:26aspect ratio constraint. And there we
3:05:28go. That looks pretty nice. Uh, let's
3:05:30change the size to something like 1.2 as
3:05:32well. Maybe 1.1. And that looks perfect.
3:05:35So, what we're going to do next is we
3:05:37are going to simply go ahead and change
3:05:39the padding to something like zero. So,
3:05:41one issue that we have is that the image
3:05:43labels in both of them are not centered.
3:05:45Let's quickly go ahead and do that. As
3:05:47we can see, the problem is now solved.
3:05:49Um, we're just going to lower the
3:05:51padding.
3:05:54So, that's nice. I'm going to lower the
3:05:57padding to somethingus 0.05.
3:06:00So, that looks pretty nice to me. Um,
3:06:02after a lot of like, you know, small
3:06:03minor adjustments, we finally got the
3:06:05desired result. Uh, let's go and enable
3:06:07our overview and see how different that
3:06:09is. That looks pretty much the same. As
3:06:11you can see, uh, the positions are
3:06:13swapped. So, I'm going to quickly unswap
3:06:15them. What we're going to do is we are
3:06:16going to come to the trophy and change
3:06:18the layout order to one. And that has
3:06:20fixed it. As you can see, I'll probably
3:06:21move the traits a bit more to the left.
3:06:24Um, if you were to open overview real
3:06:25fast, we can see that it's pretty much
3:06:27the same. It's the exact same thing that
3:06:29we wanted. So, now that we're done with
3:06:31the top right container, what we're
3:06:32going to do is we are going to instantly
3:06:34click on ultra scale. Um, we're going to
3:06:37go ahead and remove the UI paddings from
3:06:39all of these text labels since we don't
3:06:40want it. Uh, but it's possible by the
3:06:43time you're watching this video, this
3:06:44feature doesn't even exist in the
3:06:45plug-in because I simply don't like it.
3:06:47If you've laid out the UI nicely, you
3:06:49won't even need to add UI paddings to
3:06:52your uh GUI. So, it's not necessary. So,
3:06:55you don't have to worry about this. So,
3:06:56yeah, we're going to just quickly delete
3:06:58the UI paddings. And, uh, from what we
3:07:00can see, this looks pretty nice. So, I'm
3:07:02just going to simply go ahead [music]
3:07:04and, uh, minimize this. Uh, one thing
3:07:07that we're going to do, the same thing
3:07:08that we did with our main inventory, is
3:07:10we are going to add an aspect ratio
3:07:11constraint to this.
3:07:14And once we're done with that, let's
3:07:16quickly go ahead and start with our
3:07:20lower frame. So, let's just quickly
3:07:22duplicate this. And then we are just
3:07:24going to lower the y-axis instead of
3:07:27doing anything else. Let's just go and
3:07:29put maybe 0.8 0.82. And then we're going
3:07:33to rename this to bottom right. Let's
3:07:36delete everything apart from the texture
3:07:38because we won't be needing anything
3:07:39else. And then for the texture, let's go
3:07:41ahead and put bottom right container.
3:07:43Copy ID and then paste it.
3:07:47As we can see, it looks pretty nice. Uh
3:07:49all we'll have to do now is we just have
3:07:51to resize it until it looks nice. Uh one
3:07:54thing that we will be doing is we have
3:07:55to enable the overview so that we can
3:07:57match the proper size to it. And then
3:07:59let's click on bottom right. And let's
3:08:02just manually position it just a bit. So
3:08:04something like this. And then something
3:08:06like this. Looks nice to me. And then
3:08:09let's just make the texture a bit
3:08:11smaller after positioning it in the
3:08:13center. Something like 1.2
3:08:16[clears throat] 1.3.
3:08:19We need to add the buttons. What we're
3:08:21going to do is we are going to use UI
3:08:23list layout and not UI grid layout for
3:08:25the buttons. It's much easier to work
3:08:27with UI list layout and it's just easier
3:08:30overall and more convenient and faster.
3:08:32So let's do that. Um, we're going to
3:08:34quickly uh go in inventory details
3:08:37bottom right and we're going to make a
3:08:38new texture uh frame. Let's put this in
3:08:41the center and let's play around with
3:08:44the size.
3:08:47Let's go ahead and add an image button
3:08:49inside of this. Uh let's quickly uh put
3:08:53this in the center. Remove background
3:08:55fit to parent size and add a UI list
3:08:57layout as well.
3:08:59Uh the normal settings for the UI list
3:09:02layout are okay, but we need to change
3:09:04the fill direction to horizontal and
3:09:06then turn on wraps. So what this
3:09:08essentially does is that it's going to
3:09:10go like this. 1 2 3 4 5 6. So it's going
3:09:13to do it in a sort of a a toz manner
3:09:16from left to right. So what we're going
3:09:18to do quickly is we are going to make
3:09:19the size of this a bit small and make it
3:09:22match what we want. So let's go and put
3:09:25this like this and then reduce this to
3:09:28something like that. Once we have that
3:09:30we are just going to simply go inside of
3:09:32it and add an image label to this image
3:09:35label inside of it and then put this in
3:09:37the center fit to parent size. Change
3:09:39the scale type to fit and then we are
3:09:42going to make it a bit bigger. Something
3:09:44like 1.1 or maybe 1.1 on the x-axis and
3:09:481.3 on the y- axis or 1.25 on the y
3:09:51axis. And then we are going to simply
3:09:54put the equip button texture. So the
3:09:58equip button texture is right here.
3:10:00That's the green one. And let's go and
3:10:03quickly put that. There we go. Let's
3:10:05call this texture. And um what we're
3:10:09going to do next is we are just going to
3:10:10simply uh click on overview and then
3:10:13change the transparency to zero. Let's
3:10:16hide and unhide it fast to see [music]
3:10:18if it's the same. Oh, we forgot to
3:10:20remove the background. Uh let's quickly
3:10:22remove background and remove background
3:10:24for the image button as well
3:10:26and change the image transparency of the
3:10:28main frame to one. And now let's quickly
3:10:31compare both of them. And it needs to be
3:10:34made a bit bigger. So what we're going
3:10:35to do is we are going to come here and
3:10:37increase the size to something like
3:10:39perhaps 1.3 1.4 1.5
3:10:44and just keep this a bit small. 1.2.
3:10:46Okay. Let's compare now. And it looks
3:10:49pretty much the same. So this is what
3:10:50we're going to go with. Uh, one thing
3:10:52that we're going to add before
3:10:53proceeding is we are going to add a text
3:10:54label. Maybe just copy the one that we
3:10:57made earlier here. Uh, let's go and copy
3:11:00this and then put this inside of this
3:11:02right here. Uh, we're going to reduce
3:11:04the Z-index of the texture to zero just
3:11:07to make sure we don't run into problems.
3:11:09And then we are going to increase the UI
3:11:12stroke scale size to 0.13
3:11:170.12 maybe. I like that. So let's just
3:11:20quickly go ahead and duplicate this six
3:11:23times like this. And now we're going to
3:11:26play around with the padding. Um the
3:11:28padding can just become something like
3:11:310.1.05
3:11:340.06
3:11:370.07
3:11:390.08.
3:11:41Nope. 0.07 looks perfectly fine. So this
3:11:44is what our main thing is going to look
3:11:46like. Uh, we can also go ahead and just
3:11:48put the horizontal alignment to center
3:11:49and then the vertical alignment center
3:11:51as well to make sure that it's perfectly
3:11:53in the center. This is a optional thing
3:11:55that you guys can do if you want. Um,
3:11:57let's go back and start coloring them
3:11:59the way that they should be colored.
3:12:00Let's enable overview. So, it goes
3:12:03green, blue, red, pink. Let's just put
3:12:06these ones for now. Green. And the next
3:12:08one is going to be blue. So, let's go
3:12:09and put this one blue.
3:12:13Okay. So, we're going to change this to
3:12:16merge. Change this to sell. Change this
3:12:20to equip
3:12:23and change this to lock
3:12:27and go back and see the differences.
3:12:30Yeah, looks pretty nice. Uh, feed and
3:12:32upgrade are also going to be present
3:12:33there. So, let's just change this to
3:12:34feed and upgrade.
3:12:39Upgrade.
3:12:41And there we go. This is the exact
3:12:42buttons that we need. So, let's just go
3:12:45back here and then change this to equip.
3:12:50One thing that we need to do is we also
3:12:51need to make this the unequip button.
3:12:53So, we're just going to call it equip
3:12:55unequip. We're going to call this lock
3:12:58unlock.
3:13:00We're going to call this feed.
3:13:02Going to call this upgrade.
3:13:05Call this merge. And then call this
3:13:08cell. So in uh equip unequip, one thing
3:13:11that we're going to do is we are going
3:13:13to simply go ahead and duplicate the
3:13:14texture. Uh we're going to call this
3:13:17texture unequip and call this texture
3:13:20equip just for the sake of scriptors to
3:13:23make their life easier. Uh the
3:13:24unequipped texture is going to be the
3:13:27red color. So I'm just going to copy the
3:13:29ID and then put this texture right here.
3:13:32And I'm just going to hide this because
3:13:34we don't need this. This is also only
3:13:37going to be when the unit has been
3:13:38equipped and needs to be unequipped in
3:13:40the actual game. So yeah, that's what
3:13:43we're going to do. Um, next up, what
3:13:45we're going to do is we are just going
3:13:46to simply duplicate this as well. Let's
3:13:48call this texture lock and call this
3:13:50texture unlock. So in unlocking the
3:13:54color that I want it to be is going to
3:13:56be the same. So I'm not going to be
3:13:58changing that at all. Um, I'm just going
3:14:00to quickly go and hide this. And yeah,
3:14:02that's pretty much how it looks like. So
3:14:03now our buttons are very close to the
3:14:06actual size that they need to be. As you
3:14:08can see, the mouse only turns into the
3:14:11clicking button when I move my mouse on
3:14:13top of the button and not outside of it,
3:14:15which is exactly what we need. It's
3:14:17going to be very good for animations as
3:14:18well. So let's just go and call this
3:14:20buttons and make sure that the Z-index
3:14:22is on top of it, which it is. So that's
3:14:25perfect. So what we're going to do now
3:14:27is collapse this. So next up what we're
3:14:28going to do is we are just going to
3:14:29click quickly click on bottom right and
3:14:32then click on ultra scale. One thing
3:14:34that we need to do is we have to go
3:14:35through all of these and let's just
3:14:38quickly hierarchy select children and
3:14:41then unselect the UI strokes
3:14:45right here.
3:14:48Uh you can see we have six of the text
3:14:49labels and it says right here six items.
3:14:52So, we probably did something right. And
3:14:54now we can just press delete and the
3:14:55padding gets deleted. [music]
3:14:57Again, this feature might not be in the
3:14:59plug-in by the time you're using it
3:15:01because I will have it removed soon. So,
3:15:03you don't have to worry about that. So,
3:15:04yeah, let's just quickly go back,
3:15:07collapse all of this, collapse the main
3:15:10buttons,
3:15:13and then collapse the main button frame,
3:15:16and then this. And yeah, that's pretty
3:15:18much it. That's our bottom right
3:15:20container solved. Uh next thing that
3:15:22we're going to add is that we are going
3:15:24to simply um go and add another uh we're
3:15:28going to duplicate the texture frame and
3:15:30then we are going to call this the sort
3:15:32of shadow that we have. So it's not
3:15:34exactly a shadow but that's what I call
3:15:36it. So what we're going to do is we are
3:15:38going to simply make the size to one.
3:15:43And then we are going to copy the
3:15:44container bottom right shadow. And I'm
3:15:46going to put this right here. Uh the
3:15:50z-index of this is going to change to
3:15:52minus2 or minus 10 maybe just to be
3:15:55safe. This has to be below everything
3:15:56else. So let's go and quickly do that.
3:15:59Um we are going to make this a bit
3:16:01bigger.
3:16:08So this is that for our bottom right
3:16:10side. Um, one thing that we're going to
3:16:12do now is we are going to simply come
3:16:15here to the top right after copying the
3:16:19[music] shadow and then paste the shadow
3:16:20in the top right. So all we have to do
3:16:22now is we have to copy the container top
3:16:24right shadow put this in the shadow here
3:16:26and then we can move it down something
3:16:29like
3:16:33I really like how this looks. Uh, one
3:16:35thing that we're going to quickly go
3:16:36ahead and do is we are going to make the
3:16:38shadows on both of these a bit smaller
3:16:40just for the sake of um
3:16:43not going out of the boundaries that we
3:16:46wanted to go out of.
3:16:49So, we're going to stick with these
3:16:51values for these ones. Um, this looks
3:16:53pretty nice to me. Uh one thing that
3:16:54we're going to remember is that now
3:16:57since we want the viewport frames to be
3:16:59beneath this uh container, there's going
3:17:01to be an issue that's going to be
3:17:02caused. Uh this shadow is going to
3:17:05overlap the viewport frame. So we have
3:17:07multiple ways to solve this. We can just
3:17:09put the viewport frame inside of the
3:17:11bottom right instead of making it inside
3:17:13of the inventory details. So that's what
3:17:15we're going to do. Let's open the bottom
3:17:17right one again and add a viewport
3:17:19frame.
3:17:20Now what we're going to do is we are
3:17:22going to put this viewport frame below
3:17:24the texture but above the shadow. So the
3:17:25texture zindex as we can see zero shadow
3:17:28is minus 10. So we're going to put the
3:17:30viewport frame Z index to minus 5. And
3:17:32then let's position this a bit bigger.
3:17:35Something like this.
3:17:38And now I'm going to remove the
3:17:40background. I'm going to put the
3:17:42background color to something like 100.
3:17:45This is just to make sure that the
3:17:46render inside of the viewport frame or
3:17:48the character inside of the viewport
3:17:49frame, the model won't have a white
3:17:51outline. So once we're done with that,
3:17:53let's just quickly go and make sure that
3:17:56the viewport frame is scaled. Yes, it
3:17:58is. Next, what we're going to do is we
3:17:59are going to rename the viewport frame
3:18:01to something like unit. And now we're
3:18:05going to add these favorite and lock
3:18:07icons. So just for the sake of our own
3:18:10comfort, what we're going to do is we
3:18:11are going to uh hide overview real fast.
3:18:15Come here and select this. As if you
3:18:17remember, we had this access trait and
3:18:20stuff that we made a while ago. So we
3:18:22can just copy that and put it here to
3:18:23speed up the process. I'm going to come
3:18:25in inventory details and shift V,
3:18:28control shift V that and make it
3:18:30smaller. So I'm going to put it
3:18:32somewhere around there. and then put the
3:18:35position to something 0.1.
3:18:38So in the axis, what we're going to do
3:18:40now is we are going to change the
3:18:42equipped icon to the favorite icon. So
3:18:45in order to do that, we're just going to
3:18:47go and delete the equipped and we are
3:18:49going to copy the favorite icon. So
3:18:52let's just hide the overview real fast.
3:18:54Click on the favorite. Ctrl + C it. Come
3:18:56back here and control shiftV. We're
3:18:59going to resize it.
3:19:04So now the next thing that we're going
3:19:06to be doing is we are going to um add
3:19:09the statistics on the right side that we
3:19:11remember that we saw in our overview.
3:19:12Remember throughout the entire process
3:19:15keep pressing Ctrl S
3:19:18collapsing everything. And now we're
3:19:19going to collapse the main inventory.
3:19:21Come here and then enable overview
3:19:24again. Now we are going to come to the
3:19:26inventory details and let's make the
3:19:29statistics on the right side that we
3:19:30see. Um, we are going to simply come to
3:19:33the inventory details and then add a
3:19:35frame
3:19:37and then size it.
3:19:41Um, what we're going to do next is let's
3:19:43go inside and add a UI list layout. The
3:19:46UI list layout is going to be vertical
3:19:48and horizontal alignment is going to be
3:19:49center. Uh, and yeah, so next thing that
3:19:53we're going to be doing is let's add a
3:19:55frame inside of it again. And now we're
3:19:58going to position the frame however we
3:20:00want to. So the size is going to be
3:20:02scaled. Let's just quickly put the
3:20:04sizing that we think. I know that the
3:20:06size of the X-axis is going to be
3:20:08maximum one so that it completely covers
3:20:11the main frame that we had on the
3:20:13X-axis. And then I'm going to manually
3:20:15position the frame. Something like this.
3:20:18And now what we're going to do is we are
3:20:21going to add another frame inside of
3:20:23this. Center it fit to parent size.
3:20:30That actually looks pretty good to me.
3:20:31So, what we're going to do is we're
3:20:32going to add a UI stroke to it. Now, uh
3:20:34the UI stroke is going to be around 3
3:20:36pixels wide. So, let's do that. And then
3:20:39scale the UI stroke real fast.
3:20:42And that's that. Um next step is going
3:20:45to simply be to make another frame
3:20:48inside of this. And then we are going to
3:20:51make this frame smaller by holding shift
3:20:53and then dragging it smaller.
3:20:56Let's color it fully black for a bit.
3:21:00And then let's lower the transparency to
3:21:02something like 0.7.
3:21:04Now what we have to do is we have to
3:21:05make a very nice little sort of shadow
3:21:08on the frame. So all we're going to do
3:21:11is we are going to select it again
3:21:14right here. This one. And then we are
3:21:17going to change the Z index default to
3:21:19two. And then we're going to make the
3:21:21size to something like 0.9.
3:21:24And then the size of the Y to something
3:21:25like 0.7. Maybe make it a bit bigger.
3:21:28Something like this. Or maybe a bit
3:21:30smaller. 0.91 works. There we go. Um,
3:21:33one thing that we're going to do is we
3:21:34are going to hide the overview so that
3:21:36we can easily see what we're trying to
3:21:37do. And that looks pretty nice to me.
3:21:40Um, the next step that we have is let's
3:21:42quickly center that. And let's call this
3:21:44uh dark. Let's keep this as um texture.
3:21:51So the next step that we have is going
3:21:53to simply be to uh change the UI
3:21:56gradient of the texture. Let's go and
3:21:58add a UI gradient to this. Enable
3:22:00overview. And now we're going to see the
3:22:01values. So if we go to zero image
3:22:04transparency, we are going to copy these
3:22:06two gradients. This is on a 135 angle.
3:22:08So it's going to be like this. I'm going
3:22:10to click on the UI gradient. Click on
3:22:12these two values right here. Somewhere
3:22:15here. Pick screen color. Going to select
3:22:18this right here. It's actually going to
3:22:20be something like this. And the next one
3:22:23is going to be something like
3:22:26this.
3:22:27Going to make it a bit brighter.
3:22:29Something here.
3:22:32And there we go. Um, what I'm going to
3:22:34do is I'm going to change the rotation
3:22:35to 135. And let's see how it looks. So,
3:22:38I'm going to close this real quick and
3:22:40then hide the overview.
3:22:43As we can see, it's a bit different from
3:22:45what we have. This is because of the
3:22:46rotation. I think it's minus. I think
3:22:49it's going to be 135. Nope.
3:22:53So, the rotation is actually meant to be
3:22:5545 if I remember right. That's a mistake
3:22:58on my end. Let's go ahead and compare.
3:23:00And yeah, there we go. It's very uh
3:23:02similar to what we had earlier. Um we
3:23:05are going to increase the transparency
3:23:08or sorry decrease the transparency of
3:23:10this dark frame. Put the 0.5. And now
3:23:13compare both of them.
3:23:16And yeah, that looks very very similar.
3:23:18So I think I'm going to make reduce the
3:23:20transparency even more. Something like
3:23:230.45
3:23:25maybe. That looks nice to me. Okay, now
3:23:27we are going to be adding the text and
3:23:29everything on top of this. Let's go and
3:23:30add the text label right here. Um, we
3:23:33are going to be removing the background.
3:23:35Enable text scale. And then we are going
3:23:38to make the size a bit smaller.
3:23:43And yeah, looks very very similar for mo
3:23:45the most part.
3:23:47So let's just quickly go and duplicate
3:23:49this as well after reducing the size a
3:23:52bit and then call this uh tier. So the
3:23:57tier is going to become very much
3:23:59smaller. Uh let's put this in the center
3:24:01for now and change [music] the text
3:24:04alignment to center.
3:24:07What we're going to do is we are going
3:24:08to simply copy the gradient and put this
3:24:10in the tier. So there we go. That's the
3:24:12intended uh thing that we wanted. Let's
3:24:15enable the overview and see the
3:24:16difference. The tier has to be made a
3:24:18bit bigger. So that's what we're going
3:24:19to do.
3:24:22So I'm really satisfied with that
3:24:23result. Um what we're going to do next
3:24:25is let's just quickly name this to
3:24:27damage
3:24:30and remember to save. Uh what we're
3:24:32going to do next is we're just going to
3:24:33add an image label and then put this in
3:24:35the center. Remove background. [music]
3:24:38Change the Z index to something like
3:24:40four perhaps or maybe three. and then
3:24:43change the value and tier to four if you
3:24:46want the text to always stay on the top.
3:24:48And then we are going to make this a bit
3:24:50smaller.
3:24:52So now what we're going to do is we're
3:24:54going to simply enable overview and
3:24:55compare to our existing frame. Let's
3:24:58[music] change the transparency to 0.6.
3:25:01Now we are going to simply make this a
3:25:04bit smaller. This looks nice. And then
3:25:07the rest we are going to do in our
3:25:09existing frame and not copy because the
3:25:13resolution is a bit different. So we are
3:25:15going to simply make sure that the Y is
3:25:16always in the center. Then we are going
3:25:19to move this a bit more to the right.
3:25:21There we go. We're going to probably
3:25:24make this a bit smaller as well. 68
3:25:26looks nice. And then we are going to
3:25:28simply remove background. And then
3:25:30change this to icon and then copy the
3:25:33damage icon. Icon damage. and then put
3:25:37it right here. And there we go. That
3:25:39looks very nice. We're going to change
3:25:40the scale type to fit. And we going to
3:25:43make this probably a bit bigger.
3:25:45Something [music] like 70 or 72. And
3:25:48that looks great. We are going to
3:25:50quickly click on damage and then ultra
3:25:52scale everything. We're going to delete
3:25:54the UI paddings. As I mentioned earlier,
3:25:57this feature won't exist for long, so
3:25:59you don't have to worry about that.
3:26:01And yeah, that looks very beautiful. For
3:26:04the most part, it's completely the same
3:26:06as to what we had in our existing UI in
3:26:10our third party software. Let's compare
3:26:11both of them with zero transparency. And
3:26:14yeah, as we can see, pretty much the
3:26:16same.
3:26:18What we're going to do now is we're
3:26:19going to simply duplicate this uh three
3:26:22times just to match what we had. Uh
3:26:25we're going to make sure that the third
3:26:26frames bottom hits right here. So, what
3:26:29we're going to do is we are going to put
3:26:31this in the center.
3:26:34uh in the vertical alignment and then we
3:26:36are going to increase the padding to
3:26:38something like 0.05.
3:26:40Let's compare now. Almost there. We're
3:26:42going to increase it just a bit more.
3:26:43Something 0.052
3:26:46or 0. Yep.
3:26:49There we go. Something 53. That looks
3:26:52nice. So, I'm going to stick with this
3:26:54one. Um I'm going to change this to uh
3:26:57spa and then this to range. I'm going to
3:27:01change the layout order to zero one and
3:27:06then two. We're going to enable overview
3:27:08again.
3:27:13And as we can see um we are just going
3:27:16to copy the icons and the gradients and
3:27:18then we should be done. Let's just
3:27:20quickly hide this and then change the
3:27:22icons. First of all going to come here,
3:27:24copy the icon spa.
3:27:27For those of you that might be
3:27:28wondering, SPA means seconds per attack.
3:27:31It's basically the cool down between
3:27:32each move that a unit has in a tower
3:27:34defense game. So, let's copy the icon
3:27:36RNG. RNG means range, how far a unit
3:27:40fires or attacks. So, there we go. These
3:27:43are our three icons. I'm going to
3:27:45quickly go ahead and just for the sake
3:27:47of it, I'm going to make the range icon
3:27:50just a bit smaller, something like 68.
3:27:53And then I'm going to scale the size
3:27:54again.
3:27:57right there. Um, and next up, what we're
3:27:59going to be doing is we're going to copy
3:28:01the colors. So, let's just quickly
3:28:04enable overview.
3:28:13So, one thing that I have to add now, if
3:28:15you guys remember, is that in our
3:28:17overview,
3:28:18we have sort of this white shadow or
3:28:21like this trail that goes on the left
3:28:23side of the bars. So what we're going to
3:28:24do for that is simple. We're going to
3:28:26come to the damage part, damage frame
3:28:29for example. And then we're going to add
3:28:31a frame. We're going to position this to
3:28:33fit to parent size.
3:28:38And now we are going to simply add a UI
3:28:40gradient to this.
3:28:43And we are going to change the rotation
3:28:45to 180. And we're going to go to the
3:28:47transparency and raise this to the full.
3:28:51There we go. Um, this looks pretty
3:28:53similar to what I had in mind. Um, I'm
3:28:55going to also reduce the main
3:28:58transparency of the background
3:28:59transparency to 0.5 as well. Um, perhaps
3:29:03I'm going to change the size to
3:29:04something like 0.3 and maybe drag it out
3:29:08a bit more. And now we're going to
3:29:09compare with the overview.
3:29:12And it looks pretty much the same. I'm
3:29:13going to lower it a bit more so it's
3:29:16less opaque. Um, I'm going to come here
3:29:18and change the background transparency
3:29:20to something like 0.6. six or 0.65 looks
3:29:23nice. Maybe something like 0.7 actually.
3:29:26There we go. I'm going to call this
3:29:28trail. I'm going to make sure it's
3:29:30scaled. It is. And now I'm going to copy
3:29:33this into both of the other ones as
3:29:34well. There we are. So, that's our UI
3:29:37basically done. Um, one thing that we're
3:29:39going to see now is how well it scales
3:29:41across different devices. When you're
3:29:43done making UI, there are chances, there
3:29:46are times that you might have done it a
3:29:48bit wrong, and you can easily assess
3:29:50that by fixing your mistakes after
3:29:51you're done. So, let's go ahead and do
3:29:53that. Um, we're going to hide all of
3:29:55this. We're going to hide this as well.
3:29:58Uh, we're going to enable overview. See
3:30:00if everything is the same. It is the
3:30:02same for the most part. There are minor
3:30:03differences here and there that are not
3:30:05really something that we need to worry
3:30:07about. The UI looks pretty similar for
3:30:09the most part, which is a beautiful
3:30:10thing. This is the moment of truth. We
3:30:12are going to see how the UI looks on
3:30:14different devices. So, let's click on
3:30:16this and change to VGA. As we can see,
3:30:19there are some problems. Um, the close
3:30:22button is becoming way too big and the
3:30:23statistics are not properly scaling. I
3:30:26think everything else is okay. So, let's
3:30:27go back. Uh, we're going to go in the
3:30:30container frame main inventory and we're
3:30:32going to search for the close button. As
3:30:34we can see the close button, we forgot
3:30:35to scale it. So, we're going to quickly
3:30:37scale that. Problem should be fixed. If
3:30:39we go back to the inventory details and
3:30:41statistics, we can see that we forgot to
3:30:43scale this as well. Let's scale this
3:30:45real fast. And now the problem should be
3:30:47solved. So let's go back and click on
3:30:49VGA. As we can see, the entire UI has
3:30:52been scaled perfectly fine. There is no
3:30:54issue with anything. We can also try on
3:30:56mobile just to be safe. Um, and there we
3:31:00are. The entire UI has been perfectly
3:31:03imported without any problems. One minor
3:31:05thing that you guys might be noticing is
3:31:07that the scrolling bar thickness becomes
3:31:10bigger when you see it on a different
3:31:12device. This is uh a studio problem.
3:31:15There's no way to scale this in
3:31:16properties. The only way to fix this
3:31:18issue is by either using a custom
3:31:20scrolling bar, you can use a frame or
3:31:23the more feasible option is by simply
3:31:26getting it scripted. Uh through a
3:31:28script, you can make sure that the
3:31:29scrolling bar thickness is scaled across
3:31:32different devices. you won't have to
3:31:34manually try to add a new frame and it's
3:31:37much more of a better choice. So yeah,
3:31:39that's how you import a UI one to one
3:31:41from your third party software into
3:31:43Roblox Studio. Manually speaking, it
3:31:46does take some time. This is why people
3:31:48instead of importing themselves, they
3:31:50hire people to import UIs for them. Uh
3:31:52you can find UI importers in our Discord
3:31:55server, discord.gg/ugen.
3:31:56We have a whole channel for importing
3:31:58UIs. Um people will do it for you for a
3:32:01price. Normally, they charge up to $5.
3:32:04Some of them do a very good job at it
3:32:06and price it a little bit higher. So,
3:32:08it's your decision to make if you want
3:32:09to pay people to import your UIs or do
3:32:11it yourself. Lastly, guys, thank you for
3:32:13watching the video. It was definitely a
3:32:14very enjoyable video. I also had a lot
3:32:16of fun making it. For more videos like
3:32:18this and maybe more debunking shorts or
3:32:20videos on how to fix problems, please
3:32:23comment and like and subscribe and let
3:32:25me know what you guys want. Also, join
3:32:27our Discord server, discord.gg/yugen.
3:32:30Ugn. We help a lot of new UI designers
3:32:33there. The imported version of the
3:32:34greatest anime UI tutorial that I made
3:32:36in this video is also going to be sold
3:32:38on my Gumroad. The link will be in the
3:32:41description. So, please go ahead and buy
3:32:43that if you guys want to see how I laid
3:32:45it out. Apart from that, remember to
3:32:46always have fun when you're making UI.
3:32:48And yeah, see you.

About this transcript

This page contains the full transcript of Roblox UI Importing Masterclass by Kek, generated from the public captions YouTube serves with the video. The transcript has 41,305 words across 5,606 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 translate the transcript into 100+ languages.

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, translation to 100+ languages, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.