>> Welcome back to Unreal Tips and Tricks.
This is part two of a two-part demonstration
of the Variant Manager.
Make sure you check out part one where we learned the basics
of setting up the Variant Manager.
In part two we're going to build a car configurer
that allows us to turn on and off Variants
in our runtime experience with the help of Blueprint functions
provided by the Level Variant Set Actor Class.
As you can see, we have several Variants in our level
that we can use to generate a car configurer.
The first thing that we need to do
to create the car configurer is generate the user interface
and this is done with a Widget Blueprint.
To create the Widget Blueprint,
go to the Content Browser and click
on the Add New button in the left-hand corner.
Go to the User Interface folder and select the Widget Blueprint.
Let's go ahead and give this Widget Blueprint a name
and then double click on it
to bring up the Widget Blueprint Designer.
In this designer we have a variety of options
that we can access from the Palette
to start generating user interface elements.
What I want to do is just create some simple buttons
for Variant Silver and Variant Blue,
as well as some text to call out the Variant Set.
The first thing that we're going to do
is just go to the Palette and drag our Text Block out
and drop it towards the bottom of our UI.
With that text block selected, in the Details section,
you can see there's a variety of attributes
that we can modify and change.
The one that's most important is Content.
We want to change that text to say Body.
So now we've created our first UI label.
The next thing that we want to do is create a button.
So, we're going to go back to the Palette
and we're going to drag a Button out
and you'll notice
that the button is kind of boring looking.
It is just a simple rectangular shape.
What I want to do is have that button be based off of an image.
And if you look in the Appearance section,
we have the ability to do that.
So, I've already got some images in my Content Browser
in my Textures folder.
We're going to take this Texture Map
that represents the blue Variant
and we're going to map it into our button for the normal state.
To do that, all you have to do
is highlight it in your Content Browser
and click the arrow to assign it to that image.
Now you'll notice that the aspect ratio for this
is assuming the shape of that original rectangle,
and that's not really what we want to do.
We want to have it be the actual shape of the content
that it's generated from.
All we have to do is click on the Size To Content
option up here
and now the button is exactly the same as the Texture Map
that it's generated from. Pretty straight forward.
You also noticed that in the appearance section
we have other options for the Hovered state
as well as the Pressed state.
We want to use that same Texture Map for the Hovered state
and the Pressed state.
We're just going to click the arrow
next to each one of those images
to map that Texture Map into those spots.
One thing that we may want to do is make that Hovered state
be slightly different than the Pressed state
and the default image state
so that when my cursor rolls over it,
there's a bit of interaction with the user interface element.
It's really simple to do just by toggling
on the Inherit Tint attribute.
Now when we float over that it's going to change color slightly
and really make it feel dynamic in the experience,
which is super, super cool.
The final thing that we want to do is just give this button
a name that's a bit more meaningful than button 478.
We're going to call this Button Blue,
and we want to do the exact same thing for the Silver Variant
so I'm going to drag another button out
and I'm just going to go through this a bit quicker.
We'll just kind of map these guys really quick.
Again, we'll turn the Inherit Tint on and of course we want
to make sure that aspect ratio is set to the content.
We want to give this a name that again matches
with what we're doing, which is Button Silver.
Cool. So now we've got our buttons
added into our User Interface Designer.
I'm just going to use my arrow keys to nudge
these guys up a little bit and align them ever so slightly
so they look a little bit better.
Now that we've created our UI elements,
we have two things
that we needed to accomplish with Blueprint.
First, we want to get our UI elements
driving our level Variant sets.
And second we need to get this UI into our scene
in our experience. Let's jump over to the graph
and I'll walk you through the process
of getting the UI elements
communicating with the Level Variant Set.
For Blueprint to interact with the Variants,
we need to create an object reference
of the Level Variant Sets.
This is easily done with the Get All Actors of Class,
and you can get to that
by simply dragging out off the event construct
and searching for Get All Actors of Class.
We'll just grab that guy.
The class of actor that we want to get obviously
is going to be the Level Variant Set.
Again, we'll just start searching
and we'll start typing Level.
And you can see we now have the Level Variant Set Actor.
This Level Variance Set Actor is an array.
We're going to get a copy of that array
by dragging out off the out Actor
and just searching for get a copy.
The copy of the array that we've gotten is at the first index.
Now it's worth mentioning that the Get All Actors of Class
can be a bit costly.
So, it's a good idea to take this array of information
and promote that to a variable.
If we just drag out off of that and say Promote to Variable,
you can see that it has given us a new variable
that it made automatically for us.
Notice the variable type is set to Level Variant Set Actor.
It's exactly the same thing as the Class that we used.
That makes perfect sense.
All we have to do is connect these guys together
and give this new variable a name
that's a little bit more specific.
We'll call it Level Variant Set.
Now we have our reference with the Level Variant Set
and we can use Blueprint to interact with our Variant,
which is exactly what we want to do.
We want to have these Variants switch on and off
based on the mouse click events of our blue button
and our silver button. How do we that?
What we're going to do is we're going to pull off
the variable we just made in search for the Switch node.
And what we want to do is we want to switch
the Variant by name when we click the trigger button
or when we click the blue button or the silver button.
This Switch Variant by Name is a really great node
when working with the Variant Sets.
It allows you to specify any of these Variant Sets.
We're just going to call the Variant Set
that we want to work with Car Body
and the Variant name that we want to have turned on
is going to be the Variant Silver.
And what's going to trigger this
is going to be the blue button or the silver button.
We're going to highlight the silver button variable.
We're going to come down to the events
and we're going to tell it to create a new on-click event.
We're just going to click on the plus sign
next to the on-click event.
As soon as we do this, we have this new on-click event
that we're going to use to trigger --
so we can get rid of this guy,
we don't want that to be the actual trigger of the switch.
We're going to use this to actually go through
and have it fire off
and trigger the switching on of the silver Variant.
Fairly straight forward.
The next thing that we're going to do
is we're going to do the exact same thing for the blue button.
We're going to say on the blue button
we want to have an on-click event.
We're just going to click on the plus sign
next to the on-click event, pull that up.
We're going to take this guy and we'll just control + W to copy it
and obviously we need to attach that to the target.
And we're going to have this become the execution of that
and obviously we want to change the name to blue.
We are done with this bit of code
and it's really straight forward.
We're getting our reference of our Level Variant Set so that
we can begin working with our Blueprint nodes
like these trigger buttons
and we're basically having, when we click the button,
just turn on and off these two Variants.
Very, very straight forward so we can go ahead
and hit the compile button on that and save it off.
Now that we've done that, the next thing we want to do
is create a new Blueprint that's going to add to our level
the User Interface Widget that we already made.
How do you do that? Really straight forward.
If we just right mouse click inside of the Content Browser,
we're going to create a new Blueprint class
that's just a simple Actor Blueprint.
And we're going to give this a name called BP_UI_Builder.
Now that we've got the Blueprint UI Builder,
let's go ahead and double click on it to jump into the graph.
And on the Event Begin, we want to create a Widget.
And the Widget that we want to create
is actually that Widget Blueprint
that we made for the car configurer.
So pretty straight forward there.
And we just need to add this to the Viewport.
I just did a search add. Let's connect these together
and compile it and close it down.
Now what we have is a Blueprint that we can
add to any level in our project by simply dragging it in
and it's going to automatically add
in that Widget Blueprint with all the code
that we built inside of that Widget Blueprint.
Really pretty awesome.
Let's go ahead and hit play and see how our experience works.
All right, so we have our UI loaded up
and you'll notice as I mouse over top of it,
they change color because of that Inherit Value
that was set on the hover icon.
And if I click on the silver ball,
it goes ahead and changes to that Variant silver.
And then obviously if we click back on the blue ball
it changes over to the Variant blue.
Everything is working exactly as we would expect
with our car configurer. That is just a quick example
of how we can use the Variant manager
with the help of some UI and some Blueprint code
to build a simple car configurer.
I hope you guys enjoyed it. Cheers everybody.