Welcome back.
In this video, we're going to polish up our attribute menu just a bit.
Now, there are a few things I'd like to polish, mainly the look and feel of it, as well as the sounds.
Usually buttons are accompanied by sounds and games When you hover over the button and hover off of
the button, there's usually a sound.
When you click it, there's a sound.
So we're going to take care of those types of things with our button widget class as well.
So the first thing I'd like to do is make some tweaks in the overall look, and this will be for our
attribute menu, of course, but we can also tweak any other widgets as we see fit.
Now I'm going to close all my tabs for now though, and open my UI folder in blueprints.
And get my attribute menu open here.
And I'm going to go ahead and start tweaking things here.
The first thing I'd like to tweak is our background, these clouds.
I think I'd like them to be a bit of a different shade.
So I have my image background and it's set to this material, my flowing UI, BG.
I'm going to browse to that.
Now I believe we are only using flowing UI BG in the attribute menu.
We're not using it anywhere else.
So I think it's safe to just change this material itself.
And I really just want to mess with things just a little bit.
I'd like my cloud darkness a little bit darker, maybe something closer to 1.6.
But of course, as we increase that cloud darkness, sometimes it makes things look a little bit less
the way you want them to look.
You see, this material is too noise, textures.
One is panning to the left and one is panning upward.
And if that cloud darkness is too dark, you can kind of see that.
You can see what it's actually doing and not get that illusion of flowing smoke.
So we have to be careful with that.
Now, I'd like the color to be a little bit more on the blue side.
I'm going to bring it up to about here.
And that helps a little bit.
But we can also change the speed at which things are panning.
I'd kind of like this to be a little bit slower.
So instead of pointing 018, I can use 0.015.
Or even less 0.01 for each of these panning speeds.
We can also change the scale of this noise because looking at it here in the attribute menu, if the
clouds are too small or tiled too much, we can notice they actually look pretty good right here.
Let's see how they look in game.
Already.
I'm kind of liking it better.
I think it's a little bit dark now.
So in our widget itself, we have a tent.
I can bring that up.
So checking that out, it looks pretty good.
Now, I mentioned changing the scale of the texture.
For that, we can go into the material that it's based on the parent and opening that up and this is
M flowing UI, BG so we can change this material.
I don't think anything else is based off of it, but we can just make sure we can look at our health
globe.
We see that it's based on M flowing globe.
And same with our mana globe and our skills are based on the mana globe it looks like.
So we can change m flowing globe if we like.
Now the noise takes in a texture coordinate and if we change the texture coordinates tiling here, we
can change what it looks like.
It looks like the tiling is about 0.40.5.
Now if we make this a smaller value, say 0.1 and 0.1.
And we do this for both.
Of these texture coordinates.
We'll see that the smoke appears to be a little bit larger.
And if we go into our attribute menu and take a look.
We see that it looks quite a bit different.
We can check it in the game as well.
Now, that may be what you want.
It may not.
I'm thinking that I'll probably just put it back to where it was about 0.5 for each.
Maybe 0.4.
I think that's fine.
I know one was 0.5 and one was 0.4, but.
Actually now I'm seeing that it really looks tiled, so I may wish to change it back.
But let's see.
Now.
I think it looks fine, actually.
I'm okay with that.
Okay, so we changed our background a little bit.
I can close out of those materials.
Now, another thing is I think the margins are a little small.
I'd like this overall wrap box to have more padding, so I'm just going to experiment here.
I'm going to change the padding from 40 to 50, see how that breaks things.
And right away I'm seeing that the attribute points row and these attribute rows are now too wide.
And if I search for row properties or just properties, I can change that box width.
So it was 720.
Now it looks like we need it to be about 700.
So I'm going to set the box width for all of them to 700.
Including our attribute points row.
Now let's see how that feels in the game.
I think that feels a bit better.
Okay.
And lastly, I'd like to just make sure my colors look good.
I'd like the attributes title to be a slightly different color, so I'm going to take the text color
and opacity and bring it a little bit more into almost an orange color.
I want the value all the way up, saturation up a little bit, almost an orange peach kind of color.
Something like this.
Kind of a pale, almost a leather color.
And then I'd like my primary attributes and secondary attributes to also be different.
So I'm going to make them a little bit more of a pale sort of gold color.
Like that.
And I can actually drag this up to our saved colors here and then select my secondary attributes and
choose that color.
So now I have something that.
Contrast with the background images and let's just playtest.
I think that's looking better.
I think I almost feel like my padding should be even smaller.
I'm going to try 70.
That might be too much.
Maybe 60.
And that means box width should be even smaller.
Looks like about 680.
So I'll go ahead and change those values yet again.
And we'll see how this feels.
Okay.
I think this is looking pretty good.
Okay, So visually, things are looking good.
Now we're going to want to think about how to add sounds.
Now it sounds in UI are usually associated with the buttons.
If we click the button, if we hover the button and so on.
And our buttons are mostly based on two classes, right?
We have a button widget blueprint.
If we go to UI button, we have a button and a wide button that's based on it.
So let's open WP button and if we select the button itself, we have some events all the way down at
the bottom of the details Panel.
Now the only two that I'm really concerned with are on clicked and on hovered the rest I'm not too concerned
about.
You might wish to have sounds for all of these.
I'm just going to use these two now there are events that are fired off when these things happen and
if we click the plus, then we can implement those events here in the graph.
Now I have on clicked, I'd like on hovered as well and I'm just going to play a couple sounds.
So for on clicked I'm going to drag off and use play sound 2D.
We don't need to play a sound at a location of course, and for the sound I'm going to go to my assets
folder into sounds in UI.
And we have some sounds that we can check out.
So I like these sounds and UI button click.
I'm just going to take one of them and just play it and see how things sound in the game.
So I'm going to press play
and that sounds pretty good.
Now notice that Onclicked actually plays the sound when you release.
So it's kind of the behavior you would expect for on released.
Check it out.
But usually when you click the button, you do so quickly like this.
So it usually feels pretty responsive when you hear that sound when you release.
So I'm okay with that behavior.
Now, I think this should be a variable.
I'm going to promote it to one and call this on clicked sound.
And make it instance editable with the eye icon.
And that way we could change this for any buttons that we're using in any widgets.
So I'm going to compile that.
Now notice that when I play test now, we don't hear it for the white button down here, but we can
hear it on this button here.
And if I go ahead and level up and enable those other buttons, let's see if those work.
They do.
It was a little hard to hear over the battle, but I think I heard it.
Let me just level up again.
I'll just destroy all these enemies real quick and try this again.
Let's listen closely.
Yes, it worked.
Okay, so the attributes button doesn't play a sound.
So we need to see what's going on here.
We have our on clicked button, right?
And our on clicked sound is what's used for it.
We can go into our overlay where we have our attributes button.
So blueprints, UI overlay, open, WP overlay, and here's our attribute menu button.
If we search for on clicked sound, looks like it's not set there, so I'm going to go ahead and set
that now.
Our on clicked sound is set to this sound here.
But our white button could have a different sound.
I like this sound too, so I'm going to set that here in the overlay.
With this particular wide button selected and let's see how it sounds.
I like that sound.
And it's a little different than the other button sounds, so that's kind of nice.
So I think I'll actually make that the default sound for the wide button class.
So I'm going to go into.
My button folder and open the y button.
Go into the graph, get my on clicked sound and I'm going to set it to the button.
Click zero to.
Compile and save that.
Now, it did already have a default value.
The reason we didn't get the sound was because this particular blueprint here on the overlay had its
own clicked sound.
Set to nothing.
Set to none.
Okay, so that's an on clicked sound.
Let's see about on hover.
I'm going to duplicate this play sound and.
Just going to browse to my sounds folder UI and check out hover.
I like the subtle one.
That's number one.
So in WB button I'm going to go ahead and set that there and let's see how that sounds in game.
The nice thing is if the button is disabled, we don't hear anything that goes for when we click it
to.
But we can hear when we're hovering, and that sounds great.
I'm going to level up and actually just get rid of these enemies real quick.
Okay.
Now I'm going to test out hovering.
They almost sound a bit too much as if these are more like clicked sounds.
But.
I think I'm okay with it.
Let's contrast to actually clicking.
Yeah, that's great.
That's great.
I like it.
And of course, our attributes button could have a different sound if we wanted to override that.
But either case, I'm going to promote it to a variable and call this on hovered sound and now that
we promoted it to a variable.
We're not going to hear it on the attributes.
But we hear it on the other buttons and let's just make sure we can hear it on our skill buttons.
Looks like I didn't actually kill anything, did I?
I need to level up real quick.
There we go.
All right, here we go.
Yep.
We hear it for the other buttons, just not the attributes.
One in the overlay.
So we're going to take that and search for it's on hovered sound.
It was not made instance editable.
So we'll click on the eye icon compile that and in the overlay on hovered sound I'm going to set it
to the same sound that our on hovered sound is here, so I'll browse to it and set that there.
And it works.
Okay, so our attribute menu is a lot nicer now.
It has sounds.
It's looking great.
And we're pretty much done with our attributes.
Menu.
Excellent job.
We're now concerned with having a spell menu.
By the way, if you're worried about my health globe showing on top of the attributes button, that's
because I don't have this full screen and this is really designed for a full screen game.
If I hit F11 to full screen, you'll see that it's not in the way.
Okay, Great job.
Our next task is to start working on our spell menu so that we can not only have more spells and assign
them to different inputs, but we can also upgrade them, spend spell points on them, and unlock spells
that should not be activatable yet.
So we're going to make a spell tree.
And this is something that most RPGs that have skills or spells commonly have.
So we're going to do that in the videos to come.
Excellent job and I'll see you soon.