v4.4.1.stable.official [49a5bc7b6]
I’m creating my own button control, and writing it by extending a BaseButton since the buttons and themes Godot ships with are not flexible enough for this special button. I was wondering if there is a way for me to create a custom theme for my new control? Also, how would I get the inherited things like fonts and principal colors that may be set on parents?
you need to create a theme. create a theme on the first Control.
all children must be Controls, don’t mix controls and other nodes like node2D, as they can break the chain.
all children of a control will inherit the first theme.
in the theme, you create a style for a control, like a button, and all controls of this type will use it. for one that must be different you create a theme_variation, this is a style that you give a custom name and then set a Base that is the control it will inherit from. for example button.
then in the node you need to type the name of the theme_type_variation and it will be applied.
what is it that you need? you never say it.
for animations like hovers and stuff, you can connect the signals to custom functions, and each function would create a tween and change the properties of the node. this is done to animate UI.
for example, you can make the button bigger when the mouse is over it:
func _ready() -> void:
mouse_entered.connect(on_mouse_entered)
mouse_exited.connect(on_mouse_exited)
func on_mouse_entered() -> void:
var tween : Tween = create_tween()
tween.parallel().tween_property(self, "scale", Vector2(1.2, 1.2), 0.1)
func on_mouse_exited() -> void:
var tween : Tween = create_tween()
tween.parallel().tween_property(self, "scale", Vector2(1.0, 1.0), 0.3)
more things can be done with notification and dragndrop and a few more tricks.
again, tell us what you need to do.
Specifically for this button I want it to be circular, but for other controls I have custom drawing I want to do and draggable handles I want to add.
Is there a way to notify the Godot editor that this is meant to be the default theme for this control? It’s going to be a @tool and I want to have multiple instances of it.
Hi, you can add a custom theme to a button since buttons do inherit from Control. Select the button and in the inspector scroll down till you see theme.
You can add a custom theme to any node that inherits from Control. What I did in my project was to set a main theme and font in the project settings. And when ever a node needs a specific style I would just add a theme to that node. It will override the theme for that node and its children.
You can also set a default theme and default font in project settings. Make sure that advanced settings is enabled. Go to Project → Project Settings → GUI → Theme
