Change colour of button based on score

Hello,

So I’ve got this button ‘Timerbox’ in a widget. Then I have got an integer ‘SCORE’ in the game mode’s bp. ‘SCORE’ is equal to Player 1’s score + Player 2’s score. The score is under an event tick in the game mode bp.

I wanted to change the colour of the ‘Timerbox’ (a normal button with no text) based on the score. However, it doesn’t seem to work no matter what I do.

Any help would be greatly appreciated. Thank you!

Hi OutOfRehab.

Create an event which gets called every time your score updates (far more efficient than using tick).
Button display properties are handed using brush styles. Select your button and call “SetStyle”. From the dark blue input pin, pull off and type “Make Button Style”, There you can set the individual properties for normal, hovered, pressed, disabled etc.

If you want to keep some properties the same, get a reference to the current style of the button and set the appropriate members of the brush structs.

Note, if this is a networked game, widgets will not be able to access your game mode as widgets cannot see the server.

Good luck!

1 Like

Good morning!

It looks like you’re attempting to set the color as part of the EventConstruct, not the EventTick. So if your TimerBox widget is being created before the SCORE reaches 50, it will skip the code that turns it red.

A couple of things you could try out:

  • Start by adding some logging. Right before the branch, add a PrintString node that will show you the score. My guess is that this is going to happen one time at the start of your game and that the score won’t be 50 yet.
  • Shift the whole code block (starting with the cast, all the way to the color setter) into the EventTick. That way, if the score reaches 50 after the game has begun, your TimerBox widget will update on its next tick.

I’d definitely recommend using the PrintString node a lot when you get stuck. You can use it to show variables at runtime, and it will give you a pretty good idea of when something is happening. You could use the debugger instead, but I find the UE4 debugger to be somewhat cumbersome.

Edit: The answer from @Alekann01 is the better solution overall. While updating the color as part of the tick would be a good test, it would be much more efficient to just change the color when the score changes. Also, I think he’s probably right about the button styling. I usually have images nested in my buttons, so I’m more accustomed to setting their color than the button color.

Hey Alekann,

Thank you for the prompt answer, but I’m a rookie and I’m not sure I understood everything, so please bear with me.

I’ve this event tick that basically checks the score continuously, because SCORE = P1 points + P2 points.
How would I create an event that gets called each time the score is changed? I have many other events tied to this tick, as you can see:

As I’ve created the custom event in the widget blueprint, it now obviously asks for a target in the GModeBp.

I just want the button to act as a timer indicator. Game’s split in 4 different rounds.

Essentially, the button box will turn red when SCORE == 50. Then it resets at the start of the new round, so when SCORE == 100 I’ll change it back to white. Then when it hits 250 I’ll change it to red again, then white at 300 and so on and so forth. Can’t I just do that using a branch condition for the SCORE?
Thank you!

Essentially, the button box will turn
red when SCORE == 50. Then it resets
at the start of the new round, so when
SCORE == 100 I’ll change it back to
white. Then when it hits 250 I’ll
change it to red again, then white at
300 and so on and so forth. Can’t I
just do that using a branch condition
for the SCORE? Thank you!

Set Color and Opacity won’t work here as it affects the content of the container rather than the container itself; it’s called Set Content Color and Opacity for other widgets - the button never got updated properly, it’s a bit misleading.

Use Set Background Color for buttons so you do not have to deal with brush spaghetti as seen in the other answers; and you do not need to repeat the code for all button styles…


No need for any cascading branches. Ideally, for something like this create an enumerator and then it’s ALL the code you need in the widget:

Call it from outside of the widget like so whenever you need an update:

Hi OutOfRehab.

No problem mate, I will try to explain the best I can.

In the first screenshot of your reply, you see the node has a warning “Blueprint Self is not a Timebox Widget”.
To access a property, function or event from another blueprint type, you need to have a reference to that object. You have done this already in your first post where you used “GetGameMode”. This returned your “GameMode” object which you could then access your “SCORE” variable stored in your GameControllerBP.

Now I have to admit, I am quite troubled with the way you are using your Tick events. This seems to be very intensive for what should be simple information handling.

Right now, your blueprint is constantly calling functions which are unnecessary. You should try to design a clear flow of logic:
Player Inputs Answer (this could be a button click, keyboard event, or some other trigger) → Call a function to check is answer correct → Increment score → Call a check scores function → Set the style of your buttons → Get next question (if that’s what your game does).

If it is a timed based game, you can still use the tick event, but in a simpler, less intensive fashion.


Anyhow, back to the question:
In my reply, I showed you how to set the button style. The button style relates to these fields which you can see in the designer of your widget.

As @everynone mentioned in his answer, there may be simpler ways to change the system of your button, either using ColourAndOpacity or SetBackgroundColour. Which method you use is up to you depending on the results you want.

I hope this clears things up.