Ren'Py How to transition from one scene to another

[coffeeaddicted]

So here is what i want to accomplish.

Even if a player skips or hits enter, the transition should go smoothly.

If you picture this for a moment.

Scene is ending, music is fading out, screen is getting black. New screen shows slowly with a title, music starts, screen dims and a new scene is starting.

So far, i haven't accomplished that.
I don't want to hamper the player in any way but make it appear smoothly.

This is the code i am using. I did try several options before but either the music isn't stopping at the right time or the screen just comes on in an instant having no smooth transition. Is that even possible?

define slow_dissolve = Dissolve(5.0)
define fadehold = Fade(0.5, 1.0, 0.5)


# ending scene
   stop music fadeout 2.0

    e "Bsss....."
    s "ah...."

    scene
    show black
    with fadehold

    jump morningday02

#new scene

label morningday02:

    play music "audio/somemusic.mp3" fadein 2.0 volume 0.5

    scene
    show morning
    with slow_dissolve
    show black

    scene
    show morning01
    with fade

Thanks. If that isn't really possible, it's ok. But that would be really great if it did. I think.

As for the music to fade at the right moment, i usually place it at the second last dialog line. This seems to give enough time to fade out. Depending on the player though

 

[79flavors]

The "normal" route would be with dissolve and with fade. Other transitions tend to be longer and therefore more intrusive for the player.

with fade tends to be used when moving from one area to another. Room to room, building to building, zone to zone. Whatever makes sense for your game.
Whereas with dissolve tends to be used for transitions from one image to another within the same location.

You also seem to have picked up a habit of mixing show and scene statements. That's not really how it works. Usually scene is used for full screen images and show is used for smaller images, icons or sprites. overlayed onto the fullscreen image shown by the scene. Your use is probably the cause of your transitions not quite working how you expect. When in doubt, use scene.


Aim for something like:

label start:

    scene black with fade

    centered "*** START ***"

    scene intro_s01_001 with fade
    "Hello and welcome to the game."

    scene intro_s01_002 with dissolve
    "Blah, blah, Patreon, blah, blah, Paypal..."

    scene intro_s01_003 with dissolve
    "Have fun playing."

    scene intro_s02_001 with fade
    menu:
        "Are you over the age of adult consent in the country/province you live in?"
        "Yes":
            pass
        "No":
            "This game isn't really suitable for you then. Bye."
            $ renpy.quit()

    scene intro_s03_001 with fade
    "Now we have that out of the way... let's continue..."

    # and so on....

with pixellate tends to get dragged out with dream sequences.

I would avoid show black, since that is effectively dumping a black empty image on top of the current scene image.

My image names are things like "intro_s01_001" to be sort of "Intro Chapter", "Scene 1", "Image 1". But images can be named pretty much anything.

 

[coffeeaddicted]

The "normal" route would be with dissolve and with fade. Other transitions tend to be longer and therefore more intrusive for the player.

with fade tends to be used when moving from one area to another. Room to room, building to building, zone to zone. Whatever makes sense for your game.
Whereas with dissolve tends to be used for transitions from one image to another within the same location.

You also seem to have picked up a habit of mixing show and scene statements. That's not really how it works. Usually scene is used for full screen images and show is used for smaller images, icons or sprites. overlayed onto the fullscreen image shown by the scene. Your use is probably the cause of your transitions not quite working how you expect. When in doubt, use scene.


Aim for something like:

label start:

    scene black with fade

    centered "*** START ***"

    scene intro_s01_001 with fade
    "Hello and welcome to the game."

    scene intro_s01_002 with dissolve
    "Blah, blah, Patreon, blah, blah, Paypal..."

    scene intro_s01_003 with dissolve
    "Have fun playing."

    scene intro_s02_001 with fade
    menu:
        "Are you over the age of adult consent in the country/province you live in?"
        "Yes":
            pass
        "No":
            "This game isn't really suitable for you then. Bye."
            $ renpy.quit()

    scene intro_s03_001 with fade
    "Now we have that out of the way... let's continue..."

    # and so on....

with pixellate tends to get dragged out with dream sequences.

I would avoid show black, since that is effectively dumping a black empty image on top of the current scene image.

My image names are things like "intro_s01_001" to be sort of "Intro Chapter", "Scene 1", "Image 1". But images can be named pretty much anything.

Oh my. My mistakes...lol

Yes, that seems to be better.
I have to go back to the drawing board anyway because i feel i did everything wrong.
Not a problem. This gives me also the opportunity to clean up mistakes like that.

Though i always thought you had to write.

scene
show something
with something

So in one line, that's new to me.
But your seems cleaner so i will do it like that as well.

Oh yes, the black screen.
I used it because i had the problem that when i went from one scene to the other, there was transparency visible for some reason but i think it's because i used scene.

