How to make transforms happen in sequence when showing a screen? [Solved]

[Asarus]

Dear transforms and screen wizards.

I've tried to figure this out for two days now, and not succeeded. My troubleshooting hasn't yielded results.

I have modified the choice screen, screen choice(items), to make it prettier. I'm trying to display four images when the screen is shown, each with its own transform.

I want them to happen in sequence, like this:
1. A dark overlay fades in
2. Two frames simultaneously slide in, one at the top and one at the bottom bottom
3. A composite image of the protagonist fades in in the middle
[The choice menu appears]

What actually happens when the screen is shown:
1. The dark overlay and the protagonist image instantly appear
2. The two frames slide in as they're intended to
[The choice menu appears]

I suspect that the different ATLs somehow interfere with each other, making the fading ATLs skip their visible transformation and just jump to their end states.

Is there a way to make these things happen in sequence? I've tried various ways to pause or wait in between the adding of the images, but they either aren't right for use on a screen or the screen just ignores them.

Here's my code.

The choice screen:

Code: Select all

screen choice(items):

    add ImageReference("background_dimming") at normalfade
    add ImageReference("choice_overlay_left") at qei(offscreenleft, left, 0.5)
    add ImageReference("choice_overlay_right") at qei(offscreenright, left, 0.5)
    add ImageReference("choice_protagonist") at protagchoice

    style_prefix "choice"

    vbox:
        #text "[choice_exp]" ## Only to check if the status changes properly.
        for i in items:
            if "¦" in i.caption:
                $ caption_parts = i.caption.split ("¦")
                textbutton caption_parts[1]:
                    hovered SetVariable("choice_head", "{}".format(caption_parts[0]))
                    unhovered SetVariable("choice_head", "worried1")
                    action i.action
            else:
                textbutton i.caption action i.action

## When this is true, menu captions will be spoken by the narrator. When false,
## menu captions will be displayed as empty buttons.
define config.narrator_menu = True

style choice_vbox is vbox
style choice_button is button
style choice_button_text is button_text

style choice_vbox:
    xalign 0.5 #Old: 0.5
    ypos 615 #Old: 405
    yanchor 0.5 #Old: 0.5

    spacing gui.choice_spacing

style choice_button is default:
    properties gui.button_properties("choice_button")
    hover_sound "sfx/click.wav" #This makes the button click when it is hovered

    #activate_sound "sfx/click.wav" #This makes the button click when you click it

style choice_button_text is default:
    properties gui.button_text_properties("choice_button")

The transforms:

Code: Select all

init:
    transform protagchoice:
        xalign 0.5
        ypos -0.05
        zoom 0.5
        on show:
            alpha 0.0
            linear 0.5 alpha 1.0
        on hide:
            alpha 1.0
            linear 0.5 alpha 0.0

    # This fades in an image.
    transform normalfade:
        on show:
            alpha 0.0
            linear 0.5 alpha 1.0
        on hide:
            alpha 1.0
            linear 0.5 alpha 0.0

    # Moves an image onto the screen, quick ease in ("qei")
    transform qei (start, end, time):
        subpixel True
        start
        easein time end

In case you want to know, this is what it looks like once the screen is displayed:

[Jackkel Dragon]

I don't know the answer since this looks more complex than what I've tried, but I have some notes:

Firstly, something I also forget sometimes is that screen code is run during prediction, so the "on show" stuff might be happening before the game actually displays the screen. (Try putting $ print("texthere") in screen code and see how often it shows in the console versus actual log text commands.) That may be part of the problem here.

A thing I recently discovered myself: screen language has a "transform" displayable that takes one child. I've been able to get a pseudo-"on show" transform for screen displayables that way. Not sure about hiding yet, though...

An example would be:

Code: Select all

transform:
    xoffset 800
    linear 0.25 xoffset 0
    frame:
        ## etc.

[Alex]

....What actually happens when the screen is shown:
1. The dark overlay and the protagonist image instantly appear
2. The two frames slide in as they're intended to
[The choice menu appears]
...

Try to add some delay in 'protagchoice' transform to make character image appear after background and two frames, like

Code: Select all

transform protagchoice:
        xalign 0.5
        ypos -0.05
        zoom 0.5
        on show:
            alpha 0.0
            0.5 # < ---
            linear 0.5 alpha 1.0
        on hide:
            alpha 1.0
            linear 0.5 alpha 0.0

[Asarus]

I don't know the answer since this looks more complex than what I've tried, but I have some notes:

Firstly, something I also forget sometimes is that screen code is run during prediction, so the "on show" stuff might be happening before the game actually displays the screen. (Try putting $ print("texthere") in screen code and see how often it shows in the console versus actual log text commands.) That may be part of the problem here.

