How to create 3D Widget with drop-down options?

[Grimgorkos1 (MooveStudio)]

Hi guys, I’m currently in the process of learning Unreal Engine and as a first project am working on creating a car-configurator from scratch (instead of using the presets/templates) to learn as much as possible along the way.

I’m basically done, however I am now working on improving the user experience and UI.

I currently have a setup where the user camera is locked to rotating around the selected object (I’ve also limited the min and max height that the camera can travel to make sure you never go below the ground, or flip upside down).

The camera also moves to the selected object so that the user can inspect that object in detail. Currently this works via the mesh pivot point.

I would like to add some “objects of interests” via widgets, so that the user is only capable of selecting e.g. the chassis and the rim, and that the camera then focuses onto these objects.

Once these widgets have been selected, I would also like a drop-down menu to appear, where the user can switch between the different color variants (I already have these all setup and working with a UI blueprint, however I would like to remove the UI and implement it with these widgets, as I believe thatÄs a lot cleaner design-wise.

my reference for the “Object of Interest” widget was this video from Unreal Engine’s YouTube Channel:

Exploring the New Real-Time Car Configurator Sample | Unreal Engine Webinar

Where they have these circles hovering over the object of interest

I would like the same circles (that also reduce in opacity when not hovered over).
Once the camera is then focused on the object of interest, I would like a UI to apear with the different variant options.

So, my question is - can be done? If so, how?

I’d appreciate any input I can get (including what to google).

Thanks,
-CB

[uc_ue2 (uc_ue)]

Hey,

@Grimgorkos1

I would like the same circles (that also reduce in opacity when not hovered over).

In the sample carConfigurator they are handled by BP_FocusPoint. The actual circle is just a plane in the bp. The material itself is producing the circle and has some parameters, e.g. MouseDistance to take control over the hover effect (all in M_ or MI_FocusPoint). The distance is calculated in the bp and then passed to the material:

@Grimgorkos1

Once the camera is then focused on the object of interest, I would like a UI to apear with the different variant options.

First you would need some kind of event, that you know which focus point you clicked and if the camera has finished with it’s transition. Possible solutions, e.g. timer (used in the sample for animations)

or checking the position of your pawn/camera etc. if it’s in range. After you can add the desired widget to your viewport. Just an example:

This will either work for pre-populated widgets, or you could fill the widgets with corresponding elements during runtime. I’ve done something similar for variants in the variant manager (just posting a screenshot as this was written in 4.26 and I didn’t test it since then)

[Grimgorkos1 (MooveStudio)]

Thanks for the quick response!

I’ve just downloaded and opened the Example Car Configurator Project to take a look at the Blueprint and Material.

I’ve migrated the material successfully and will see if I can get that working.

I’m unsure on how to migrate the BP_FocusPoint as there are hundreds of dependencies that it wants to copy over aswell. All I want is the node tree to use as reference, so that I can (hopefully) restructure it to work in my scene. Is there away to know what parts I need to copy over?

[uc_ue2 (uc_ue)]

Most things, you’re interested in, are in the BP itself under the event tick and aren’t holding any special references except to the material. The other references are for animations, the focus points are spawned during runtime, etc. Copying only this one BP would be enough for learning purposes. If you want to see all running and in combination just start the carConfigurator itself and press F8 during PIE (play in Editor) then you can interact with the actors in the scene, look at the blueprints, set breakpoints and see how all of this is connected.

[Grimgorkos1 (MooveStudio)]

I managed to get the material working, however the mask seems to be quite blurry when viewed from up close. Any idea whats up with that?

[Grimgorkos1 (MooveStudio)]

press F8 during PIE (play in Editor

That’s awesome, thanks!

[Grimgorkos1 (MooveStudio)]

There also seems to be a rendering issue where the plane is translucent…not sure about whats causing that either

[uc_ue2 (uc_ue)]

The texture used T_FocusPoint is 128x128px. You could either use something bigger or calculate a circle within the shader. That’s definitely possible but shader math is too much for a Friday afternoon

[Grimgorkos1 (MooveStudio)]

You’re right, I just noticed that aswell, sorry for the oversight.

What is bothering me however, is the weird translucency window:

The materials behind it look different (in this case, sharper)

[uc_ue2 (uc_ue)]

This can be linked to a lot of different reasons from Nanite/Lumen to rendering methods. Probably the easiest fix would be to use a 3D geo for it for now.

[Grimgorkos1 (MooveStudio)]

I feel dumb for not just thinking of that before. Thanks!

Quick question - at the moment, I am using this node setup to focus the active camera to the selected object.

Is there a way to only allow select objects (in this case the circles) to trigger this camera movement ?

[uc_ue2 (uc_ue)]

Probably you already want to test ‘Focused Actor’ upfront when you set it. In here it looks kind of strange as it is just once executed by BeginPlay?
Anyhow, you could cast the focused actor to your class. If it’s still BP_FocusedPoint, it would like this:

[Grimgorkos1 (MooveStudio)]

Yeah, When starting the “game”, the camera zooms from further away to the car, hence the “one-time” action.

I’ll give it a try, thanks!

[Grimgorkos1 (MooveStudio)]

I’ve also tried to add a “look-at” contraint to the cirlce, however its not working. I believe it’s due to the fact that my “main camera” isnt an actual character but a “pawn”. Any idea what I need to change to get it to work?

[Grimgorkos1 (MooveStudio)]

The goal is to get the cirlce always facing the viewer when he rotates around the model

[Grimgorkos1 (MooveStudio)]

I’d also like to know how I can turn off mouse input for the first 3sec of the application turning on.

Basically, on start-up, I want the car to drive in, and the camera to zoom in onto the car (the latter is already implemented).

Only after the above steps are complete should the user be alowed to rotate around the scene.

How would I go about implementing that?

[uc_ue2 (uc_ue)]

Depending on how you set up the pawn and the interaction. You could just get ‘Get Player Pawn’ instead of Player Character, but even that mustn’t link to your camera. e.g. in the CarConfigurator the pawn (invisible) is still controlled by WASD and your circle would react to that, the mouse input moves the camera and the circle would stay in place → you would need to get the position of the camera.

[uc_ue2 (uc_ue)]

How is your input handled at the moment, or from which template did you start building up your project?

[Grimgorkos1 (MooveStudio)]

I started from scratch and followed along a few tutorials on youtube depending on my needs.

This is some of the node tree of the pawn:

(Sorry for the late response but the forum didnt allow me to post more replies in one day).

I was also wondering what the best-practices are for setting up materials. Currently I simply drag-and-dropped the materials onto the mode, however if I want to put everything into a blueprint, I assume I cant just take the mesh in teh viewport, but need to take the parts in the Library, which dont have shaders on them, right?

I basically want to start adding a rig to the car (including suspension from the YouTube VIdeo on the Unreal channel) and want to know how to best set eveything up in a clean and tidy way, as one would do in the industry.

[Grimgorkos1 (MooveStudio)]

I’m currently in the process of adding chaos physics to the car (i want the car do drive into the car configurator and the wheels/suspension to react when driving over bumps).

I notices that I needed to clean up my geo a bit and join/merge a few meshes.

When making changes like this, is it possible to retain the shading within the UE5 scene, or do I need to set up every material again when importing the “new” model that has changes to it?

I’m importing everything as a static mesh, so it gets imported as a single “object” in the project files (as compared to many static meshes, where I can just adjust the updated parts).

Would appreciate some help on what the best-practices are for applying materials and keeping meshes updated. I cant imagine this destructive workflow being the way of doing things, especially as I can imagine larger productions require last-minute changes to models as well that need to be updated.