Tweenable Texture Button

Help UI
,
1

Godot Version

Godot 4.2.2

Question

I need to extend TextureButton’s functionality. Right now, I can set the textures just fine and when I hover or press, the button’s textures change as expected. However the change is immediate and I want to introduce a small cross-fade effect, so the button texture doesn’t suddenly jump, but blends into the next texture.

I tried inheriting from TextureButton. I can access each texture individually (Normal, Hover, Pressed, etc), but I don’t know how to blend them and display them on the button, since there is no access to the underlying “display” texture.

Also, the button is non-squared, so I need to use the click mask capabilities of TextureButton.

Any help is truly appreciated

2

There’s some Tween code

private Tween tween;
...
// you cannot set new tween or add new calls while is running
if (tween?.IsValid() == true)
			tween.Kill();
		tween = CreateTween();

...
// Some tween demo methods

tween.TweenCallback(Callable.From(() => Text = "String")); // change script variable
tween.TweenCallback(Callable.From(() => GetNode<MyNode>("../MyNode").Play())); // play method
tween.TweenInterval(20f); // is wait
tween.TweenProperty(this, "visible", false, 0f); // change property in node
tween.TweenProperty(GetNode("Sprite2D"), "modulate:a8", 0, 0.04f); // change alpha color 
tween.TweenCallback(Callable.From(QueueFree)).SetDelay(1f) // call method with delay
3

Thanks. I’m aware of how to make tweens. The problem is doing it on the TextureButton so the textures are blended when the button is pressed or when the mouse hovers over the button.

I’ve been looking at Godot’s source code and apparently there’s no direct way of doing it other than either editing the source code itself or doing something layered with a bunch of controls.

4

maybe control with signals?

5

You could create a shader which just transitions from one texture to another.

And then control the shader params via the tween.

Or

Create two tweens with a function inbetween

  1. Tween that fades out the alpha of the material.
  2. Use the finished state of the first tween to start a new function which swaps the material.
  3. Tween that fades in the alpha of the material.