Welcome back everyone. In this video we're going to continue making more strides on our w BP be magic menu. What you see in front of you is the completed version of this be magic black magic menu that I created in preparation for this course. Now, I just wanted to show you what we're specifically going to be creating in this video. It's going to be this center portion right here. Essentially, this is going to kind of indicate a neutral thumbstick if you will, and some arrows indicating that you can push up, left down right to select some sort of magic.

In this video, we're just going to be working on this center portion as well as adding this outer box. But before we get to any of that I wanted to direct your attention up here to the upper left we've kind of got this pink highlight for our underline of the black magic header here. We currently do not have that in version of this be magic menu. So I want to add that first before we continue with the rest of this layout. So I'm going to jump out of my older version of the project here, the one I created in preparation for this course. And I want to bring on our current version of the menu that we have created.

Firstly, if you're not in your W BP be magic menu. This is the directory in which to find it in down in your content browser, double click on that to open it up. And to add this sort of pink shadowing for the underline we got this black underline it's really hard to see right now without that pink shadow, if you will. This is how we're going to add it. Select your menu underline right here in your hierarchy. We're going to right click and we're going to duplicate this and in duplicating it, it added this image.

For me it's underscore six it probably says underscore one for you down below. I'm just going to left click and move this up underneath our menu underlined just for organizational purposes. And then I'm going to hit f2 on this and call this a menu, underscore, underline underscore highlights. Okay, and then I'm going to set some details for this. So over in the Details panel, I'm going to set First of all, we don't want this to be t ink black, I'm going to left click and hold down left click, and then down here in our browse section, I'm going to do t ink pink. we imported this earlier.

Okay, with that selected, I'm going to uncheck this size to content I do not want to size it to content. I'm going to manually size this I'm going to set the size x to be 950. And the size y is going to be 220. And then I'm going to position this accordingly. position x is going to be negative 95. In the position Why I am going to set to be 32.

And I got this through some through some trial and error. Now one thing you'll note here is that my pink is on top of my black and I actually want it the other way around. The z order can take care of this. Now remember with a Z order, if you got things kind of stacked on top of one another, the larger the number, the more higher up on the stack it is. So I'm gonna set the Z order for my highlight here to be zero. And now it puts it behind my menu underline now, my menu underline between videos I did set this to one.

So if yours is currently zero, it'll show as still beneath the pink if you set this to be one that will bump it up in the priority list here. kind of move it up on the stack of paper if you will, and that will put it on top. So there we go. We got a nice little pink highlight there for our our title there. Alright, let's move along to the agenda of A video and that is creating this center selection arrow kind of widget thing. And what I'm going to do here is in the palette panel, I am going to look for something called grid.

And I've got two different grids here a uniform Grid Panel and a Grid Panel, I'm going to left click and drag this on top of my canvas panel, it's going to add it to the bottom down here and I'm going to hit f2 on this and call this B magic underscore Grid Panel. Now with that selected, I am going to set the details for it right away. I'm going to set the anchor point to be this center square. And now any positions that I set to this are going to be relative to that anchor point, that point right there. So the position x I'm going to set to be zero. The position y is going to be 100 the size x I'm gonna set to be 900 The size y I'm going to set to be 900.

And then the alignment here, so it's currently down in our lower right, the alignment here, I'm going to set this to be point five, so it's going to shove it basically over to the midpoint along the x axis, point five, you can see all that nudge it over to the midpoint along the x axis. And then for the Y, I'm going to set that to be point five, and that's going to set it to the midpoint of the y axis right here. Okay, that's looking pretty good. Next thing we want to change about this is I want to specify some columns and rows that this grid panel is going to consist of. So I'm going to click my column, fill it here, five times 1234, and five, and I'm going to do the same with the row fill 1234 and five. Now essentially, what I've specified here is I've said, Hey, I want a grid here that consists of five columns and five rows.

Now, these Numbers basically determine how wide each column or row is, if I was to set them all to be one across the board, like I will do immediately. That's essentially a quick and easy way of saying I want them all to be of equal size, equal width, if you will. Now if I set some of these to two, I'm essentially making that bigger. Now to kind of drive home this point on the column fill in the row fill, I'm just going to jump back over to the previous version of this project that I created. This shows kind of the finalized version here. And if I select my B magic Grid Panel here, here you can see I've got my column and row fields all filled out, like I'm going to do back on our version of this in just a little bit.

So I've got my columns here at column 0123, and four, but I've got columns 02, and four a little bit thicker than one in three Now watch column zero here is going to be this leftmost column. If I set this to be something like five, it's going to set it to be extremely wide. Whereas if I set it to be something like point one, you can see how it shrinks it all up like that. So essentially, what this is going to do for you is make a given column or row bigger or smaller. If you want them all to be a uniform width and height, you can set them to use ones across the board. However, for this particular course, I've got some very specific values that I want for them.

