Help with viewport screen showing behind textbox

[mikey10]

Hello fellow Repy users[

I hope you can help me, I have difficulty with using viewport to use the scroll function.

Basically I have some character dialogue which is too large to be displayed fully in the main textbox.(when the player is hearing a story or reading a book ect..)

I tried to use a screen with viewport to add a scroll bar. and although when shown it's scrollable, the screen text is showing up behind the main textbox as shown in the screen shot below, Also it is not filling the screen as it should rather it only displaying 6 rows of text, while the window should be able to display atleast 12 rows before it needs to be scrollable to see the remaining 8 rows.

1.)How can I hide the main text box so only the the dialogue in the screen is visible? (until the user finish reading and then clicks a continue button which i'll to add to the project)

2. how can i resize the window of the scroll screen to display more rows of text before the user has to really use the side scrollbar to read the rest of the content?

3) Using the screen and viewport/scrollbar approach will have me adding all of the long dialogues in the "scrolling sceen" with the text " " code.
Is there a better way to solve this issue of the text being too long for the main textbox?
Perhaps someway to wrap a scrollbar/viewport to display at specific labels/character dialogues?

Code: Select all

screen scrollbr:
    add "blkscreen.png" align (.93,.33)
    modal True
    window:
        
        viewport:
            scrollbars "vertical"
            mousewheel True
            draggable True

            side_yfill True

            vbox:
                text "start dialogue."
                text "this is some text."
                text "this is my text."
                text "this is my text."
                text "this is my text."
                text "this is my text."
                text "this is my text."
                text "this is my text."
                text "this is my text."
                text "this is my text."
                text "this is my text."
                text "this is my text."
                text "this is my text."
                text "this is my text."
                text "this is my text."
                text "this is my text."
                text "this is the end."

[Alex]

Try to put it inside a side-container and specify its size - https://www.renpy.org/doc/html/screens.html#viewport

[mikey10]

Thank you for your reply Alex,


I managed to solve question nr 2 by adding side to my code, so now i can adjust how many rows are displayed in the viewport aswell as the scrollbar position and its scrolling.

But I am still getting the problem of screen showing up behind the main textbox (see screenshot) aswel as question nr 3 for a tip on a best practice in this senario.

Code: Select all

screen scrollbr():
    side "c r":
              #
        area (320, 100, 600, 200)
        viewport id "vp":
            draggable True

            vbox:
                text "start dialogue."
                text "this is some text."
                text "this is my text."
                text "this is my text."
                text "this is my text."
                text "this is my text."
                text "this is my text."
                text "this is my text."
                text "this is my text."
                text "this is my text."
                text "this is my text."
                text "this is my text."
                text "this is my text."
                text "this is my text."
                text "this is the end."
        
        vbar value YScrollValue("vp")

[Alex]

Well, you can try to add the same tags for say screen and scrollbr screen (so only one of them would be onscreen). Another way would be to modify say screen to have an area with a viewport, so all the text always will be inside it (also you could set unscrollable parameter for a sidescroll to "hide" to not show it if text will fit the size of textbox).

Code: Select all

vbar value YScrollValue("vp") unscrollable "hide"

https://www.renpy.org/doc/html/screens. ... -statement
https://www.renpy.org/doc/html/style_pr ... properties

[Remix]

try zorder 1 in your viewport screen and zorder 0 in your nvl or say screen