How do I add the "E" prompt to a movable object after I aim my crosshair in it?

Sure in simple terms here it is.

1 - Create 2 Actor Components and name them InteractionComponent and InteractionsScannerComponent

2- Create one widget as InteractionPrompt_WBP and one actor TestInteractionActor_BP so we can run some tests on it. You can fundamentally use any of your actors for testing too.

Before we move on lets recap what we are trying to do. Scanner detects and rules what to display, InteractionComponent tells scanner it’s data, widget listens and shows up if there is something valid. On interact scanner tells widget component to trigger so something happends.

3- InteractionComponent : Simply it has nothing (for now) but two string variables and one Event as OnInteracted.

4- TestInteractionActor_BP : I added simply an interaction component to it add define its variables on left (door , open). Clicked component and add its OnInteracted event to graphs simply by its + icon and made a print string and material change on the mesh..just for testing and understanding the feedback of interaction.

5- InteractionsScannerComponent which fundamentally is a controller/director. I kept logic as simple as possible to explain fundamentals in an open way.

We will assign this component in next step to player so it can do its job.

OnBegin play, I get owner (Player Character) cast to it and get a hard reference.

CreateScanner→ Create a sphere collision component on owning player character, set a size (radius) and save it.

CheckInteractables→ Simply binds to overlap events of the collision. If something enters added to array and if something exits is removed from array. Simply I can check CurrentInteractions around to do stuff. Then we go to UpdateInteractionStatus

UpdateInteractionStatus→ This is where we can define some rules and many more rules as you see fit. To keep it simple I just checked 2 things. Is there interactions around? Is any interaction around is on my camera view?

For each interaction around me I check with a function RuleCheckAngle (below screen shot) to determine if this is something fitting the rule I desire. If it fits I break the loop already, hold variable and call InteractionReadyEvent –>which has a bool and interaction component as variable that we will use in widget.

If there is no interactions call it with false and i set CurrentPrioritizedInteraction to empty null.

Also there is another event TryInteract_Event in graph.. create that event too simply we will use it to pass input (interaction request) to the component.

It simply check if we already have a prioritized interaction valid and calls event on Interacted in the component that we created at step 3.

6 - InteractionPrompt_WBP (The widget)→ 2 labels for action and title. Put an input key. Placed in Canvas and wrapped these elements with a container InteractionPromptContainer basically a verital box. Tried to put origin of it to top left middle.

In its logic as you will realise it is a listener. First it makes itself visibility collapsed.

OnConstruction→GoesOwner→TryFind the InteractionScannerComponent→If Valid binds to its OnInteractionReady event.

OnInteractionReadyEvent→True→SetsNewData make it visible ….. on false makes it collapsed.

There is a tick function basically bind to visibility of this widget.. If widget visible updates widget screen position to match interaction owner actor position by using ProjectWorldToWidget. So it appears on the actor nicely.

7- Binding All together/ PlayerCharacter → I go to my playercharacter and added scanner component to it.

OnBeginPlay first created my prompt widget and added to viewport

I created a new input action as E IA_Interact→Get InteractionsScannerComponent and call its TryInteract Event which we created at the end of stage 5

8-Tesing → Put my test actor to level, duplicate it like 3 and changed its variables of InteractionLabel , InteractionActionName so all have different data.

Results

ezgif-3e2b1df97c3ae7

These are overall the approach to the subject and let’s keep in mind it is for demonstration purposes, there are some things that can need to be improved especially on the rule/priority side depending on the game and gameplay aspects. An additional trace can be made single to check if the interaction is blocked or not, tags can be integrated even with GAS to control it nicely etc. However its quite extendable many terms you can add states as Locked,Active,Inactive, Depletec to InteractionsComponent to control further gameplay aspects.

You can simply change state of the interactionComponent and add rule to check if state is Active. So if you want during gameplay→You interact with something → it becomes depleted→ you cannot interact again (prompt doesn’t show)

or you can just delete interactioncomponent from actor OnInteracted so its not scanned so there is no prompt to show.

You can add a rule again in same place as RuleCheckPlayerStatus→ and you can query if player holding something. If holding something there is no interaction can be promoted.

I strongly advice doing these with gameplay tags if you are planning a sophisticated interaction hierarchy between objects. If a tag exists on player some things can be blocked or maybe not.

Adding a video below since screenshot quality on forums not the best, think video can improve readability a bit.

Let me know if it helps or have further questions around it.

1 Like