Thank you so much. I know so little so i am really thankful for that.

 

[79flavors]

So in one line, that's new to me.

Both work.

    scene my_image_001 with dissolve

    # or

    scene my_image_001
    with dissolve

It was only mixing it up with show that was likely causing your problems.

[...] I went from one scene to the other, there was transparency visible for some reason but i think it's because i used scene.

This is usually because there wasn't a scene preceding a show.

To my mind, scene sets the baseline/background image. It also clears the display space of all other previous scenes and images.

In your case, you were doing this:

    scene                    # clear previous scene. Show image with no name (nothing/transparency)
    show black               # show image "black" on top of the transparency.
    with {transition}        # ... but do it slowly, while transitioning from old image (transparency) to new image (black).

    scene                    # clear previous scene.
    show morning             # show image "morning" on top of the transparency
    with {transition}        # ... but do it slowly, while transitioning from transparency to "morning".
    show black               # then dump "black" on top of the "morning" image, effectively hiding it.

    scene                    # clear previous scene.
    show morning01           # show image "morning01" on top of the transparency
    with {transition}        # ... but do it slowly, using transition like before.

The usual bad habit devs copy from somewhere is to only use 1 single scene statement (or none) and then do everything else with show statements (some will use hide too) within their script.
Unless you are using sprites (usually cut-out character upper bodies and faces shown against the background image), there is rarely a need to use show at all.

 

[coffeeaddicted]

Both work.

    scene my_image_001 with dissolve

    # or

    scene my_image_001
    with dissolve

It was only mixing it up with show that was likely causing your problems.




This is usually because there wasn't a scene preceding a show.

To my mind, scene sets the baseline/background image. It also clears the display space of all other previous scenes and images.

In your case, you were doing this:

    scene                    # clear previous scene. Show image with no name (nothing/transparency)
    show black               # show image "black" on top of the transparency.
    with {transition}        # ... but do it slowly, while transitioning from old image (transparency) to new image (black).

    scene                    # clear previous scene.
    show morning             # show image "morning" on top of the transparency
    with {transition}        # ... but do it slowly, while transitioning from transparency to "morning".
    show black               # then dump "black" on top of the "morning" image, effectively hiding it.

    scene                    # clear previous scene.
    show morning01           # show image "morning01" on top of the transparency
    with {transition}        # ... but do it slowly, using transition like before.

The usual bad habit devs copy from somewhere is to only use 1 single scene statement (or none) and then do everything else with show statements (some will use hide too) within their script.
Unless you are using sprites (usually cut-out character upper bodies and faces shown against the background image), there is rarely a need to use show at all.

Ah, aha..

So that makes sense.
I will then not use show unless using a sprite.
My takeaway is, to not use show in normal scene.
Show to be used when you are using sprites.

This makes it actually easier.
Less to worry.

I do use sprites but mostly in conversation scenes.
Kind of reminds me of the puppet shows.
This is a great feature in RenPy. Though i haven't seen it very often used.

Thanks for pointing that out. A clean code is what i need to make and not mistakes that may cause problems. More to learn.

 

[79flavors]

Then you're probably going to want to take a look at other

You must be registered to see the links

and

You must be registered to see the links

.

Stuff like:

label start:

    scene black with fade
    centered "Welcome to [config.name] [config.version]."
    pause 2.5

    scene intro_s01_001 with fade

    show hazel_jeans_looking_right at left with moveinleft
    "Hi, I'm Hazel"

    show hazel_jeans_looking_right with moveoutright
    "Bye."

    scene intro_s01_002 with dissolve

    "*** THE END ***"

    return

at left being the transform, for character sprites. This is usually where you want the sprite to get to.
with moveinleft being the transform, moving the sprite from where it used to be to where you've asked it to end up.

It's okay to use show here without hide, since the scene will clear things up.

I don't have access to RenPy right now, so this is based on memory. That second show might need at offscreenleft.
Edit: Actually, I was able to double check... my original code was instead hide hazel_jeans_looking_right with moveoutright

I helped convert Cuntswell Academy back into RenPy. The early chapters use a lot of character sprites, moving and static. If you're looking for real world examples. On a much bigger scale, Doki Doki Literature Club was written in RenPy if I recall correctly and used a lot of sprites. Since that was a commercial product, it might have a more complex use of those sort of things. A reminder that you can get to the source code for 99% of RenPy games by using UnRen.

 

[coffeeaddicted]

Then you're probably going to want to take a look at other

You must be registered to see the links

and

You must be registered to see the links

.

Stuff like:

label start:

    scene black with fade
    centered "Welcome to [config.name] [config.version]."
    pause 2.5

    scene intro_s01_001 with fade

    show hazel_jeans_looking_right at left with moveinleft
    "Hi, I'm Hazel"

    show hazel_jeans_looking_right with moveoutright
    "Bye."

    scene intro_s01_002 with dissolve

    "*** THE END ***"

    return

