My Button (panel sprite) isn't tweening opacity correctly

Hello.

I am using a Button (panel sprite) object.

At the beginning of the scene, I set the Opacity to 0.

image

Later, I want the opacity to tween to 255.

However, when that event is triggered, the object only fades in slightly

However, when I hover over it, it shows up fully

Ay ideas how to fix it?

How do you set the opacity when the mouse hovers over it? Explicitly through events or with an extension?

I didn’t set that opacity.

I just set the opacity for the entire object.

The object type (Button Panel Sprite) has a hover animation (as well as an Idle animation and a Pressed animation)

I’ve had a similar experience with scaling from 0. I ended up solving that by setting the initial scale to a very small number. What happens if you set the initial opacity to 0.01 instead of 0?

This might be much more than you’re interested in but it gives perspective for you and to others who might have this issue. Learning how things work helps with the bigger picture.

Panel sprite buttons are custom or prefab objects. You can open the object in the extensions list. It might be simpler to as a sprite object instead of a button.

The buttons are made of 4 objects (children). The 3 states and a text object.

I played with the opacity setting. You can adjust the object opacity which affects all of the children objects. You can also adjust the children’s opacity value of each object from with the functions.

The opacity for the button object and the object’s children is additive. It’s like having a main dimmer switch while the lights also have their own dimmer switches. You can adjust the main voltage but the lights are limited to their light switch values.

This is my test project. The left slider adjusts the button opacity while the right adjusts the object’s children opacity.
ScreenRecorderProject35

The button itself uses tweens to change states. So, while you can adjust the main opacity, the button adjusts the opacity of objects inside it. So, there might be conflicts. It also hides objects.

Example of the do step post events from the button object.

2 Likes

Thank you for that! I’m not sure I understood all of it, though.

How do I change the children’s opacity?

I use the button because it’s the easiest way that I know (so far) to make a ‘Postit’ object where I can easily change the text inside it.

I see now that i can also make my own pre-fab objects! Might be worth a try :slight_smile: Could you point me to somewhere that could help me learn how to do that?

In the end I’m just having the postit note slide in from off-screen. But I’d still like to know how to fix this!

To my knowledge, there’s not much in the way of documentation for prefab objects. The best source is the existing controls themselves. That’s how I learned. The key is you add objects as children and then you place them with the onCreated function. Everything else is mostly the same as a function or behavior. Also, you can decide if the object is part of the collision.

https://wiki.gdevelop.io/gdevelop5/objects/custom-objects-prefab-template/#custom-objects-prefabs

The issue isn’t really the child opacity settings but that the button object hides objects and tweens the opacity to fad between states. It will override the opacity.

The positions are related to the control.

In functions, the children objects show up just like if it was a scene.
image

The animation support within prefabs is limited. You can add animations but not the image. You can choose preexisting images for tiles sprites and panel sprites. The images are mostly added from the main project editor.

1 Like