How to add a transition to dialogue box only [Solved]

[oatnoodles]

I'm looking to have a transition for my dialogue box. I want the dialogue box to slide up+dissolve when shown, and slide down+dissolve when hidden. However, all the transitions I've tried effect the entire screen, not just the dialogue box itself (besides Dissolve like below.)

Current code:

Code: Select all

## Transitions used to show and hide the dialogue window

define config.window_show_transition = Dissolve(.5)
define config.window_hide_transition = Dissolve(.5)

Here's an example of what I want to do.
https://i.imgur.com/4jachbY.mp4

[jeffster]

I think you might need to modify "say screen" (it's defined in screens.rpy) and add a transform there:

Code: Select all

    window:
        at slide_updown

Try something like this:

Code: Select all

transform slide_updown():
    yalign 1.0

    on show:
        yoffset 300 alpha 0.0
        easein 0.5 yoffset 0 alpha 1.0

    on hide:
        yoffset 0 alpha 1.0
        easeout 0.5 yoffset 300 alpha 0.0

    on replace:
        yoffset 0 alpha 1.0
        easeout 0.5 yoffset 300 alpha 0.0

screen say(who, what):
    style_prefix "say"

    window:
        at slide_updown
        id "window"

[oatnoodles]

Thanks for the reply. I tried adding the first part of the code you recommended in the say section of screens.rpy, but I get an error when dialogue happens ("Exception: The say screen (or show_function) must return a Text object."). I'm not sure if I put it in the right place, but just adding "window: at slide_updown" to the say section separately doesn't work.

Here's the code I changed:

Code: Select all

## Say screen ##################################################################
##
## The say screen is used to display dialogue to the player. It takes two
## parameters, who and what, which are the name of the speaking character and
## the text to be displayed, respectively. (The who parameter can be None if no
## name is given.)
##
## This screen must create a text displayable with id "what", as Ren'Py uses
## this to manage text display. It can also create displayables with id "who"
## and id "window" to apply style properties.
##
## https://www.renpy.org/doc/html/screen_special.html#say

init -2:
    style say_thought:
        line_spacing -10
    style say_dialogue:
        line_spacing -10

screen say(who, what):
    style_prefix "say"

    window:
        id "window"
        at slide_updown

        if who is not None:

            window:
                id "namebox"
                style "namebox"
                text who id "who"

        text what id "what"

[Dark12ose]

Hello, Thank you for the post and the transform as I've been trying to figure out the same exact thing

Code: Select all

transform slide_updown():
    yalign 1.0

    on show:
        yoffset 300 alpha 0.0
        easein 0.5 yoffset 0 alpha 1.0

    on hide:
        yoffset 0 alpha 1.0
        easeout 0.5 yoffset 300 alpha 0.0

    on replace:
        yoffset 0 alpha 1.0
        easeout 0.5 yoffset 300 alpha 0.0

I tried out your transform but unfortunately the "on replace" doesn't seem to work no matter what I put in. The textbox just slides up and down for each dialogue. I changed it to "on replaced" as well but that doesn't work either.
For me I had the "on replace" as:

Code: Select all

on replaced:
        linear 0.5 alpha 0.0
        linear 0.5 alpha 1.0

Basically a dissolve/fade effect. But it doesn't seem to read it I'm not too familiar with ATL so it can be that I'm doing something wrong and not know about it lol.

Also there's a blank textbox sliding in before the actual textbox with dialogue shows up at the start of the game and whenever a scene changes but I think that's a renpy thing? As it does the same thing when trying to customize textbox for each characters unless it's manually done.

Thanks for the reply. I tried adding the first part of the code you recommended in the say section of screens.rpy, but I get an error when dialogue happens ("Exception: The say screen (or show_function) must return a Text object."). I'm not sure if I put it in the right place, but just adding "window: at slide_updown" to the say section separately doesn't work.

Try this way

Code: Select all

screen say:
    style_prefix "say"

    window at textbox_slide:
        id "window"

instead of placing it after the : (the colon). It works that way for me though I am having the problem above.

[jeffster]

I tried out your transform but unfortunately the "on replace" doesn't seem to work no matter what I put in. The textbox just slides up and down for each dialogue. I changed it to "on replaced" as well but that doesn't work either.

Also there's a blank textbox sliding in before the actual textbox with dialogue shows up at the start of the game and whenever a scene changes but I think that's a renpy thing? As it does the same thing when trying to customize textbox for each characters unless it's manually done.

I have no idea what to do about that. Maybe just leave some "on show" effect, as actually transitions between text pieces do irritate people. Players want to read fast, they don't want to see those beautiful effects again and again. At least I prefer no transitions, no delays when I click through a VN. So maybe they should be reserved only for some special effect cases...

[Dark12ose]

I have no idea what to do about that. Maybe just leave some "on show" effect, as actually transitions between text pieces do irritate people. Players want to read fast, they don't want to see those beautiful effects again and again. At least I prefer no transitions, no delays when I click through a VN. So maybe they should be reserved only for some special effect cases...

That's true. I myself like to read things fast but I really liked the effect done in "NightShade" otome game and thought it was pretty cool so wanted to try it out haha.

[oatnoodles]

Try this way

Code: Select all

screen say:
    style_prefix "say"

    window at textbox_slide:
        id "window"

instead of placing it after the : (the colon). It works that way for me though I am having the problem above.

That worked, thank you.

As for the transform itself, yeah it is kind of annoying. My intention was for the sliding to only happen when the window first shows. As in, if there's another line of dialogue (or multiple) after the first, the sliding in will only happen with the first line of dialogue and the last. It shows this in the example.

The issue of the duplicate text box is happening to me too, not sure how to fix that.

[Dark12ose]

Try this way

Code: Select all

screen say:
    style_prefix "say"

    window at textbox_slide:
        id "window"

instead of placing it after the : (the colon). It works that way for me though I am having the problem above.

That worked, thank you.

You're welcome. Glad it helped. ^^

As for the transform itself, yeah it is kind of annoying. My intention was for the sliding to only happen when the window first shows. As in, if there's another line of dialogue (or multiple) after the first, the sliding in will only happen with the first line of dialogue and the last. It shows this in the example.

Exactly, that was what I wanted as well but unfortunately the "on replace" does not work at all. If it did it would have done exactly what we both intended :/

[oatnoodles]

Exactly, that was what I wanted as well but unfortunately the "on replace" does not work at all. If it did it would have done exactly what we both intended :/

I'm still hopeful we could get it working somehow... maybe the transform code needs to be different. To be honest, I just don't have enough knowledge or skill with Ren'py yet to know what else would work. Maybe someone else has an answer.

[Dark12ose]

I'm still hopeful we could get it working somehow... maybe the transform code needs to be different. To be honest, I just don't have enough knowledge or skill with Ren'py yet to know what else would work. Maybe someone else has an answer.

Unfortunately I am in the same boat with the lack of knowledge myself. Though, I'll try different transforms with the little knowledge that I have and update this if I come up with anything.

[jeffster]

My intention was for the sliding to only happen when the window first shows. As in, if there's another line of dialogue (or multiple) after the first, the sliding in will only happen with the first line of dialogue and the last. It shows this in the example.

The issue of the duplicate text box is happening to me too, not sure how to fix that.

It's possible to use conditions in screens. For example, this will show the slide effect only when "Eileen" speaks:
(Also double effect doesn't happen if it's not Eileen that speaks first.)

Code: Select all

transform slide_updown():
    on show:
        yoffset 300 alpha 0.0
        easein 0.5 yoffset 0 alpha 1.0

screen say(who, what):
    style_prefix "say"

    if who == "Eileen":
        window at slide_updown:
            id "window"

            if who is not None:

                window:
                    id "namebox"
                    style "namebox"
                    text who id "who"

            text what id "what"


        ## If there's a side image, display it above the text. Do not display on the
        ## phone variant - there's no room.
        if not renpy.variant("small"):
            add SideImage() xalign 0.0 yalign 1.0

    else:
        window:
            id "window"

            if who is not None:

                window:
                    id "namebox"
                    style "namebox"
                    text who id "who"

            text what id "what"

It's probably possible to have the slide effect only for certain lines, using characters with arguments (and maybe config.say_arguments_callback):
https://www.renpy.org/doc/html/dialogue ... -arguments

[Dark12ose]

It's possible to use conditions in screens. For example, this will show the slide effect only when "Eileen" speaks:
(Also double effect doesn't happen if it's not Eileen that speaks first.)

Code: Select all

transform slide_updown():
    on show:
        yoffset 300 alpha 0.0
        easein 0.5 yoffset 0 alpha 1.0

screen say(who, what):
    style_prefix "say"

    if who == "Eileen":
        window at slide_updown:
            id "window"

            if who is not None:

                window:
                    id "namebox"
                    style "namebox"
                    text who id "who"

            text what id "what"


        ## If there's a side image, display it above the text. Do not display on the
        ## phone variant - there's no room.
        if not renpy.variant("small"):
            add SideImage() xalign 0.0 yalign 1.0

    else:
        window:
            id "window"

            if who is not None:

                window:
                    id "namebox"
                    style "namebox"
                    text who id "who"

            text what id "what"

This would work if not for the fact that the first speaker's textbox would need to do the transform. Also it causes the transform everytime Eileen is talking as well since that's what the condition is telling it to do so that I understand why. It would be useful when trying out different things specific for that character though.

It's probably possible to have the slide effect only for certain lines, using characters with arguments (and maybe config.say_arguments_callback):
https://www.renpy.org/doc/html/dialogue ... -arguments

As for the callback from what I can understand, only one def can be placed within the define config.say_arguments_callback?
So what I was thinking, looking at it, was that have one set to "on show" and one "on hide" and than place it manually if not automated onto the dialogue.
(I certainly don't mind doing things manually if that means I get the result that I want.)

I also realized that the "on replace" wasn't working because there's nothing being replaced. The textbox show and hide with each dialogue never replacing. Unless there is a python that can change all that but my python knowledge is at the very basic level and learning seem to be a really slow process .

Edit: I looked more closely at the textbox in the default GUI and the double textbox IS a renpy thing. It does it even in the default GUI with or without the dissolve transition. It's just becomes more apparent when you are trying to change colors and such. In other words we can't do anything about the double textbox unless you change the textboxes manually (which for some reason stops the double textboxing).

[jeffster]

As for the callback from what I can understand, only one def can be placed within the define config.say_arguments_callback?
So what I was thinking, looking at it, was that have one set to "on show" and one "on hide" and than place it manually if not automated onto the dialogue.

I think maybe config.say_arguments_callback is designed basically for preparing variables, so that we can set something short and simple like

Code: Select all

e "Saying" (s = 1)

and that transforms into something more complex like

Code: Select all

what_color = "#FFEEDDCC"
what_size = 38

I would expect that differentiating various on "show" etc. should be possible via

Code: Select all

screen say(who, what, s = 0):
    style_prefix "say"

    if s == 1:
        on "show":
            #...

(I certainly don't mind doing things manually if that means I get the result that I want.)

I also realized that the "on replace" wasn't working because there's nothing being replaced. The textbox show and hide with each dialogue never replacing. Unless there is a python that can change all that but my python knowledge is at the very basic level and learning seem to be a really slow process .

The basic functionality of say screen is simple, so it should be possible to use some custom screen instead. Maybe even

Code: Select all

screen say(who, what, s = 0):
    style_prefix "say"

    if s == 1:
        use say_sliding
            #...
    else:
        window:
            #...

Edit: I looked more closely at the textbox in the default GUI and the double textbox IS a renpy thing. It does it even in the default GUI with or without the dissolve transition. It's just becomes more apparent when you are trying to change colors and such. In other words we can't do anything about the double textbox unless you change the textboxes manually (which for some reason stops the double textboxing).

It seems that using window hide (or config.window) before dialogue lines removes the double textbox effect.

[oatnoodles]

It seems that using window hide (or config.window) before dialogue lines removes the double textbox effect.

I changed some of my code, and I'm happy with the results now. It might not be 100% what I was looking for, but whatever lol.
I made sure to not use [window show] or [window auto] and that fixed all the duplication issues.

Here's the transformation code for anyone interested:

Code: Select all

# The dialogue window transformation.
# Fades in and eases from the bottom.

transform WindowEaseBottom:
        on show:
            alpha 0.0
            parallel:
                linear 0.5 alpha 1.0
            parallel:
                xalign 0.5 yalign 1.0
                linear 0.5 yoffset -10
        on hide:
            alpha 1.0
            parallel:
                xalign 0.5 yalign 1.0
                linear 0.5 yalign 1.0 yoffset -30
            parallel:
                linear 0.5 alpha 0.0