First, if the interactable should later do anything replicated (for multiplayer) make sure to set Replicates to true in the Class Defaults of this actor.
Here is an example of an actor that is currently not interactable. It only contains a Cube as an example mesh:
Now just add the AC_MakeInteractable component to it:
If you play now it should already be interactable. So if you focus it you should see the interaction widget at the center of the actor.
Tip: You can hover almost all variables in AC_MakeInteractable and the data table DT_InteractableFoliage component to see a tooltip which provides you with some further explanations.
Outline:
For seeing an outline effect check Add outline to your project and enable it in your map. Additionally, you need to define which mesh components in your actor should show the outline. You can simply do that by selecting the mesh (in the example here we select the Cube) and in the Details tab add a new component tag which is exactly: outline
How the outline should look like you can adjust in the details tab after you selected AC_MakeInteractable. There is an outline section.
Interaction Widget:
The position of the interaction widget is currently at the actor's origin at (0,0,0).
To change the interaction widget position, just add an arrow component to your actor:
To not get confused you can rename this arrow as you want for example ‘widget’.
Then select this arrow and in the details tab add tag that you name exactly: widget
Now you can adjust the location of this arrow in your actor to define where exactly the interaction widget should be displayed.
If you select AC_MakeInteractable you can adjust in the details tab Widget UI Info.
Here you can set the title and description that should be displayed if you focus this actor.
The focus tag is a tag that will be passed to the widget blueprint. You can open WB_InteractionInfo_Master to check it out. Here you will find in the different functions how the focus tag is working. Based on the tag the widget could be displayed in another way or show special information. So in your actor as example you can set the focus tag to: flat
Then the style of the widget will be different. However you can also adjust it in WB_InteractionInfo_Master to interpret different tags differently. The other style is just an example. Moreover you can expand S_Sub_UI_WidgetInfo with more variables if you want to provide the WB_InteractionInfo_Master with more specific information.
In case your intractable simulates physics make sure to attach this widget arrow to the mesh that is simulating physics:
Interaction Center:
If you use only the direct trace you can ignore this. But if not there need to be a defined center that will be used for calculating the focusing behavior. If you do not define a center it is at the actor's origin at (0,0,0). The center is important for the Look At Percentage trace, Closest to character trace and auto interaction. You define the center in the same principle as the widget. Add a new arrow component and add a component tag to it which you call: center
In case your intractable simulates physics make sure to attach this center arrow to the mesh that is simulating physics:
Improve focusing if the view on interactable is partly blocked:
If you use only the direct trace you can ignore this. Here is an example where the Look at Percentage trace is not working for our example interactable (white cube):
This is because the interaction system thinks that the interactable is behind a wall because the direct connection (trace) from the camera to the center (the center arrow location that you defined above) is blocked by the orange wall. For very small interactables it is fine if it just checks if the center is not blocked. But the bigger the interactable is the more important it might get to roughly the dimension of the interactable. However if you know that the interactable won’t be blocked by anything you do not need to define the dimension.
To define the dimension you can add arrow components and add a tag to them which is exactly: dimension
For performance it is recommended to not add more than 6 of these dimension arrows. You can add more if it is necessary but try to keep the amount of them low. Here is an example how you can place them:
It is a bit difficult to demonstrate it in an image. I made the dimension arrows in another color (not necessary but easier to distinguish). They are placed at the sides of the cube. All dimension arrows in total are creating a web that is trying to roughly cover the dimensions of the interactable.
Now you can focus it better if it is blocked:
It is still not perfect from some angles so you can add more dimension arrow components that fit your needs but as already said try to keep the amount of these dimension arrow components as low as possible. And again, if the interactable is simulating physics make sure that the dimension arrow components are attached to the physics simulating mesh component.
