Making a Custom Transition Using .png Images?

[Katy133]

I'm trying to create a custom transition that's basically like a fade out/to black, but using animated .png images.

These are the defined images:

Code: Select all

#Least dark-tinted image:
image transblack1 = "images/backgrounds/transition_1.png"
#Slightly darker:
image transblack2 = "images/backgrounds/transition_2.png"
#Medium dark:
image transblack3 = "images/backgrounds/transition_3.png"
#Very dark tint:
image transblack4 = "images/backgrounds/transition_4.png"
#Darkest:
image transblack5 = "images/backgrounds/transition_5.png"

Please note that the above images are semi-transparent. The scene backgrounds need to stay visible beneath them.

This is how "customfade" looks--A fade from black to the 'background scene image'. I'll use 'forest' as an example here:

Code: Select all

start:
    scene black
    with Pause(0.2)
    hide black   
    show transblack5
    show forest behind transblack5
    with Pause(0.2)
    hide transblack5
    show transblack4
    with Pause(0.2)
    hide transblack4
    show transblack3
    with Pause(0.2)
    hide transblack3
    show transblack2
    with Pause(0.2)
    hide transblack2
    show transblack1
    with Pause(0.2)
    hide transblack1
    #This shows a black screen for a second:
    show black
    with Pause(0.2)
    show transblack1
    with Pause(0.2)
    hide transblack1
    show transblack2
    with Pause(0.2)
    hide transblack2
    show transblack3
    with Pause(0.2)
    hide transblack3
    show transblack4
    with Pause(0.2)
    hide transblack4
    show transblack5
    with Pause(0.2)
    scene forest

How do I properly define this so that I can use this same animation as a transition so I can using this multiple times throughout the visual novel?

This is how I want it to appear in the script.rpy file:

Code: Select all

start:
    scene city
    "Dialogue text."
    scene forest with customfade
    "Narration text."

[Katy133]

I've been doing some more experimenting, and I've learned that I can define this as a custom image rather than a transition:

Code: Select all

image customin:
    "images/backgrounds/transition_1.png"
    pause .2
    "images/backgrounds/transition_2.png"
    pause .2
    "images/backgrounds/transition_3.png"
    pause .2
    "images/backgrounds/transition_4.png"
    pause .2
    "images/backgrounds/transition_5.png"
    pause .2
    "black"
    pause .2

image customout:
    "images/backgrounds/transition_5.png"
    pause .2
    "images/backgrounds/transition_4.png"
    pause .2
    "images/backgrounds/transition_3.png"
    pause .2
    "images/backgrounds/transition_2.png"
    pause .2
    "images/backgrounds/transition_1.png"
    pause .2
    Null ()
    pause .2

Then I use it to transition scenes like this:

Code: Select all

    scene city
    e "You've created a new Ren'Py game."
    show customin
    pause 1.2
    scene forest behind customin
    show customout

It achieves roughly what I want, but how do I create the same effect as a custom/defined transition, rather than as an animated image? Please help!

[Donmai]

I don't know exactly how, but maybe you could find a way to use your animated image in an ATL transition?
viewtopic.php?f=32&t=14678

[Katy133]

I've tried this, but the problem I have now is that the transition replaces the backgrounds with the .png files, instead of placing the .png files on top of the scenes. Any advice?

Code: Select all

#Custom transition:
transform customtrans (new_widget, old_widget):
    delay 4.5
    
    contains:
        old_widget
        "images/backgrounds/transition_1.png"
        pause .2
        "images/backgrounds/transition_2.png"
        pause .2
        "images/backgrounds/transition_3.png"
        pause .2
        "images/backgrounds/transition_4.png"
        pause .2
        "images/backgrounds/transition_5.png"
        pause .2
        "black"

        
    contains:
        new_widget
        "images/backgrounds/transition_5.png"
        pause .2
        "images/backgrounds/transition_4.png"
        pause .2
        "images/backgrounds/transition_3.png"
        pause .2
        "images/backgrounds/transition_2.png"
        pause .2
        "images/backgrounds/transition_1.png"
        pause .2
        Null ()
        pause .2

[Scribbles]

