How do I switch spotlight colour on UI Button clicked event?

[J_Savage]

Hi, I’m currently working on a project that requires the user to search for an item in the world using in-game UI. On this widget I have a search bar and a scroll box. Once the user types a word in the search bar the scroll box shows relevant items. These items are show as buttons.

What I am aiming for is to allow the user to search for a certain item in the world, click on the item button in the scroll box and activate an event that changes a spotlight on that items actor to a different colour.

Any ideas on how I should approach this?

[Everynone]

There are many solutions to this depending on how you want to structure things.

---

How are the actors and the buttons making it into the game atm?

• you’re placing the spotlight actors manually in the level?
• you’re adding buttons manually to the scroll box?

Perhaps I can suggest something that fits into your current setup. Normally I’d have the actors populate the scroll box with the widgets they create on the fly. Neat, efficient and easy to maintain but it may not suit your needs.

[J_Savage]

So the spotlights are currently attached to individual actor blueprints. I don’t know if this would effect the process or not. As I have made a BP_Base actor that has a static mesh and a spotlight, so that each other actor (item) are inherited from this BP_Base.

The buttons are currently invisible but on the UI widget. Shown below:

[Everynone]

The most rudimentary and minimalistic approach. Level Blueprints actors have an event:

And you fetch them all, have them create widgets, bind their clicks and push them into a scrollbox:

[J_Savage]

This is my actor base:

[Everynone]

How many actors will there be in total? There’s general never any need to create buttons manually like so.

[J_Savage]

I wondered if i did call an event to switch light colour of a spotlight that it would target all inherited actors. But i really just want to target one of the inherited actors.

[Everynone]

I wondered if i did call an event to
switch light colour of a spotlight
that it would target all inherited
actors. But i really just want to
target one of the inherited actors.

I’d start by creating a User Widget that represent the button:

Create a text variable and bind it to the Text Box:

In the Base actor; each actor has its own text and creates the above-mentioned widget, its button is bound to the click with an event inside:

• you can make this variable Instance Editable, too so you can edit it in the viewport after selecting the spotlight actor.

The Main widget fetches all actors and adds their widgets to its scrollbox:

[J_Savage]

Right now its up to 20 actors. But in a few days its going to be up 60 actors. Would i be able to create the widget i have now that already has the scoll box and target those buttons? or would i have to make a new one like in your gif?

[J_Savage]

If i do this ^ would these buttons be able to replace the current ones on my widget?

[Everynone]

Have a look below at the other answer, it caters for your scenario. Duplicating 60 buttons sounds meh. What if you decide to change how buttons look later on? That’s a lot of clicking!

With the method below you make one button and have the actor customise it. Essentially, each actor makes a button associated with an event; the scrollbox then finds those actors and adds their buttons.

[Everynone]

Yup, that’s the plan. If you ever attempt something repetitive, someone lazy enough has already found a way to automate it.

---

Essentially, each spotlight creates its own button. And there is no limit. From now on, you drop an actor in the level and punch in the desired text.

[J_Savage]

hmm…thanks for the detailed answer. I’ll give it a go and comment if i have any problems.

[J_Savage]

By the way, instead of toggling visibility. Is there a node that allows you to change colour of the spotlight?

[Everynone]

Blueprints wires are Context Sensitive, if you drag a wire first and then start searching for something more specific, you’ll get compatible, filtered results that make sense in this particular context:

[J_Savage]

The Blueprint in Screenshot 2: the create event node needs a function → which function do i select?

[Everynone]

In many cases, it makes sense to parametrise things:

And if you add it to the Construction Script as well:

Makes it easier to preview changes in real time.

[Everynone]

May I suggest you follow the other answer. This one is more of a generic overview of the method rather than something that I’d recommend implementing.

[J_Savage]

I won’t set this question to complete, as I’ll continue this tomorrow. If thats okay?

[Everynone]

It’s your question. We’ll carry on tomorrow