Hey, everyone, and welcome back to another Unreal Tips
and Tricks video.
Today, we are going to be using the latest product configurator template
that ships with Unreal 4.25.
We'll be showing you how to use your custom geometry, add our personalized
configuration, and also get a basic understanding of how it is set up.
Let's starts by creating a new project.
And let's select Automotive Product Design and Manufacturing.
We can see that we have several templates to start your projects.
We are going to pick the product configurator
and create the project from here.
Here we are back in Unreal.
And we can see that we have a scene set up for us.
So let's go into Play mode and see what we have.
So first of all, we can see that we have our setup with a user
interface.
So we're going to be looking at the different buttons here.
For example, this one allows me to go through different camera angles.
The second one here allows me to switch between two lighting modes.
Now, the third one on the bottom here allows me
to change the shape of the guitar.
And finally, the fourth one here that we're
going to be looking for the demo allows
me to swap between different colors.
So these are the items that we're going to be looking at today
and-- import our custom mesh and use this template
to drive our configurator.
Now, you might be wondering how all of this is driven.
Well, all of this configuration is using the Variant Set Manager.
So the basic functionality of the variant set
is to record attributes of an actor, such as transform properties,
materials, and more.
This is very useful for a configurator
where you may want to show several color options
or designs of the products.
So let's go up to a folder and let's check the Variant Sets.
So if I double-click on it, this will open a new tab for me
with the Variant Manager.
And we can immediately recognize the configuration
variants we saw earlier in the user interface in Play mode.
Now, let's go back to our World Outliner tab
and let's select the Level Variant Sets Actor.
This is where we will define which level variant sets we will be using.
Now, if we go up and look at the BP_Configurator,
this is where we can specify which level variant sets
actor we will use.
And this will allow us to keep that interface
and keep away from blueprints and only use the Variants Manager
feature.
We can already start by duplicating the default variant sets and call
this one Variant Sets Custom.
And we'll come back to this one shortly.
For this demo, I've imported a custom mesh
that I'll be dragging into the viewport.
And I'm going to start placing it in the scene.
I'm going to make sure it's set to movable.
I'm just going to place it right around where
the guitar actor is set.
Now, the next thing I want to do is parent the components to an actor.
So I'm simply going to duplicate the guitar root by Alt-dragging.
And I'm going to rename this to Headphones.
I'm going to attach all of my components to it
and keep things tidy.
Now, we simply need to hide our guitar mesh
by selecting the components and go into the Details panel
and make sure it's set non-visible and check Hidden in Game.
I'm just going to reduce the size of those billboard actors.
So I'm just going to select those two, go to my Details tab,
and lower that value to 0.3.
Let's go into Play mode and see if this works.
So we now have our custom mesh displaying.
But we still have the old information displaying on the configurator.
So let's go back to our variant sets that we earlier duplicated,
and let's open up this guy.
I'm going to personalize this template for this demo
and only use the features I find interesting for my scenario.
But please feel free to explore all the different opportunities
the Variant Manager offers.
So in my case, I'll be keeping the two environment variants.
For the cameras, I'm only going to be using two camera angles.
So I'm going to delete these two.
For the body shape, I'm not going to be
using any of this old information.
So I'm going to retain that variant, though.
So I'm going to name mine Speaker Cup since this
is the one I'm going to be using.
And I'm going to delete these.
We're going to bring all of our information later on.
And same goes for body color.
This is something I can keep.
I'm just going to rename this Headband Color since this
is the part I'm going to be using.
And I'm just going to delete all of this.
And we're going to be doing the same for all
of these parts, which essentially share the same properties.
So I'm just going to press Delete.
And let's start with the camera variants.
So what we want to do here is switch between two camera angles.
First variant is called Overview, which will be our starting
view when launching the experience.
So let's keep this variant as is for now.
And the second one from a 3/4 angle that we will name
correctly to avoid confusion later on--
Let's check how this looks.
I'm just going to go in the View mode and select my Config Camera.
And let's see what that does.
So I'm here in Overview mode.
Now, if I switch to 3/4, I can see that is slightly offset.
So I'm going to be grabbing that camera target.
And it's highlighted here.
So I'm just going to drag this bit more to the center.
And as soon as I release, you can see that the value here is changed.
So I'm going to apply this value.
And now if I switch back to Overview in 3/4,
I have that new value stored, which is exactly what we wanted.
Now, before we move on to the speaker variants,
I want to change those thumbnails with my custom ones.
If I right-click on the variants, we can either import our own images
or capture directly from the viewport.
So let's switch to our Overview mode.
And let's make sure that the actors are hidden
by pressing G on the keyboard.
And let's click on the Overview Variant, right-click, and Set
from Viewport.
Now, let's do the same for the 3/4 view.
Right-click and Set from Viewport.
Now, for the speaker cups, what I'm going to be doing
is create two variants-- so one with the Unreal logo
that you're currently seeing and the other one with some more fancy RGB
lighting.
So I'm going to be clicking on the plus sign here
and create my first variant.
And I'm going to rename this UE Logo.
Now, I'm going to go to my World Outliner tab.
And I'm going to be grabbing this mesh and this mesh.
So I'm going to drag this over to the Variants Manager.
And as soon as I let go on this first variant,
it's going to prompt me a message asking me
what properties I'd like to change.
Since I'll be just hiding and unhiding the mesh,
I can simply type in Visibility.
And this is going to give me that property.
So I'm going to assign that property to that mesh.
Now, for the second variant, I'm simply
going to duplicate the first variant.
So let's go ahead, right-click and duplicate,
and let's rename this to UE Logo RGB.
And what I'm going to be doing is simply grab that RGB mesh.
And I'm going to drag that to the second one here.
And same as above, we're going to simply type in Visible
and assign that.
Now, I want to be hiding these two first ones.
So I'm going to select those two and untick those and make
sure this one is set to Visible.
Now, what happens if I switch between the two
is that we can see that our two meshes are correctly displaying.
I'm also going to be using the same technique as
before for the thumbnails for my speaker cups.
Now, for the headband color, all I need to do is create a new variant.
So I'm going to click on the plus sign.
And I'm going to name this Black.
Now, I'm going to go into the World Outliner
and select the headphone frame.
And I'm going to drag this into my color variants.
And this time, we want to change our material property.
So let's simply type in Material.
And we can see this showing up with element 0, which is, essentially,
my material ID.
Now, if we look on the bottom right, we
can actually see in the Details panel of the mesh
that this is the material property we'll be changing.
So I'm going to check this.
And I'm going to press Select.
I'm just going to expand the window a little
so we can see our variant properties a bit better.
And we can see our material property captured.
Now, all I have to do for my second variant
is duplicate the first variants.
And rename this to Red.
And I'm going to change the value to my custom materials
that I've set earlier on.
Now, if I click on the Red variant, we
can see that those properties are changing for the material, which
is exactly what we want.
I'm going to repeat this task for my other colors and see you shortly.
One last step before we hit Play--
we need to specify that new variant set to the level variant actor
we mentioned earlier.
So I'm just going to go in the World Outliner and select Level Variant
Sets Actor.
And I'm simply going to specify that I'm going to be using this new one.
Now let's hit Play, and we can immediately
see that we have a cleaned up interface with our new system.
So if I go into the camera, I can swap between the two angles
that we've set earlier on.
I still have the two environments.
So I can see the different lightings.
Now, if I go into my speaker cup, I can
switch between the normal logo and the RGB lighting.
I can rotate the object and check different angles,
which is pretty cool.
And finally, I can change the headband color.
I hope you enjoyed this video, and see you very soon in the next Unreal
Tips and Tricks series.