Welcome to your next quest.
In this quest, I'd like you to create a select function on the spell globe widget blueprint.
And for this select function, I'd like you to play the select animation, which means you're going
to have to show that select texture.
Right.
So play that animation and while you're at it, why not play a sound when you click and select that
spell globe?
Now we're starting small.
We just want to show the visual effects here.
But as a bonus, deselect all the other globes in the offensive spell tree when selecting one.
So as a bonus, see if you can figure out how to remove those selection circles for other globes that
have previously been selected.
So that way you can click all around the offensive spell tree on different globes and you'll only have
one globe selected at a time.
So pause the video and conquer your quest now.
Okay.
So we need to be able to click on an icon and select it.
So for that reason, I'm going to go into UI spell menu, actually know my globes are in my Globes folder,
spell globes and this is the spell globe button widget that I'm interested in.
So this is what's being used in the spell menu for both the offensive and passive abilities.
So we need a select function that we can call when clicking on a spell globe.
So here in the event graph, I'm going to go ahead and click Add and function.
I'll call this function select and the select function is going to take our selection circle.
Now I'm going to go back and look at that.
It's called image selection.
I now need to check is variable for that.
And I think it's the render opacity that's zero.
Yes.
So it starts off with a render opacity of zero.
So the first thing I'm going to do is get that image selection and call set, render opacity so I can
set it to.
One so we can see it.
Once we can see it, we can play its animation, which we have a select animation.
Going back to the designer, I can see that it's called select animation, so I'm going to call that.
So select animation.
We'll get that.
We'll play animation.
Like so.
And while we're at it, we can play a sound.
So I'm going to play sound 2D.
And we can simply look for a sound for when we click.
Now our buttons are using a specific sound.
It'd be kind of cool to play a different sound from our buttons.
If I go to Warp button and take a look, we have an on clicked sound and we're using.
Button Click zero one.
And I think my wide button is using a different one for my wide button on clicked sound is button click
zero two, so maybe we can use a different one for our spell globes.
I kind of like button click zero four, so I'm going to try using that.
So back to my spell globe button.
I'm going to use that.
So with that right there, we have a function that we can call when our spell globe button is clicked,
and that's going to be the button ring here.
So I can use on clicked.
So I can check is variable for the button.
And as soon as I do that, the events pop up and I can click plus for on clicked and we can call select
right.
So that's the first thing we'll do is we'll call the select function just to see this working.
We'll drag it in, we'll call it, and let's see what happens.
If we click on them, we'll open the spell menu.
There we go.
And it sounds and looks good.
So that was the challenge.
Just that, right?
It even works on the small ones, but the bonus.
Was to deselect all the other globes when clicking on one.
So for that reason, I'm going to need a deselect.
I'm going to add a new function called deselect and deselect will hide that image selection.
So let's get that.
We'll set its render opacity.
The question is, how are we going to deselect all the others once we've selected one of them?
That's the question.
And that's why it was a bonus to this quest, because it's actually a little bit more difficult.
So how are we going to do it?
Well, one way is we can broadcast an event dispatcher that our offensive spell tree can listen for,
so our spell globe can have an on icon selected event.
Dispatcher I'm going to add one.
I'm going to call it on icon selected.
Actually, I'm going to call it on Spell Globe Selected.
And we'll broadcast this when Onclicked.
And in fact, I'm not even going to call select.
I'm just going to broadcast the delegate.
So we'll just hold off on calling select for now.
All we'll do is call on Globe selected and then our offensive spell tree can listen for this.
So I'm going to go ahead and close the buttons down.
I'm going to close my overlay for now.
My spell menu can remain open.
That's fine, but I'm going to get my offensive spell tree.
That's in blueprints.
Spell menu.
Offensive spell tree.
This widget will listen for that event.
Dispatcher.
Now.
It's going to need to listen to that event.
Dispatcher on all of its globes, all nine of them.
Now we can do this in event construct, not pre construct, but construct.
So that's what I'll do here is I'm going to move widget controller set to the side pre construct can
go here we don't need tick.
So in pre construct I'd like to get all of my spell globes here and bind an event to their event dispatcher
that they're broadcasting when they get selected which is the on spell globe selected event dispatcher
so we'll get all of them.
I'm going to start with my spell globe button, the first one, and we're going to type on spell globe
selected.
We're going to assign an event.
We'll do that right here, just right away.
And we're going to assign this same event for all of them.
So I'm going to get all the rest of them.
I'll go ahead and just time lapse, dragging them all in and hooking them up.
Okay, so I have all nine of them and we're binding on spell globe selected event here.
And what do we need to do when the icon has been selected?
We need to deselect all of them except for one, which means this event dispatcher kind of needs to
broadcast information.
It needs to broadcast which of these icons was selected?
So back to the spell globe to the event dispatcher.
Let's select that event.
Dispatcher on spell globe selected and let's add a input to it.
Now, before we do that, I'm going to take this.
We're going to change it.
So I'm going to go ahead and just remove it and we're going to add a input parameter to it.
Now, all the way up at the top of the details panel, we can click plus new parameter and we need to
add an input of type spell globe button.
So it's going to be a spell globe button object reference.
We can compile this and let's see if we broke things in the offensive spell tree.
No, it looks like it updated there, but I do want to make sure that that input has an appropriate
name.
So this will be selected globe.
We'll compile that and it says Selected Globe.
Perfect.
So now in on clicked, we're going to broadcast on Globe Selected, we're going to call it and we're
going to broadcast with a reference to self.
Like.
So now, as soon as a globe has been clicked, we're broadcasting this and the offensive spell tree
now knows which one has been selected so we can literally deselect all of them except for one.
Or we could just deselect them all and then select the one for the first time because we're no longer
actually calling select here.
I can just delete that.
It's going to be the offensive spell tree that selects the one but deselects all the others.
So we can take each of them and call deselect.
And that means we're going to hook up all of these.
All right.
So making sure we got all nine of them.
We're going to deselect all nine, and then we can just call select on the one that was passed through.
Select.
So in other words, deselect all but the one we're selecting and that should result in the effect we
want.
So I'm going to save all first press play and select one.
And now it looks like we're selecting only one, but really we're just deselecting all the others.
Now, that's not to say that if we click on the passive abilities that we're going to deselect any of
those in the offensive abilities.
So that's something else that we need to handle.
And also we're not even selecting the passive ones.
We need to make sure to do this same thing here that we're doing in the offensive spell tree.
We have to do this in the passive spell tree too, and then it'll work.
So let's go to the passive spell tree and it's simpler.
It only has three.
So in event construct, I'm going to delete event tech.
We're going to do what we did here.
We're going to take each of our three icons, which we have to make sure our variables so we'll check
is variable and we'll grab those three icons.
Those I keep calling them icons, they're the spell globes.
We'll go ahead and get all three of them.
They don't have any meaningful names, but that's okay.
And we're going to assign on spell globe selected.
Just like we did in offensive spell tree.
That's number one.
Take all three of them called deselect on all three.
We'll hook this up to the event.
Dispatcher.
And after Deselecting all of them we'll call select on the selected one.
And that's it.
And if we go back and play test.
Then it works for the passive ones.
But again, it only works individually for each one.
So we can select both an offensive and a passive spell, which is not exactly what we want.
So our next task is when we select an offensive ability, we deselect the passive abilities, and when
we select a passive ability, we deselect the offensive ones.
So that will be our next task and we'll do that next.
I'll see you soon.