[SOLVED] Chaining Simple Animations Without Blocking

[klaim]

I am had some trouble managing to chain two simple animations without blocking the game:

O. all while the game continues to play;
1. add a slow white layer over the current screen, taking it's time;
2. then do a slow but faster fade to black;

I managed to do something very close after hacking a lot using the doc, here is what I have:

Code: Select all

  
    image black = "#000000"
    image white = "#FFFFFF"

    # Somewhere else:
    python:
        white_death_duration = 40.0
        black_death_duration = 10.0
        is_fading_finished = False # Used to know when to change the game's flow later

        def fading_ended(trans, st, at):
            global is_fading_finished
            is_fading_finished = True

   image white_fade:
        "white"
        alpha 0.0
        easein_quint white_death_duration alpha 1.0

    image black_fade:
        "black"
        alpha 0.0
        ease_circ black_death_duration alpha 1.0

    image fainting_fade:
        "white_fade"
        time white_death_duration
        pause 2.0
        "black_fade"
        time black_death_duration
        function fading_ended

    show fainting_fade

Questions:

1. This plays very closely to what I want but it still fail to have the black fade over the white one. It does play but I detect it's end using the "is_fading_finished" boolean, but it is not visible probably because it's behind the white image. I didn't find a way using ATL to force a front position. I wanted to place "abovemid" somewhere to set "black" but can't find where to put it in the ATL syntax.

2.Is there a simpler way to do this? I have tried several things using this page: https://www.renpy.org/doc/html/atl.html
But failed to get exactly the right chaining. I had to add the "time" in particular because I didn't maange to make events or other instructions work as expected to either not execute the animations in parallel OR to let me know when one of the animation is done so that I can launch the following one.
Basically this looks like a lot of scafholding for something that appear simple to me (after having used all the other animation tools that are very powerful in Renpy)
so maybe I missed something or misunderstood?

[Qlara]

Probably not the most elegant, but is that the effect you want:

Code: Select all

    image to_white:
        "#FFFFFF"
        alpha 0.0
        linear 10 alpha 1.0

    image to_black:
        "#000000"
        alpha 0.0
        pause 10
        linear 5 alpha 1.0 

    image white_to_black = LiveComposite(
                (1280, 720), 
                (0,0), "to_white",
                (0, 0), "to_black",
                )    

Code: Select all

show white_to_black
pause

[klaim]

Thanks for helping. I didn't know LiveComposite.

However this seems to make both animations play in parallel while I would like them to happen one after the other.
Also I need to trigger some code when the whole chain of animation is finished, which don't seem doable with LiveComposite?

[Qlara]

[I added a "pause" to the lower code.]
They don't play parallel, because there is "pause 10" under "to_black" (whereby 10 is the duration of the white animation, so you replace all 10s with 40s).
Give it try, I'm pretty sure, that's what you wanted.

[klaim]

Ah I didn't copy the pause because I wanted to try with my own images but indeed it works, it makes the second image wait for a time matching the first animation.
Thanks it seems to work as expected.
There seems to be visual artifacts but I think it's coming from the coordinates or ui manipulations I'm doing.

What's bad is that each time I want to add an animation in the chain, I have to do some calculation to estimate when to launch the next one.
That's why I was wondering if there was a more convenient automated way to just chain animations.

Here is how I rewrote my initial code following your example (using time instead of pause to make the code clearer):

Code: Select all

    python:
        white_death_duration = 40.0
        black_death_duration = 10.0
        white_to_black_pause_duration = 2.0
        total_fainting_max_duration = white_death_duration + black_death_duration + white_to_black_pause_duration
        max_sentences = 40
        is_fading_finished = False

        def fading_ended(trans, st, at):
            global is_fading_finished
            is_fading_finished = True

    image white_fade:
        "white"
        alpha 0.0
        easein_quint white_death_duration alpha 1.0

    image black_fade:
        "black"
        alpha 0.0
        time (white_death_duration + white_to_black_pause_duration)
        ease_circ black_death_duration alpha 1.0

    image fainting_fade:
        # "white_fade"
        # time white_death_duration
        # pause 2.0
        # "black_fade"
        # time black_death_duration
        LiveComposite(
                (config.screen_width, config.screen_height), # cover the whole screen, text included
                (0, 0), "white_fade",
                (0, 0), "black_fade",
                )
        time total_fainting_max_duration
        function fading_ended


    show fainting_fade

[Qlara]

I had some spelling errors, but I see you fixed them yourself.
I'm not sure what you mean by chaining animations and where problems remain, but you can add conditionals to the live composite. I can't test now and I'm guessing the syntax a little, just so you can see whether perhaps LiveComposite might work for you after all.

Code: Select all

