How to add a UI image with a transition [solved]

[BlueNinjaMage]

I'm trying to add an image to my UI, an exclamation mark, that appears whenever a certain variable is true.

Code: Select all

screen say(who, what, side_image=None, two_window=False):
    if variable1:
        add "gui/exclamation dark.png" xalign .97 yalign 0.03

I want that image to have a transition wherein it fades in on appearance and out on disappearance, but I haven't had any luck. I've tried the following:

Code: Select all

screen say(who, what, side_image=None, two_window=False):
    if variable1:
        add "gui/exclamation dark.png" xalign .97 yalign 0.03 at exclamationfade

transform exclamationfade:
    on show:
        alpha 0.0
        linear 1.0 alpha 1.0
    on hide:
        alpha 1.0
        linear 1.0 alpha 0.0

However, that just makes it so that every time the user clicks through the text, the image fades in again, so that it's essentially blinking as the user clicks forward. I don't want that. I also tried this:

Code: Select all

transform exclamationfade:
    on show:
        linear 1.0 alpha 1.0
    on hide:
        linear 1.0 alpha 0.0

But that made it so that the image doesn't fade in properly. Not good enough.

I want the image to fade in once when the variable changes to true, then fade out when the variable changes to false. How can I accomplish this?

[Divona]

Check out Showif Statement.

[BlueNinjaMage]

I see how it's supposed to work, but for some reason it doesn't. To be sure, I created a new project with some test code.

Code: Select all

screen exclamation:
    if test_var_exclamation:
        add "exclamation dark.png" at test_var_z

transform test_var_z:
    xalign 0.5 yalign 0.5 alpha 0.0
    on appear:
        alpha 1.0
    on show:
        alpha 0.0
        linear 1.0 alpha 1.0
    on hide:
        alpha 1.0
        linear 1.0 alpha 0.0   

label start:
    $ test_var_exclamation = False
    "I'm gonna activate the icon.  It should fade in when I turn it on, then fade out when I turn it off."
    "Ready?"
    $ test_var_exclamation = True
    "On."
    "Does it stay steady when I keep talking?"
    "It should."
    "Okay."
    $ test_var_exclamation = False
    "Off."
    "How about now?"
    "It should be completely gone."
    return

In this project, every time I clicked forward while test_var_exclamation was True, the image started at 0 alpha then faded in again. It was like the image was constantly playing the show function, without acknowledging appear or hide. When test_var_exclamation was set to False, the image immediately blinked out with no fade. What have I done wrong, and how can I fix it?

[Divona]

What have I done wrong, and how can I fix it?

You haven't use Showif.

Code: Select all

screen exclamation:
    showif test_var_exclamation:
        add "exclamation dark.png" at test_var_z

[BlueNinjaMage]

My transformation still isn't working. Instead of fading out, the image just blinks into existence when test_var_exclamation is set to True and blinks out again when it's set to False. I did this:

Code: Select all

transform test_var_z:
    xalign 0.5 yalign 0.5 alpha 0.0
    on appear:
        alpha 1.0
    on show:
        linear 2.0 alpha 1.0
    on hide:
        linear 2.0 alpha 0.0

screen exclamation:
    showif test_var_exclamation:
        add "exclamation dark.png" at test_var_z

label start:
    $ test_var_exclamation = False
    "I'm gonna activate the icon.  It should fade in when I turn it on, then fade out when I turn it off."
    "Ready?"
    $ test_var_exclamation = True
    "On."
    "Does it stay steady when I keep talking?"
    "It should."
    "Okay."
    $ test_var_exclamation = False
    "Off."
    "How about now?"
    "It should have faded out."
    return

[Divona]

Code: Select all

default test_var_exclamation = False

transform test_var_z:
    xalign 0.5 yalign 0.5
    on show:
        alpha 0.0
        linear 2.0 alpha 1.0
    on hide:
        alpha 1.0
        linear 2.0 alpha 0.0

screen exclamation():
    showif test_var_exclamation:
        add "exclamation dark.png" at test_var_z

label start:
    show screen exclamation

    $ test_var_exclamation = False

    "I'm gonna activate the icon.  It should fade in when I turn it on, then fade out when I turn it off."
    "Ready?"

    $ test_var_exclamation = True

    "On."
    "Does it stay steady when I keep talking?"
    "It should."
    "Okay."

    $ test_var_exclamation = False

    "Off."
    "How about now?"
    "It should have faded out."

    return

[BlueNinjaMage]

I copied and pasted in your code, but I have exactly the same problem. The image just appears and disappears with no fade or any other transition that I can see. For some reason most of showif's parameters are being ignored.

[BlueNinjaMage]

I figured something out and got it to work, but if possible, I'd like someone to explain why it works. I tried this:

Code: Select all

screen say(who, what, side_image=None, two_window=False):
    use exclamation

transform i_did_it_i_guess:
    xalign 0.5 yalign 0.5 alpha 0.0
    on appear:
        alpha 1.0
    on show:
        zoom 0.75
        linear 0.25 zoom 1.0 alpha 1.0
    on hide:
        linear 0.25 zoom 0.75 alpha 0.0

screen exclamation:
    showif test_var_exclamation:
        add "exclamation dark.png" at i_did_it_i_guess
        
label start:
    $ test_var_exclamation = False
    "I'm gonna activate the icon.  It should fade in when I turn it on, then fade out when I turn it off."
    "Ready?"
    $ test_var_exclamation = True
    "On."
    "Does it stay steady when I keep talking?"
    "It should."
    "Okay."
    $ test_var_exclamation = False
    "Off."
    "How about now?"
    "It should have faded out."
    return

When I have it set up like that, the image blinks in and out of existence without any transition. However, my transition worked just fine when I did this:

Code: Select all

transform i_did_it_i_guess:
    xalign 0.5 yalign 0.5 alpha 0.0
    on appear:
        alpha 1.0
    on show:
        zoom 0.75
        linear 0.25 zoom 1.0 alpha 1.0
    on hide:
        linear 0.25 zoom 0.75 alpha 0.0

screen exclamation:
    showif test_var_exclamation:
        add "exclamation dark.png" at i_did_it_i_guess
        
label start:
    show screen exclamation
    $ test_var_exclamation = False
    "I'm gonna activate the icon.  It should fade in when I turn it on, then fade out when I turn it off."
    "Ready?"
    $ test_var_exclamation = True
    "On."
    "Does it stay steady when I keep talking?"
    "It should."
    "Okay."
    $ test_var_exclamation = False
    "Off."
    "How about now?"
    "It should have faded out."
    return

In that iteration, the transformation worked, and it was only because I used "show screen exclamation" instead of "use exclamation". Why is this? I see now that my problem is a lack of understanding of how screens work.

[BlueNinjaMage]

Well, I got what I wanted, and ShowIf was the solution. I'll post my follow-up question in another topic.