In this penultimate article in the Unreal Studio* for Engineers series, we will take a look at creating X-Ray effects, adding cameras, and using Blueprints and the Variant Manager to create a configurator that will enable users to switch between models at the click of a button.
These features can be useful in a variety of applications, including illustrated parts catalogs or online configurators, which can visually show customers how altering their product options will look in real life.
Before we crack on with this article, let’s just recap the previous tutorials.
Recap
In the first article, we took a look at how we can import engineering CAD data using the Datasmith import function in Unreal Editor. We showed examples of how to import from SOLIDWORKS and SketchUp by using the native Datasmith import method and the plug-in method, respectively.
We also looked at how to navigate around the Unreal Editor environment.
In the second article, we explored how to import material packs into Unreal Editor, how to apply them to meshes, how to add lighting to the scene, and how to apply UV lightmaps correctly.
Using X-Ray Materials
So, moving on with this part of the tutorial, let’s start by taking a look at how to create and apply X-Ray materials to a model.
This might come in useful if you were creating an illustrated parts catalog, or if you wanted to show the internal components of a machine while retaining some sense of the context of the outer geometry. Also, X-Rays are cool and they demonstrate translucency and emissivity, which are useful things to know when it comes to creating materials and lighting effects (see Figure 1).
First up, go down to the Content Browser panel at the bottom of the screen, right-click and select Materials & Textures > New Material, to select a new blank material.
Rename that new material asset as “XRAY_DEMO”, then double-click that material to open the Material Editor screen.
Once you are on the Material Editor screen, you will see the big brown New Material node. You will need to create some nodes to plug into that.
Right-click on the graph area, and in the search bar select the following nodes (in the corresponding quantities):
- Multiply (1x)
- Vector Parameter (1x)
- Scalar Parameter (3x)
- Fresnel (1x)
Including the New Material node, you should now see a total of 7 nodes in the Material Editor, and your screen should look a little bit like the image in Figure 2.
Click on the heading of each node and rename them, so it will be easier to keep track of what you are doing.
Rename the three Scalar Parameter nodes as “Base”, “Exp” and “Glow”.
Rename the Vector Parameter node as “Color”.
Because you will be using a translucent blend function to create the X-Ray effect, you will need to change the parameters on the XRAY_DEMO node to enable the opacity connections.
Click the XRAY_DEMO node, then go over to the Details panel on the left of the screen, as you can see in Figure 3. Change the Blend Mode from Opaque to Translucent, and change the Shading Model from Default Lit to Unlit. You will see the Opacity connector enabled on the XRAY_DEMO node.
Now that the Opacity connector is enabled, you can link all the nodes up as shown in Figure 4.
Here we have created a network that is driving some values through a Fresnel node, which will determine the opacity, and a color multiplied with a glow, into the Emissivity connection.
For our X-Ray material, we want a ghostly, glowing opaque material, and this is exactly what we have created here.
You will notice that the material preview window still shows a black sphere (see Figure 5). We haven’t assigned a color to our vector node yet, or any values to run through the Fresnel and Glow nodes.
Now, go to the Color node, and double-click it to open the Color Picker properties panel. Then pick a color, and press OK.
Now double-click the Glow node, and set the Default Value to 10.
Then select the Exp node, and set the Default Value to 4. This is the exponent value that is going to run through the Fresnel and into the Opacity function.
If you have done all of this correctly, your Material Editor screen should look what is shown in Figure 6, complete with a glowing, translucent orb! Congratulations: you have an X-Ray material. Save it, and close the Material Editor.
Figure 6. A glowing, translucent orb.
Creating Material Instances
Now that you have your X-Ray material, you can use that as a master material template and create Material Instances, which you can manipulate without affecting the original master material.
A Material Instance is simply a parameterized version of the master material, so you can change the color and other parameters with a simplified UI, rather than having to goof around with individual nodes.
To create a Material Instance, simply go into the Content Browser, right-click the XRAY_DEMO master material, and select Create Material Instance from the menu. This will create a simplified instance that you can use as the secondary X-Ray color. Now you have two colors, a purple master and a blue material instance (see Figure 7).
You will be applying the materials later, but first you need to perform a few steps to create swappable variants of the car: one X-Ray version and one normal painted (non-X-Ray) version.
Variant Manager
The Variant Manager is a fairly new feature in Unreal Engine 4 that allows you to switch between different configurations at the click of a button.
This could be useful if you were making a clothing website and wanted to show customers different colors of the same garment, or if you were selling cars online and wanted to allow customers to select different trim levels or body styles. The feature is not limited to color, however; you can use it to change geometry configurations too. You can take a look at the Unreal Engine McLaren configurator video here.
It works by activating and deactivating the visibility of different Variant Sets. In the case of our demonstration, we will have an X-Ray set (with the X-Ray materials applied) and a non-X-Ray set (with normal paint applied).
This is a very elegant way of switching configurations. Typically, using a Blueprint to switch materials can be a very time-consuming task, especially if your model has dozens of different materials. It’s much easier to simply swap the entire vehicle from a painted version to the X-Ray version, and that’s exactly what you will be doing here.
This will require two copies of the car and the powertrain.
Go into the World Outliner, locate the top level of the car body, right-click it, then select Edit > Duplicate.
Now do the same for the Powertrain model. To do this, select the top level of the model structure, right-click it, and select Edit> Duplicate.
Now comes the grind. Unfortunately, Unreal Engine 4 doesn’t allow you to apply materials en masse.
So, you’re going to have to scroll down your duplicated car body part list in the World Outliner, and drag and drop the X-Ray material instance onto every part. You will want all of your car body parts to be one color (in this case, blue X-Ray material instance).
Now, go to your duplicate powertrain components, and repeat the process but with the pink XRAY_DEMO master material (see Figure 8).
If you’re unsure how to apply materials, you can check out the last tutorial here for a reminder.
So now you should have two variants of the car, as shown in Figure 8. There is one normal car and one X-Ray car, the latter consisting of the two different-colored X-Ray materials. Of course, to maintain the illusion, you will need to relocate the position of the X-Ray car so that it sits in the exact same location as the normal version, so when you switch variants later, the cars will appear in the same spatial location. You can do this with the Transform options, as you would for moving any other asset.
Setting up Variant Manager
Now that you have two models to switch between, you can begin to set up the Variant Manager functionality properly.
First you need to create a new Variant Manager asset. You can do this by clicking Window> Variant Manager. Right-click on the asset in the World Outliner and rename it as “Car Level Variant Set” (see Figure 9).
In the World Outliner, select the renamed Car Level Variant Set and scroll down to the Details panel. Double-click on the Level Variant Sets icon to load its UI (see Figure 10). You can do this anytime you wish to access the Variant Manager interface.
Next, you will create a Variant Set that contains the two different variants of your car—one with X-Ray effect ON, and the other with the effect OFF.
Click the green +Variant Set button in the Variant Manager UI to add a new Variant Set (see Figure 11). You can name this one as “XRAYBODY”. This will contain all of your variants when you add them shortly.
Next, click the little + icon next to the newly created XRAYBODY Variant Set (see Figure 12).
This will add your first variant, which you can call “XRAYON”. In this first variant, you will tell Unreal Engine to switch the visibility of the X-Ray model ON, and the normal model OFF.
After you have created the first variant, you will need to assign the static mesh actors to this variant.
Go to the World Outliner, and select the actors that you wish to add.
In this case, you want to add the X-Ray body and powertrain, and also the normal body and the normal powertrain. This is a lot of individual components to add, but luckily you can just click the four root levels and highlight those to encompass everything within those levels.
With those static mesh actors selected from the World Outliner, go back to the Variant Manager, right-click the XRAYON variant and click Choose Selected Actors. You will see them added to the variant as shown in Figure 13.
Now that the meshes are assigned to the variant, you will need to assign visibility properties to each set of actors.
Right-click on the first static mesh (XRAYBODY) and select Add properties, as shown in Figure 14. Choose Root Component Visible as the property, and click Select.
This makes this property show up in the variant UI as shown in the figure.
The Visible checkbox on the right of the figure will be checked or unchecked depending on the actor’s status in the current level. Check or uncheck this box depending on whether you want this actor visible for this variant.
Repeat this step for the other three static mesh groups, altering the visibility depending on the mesh group.
So, for example, this is the XRAYON variant, so you want the XRAYBODY and XRAYDRIVETRAIN groups set to visible, and the REDBODY and REDDRIVETRAIN groups set to have the visibility switched off.
That completes the XRAYON variant. Now you will need to repeat those steps for the XRAYOFF variant, except the visibility of the static mesh actors will be flipped.
Click the + icon next to the XRAYBODY Variant Set, and create a new variant called XRAYOFF, as shown in Figure 15.
Then repeat the steps as you did for the XRAYON variant. Add the static mesh actors, and assign visibility, remembering to flip the visibility. For this variant, you want the normal, non-X-Ray geometry, visible. So go ahead, switch off the visibility for XRAYBODY/XRAYDRIVETRAIN, and switch ON the visibility for REDBODY/REDDRIVETRAIN.
That completes the Variant Manager section. To test that it is working and you are switching between variants, simply right-click on XRAYON or XRAYOFF, and click Switch On to activate that variant (see Figure 16).
You will see in the main graphics area that the model will switch from the X-Ray model to the normal model before your very eyes…assuming that you remembered to locate both models in the same position in space (see Figure 17), that is!
Button Widgets
OK, so you have your X-Ray materials assigned, and you have your variants assigned into the Variant Manager.
But switching with the Variant Manager is a little clunky, so next, you will build a GUI with a few button widgets to allow you to switch between variants (and cameras) from the main level view.
In the Content Browser panel at the bottom of the screen, locate the green Add New button, click it and select User Interface>Widget Blueprint from the menu.
A new icon will appear in the Content Browser. Double-click the icon to open the Widget Blueprint Designer. This is where you will design your user interface.
The Widget Designer screen contains a Palette panel on the left and the main design area in the middle.
In the Palette section, you can find buttons, text boxes, sliders and a whole bunch of other things to add to your GUI. In this case, you will just create two basic buttons to toggle between variants, and a few buttons for switching camera angles (which we will explore later).
Drag two buttons and two text boxes into the design area from the Palette on the left (see Figure 18).
You can play around with these settings to create some nice aesthetics for your widgets, as well as add button behavior and sound effects for when you click the buttons.
Also, for ease of reference, you can change the name of the buttons to something a little more memorable over in the Hierarchy panel on the left (see Figure 19). In this example, we have renamed the gray X-Ray button as “btn_xray”. Make a note of that, as you will need to refer back to it later.
At this point, the buttons are pretty dumb. They don’t have any behavior assigned to them yet, so you will now need to connect the X-Ray buttons to the variants.
Go back into the Widget Editor and switch to Graph Editing Mode with the button at the very top right corner of the screen (see Figure 20). This will bring the Widget Blueprint graph view up, so we can wire it all up.
You will notice that there are three nodes already in the graph view when you open it up. Of these, you will only need the Event Construct node. So, you can delete the other two.
First, drag off a new connection from the remaining Event Construct node and use the search bar to find and add the Get All Actors of Class node.
Inside the Get All Actors of Class node, you will see an option for selecting the Actor Class. Click the little arrow and from the menu select Level Variant Sets Actor (see Figure 22). This will allow Unreal Engine 4 to call the different variants into an array.
Next up, drag a new connection from the Get All Actors node, and add a Get a Copy node (click the link for details of what this node does). Then, from that node, drag off a new connection and select Promote to Variable (to make the configuration run faster).
If you’ve followed this process correctly so far, your node chain should look like what’s shown in Figure 23.
Next, link up the Get All Actors node to the variant node (the new node labeled “Set”), and rename the Variant node as “Level Variant Set” (see Figure 24).
Now, drag off a new connection from the variable and add the Switch on Variant by Name node.
Rename the Variant Set Name to reflect the name of the variant set from the Variant Manager (in this case, the variant set is named “XRAYBODY”), and change the Variant Name to reflect the particular variant (in this case, the variant you want to trigger is “XRAYON”) as shown in Figure 25.
Now go over to the My Blueprint panel on the left-hand side of the screen and select the button variable that you renamed earlier. In this instance, you want to select the btn_xray variable (see Figure 26). Then, while remaining in the My Blueprint panel, scroll down to the Events section, and click the green button next to On Clicked. This will create a new event in the Blueprint that will activate your selected button when it is clicked.
Now connect the On Clicked node for the btn_xray to the Switch on Variant by Name node, as you can in Figure 27.
Now you will need to repeat the above steps for the XRAYOFF variant.
Simply create a new On Clicked node for the btn_nomal button, and duplicate the Switch on Variant by Name node. Rename the Variant Name in the duplicate node to reflect that you are now assigning the XRAYOFF variant.
Connect the new On Clicked node to the new Switch on Variant by Name node, as shown in Figure 28, and make sure the variant is connected to the duplicate, as shown in the figure.
Camera Buttons
You will need to set up three cameras in the main viewing area. For more information on setting up cameras, you can click here. It’s pretty easy…just search for Camera in the Modes panel on the main screen, and drag and drop the cameras into the scene.
You will want to switch between these cameras and the three camera buttons that you created in the Widget Blueprint.
The process for setting up the camera buttons is similar to the process for the variant buttons that you just went through. For this process, you should remain in the same Widget Blueprint as before, and create the network as shown in Figure 29.
As you can see from the figure, the camera switching chain begins with a Get Player Controller node, then runs into three Set View Target with Blend nodes. And again, you will follow the aforementioned process to create three On Clicked nodes, one for each camera.
Now the triggers are all set up! Click Compile, then Save.
Adding Buttons to the UI
Right, your buttons are designed and you have them wired up to your variants and cameras. Now you will have to tell Unreal Engine to actually display those buttons on your level. For this, you will need another Blueprint. Are you seeing a pattern here?
First, right-click your mouse in the Content Browser at the bottom of the main screen and select Blueprint Class. A menu screen will appear automatically, and you should select Choose Actor as the parent class (see Figure 30).
This will create a new Blueprint in the Content Browser. Double-click it to open up the Blueprint, then select Event Graph from the tabs at the top to open up the graph view for creating new nodes. You will see three default nodes in the graph view, as shown in Figure 31. You will only use the Event BeginPlay node here, so you can disregard the other two.
Drag off a connection from the Event BeginPlay node and choose Create Widget. For the Class, choose the Widget Blueprint you just created. In this tutorial, we have named the Widget Blueprint as “GUI”, so it shows up as “GUI” under the class name.
Drag a new connection out of the new Create GUI Widget node and select Add to Viewport. From this new Add to Viewport node, connect the Target connector back to the Return Value connector on the previous node, as you can see in Figure 33.
Now you can click Compile, Save, then close the Blueprint.
Now you will need to drag this new Blueprint from the Content Browser into the scene. And when you click the Play icon and the level begins to run, you will see the GUI with functional buttons appear, just like in Figure 34.
Figure 34. The GUI with functional buttons.
Summary
In this article, we have looked at how to create emissive and transparent materials, and we have learned how to create the appearance of switching between components and actors by manipulating the visibility of those components with the Variant Manager.
Additionally, we have learned how to design buttons for those variants in the Widget Designer, as well as how to link those designed widgets to control our variants by using Blueprints.
Also in the Widget Designer, we have created camera buttons, and have assigned those buttons to switch the views of the different cameras.
Hopefully, you are now beginning to see the bigger picture of what we have been attempting here.
With these basic tools, you should see how Blueprints interact and call on functions when they are triggered.
By using these features, maybe you can start to use Unreal Studio to build your own configurators, or maybe you have some different uses in mind.
With the methods shown in this article, it is perfectly feasible to design some sort of visualization with zoom features, different variants, different lighting conditions and a whole lot more.
It is entirely down to your own creativity…and patience!
End Result
You can see a screen recording of the work we have completed in this article in the video below. You can see an overview of the scene, including camera and lighting locations, plus a nice HDRI image we added for the background, which also adds a bit of its own lighting to the scene.
In the next (and final) article in this series, we will show you how to compile a finished product into a format of your choice, be it as a stand-alone executable file for Windows or even a smartphone app.
*Editor's note: With the release of Unreal Engine 4.24, all Unreal Studio features have been rolled into Unreal Engine. Datasmith is also included as a standard Unreal Engine feature.
Epic Games has sponsored this post. All opinions are mine. --Phil Keane.