Welcome back everyone.
In this video, our goal is to create a layout within our abilities canvas panel.
That's this guy right here,
that's gonna show which abilities are selected character has now to do this,
we're gonna make use of a uniform grid panel widget
as well as some button and image widgets.
First things first, before we come back to you here,
I just want to make sure in case you took a break that you know how to get back here.
So let's go back to our main level Tab.
Again, this is your pathway content character UI widgets to find your w BP character UI.
And by now you know to double-click,
to open that up.
Alright, so again, we're going to be working inside of our canvas panel abilities.
That is, we're going to be attaching things to our canvas panel abilities.
And the first thing we're going to be adding is a uniform grid panel.
Now, as you may expect,
this widget is great for evenly dividing up
different widgets that you want to place inside of it.
Hence the name a uniform grid panel.
We're going to drag and drop this on top of our canvas panel abilities.
And then let's rename this right away.
I'm going to call this hitting F2 on it.
We will call this uniform a grid panel
underscore abilities, abilities, Dario.
The anchor point for this.
We're going to leave this as is now it is worth mentioning here that
the anchor point is going to be relative to the canvas panel that is attached to.
So this is a canvas panel that is attached to.
So our anchor point is that to the upper left and it's anchored to what?
It is attached to that canvas panel.
Right now.
Our position x and y here I am going to adjust slightly.
So I'm gonna say position x,
we're going to move that to be ten.
In position y, I am going to change that to be 30,
such as down a little bit, something like that.
Alright, so what else do I wanna do?
I do want to size this two contents.
I'm going to check that box and again,
it's going to shrink it up very much for now.
Don't worry about that z order.
I am going to set this to one now if you want to know what z order does,
think of z or like this,
imagine you had a bunch of widgets on top of one another.
How would you know which one to display?
Well, z order, Think of a bunch of pieces of
paper or images just stacked on top of each other.
How do you know which one to display,
which one gets priority?
Whichever one would have the higher number for the z order.
That is the one that would be displayed.
I'm gonna set it to one for now because that's what I have
my notes and I can't remember exactly why said it's one. That's why.
All right, next thing we're gonna do is we're going to add
a button to our uniform grid panel.
So let's find under Palette button.
And we're going to add this on top that is,
attach it to inside of if you want to think of it like that uniform grid panel abilities.
We're going to need to give us a name right away, F2.
And you're definitely going to want to rename these to keep organized.
This is going to be Button ability underscore 01.
And we're going to have several details that we want to set for this.
Now, the way a uniform grid panel works is for any widgets that are attached to it,
you get to decide what row and column it lives within.
You get to decide how many rows and how many columns so that you can lay them out evenly.
Now, for the purposes of us play,
placing some button or some ability buttons here,
we just want to have one column.
We're going to have five different ability buttons here that we can select.
But we want them all within a singular columns.
So that means we will be giving them a different row.
Now notice that as I have this button ability selected,
it's giving me the ability to slot in a row and column,
and it's under the category of slot uniform grid side.
It's basically saying OK, OK button.
I see that you are inside of this uniform grid panel.
Here are the properties that being inside of a uniform grid panel,
you have access to defining a row and a column, right?
Ignore that for, actually I'm not going to ignore it for now.
I'm going to leave this at 0-0 because that's where I want this first button.
But I will come under the appearance style section and I'm going to
expand the normal section first and slot in an image.
The image I'm looking for is t underscore, icon, underscore, border.
Like that. Now you may say, hey,
this is shaped exactly like what we got here for our affinities icons.
Well, if you remember way back,
we actually created a widget for these particular affinity icons.
I want these to be buttons because we are actually going to be selecting them.
And a Button widget allows you to actually select it,
click on it, et cetera.
So that is why I'm not repaired,
purposing this particular widget that we made earlier.
Alright, we want to draw this as not a box but an image.
Even though box looks pretty much the same.
We are going to want to come under the hovered section as well.
Now, normal is how this looks when you are not mousing over it or selecting it.
Okay.
Hubbard is when you are mousing over it,
what does this look like?
So for this, I also want T icon border,
t underscore icon, underscore border.
I will set this to draw as an image as well just because it
looks like an image and I believe that is a little bit more defined.
Next, we need to come under the pressed category.
We're also going to set this to be t underscore icon,
underscore border, like so.
So that is the same across the board.
I will also set this to draw as.
And image and note that when I do this,
it kind of unschooled,
defies it up here. Call me ADD.
And last but not least,
I want to set a hovered sounds so I can set
a sound effect that plays when we mouse over it right here in the Details panel.
And the Hubbard sound that I want to slot for this by clicking here,
is going to be floating UI.
Open, that guy right there.
And if you do not see this again,
it is in the engine pathway.
So if you come under View option, View,
Options show engine content,
make sure that that is on and then you will see it.
So floating UI open,
that's the sound effect that I want for that.
Now let's attach an image on top of that.
So under my palate panel I'm going to drag and drop an image
to go right on top of my button ability or one,
I'm going to rename this icon underscore ability,
underscore 01, like so.
And let's just put in an image right away.
Now eventually, we are going to be
swapping out these icons by reading from our data table.
But just so we have some visual in here, whoops,
gotta come under brush image and let's put in
t underscore ability, underscore Revenant.
And let's do the hell fire rounds shore that,
that had looks pretty cool, right?
Alright, so next thing I wanna do is having this still selected.
I'm going to scroll on down.
And under the render transform section,
I'm going to expand this out a little bit.
We've got the ability to adjust the scale of this a little bit.
So I'm gonna zoom up in on this.
And I'm gonna change this scale to be 0.95 in
the X and 0.95 in the y is just going to shrink it down here just a tad.
And then with this still selected up top,
I'm going to come under the padding,
the slot padding here,
the button slot padding.
I'm going to expand this out and you know what,
I'm actually going to sit three across the board.
So if I set x3 right up here and hit Enter,
you will notice that it sets three all
across the board in my horizontal and vertical alignment,
that's going to be just fine now that is looking set in there pretty nicely,
so I am happy with that.
Alright, the next thing I wanna do is I want to have like
a little controller button icon over here that sort of indicates like hey,
to use this ability and again press the,
you know, the Y button or wherever it is.
Now these icons are going to be meaningless for our game.
Again, this course is all about just laying out this character UI,
but just to kinda take this the extra mile,
let's go ahead and add one of those.
So let's come back up under our palate panel,
we are going to add an image,
although this time we're going to add this again to our uniform grid panel abilities.
So drag and drop it on top of there.
It should be right in line underneath button ability u1.
Let's rename this, hitting F2 on this.
I'm going to call this inputs underscore ability.
Underscore 01 and got some details that I want to set for this right away.
The horizontal alignment, I'm fine with that.
Left justified, however, the vertical alignment,
I want this to be on the bottom.
So our button icon is going to be right down here.
The row and column.
I do want this to be the same as our icon right here.
So 00.
However, I will slot in an image here,
and I will slot in t underscore button.
Let's do the a button.
Sure.
Again, this is just meaningless for now.
Now that button obviously comes in ginormous,
so let's reduce the image size to be 50 by 50.
There we go.
And for the time being,
we're going to scroll on down in downward says behavior.
We're going to change the visibility here to be hidden.
Now it doesn't actually show as hidden right here while we're working on it,
but in game it would show as hidden.
Let's give this a test here.
In fact, to play hitting the Iike.
And of course I gotta change, whoops,
I gotta change our widget switcher here right away.
Again, our widgets switcher is currently showing
active widget index of one, which is this guy.
We're gonna change that back to 0.
There we go.
Let's play.
Hit the key and see that button is actually hidden when we play in the game.
You can see are Icon, they're pretty sweet. Yeah.
Alright, now with this all done,
we only have one icon.
We need to add four more of these.
However, we're gonna cheat.
We're going to copy and paste.
So this is what we're gonna do.
We're gonna select our button ability or one,
we're going to hold down the Shift key,
select again by left clicking.
We're going to then Right-click on this.
We're going to copy.
And what we want to do is attach this to our uniform a grid panel abilities for time.
So I'm gonna right-click and I'm gonna paste once.
I'm going to right-click again on this and paste twice,
I'm going to right-click again and paste again.
And then right-click on uniform grid panel one more time and space again.
Now we obviously have a whole bunch of things stacked on top of one another.
So what I'm gonna do is ask you to rename these all As you see,
this is underscore one,
underscore one underscore one.
This one's gonna be underscore to underscore to underscore two,
so on and so forth.
So I'm going to pause the video here,
rename these by hitting F2 on them and rejoin you in just a bit.
Alright, and this is what you should ultimately
have after you have gone through that renaming process,
makes sure that everything is attached appropriately as well to the right widgets.
Now all we need to do is fix up where are various buttons
are in our uniform grid panel because
right now they're all just stacked atop one another.
So I'm gonna start off here by selecting button ability O2.
Currently, if I look over in the Details panel,
you can see that it is in column 0.
Again, we want to have only a single column starting with column 0.
It's all zero-based.
However, I do want to increment the row,
so I'm going to say row 0,
row one in, hit Enter.
And that's gonna jump that down.
We need to do that not only with this icon here,
but also we want to do that with these buttons as well.
So that is going to involve selecting Input ability O2.
And here too, I can set up the road to be one.
So that's gonna jump that down.
If you want to change out the button here you have add it.
But again, we, you know what,
I will change this button Just because I'm that way.
I'll set this to be buttoned.
Be sure.
Again, super general resize.
So let me set that to be 5050 for the image size.
Then let's go button ability three.
We're going to set this to be at row number two,
like so, let's choose input ability three.
That's going to be row two as well.
And you can see where we're going with this.
Although let's change this out to be,
Let's go X button.
X button is huge.
Let's set this to be 5050 for our image size over here.
But an ability for same thing,
row three this time.
Let's also set that for our input ability, row three.
And now just to demonstrate,
you could have another column here.
Let me actually just increment this column.
Let's say I wanted this to be column one.
You can see how that would jump that override it.
So you can see column two, you know,
however many columns or rows you want,
you can just kind of make it up on the fly.
So set that back to 0 there.
I'm gonna change my image here to be,
let's select this and let's change this to be the Y button.
Ginormous.
Why buttons?
So let's set our image size here to be 5050.
And last but not least,
we've got button ability five.
Let's select that and change the row to be four.
And the input ability to also have a row of four.
And let's change the image here to be let's go.
Trigger.
Led skill left trigger.
Yeah. Yeah, left trigger.
And I'll just guess at some image sizes.
I don't know what I wanted for this.
I'll go I don't know, 60 by 30 For now,
I can fix that up between videos.
That's certainly not going to be perfect.
Okay, one last thing I want to fix up here is we have everything in a nice,
neat column here, although they're very tight up against each other.
So what I'm gonna do is I'm going to select my uniform grid panel again.
And let's see if we could add a little bit of padding between this.
So what we can do is over in this category called child layout.
These are all considered Children of the uniform grid panel.
We're going to expand this out.
And let's give a little bit of padding along the top and the bottom.
So along the top,
I'm going to give some padding and I'm gonna hit F5 and I'll
watch what happens when I hit the Enter key.
We suddenly space things out a little bit,
so that's pretty good.
Let's do that.
On the bottom is, well,
I'm going to do five and I'm going to hit enter.
That's going to add even further space.
So that is kind of looking more like what I had in mind.
And again, that left trigger,
I will give that probably some different image sizes,
dimensions in in-between videos.
Otherwise, guys that I was gonna do offer this one.
This is coming along quite nicely.
Let's keep the momentum rolling.
In the next one, we'll see you there.