Godot Version
4
Question
Just started creating a project. Have created the first button for the main menu but I’m having an issue with it’s style. I’ve set it as green for normal and yellow when clicked. It’s not set to toggle. After clicking instead of going back to green it goes to transparent grey. The only info I found about what could be causing it is the focus. I have however, set focus to none. The colours of the button are set through style override. It does go back to green if I click on the screen somewhere. No scripts or anything yet. Just a background and button.
Any solution?
func _ready() -> void:
print("hello world")
Hey there, when you ask for help, please include relevant code bits, screenshots of relevant parts of your project and such.
Godot has many versions, simply saying “4” makes it next to impossible to know which version of godot you’re using, because Godot 4 came out back in 2023, and since then, there’s been many, many versions. If you ARE using the Godot 4.0 version, I recommend upgrading, otherwise, please click on the version number at the bottom right of your editor, this will copy the ACTUAL version number, which you can paste here.
I’m not sure what the hello world code is for? This doesn’t help us identify the problem what so ever.
It sounds like this is a focus issue, but it should overlay the Stylebox, not replace it. And not use focus at all for this, if set to focus modenone. Maybe something else grabs focus?
Can you share a screenshot of the tree with the button, as well as the style overrides?
If there are multiple buttons using the same original button, you need to make
them unique or duplicate the style or material as new on ready.
Give it a try and goodLuck
Can you show all of your button styles? I think gray is the default button style
The hello world code is nothing. I just forgot to clear the default out of the post. I’ll try and get a screenshot in but could be tricky as I’m creating this on my phone.
The Godot version is 4.6.1 on Android.
Also having to post one screenshot at a time due to forum restrictions.
After clicking. The override for when clicked does display the correct colour so I haven’t included a screenshot.
If anywhere on screen is clicked it does reset back to the normal green. FYI there’s no coding and everything is just placeholders for now so no problem if anything has to go or change.
In doing so don’t forget that in Godot the focus property works slightly differently than in perhaps some other systems (or web design in general) that you may have encountered. The focus style isn’t ‘self-sufficient’, it’s an overlay over the normal state. From documentation:
The focus StyleBox is displayed over the base StyleBox, so a partially transparent StyleBox should be used to ensure the base StyleBox remains visible. A StyleBox that represents an outline or an underline works well for this purpose. To disable the focus visual effect, assign a StyleBoxEmpty resource. Note that disabling the focus visual effect will harm keyboard/controller navigation usability, so this is not recommended for accessibility reasons.
Focus mode is set to none however. Also it’s unchecked with an empty style box as well.
Did you also set the stylebox for hover as well?
Empty style box. Also unset. I did have it set at one point however and it seemed to function correctly for hover. Still same issue on click though.
Maybe this has something to do with this running on Android?
Or maybe the stylebox is somehow set to null instead of no override - not sure how or why this would happen though.
My naive approach would be to add (unique) Styleboxes with different colors for each button state to the style overrides and test this to see which state the button is in.
May have to. I could probably fix it in code but I don’t want to start coding from a fix on this issue. It’s not likely to be a public project so no issue if it can’t be fixed. The main issue is I’m getting back into programming after decades and I don’t really want to get into the habit of leaving stuff broken.
Your approach worked. Somehow it wasn’t clear earlier when I had a hover override set but after putting a hover override back in with a different colour it seems it was the culprit. One step closer to having to learn how to code this project lol. Thanks
2 Likes
