[SOLVED] Changing alpha on a button

[goldo]

Hi guys,

I'm trying to set a simple button layout where the alpha on each button changes when it's selected, idle or hovered over.

I want alpha to be:
* 1.0 if the button is selected or hovered
* 0.3 if the button is idle.

I thought this simple screen would do it:

Code: Select all

screen buttons:

    default cl = "warrior.webp"

    vbox xalign 0.5 yalign 0.5:
        hbox:
            for but in ["warrior.webp", "wizard.webp", "trader.webp"]:
                button action (SelectedIf(but == cl), SetScreenVariable("cl", but)):
                    add but yalign 0.5:
                        idle_alpha 0.3
                        hover_alpha 1.0
                        selected_idle_alpha 1.0
                        selected_hover_alpha 1.0

        textbutton "OK" action Return(True)

Unfortunately, this only works until a button is clicked. After that, all buttons raise their alpha up to 1.0 until you hover over them, then unhover again slowly. It's quite a mess.

What am I doing wrong?

[_ticlock_]

Hi goldo,

I would change to imagebuttons and use transform to make a smooth alpha transition. Try this code:

Code: Select all

screen buttons:

    default cl = "warrior.webp"

    vbox xalign 0.5 yalign 0.5:
        hbox:
            for but in ["warrior.webp", "wizard.webp", "trader.webp"]:
                imagebutton:
                    yalign 0.5
                    action (SetScreenVariable("cl", but))
                    idle but
                    selected cl == but
                    at alpha_transform
                    
        textbutton "OK" action Return(True)
        
transform alpha_transform:
    alpha 0.3
    on hover:
        linear 0.25 alpha 1.0
    on idle:
        linear 0.25 alpha 0.3
    on selected_hover:
        linear 0.25 alpha 1.0
    on selected_idle:
        linear 0.25 alpha 0.8

[goldo]

It works! Thank you very much!