Change colour of button based on score
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!
asked Mar 25 '19 at 12:24 PM in Blueprint Scripting
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.
answered Mar 25 '19 at 01:05 PM
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:
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.
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:
Follow this question
Once you sign in you will be able to subscribe for any updates here