Okay, jumping back to our version of this menu, so I'm going to set our column fill here, the zero column is going to be to the to column is going to be two and the four column is going to be a two, so two to two. And then for the row fill, I'm going to set the zero to be two. The row two is going to be a value of two and row four is going to be a value of two. So double check all these to make sure that those look alright, now the first thing I want to do is add an overlay right smack dab in the middle of this Grid Panel by that jumping back to my other version of this course that I've already created. I want to specify something right smack dab in the middle here. And so I'm going to be adding an overlay right smack dab in the middle.

Let's jump back to our version of this. I'm going to do a search up here in the palette panel for overlay. I'm going to left click and I'm going to drag and drop it on top of our Grid Panel. Make sure there's that yellow outline around Grid Panel. Select our overlay. Let's hit f2 on it to rename it right away.

And I will call this no magic underscore overlay. And now I need to specify where in the grid do I want this to exist? Well, I want it to be in row two in my Details panel, row two, column two. Now it doesn't look very centered right now. Don't worry worry about that for now that will all shape itself up a little bit later on. I also have this nudging here that you can actually offset this a little bit.

Through some trial and error, I did find that I wanted to nudge this over by negative seven in the x, the Y we can leave a zero. And then if I come under the render transform section, I'm going to select the scale of this and I'm going to set it to be point seven in the X and point seven in the y again, right now note that it is not perfectly centered within here, don't worry about that. That will sort itself out a little bit later. Okay, so with this no magic overlay in place. The next thing I want to add is a border. So come under your palette panel.

Under the common section is a border and I'm going to drag and drop this on top of my no magic overlay. First thing I'm going to do Hit f2 on this and call this no a magic border. And what am I going to use this particular widget for? Well, I'm going to use it to slot in an image actually. Over in the Details panel under the appearance section where we got this image area brush image, I'm going to left click and hold left click release, left click down in the Browse section and I am going to look for black magic. And I'm looking for t underscore black magic.

And currently, this looks really really tiny and the reason it looks really tiny is because up here at the top horizontal alignment, I'm going to set that to fill and the vertical alignment I'm going to set that to fill. So that is going to fill up my entire area right here. Okay so make sure you have set that to T black magic and then in the slot overlay horizontal and vertical alignment set to fill. Alright, the next thing I am looking to add here is going to be an image. So let's drag and drop an image on top of our no magic border. So note our hierarchy here we're kind of stepping in every time we've attached things to one another.

This one we are going to name hitting f2 on that no magic underscore image. And over in the Details panel I want to slot in an appearance brush image so I'm gonna left click release left click down in the Browse section and I got magic underscore MTT underscore magic underscore empty. Now you can see that it is kind of overpowering our magic border. But that's okay, we can fix that. And the way we can fix that is by coming under our slot padding in the Details panel, just clicking this triangle to expand it. And I'm going to set some padding values here, I'm going to set the left padding to be 78.

And you can see how that nudged it over. I'm going to set the top padding to be 80. And you can see how that nudged it down from the top. The right padding, I am going to set to be 60. And the bottom padding I am going to set to be 64. And let's see how that looks.

Located in there pretty well. It's not perfect, I could probably be a little bit better here. Maybe five, reduce our top padding from 80 to like 78 something like that. So take note I've got 7878 60 and 64 is my padding values. It's not perfect, but it's pretty good. It looks like it fits inside of there.

Just fine. Okay. Next thing I want to add here is another image. And this one, I am going to drag and drop on top of our new magic overlay just like this once again, so note where it lives in the hierarchy here, I drag and drop this on top of the no magic overlay. I'm going to select this, and I'm going to rename it right away, hitting f2 on it, it will be called no magic underscore selected. And with that guy added, I'm going to jump on over to the Details panel.

Under the appearance brush, I'm going to left click release left click down here in my search bar, and I'm looking for one called highlights. T underscore highlight that we imported earlier and it's looking a little bit big. So in our padding section up here going to set the horizontal alignment to be the middle, the vertical alignment to the middle that really didn't do much. So let's set our padding here to be left of nine. Let's set our top to be five, and it's still looking pretty big. So let's come down under our scale settings render transform.

And for the scale, let's set that to be point 775 in the X in point 775 in the Y, that's not quite perfect, but it's pretty close. I could probably bump it down the top padding maybe if I went like seven, that's a little bit more accurate. maybe six, we'll split the difference there. Instead of seven. We'll go six. All right, that's not too bad.

Okay, making good progress. Let's add a few more images here we need to add some arrows that are going to surround them This