Oh, you can use the loop and linear stuff (sorry I'm not super good at this code) This is code I used to make text fade in and out, but maybe you can toy with it a bit. you would use the at so

Code: Select all

show image at custom_transform #but the name of your transform lol

I'm pretty sure you could design what you're saying if you mess with the blocks and parallels, you can apply multiple transforms into a callable block maybe? (since you mentioned multiple images) I think you can add images to the block I'm just not 100% sure on the way you would, but the links I posted will probably have more

Code: Select all

    transform text_effect:
        parallel: #The parallel statement is used to define a set of ATL blocks to execute in parallel.
            block:
                alpha .2 #you can use alpha 0 to 1.0 to fade images in and out
                linear 1.0 alpha .9 ##linear is a wrapper that controls how the time is passed -- https://www.renpy.org/doc/html/atl.html#warpers
                linear 1.0 alpha .2
                repeat ## repeats, and I believe you can control how many times it repeats -- https://www.renpy.org/doc/html/atl.html#repeat-statement

[Scribbles]

I've tried this, but the problem I have now is that the transition replaces the backgrounds with the .png files, instead of placing the .png files on top of the scenes. Any advice?

Code: Select all

#Custom transition:
transform customtrans (new_widget, old_widget):
    delay 4.5
    
    contains:
        old_widget
        "images/backgrounds/transition_1.png"
        pause .2
        "images/backgrounds/transition_2.png"
        pause .2
        "images/backgrounds/transition_3.png"
        pause .2
        "images/backgrounds/transition_4.png"
        pause .2
        "images/backgrounds/transition_5.png"
        pause .2
        "black"

        
    contains:
        new_widget
        "images/backgrounds/transition_5.png"
        pause .2
        "images/backgrounds/transition_4.png"
        pause .2
        "images/backgrounds/transition_3.png"
        pause .2
        "images/backgrounds/transition_2.png"
        pause .2
        "images/backgrounds/transition_1.png"
        pause .2
        Null ()
        pause .2

I should have read this first > <

you can place the animation you want under a label and call it, I did something like that with an affection indicator. I'm sorry > < I wish I had a better answer

[Katy133]

you can place the animation you want under a label and call it, I did something like that with an affection indicator. I'm sorry > < I wish I had a better answer

I'm actually trying to avoid using an animated image label (see my second post from the top) because I want to replace four lines of code* for one simple transition, so that it's a lot simpler and cleaner every time I make a transition in the game.

*The four lines of code from my second post:

Code: Select all

    show customin
    pause 1.2
    scene forest behind customin
    show customout

Any tips?

[Scribbles]

oh, a callable block, like this:

Code: Select all

label my_transition:
    ## your code with the effect you want to replicate
    show customin
    pause 1.2
    scene forest behind customin #scene will place the image at the top layer I think, you could try show if you still have issues? show forest behind customin
    show customout
    return

then within your code:

Code: Select all

label start:
    "stuff happens"
    call my_transition
    "more stuff happens"

Does that help? I may not fully understand what you want > < if you're wanting to use the same effect with several different images the only way I could think to do that is to define a function that takes strings as a parameter and then converts the strings into expressions that call the right images (but I am not 100% how to do that...... or if it would even work.) I'm not sure why your transform isn't working the way you want or why it's covering up the original image? Hopefully you can get it working

[Katy133]

Does that help? I may not fully understand what you want > < if you're wanting to use the same effect with several different images the only way I could think to do that is to define a function that takes strings as a parameter and then converts the strings into expressions that call the right images (but I am not 100% how to do that...... or if it would even work.) I'm not sure why your transform isn't working the way you want or why it's covering up the original image? Hopefully you can get it working

I'm trying to create a custom transition that visually looks the same as "customfade" (its full code is in the original post), but is a custom transition, rather than a custom image (as it's re-coded in the second post).

The trouble with the callable block is that it is not a true transition. It can only be used if I transition to a "forest" background, rather than any background. I'd have to create a different callback for each background, which would cause a lot of issues if backgrounds were added/changed.

The ATL seemed to be on the right track, but I'm having trouble overlaying the .png files on top of the first scene and then on top of the scene we're transitioning to ('old_widget' and 'new_widget').

[Remix]

You might do best with a DynamicDisplayable using a function as the first parameter...

Sample code fly-typed, so might need a tweak or two

Code: Select all

init python:

    def animate_image(st, at, *args, **kwargs):
        step = round( st / kwargs['repeat'] )
        if step >= len( kwargs['range'] ):
            return kwargs['image'].format( frame = kwargs['range'][-1] ), None
        return kwargs['image'].format( frame = kwargs['range'][ step ] ), kwargs['repeat']

    def animate_image_predict(*args, **kwargs):
        return [ kwargs['image'].format( frame = kwargs['range'][ k ]  ) for k  in range( len( kwargs['range'] ) ) ]

image customin = DynamicDisplayable(
                            animate_image,
                            _predict_function = animate_image_predict,
                            image = "images/backgrounds/transition_{frame}.png",
                            range = [1,2,3,4,5],
                            repeat = 0.2)

image customout = DynamicDisplayable(
                            animate_image,
                            _predict_function = animate_image_predict,
                            image = "images/backgrounds/transition_{frame}.png",
                            range = [5,4,3,2,1],
                            repeat = 0.2)

Though that doesn't include the 'black' bit it should handle the animation fine and be usable like any other image.

[Katy133]

You might do best with a DynamicDisplayable using a function as the first parameter...

Sample code fly-typed, so might need a tweak or two

DynamicDisplayables (as far as I can find from tweaking) does not support adding 'new_widget' and 'old_widget' to it (like ATL does), so it only allows me to call it in the script.rpy as an image:

Code: Select all

start:
    scene city
    "Dialogue text."
    show customin
    scene forest behind customin
    show customout
    "Dialogue text."

Rather than what I'm trying to get, which is a custom transition:

Code: Select all

start:
    scene city
    "Dialogue text."
    scene forest with customfade
    "Dialogue text."

With the previous idea of using ATL, I have the animated .png files showing up, but I'm having trouble overlaying the .png files on top of 'old_widget' and 'new_widget' (the first scene and then the scene to transition to).