Viewport smooth scrolling (for NVL text box)

[komehara]

Coming from Automatic nvl-clear when block goes off the window I wanted to auto-scroll NVL text when there is too much text and it bleeds out to the bottom. I managed to do instant scroll by using yinitial 1.0:

Code: Select all

# screens.rpy

screen nvl(dialogue, items=None):
    frame:
        style "nvl_content_frame"

        viewport:
            yinitial 1.0

            # Disable for now to avoid input conflicts, YMMV
            # scrollbars "vertical"
            # mousewheel True
            # draggable True
            # pagekeys True

            vbox:
                window:
                    ...

                add SideImage() xalign 0.0 yalign 1.0

However, I could not manage to get the "smooth animated scrolling" that the OP suggested in the issue.

I tried using ATL:

Code: Select all

transform smooth_scroll(duration=1.0):
	linear duration yoffset 1.0
	
screen nvl(dialogue, items=None):
    frame:
        style "nvl_content_frame"

        viewport at smooth_scroll:
            ...

but it only moved text fixed amount of pixels even when passing a fraction, unlike yinitial. I tried yinitial too but it's not an animatable property (it makes sense, I want to change the current offset, not the initial one). I found no way to get the ysize of the viewport at a given time and pass it to smooth_scroll to set the proper yoffset as fixed pixel size either.

Do you know how to animate a viewport scroll toward its bottom (100% scroll) ?

For completion and people who just wants to know how to create an NVL viewport with instant scrolling, I put the rest of my code below (it handles placing the NVL box in the middle of the window with the right margin and padding, and a custom background texture):

Code: Select all

# screens.rpy

style nvl_content_frame:
    # Prepare custom texture asset here
    background "gui/nvl_text_box.png"

    left_margin gui.nvl_margin_side
    right_margin gui.nvl_margin_side
    top_margin gui.nvl_margin_top
    # we don't define bottom_margin here because BG position will be determined
    # by the 3 other margins, and gui.nvl_borders.pad_bottom will handle stopping
    # text at the right position (and auto-scrolling if needed)

    padding gui.nvl_borders.padding

# gui.rpy

# Customise this to place the text *inside* the NVL textbox frame properly
define gui.nvl_borders = Borders(0, 15, 0, 30, pad_left=70, pad_right=70, pad_top=40, pad_bottom=150)

# Custom properties to place a non-fullscreen NVL background precisely
# side = left and right to make sure centered text is balanced
define gui.nvl_margin_side = 300
define gui.nvl_margin_top = 35

# You can now store more than 6 paragraphs if you need to since scrolling works
define gui.nvl_list_length = 10

# You can use dynamic NVL paragraph height + spacing now that scrolling works well
define gui.nvl_height = None
define gui.nvl_spacing = 40

# You can adjust this to fit your needs but for centered text I just follow this:
define gui.nvl_thought_xpos = 0
define gui.nvl_thought_ypos = 0
# Value = Screen.width - 2 * gui.nvl_margin_side - (gui.nvl_borders.pad_left +  gui.nvl_borders.pad_right)
# Here Value = 1920 - 2 * 300 - (70 + 70) = 1180 (but any value above also works)
define gui.nvl_thought_width = 1180