A thing I recently discovered myself: screen language has a "transform" displayable that takes one child. I've been able to get a pseudo-"on show" transform for screen displayables that way. Not sure about hiding yet, though...

An example would be:

Code: Select all

transform:
    xoffset 800
    linear 0.25 xoffset 0
    frame:
        ## etc.

Thanks for the tip, Jackkel Dragon! I don't quite get how this transform works. Where do you put it? In the screen's code? If I do that, I get an error saying "linear" is not a keywoord argument or valid child for the transform statement. Can you show me how it looks in your code?

....What actually happens when the screen is shown:
1. The dark overlay and the protagonist image instantly appear
2. The two frames slide in as they're intended to
[The choice menu appears]
...

Try to add some delay in 'protagchoice' transform to make character image appear after background and two frames, like

Code: Select all

transform protagchoice:
        xalign 0.5
        ypos -0.05
        zoom 0.5
        on show:
            alpha 0.0
            0.5 # < ---
            linear 0.5 alpha 1.0
        on hide:
            alpha 1.0
            linear 0.5 alpha 0.0

Thanks for the suggestion, Alex!

Unfortunately, the delay goes ignored, so it still skips to the transform's end state instead of showing it actually happen.

[Jackkel Dragon]

Maybe I've not attempted to use ATL properties directly in the screen language transform displayable... I figured that would be allowed, but maybe it isn't. For now, here's the code I currently have that uses screen language's transform displayable:

Code: Select all

transform ds_status_swapin:
    xoffset 800 yoffset -600
    ease 0.2 xoffset 0 yoffset 0

screen ds_status():
    transform:
        at ds_status_swapin
        frame:
            style "ds_status_main_frame"
            xalign 0.5
            yalign 0.5

            frame:
                background None
                xsize 320
                ysize 392
                add "chibi"+ds_player_character._id:
                    xalign 0.5
                    yalign 0.5
                    zoom 0.4

When this screen is displayed, its top-level frame (which is still a child of the transform displayable) is set to be at the center of the screen. (I cut most of the children out for this demo.) The transform displayable is taking the "at [transform]" I gave it and applying it to the top-level frame and its children. So, my understanding of a generic version of the statement would be:

Code: Select all

transform:
	at my_transform ## OR at my_transform, my_transform2, etc. for a longer "at_list"
	frame: ## or other main child displayable for the screen that contains everything affected by the above transform
		## children here

I haven't tried much with "on show" and "on hide" stuff in my transforms and don't know how exactly they work, but I get the feeling that since they are part of the transform object they should work fine here.

[Alex]

Unfortunately, the delay goes ignored, so it still skips to the transform's end state instead of showing it actually happen.

Don't know why does it act like this, but get rid of "on show" block.

Code: Select all

image long_blue:
    Solid("#00c")
    size(900, 100)
    
image big_red:
    Solid("#c00")
    size(400, 400)
    
transform my_slide_tr (x_algn, y_algn, t=0.5):
    pos(x_algn, y_algn) anchor(1.0-x_algn, y_algn)
    linear t xanchor x_algn
    
    on hide:
        linear t xpos (1.0 - x_algn)
    
transform fade_in_tr (t_delay=1.5, t=0.5):
    align(0.5, 0.5)
    alpha 0.0
    t_delay
    linear t alpha 1.0
    
    on hide:
        linear 1.5 alpha 0.0

transform menu_buttons_out(t_delay=2.0, t=0.5):
    alpha 0.0
    offset(config.screen_width, config.screen_height) # to prevent player from clicking on transparent choices
    t_delay
    offset (0, 0)
    linear t alpha 1.0
    
    on hide:
        linear t alpha 0.0
    
screen choice(items):
    add "long_blue" at my_slide_tr(1.0, 0.0)
    add "long_blue" at my_slide_tr(0.0, 1.0)
    
    add "big_red" at fade_in_tr
    
    style_prefix "choice"

    vbox:
        at menu_buttons_out
        for i in items:
            textbutton i.caption action i.action

Code: Select all

# The game starts here.
label start:
    "..."
    menu:
        "Choice 1":
            pass
        "Choice 2":
            pass
        "Choice 3":
            pass
            
    "?!"

[Asarus]

Don't know why does it act like this, but get rid of "on show" block.

Hey, it worked! I used the code you suggested, and the transforms are just as I intended them to now. The example was great. Not only do the images appear in sequence, their "on hide" parts also work properly. Thanks so much for helping me, I bow to your ATL magnificence!

Maybe I've not attempted to use ATL properties directly in the screen language transform displayable... I figured that would be allowed, but maybe it isn't.

Hi, Jackkel Dragon! Alex solved my problem with ATL that's way more advanced than mine. But thanks so much for taking the time to help me, I appreciate it a lot!