at left being the transform, for character sprites. This is usually where you want the sprite to get to.
with moveinleft being the transform, moving the sprite from where it used to be to where you've asked it to end up.

It's okay to use show here without hide, since the scene will clear things up.

I don't have access to RenPy right now, so this is based on memory. That second show might need at offscreenleft.
Edit: Actually, I was able to double check... my original code was instead hide hazel_jeans_looking_right with moveoutright

I helped convert Cuntswell Academy back into RenPy. The early chapters use a lot of character sprites, moving and static. If you're looking for real world examples. On a much bigger scale, Doki Doki Literature Club was written in RenPy if I recall correctly and used a lot of sprites. Since that was a commercial product, it might have a more complex use of those sort of things. A reminder that you can get to the source code for 99% of RenPy games by using UnRen.

I am sorry, i forgot to answer.

Well, ok.
So now i have a code like this.

    scene morning06 with slow_dissolve    
    a "{color=#f00}(thinking){/color}dialog"      
    a "{color=#f00}(thinking){/color}dialog"

This looks now a much cleaner code.

The only thing i have to explore are some effects. I have shake effect but i think i like to have them flip or move out in increments. So this is what i have to explore next. Just to make it a little more interesting and not too static.

I really thank you for your insight.

Btw. this is unrelated.
I have in the beginning menu's for some information when you start the game. But i noticed when i use just a one menu item (aka continue) that the menu button isn't aligned correctly. Is there a way i can make either an invisible menu (having the previous yes/no menu) or some other way to have it appear correctly?

Thank you so much

 

[79flavors]

a "{color=#f00}(thinking){/color}dialog"
a "{color=#f00}(thinking){/color}dialog"

Oh... (thinking)... my other favorite subject of the moment.
You might want to read : https://f95zone.to/threads/write-the-text-always-in-italic.122138/post-8446564

The only thing i have to explore are some effects. I have shake effect but i think i like to have them flip or move out in increments. So this is what i have to explore next. Just to make it a little more interesting and not too static.

Shake is pretty straight forward with hpunch or with vpunch.

Just don't make the "Powerpoint" mistake, where you add lots of varied transitions because you think they are cool. Sometimes less is more. with hpunch for slaps. with flash for cum shots (though I think flash isn't predefined and is usually added as a custom version of Fade(). with pixellate for starting/ending dream sequences or flashbacks. Some transitions can be very well implemented, but sometimes they are just visually noisy.

Btw. this is unrelated.
I have in the beginning menu's for some information when you start the game. But i noticed when i use just a one menu item (aka continue) that the menu button isn't aligned correctly. Is there a way i can make either an invisible menu (having the previous yes/no menu) or some other way to have it appear correctly?

I'm not following that. Perhaps a partial screenshot of what it looks like would help explain what you mean.

 

[coffeeaddicted]

Oh... (thinking)... my other favorite subject of the moment.
You might want to read : https://f95zone.to/threads/write-the-text-always-in-italic.122138/post-8446564

Ah, something to ponder about. Is this better readable for the player? In the beginning i kind of struggles how to show that the person is thinking and not talking. So telling that it is thinking seems to be the best i can think off.
Yes, i will check the link. Thanks.

Shake is pretty straight forward with hpunch or with vpunch.

Just don't make the "Powerpoint" mistake, where you add lots of varied transitions because you think they are cool. Sometimes less is more. with hpunch for slaps. with flash for cum shots (though I think flash isn't predefined and is usually added as a custom version of Fade(). with pixellate for starting/ending dream sequences or flashbacks. Some transitions can be very well implemented, but sometimes they are just visually noisy.

I took the shake from here.

You must be registered to see the links

But i am still experimenting. So it's not written in stone or anything. It should just emphazice that the character is angry or fuming for example.

I'm not following that. Perhaps a partial screenshot of what it looks like would help explain what you mean.

Ah, ok. Not a problem.
Please see the examples. I tried to hide it somehow. Looked for some solution but did not find any. All i am looking for is, that it is aligned correctly.

So in the first image the "continue" is lower than in the second picture. My assumption is, it is because the first only has one menu option. The second has two. Therefore it is misaligned and looks rather awkward.

Spoiler: Examples of menu

You don't have permission to view the spoiler content. Log in or register now.

 

