UI Elements

Setting up the UI elements using both sockets and manual positioning

In the previous section, setting up the asset's locations and transforms meant that the interaction boxes and UI elements were offset in the wrong locations. This page goes over putting them in the correct places.

Once these elements are correctly set up, your vehicle is almost completely ready to be driven.

This page goes over both ways of positioning your UI elements.

The two methods are:

  • Socket positioning - which can save you time if you know exactly the locations of your UI elements

  • Manual positioning - Generally less efficient, but offers some flexibility in places.

Socket Positioning

The hatchback meshes you imported should come with a few socket locations for your UI. Using the rear trunk mesh as an example, we can reposition the new UI by simply zeroing out the transforms and attaching it to the corresponding socket location

In the image below you can see the offset UI from positioning the new mesh. Not ideal and slow to reposition.

Zeroing out the transforms on the right wont do all the work, you also have to attach it to the correct socket location. In this instance - it's the UI_Exterior socket.

You can do the same now with the interior UI element, and add any adjustments you'd like to on top of it.

You can also add a socket for the BP_Interaction element, however adjusting this asset tends to required a lot of adjustments, and is best done manually.

For the interaction element - make sure the collision box covers the inside and outside - this ensures you can open the door from the inside and outside.

Although assets connected via socket will follow the mesh, some items wont - that's why it's best to nest all the relevant elements underneath the mesh. Both for functionality and for tidying up your component menu.

You can now do the same with the front left and right doors by repeating the previous steps on them.

Manual Positioning

If your mesh doesn't have sockets you can also position them manually. This method is slightly more cumbersome but does have a few benefits.

Although the positioning on the sedan was close - it's not quite perfect, we can simply grab and move the UI elements and place them in a position that makes sense. For the front left door the best location would be by the handle.

You'll want to do this process for the interior UI element, as well as the BP_Interaction element.

Adjusting the Sizes of Each Element

There are slight differences in adjusting the UI element in comparison to the interaction element

BP_Interaction Element

The interaction element is meant to be placed as quickly as possible - this means you can scale, rotate and transform it using the default transform components under the details tab

UI_Overlap Element

For the UI elements, there are a few variables that are exposed to help adjust you - since you might want the UI to run independently from the collision box, the UI comes as a separate element.

Interior UI Elements

Inside the vehicle there are various UI/Interaction elements that need to be adjusted on a new vehicle. These are relatively straightforward to adjust. Some elements are hidden by default and will need unhiding and re-hiding to adjust.

The steering wheel can be adjusted by selecting and moving the BP_Exit and the UI_Exit Components.

This process is the same for the handbrake, headlights and enter location. The only difference on the exit location is that there are two Interaction boxes - both are programmed to do the same thing.

Last updated