x

Search in
Sort by:

Question Status:

Search help

  • Simple searches use one or more words. Separate the words with spaces (cat dog) to search cat,dog or both. Separate the words with plus signs (cat +dog) to search for items that may contain cat but must contain dog.
  • You can further refine your search on the search results page, where you can search by keywords, author, topic. These can be combined with each other. Examples
    • cat dog --matches anything with cat,dog or both
    • cat +dog --searches for cat +dog where dog is a mandatory term
    • cat -dog -- searches for cat excluding any result containing dog
    • [cats] —will restrict your search to results with topic named "cats"
    • [cats] [dogs] —will restrict your search to results with both topics, "cats", and "dogs"

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!

alt text

Product Version: UE 4.17
Tags:
timerbox-widget.png (178.1 kB)
more ▼

asked Mar 25 '19 at 12:24 PM in Blueprint Scripting

avatar image

OutOfRehab
9 1 3 5

(comments are locked)
10|2000 characters needed characters left
Viewable by all users

3 answers: sort voted first

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.

alt text

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!

setbuttonstyle.png (196.3 kB)
more ▼

answered Mar 25 '19 at 01:05 PM

avatar image

Alekann01
441 4 5 6

avatar image OutOfRehab Mar 25 '19 at 03:11 PM

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:

alt text

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

alt text

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!

error.png (286.2 kB)
widget.png (169.3 kB)
avatar image Alekann01 Mar 25 '19 at 11:59 PM

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. alt text

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.

buttonstyles.png (94.5 kB)
(comments are locked)
10|2000 characters needed characters left
Viewable by all users

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.

more ▼

answered Mar 25 '19 at 01:09 PM

avatar image

Bryant_PSC
31 1 2 9

(comments are locked)
10|2000 characters needed characters left
Viewable by all users

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:

alt text

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

alt text

capture.png (112.6 kB)
untitled.png (109.3 kB)
more ▼

answered Mar 25 '19 at 08:48 PM

avatar image

Everynone
15.2k 77 25 62

(comments are locked)
10|2000 characters needed characters left
Viewable by all users
Your answer
toggle preview:

Up to 5 attachments (including images) can be used with a maximum of 5.2 MB each and 5.2 MB total.

Follow this question

Once you sign in you will be able to subscribe for any updates here

Answers to this question