[anne O'nymous]

Just don't make the "Powerpoint" mistake, where you add lots of varied transitions because you think they are cool.

100% agree with this.

The transitions should carry a information as much as everything else in the game.
Having cool transitions isn't a problem by itself (unless they are annoyingly invasive), as long as they are used with constancy. Then, the player will quickly learn to recognize them, what limit the need for intermediary screens like "Few times later", "X hours later", "At work", "Back at home" and so on ; it's the transition that will provide this information.

 

[coffeeaddicted]

100% agree with this.

The transitions should carry a information as much as everything else in the game.
Having cool transitions isn't a problem by itself (unless they are annoyingly invasive), as long as they are used with constancy. Then, the player will quickly learn to recognize them, what limit the need for intermediary screens like "Few times later", "X hours later", "At work", "Back at home" and so on ; it's the transition that will provide this information.

Hello Anne, i think i am ok to have just a slide that says "home" so the player know where they are. No big effect just a slower dissolve. Looks kind of nice i think. I aimed for 5 secs which isn't too quick but player can just skip it.
This won't be too often as i think it isn't needed. Just if you really change a location.

But i actually meant the effect for sprites.
If a character get's angry he should behave visibly on screen in a certain way.
Though got to be careful not to over do it. Once in a while should be ok though.

 

[79flavors]

So in the first image the "continue" is lower than in the second picture. My assumption is, it is because the first only has one menu option. The second has two. Therefore it is misaligned and looks rather awkward.

Ah... "menu" as in menu:. I though perhaps you were talking about the main menu or game menu (Start, Load, Save, Preferences... and all that).

The thing you need to understand is that menu: uses a predefined screen: called screen choice():. It's part of the screens.rpy file.

Spoiler: menu choice():

You don't have permission to view the spoiler content. Log in or register now.

I'm no expert on RenPy's screen language, but I think the yanchor 0.5 means that the vbox is oriented vertically around the center point of the screen (or maybe the vbox?). The ypos 405 is probably a vertical offset to allow for the dialogue window at the bottom of the screen (i.e. you don't really mean "middle of the screen", when the lower quarter of the screen might be showing some text - so I guess that line shuffles things up a bit).

The xalign 0.5 combined with the define gui.choice_button_text_xalign = 0.5 mean each choice/textbutton is shown horizontally in the middle of the screen and the text within the textbutton itself is also centered.

A good test is to create a menu: with 8 to 10 different choices and see how it is presented.

The more choices you add to your menu, the bigger the vbox gets, with:

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

... adding each textbutton and spacing gui.choice_spacing controlling the spacing. But as big as that vbox it is still probably centered around that yalign 0.5 point.

All of which is configurable and changeable.

You could alter the anchor points. You can change the various alignments. Change things to absolute positions rather than relative ones.

However, my gut feel is that you are going to want to take a look at:

You must be registered to see the links

You must be registered to see the links

Specifically, the ability to create alternate screen: variants that can be overridden like:

Spoiler: my_choice_alternative1:

You don't have permission to view the spoiler content. Log in or register now.

 

[coffeeaddicted]

Ah... "menu" as in menu:. I though perhaps you were talking about the main menu or game menu (Start, Load, Save, Preferences... and all that).

The thing you need to understand is that menu: uses a predefined screen: called screen choice():. It's part of the screens.rpy file.

Spoiler: menu choice():

You don't have permission to view the spoiler content. Log in or register now.

I'm no expert on RenPy's screen language, but I think the yanchor 0.5 means that the vbox is oriented vertically around the center point of the screen (or maybe the vbox?). The ypos 405 is probably a vertical offset to allow for the dialogue window at the bottom of the screen (i.e. you don't really mean "middle of the screen", when the lower quarter of the screen might be showing some text - so I guess that line shuffles things up a bit).

The xalign 0.5 combined with the define gui.choice_button_text_xalign = 0.5 mean each choice/textbutton is shown horizontally in the middle of the screen and the text within the textbutton itself is also centered.

A good test is to create a menu: with 8 to 10 different choices and see how it is presented.

The more choices you add to your menu, the bigger the vbox gets, with:

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

... adding each textbutton and spacing gui.choice_spacing controlling the spacing. But as big as that vbox it is still probably centered around that yalign 0.5 point.

All of which is configurable and changeable.

You could alter the anchor points. You can change the various alignments. Change things to absolute positions rather than relative ones.

However, my gut feel is that you are going to want to take a look at:

You must be registered to see the links

You must be registered to see the links

Specifically, the ability to create alternate screen: variants that can be overridden like:

Spoiler: my_choice_alternative1:

You don't have permission to view the spoiler content. Log in or register now.

Thank you so much.

But,..... it occurred to me that i may just simply, well... make a pause for a second and let it just role.
I am not sure why i did the menu there but i think i thought there should be a continue button. Though it may not be needed. Too much clicking then.

But yes, this makes sense.
The screen has a certain point vertical and horizontal. So you need to figure out where to put it.
This seems still useful even if i don't use it.
Seems like a lot of work though.

Thank you so much for the help.