image fainting_fade = LiveComposite(       # don't forget the opening bracket and all the commas
                (1280, 720),            # the overall size of the composite image (I picked my screen size)
                (0, 0), "white_fade",       # coordinates and name of composite layer image)
                (0, 0), ConditionSwitch(       # basically an if-statement 
                "(is_fading_finished==True) and (time <= 10), "black_fade",    # if is_fading_finished is True AND time smaller 10, then show black_fade
                "(time > 10) or ( is_fading_finished != True), "images/red.png"   # else (time bigger 10 OR is_fading_finished is False) then show red image
                ),                                                                # or animation or whatever you wish
                )

[Qlara]

Oh, and one more thing: "visual artifacts" for me always disappear after I delete the cache folder.

[Qlara]

Maybe I get it now. I'm working on sth similar. I have two animations, cracking and bloodsplatter:

Code: Select all

   image cracking:
        "images/efk/crack b.png" 
        .3
        "images/efk/crack c.png" 
        .2
        "images/efk/crack d.png" 
        .3 
        "images/efk/crack e.png" 
        .2
    image bloodsplatter:
        "images/efk/blood b.png" 
        .6
        "images/efk/blood c.png" 
        .6
        "images/efk/blood d.png" 
        .6
        "images/efk/blood e.png" 
        .6

I want them to be executed one after another and it works fine with:

Code: Select all

show cracking 
pause 1.0 # it doesn't seem to matter whether I use 1.0 or 0.1, but this seems to ensure they are played consecutively
show bloodsplatter

[klaim]

I had some spelling errors, but I see you fixed them yourself.
I'm not sure what you mean by chaining animations and where problems remain, but you can add conditionals to the live composite. I can't test now and I'm guessing the syntax a little, just so you can see whether perhaps LiveComposite might work for you after all.

Code: Select all

image fainting_fade = LiveComposite(       # don't forget the opening bracket and all the commas
                (1280, 720),            # the overall size of the composite image (I picked my screen size)
                (0, 0), "white_fade",       # coordinates and name of composite layer image)
                (0, 0), ConditionSwitch(       # basically an if-statement 
                "(is_fading_finished==True) and (time <= 10), "black_fade",    # if is_fading_finished is True AND time smaller 10, then show black_fade
                "(time > 10) or ( is_fading_finished != True), "images/red.png"   # else (time bigger 10 OR is_fading_finished is False) then show red image
                ),                                                                # or animation or whatever you wish
                )

I didn't know that possibility! I note it in case I will need it.

For the chaining animation problem, what I mean is that other than timing the animations so that they appear to play one after the other, we don't have a way to say

1. play this animation
2. then play this other animation
3. then this other animation

Something simple that would just be a sequence of animations. Maybe something like:

Code: Select all

image animation_sequence:
    "animation_1"  # which is an image with an animation
    then  # only do the next after the previous lines are done
    "animation_2"
    then
    "animation_3

Here I'm assuming that while the animations are playing, the game continues, aka the player can click to continue in the text etc, the animation just play in background.

Currently I only know how to play animations "in parallel" and in background. I don't know how to make them wait for each other so that they appear to "chain".b
Well, not in an "elegant" way. Having to calculate time of each animation start time is not what I call "elegant" ^^

[klaim]

Oh, and one more thing: "visual artifacts" for me always disappear after I delete the cache folder.

Ah maybe, but here I think it was just that the screen resolution of my game was not the same as the one you set in your example, so I just used the config values instead of looking at the current resolution, so that it adapts, and it took the whole screeen. I think in your case you didn't take the same of the text, but I want really the whole screen.

[klaim]

Maybe I get it now. I'm working on sth similar. I have two animations, cracking and bloodsplatter:

Code: Select all

   image cracking:
        "images/efk/crack b.png" 
        .3
        "images/efk/crack c.png" 
        .2
        "images/efk/crack d.png" 
        .3 
        "images/efk/crack e.png" 
        .2
    image bloodsplatter:
        "images/efk/blood b.png" 
        .6
        "images/efk/blood c.png" 
        .6
        "images/efk/blood d.png" 
        .6
        "images/efk/blood e.png" 
        .6

I want them to be executed one after another and it works fine with:

Code: Select all

show cracking 
pause 1.0 # it doesn't seem to matter whether I use 1.0 or 0.1, but this seems to ensure they are played consecutively
show bloodsplatter

That would work, but show imply that it's not in the background right? Like the player can't play while it's showing?
I didn't try yet but if that works, and if I can put it in ATL so that it's grouped in one image, then that would solve my problem indeed.

[hampnie hambart]

I know that they are going to consider me a rookie and I am, I can not deny it but they could explain to me how these commands work.