[SOLVED] Adding scrollbar to menu/textbuttons?

[SpicyMayo1429]

I have a menu/page in my VN similar to a tips menu/page. There's a lot of textbuttons and they've started going off screen. I've been reading the forums and cookbook about scrollbars and viewports along with frames and they've helped me, but I can't seem to get my textbuttons to scroll. I'm not sure if I'm doing anything wrong... Any feedback would be appreciated! Here's a screenshot of what I currently have and I'll point out what I plan to achieve.

I was able to work a viewpoint with a filler image, but when I try working my text buttons, I can't seem to do it. What I want is the ability to scroll through the textbuttons. Here's the code I currently have (which is the screenshot posted).

Code: Select all

# Tips screen
screen keypoints:
    tag menu
    # Show the background.
    add "keypoint bg.jpg"
    use navigation2
    

    side "c b r":
         area (100, 100, 600, 400)

         viewport id "vp":
             draggable True

             add "Paying.jpg"

         bar value XScrollValue("vp")
         vbar value YScrollValue("vp")

    # placement of menu.
    
    vbox:
        style_group "tips"
        xalign 0.5
        yalign 0.5
        
     

        # These are simple textbuttons with an associated action;
        # the If() disables the buttons unless some persistent
        # variable is set.
        textbutton "{color=#ff0000}{size=+20}{font=edo.ttf}Keypoints{/font}{/size}{/color}" action None background None
        textbutton "" action None background None
        textbutton "{size=+8}{font=Classically Typed Stamps.ttf}Keypoint 1: Games{/font}{/size}" action If(persistent.unlock_tip_1, Jump("keypoint_1"))
        textbutton "{size=+8}{font=Classically Typed Stamps.ttf}Keypoint 2: Loyality{/font}{/size}" action If(persistent.unlock_tip_2, Jump("keypoint_2"))
        textbutton "{size=+8}{font=Classically Typed Stamps.ttf}Keypoint 3: {/font}{/size}" action If(persistent.unlock_tip_3, Jump("keypoint_3"))
        textbutton "{size=+8}{font=Classically Typed Stamps.ttf}Keypoint 4: {/font}{/size}" action If(persistent.unlock_tip_4, Jump("keypoint_4"))
        textbutton "{size=+8}{font=Classically Typed Stamps.ttf}Keypoint 5: {/font}{/size}" action If(persistent.unlock_tip_5, Jump("keypoint_5"))
        textbutton "{size=+8}{font=Classically Typed Stamps.ttf}Keypoint 6: {/font}{/size}" action If(persistent.unlock_tip_6, Jump("keypoint_6"))
        textbutton "{size=+8}{font=Classically Typed Stamps.ttf}Keypoint 7: {/font}{/size}" action If(persistent.unlock_tip_7, Jump("keypoint_7"))
        textbutton "{size=+8}{font=Classically Typed Stamps.ttf}Keypoint 8: {/font}{/size}" action If(persistent.unlock_tip_8, Jump("keypoint_8"))
        textbutton "{size=+8}{font=Classically Typed Stamps.ttf}Keypoint 9: {/font}{/size}" action If(persistent.unlock_tip_9, Jump("keypoint_9"))
        textbutton "{size=+8}{font=Classically Typed Stamps.ttf}Keypoint 10: {/font}{/size}" action If(persistent.unlock_tip_10, Jump("keypoint_10"))
        textbutton "{size=+8}{font=Classically Typed Stamps.ttf}Keypoint 11: {/font}{/size}" action If(persistent.unlock_tip_11, Jump("keypoint_11"))
        textbutton "{size=+8}{font=Classically Typed Stamps.ttf}Keypoint 12: {/font}{/size}" action If(persistent.unlock_tip_12, Jump("keypoint_12"))
        textbutton "{size=+8}{font=Classically Typed Stamps.ttf}Keypoint 13: {/font}{/size}" action If(persistent.unlock_tip_13, Jump("keypoint_13"))
        textbutton "{size=+8}{font=Classically Typed Stamps.ttf}Keypoint 14: {/font}{/size}" action If(persistent.unlock_tip_14, Jump("keypoint_14"))
        textbutton "{size=+8}{font=Classically Typed Stamps.ttf}Keypoint 15: {/font}{/size}" action If(persistent.unlock_tip_15, Jump("keypoint_15"))
        textbutton "{size=+8}{font=Classically Typed Stamps.ttf}Keypoint 16: {/font}{/size}" action If(persistent.unlock_tip_16, Jump("tip_16"))
        textbutton "{size=+8}{font=Classically Typed Stamps.ttf}Keypoint 17: {/font}{/size}" action If(persistent.unlock_tip_17, Jump("tip_17"))
        textbutton "{size=+8}{font=Classically Typed Stamps.ttf}Keypoint 18: {/font}{/size}" action If(persistent.unlock_tip_18, Jump("tip_18"))
        textbutton "{size=+8}{font=Classically Typed Stamps.ttf}Keypoint 19: {/font}{/size}" action If(persistent.unlock_tip_19, Jump("tip_19"))
        textbutton "{size=+8}{font=Classically Typed Stamps.ttf}Keypoint 20: {/font}{/size}" action If(persistent.unlock_tip_20, Jump("tip_20"))
        textbutton "{size=+8}{font=Classically Typed Stamps.ttf}Keypoint 21: {/font}{/size}" action If(persistent.unlock_tip_21, Jump("tip_21"))
        textbutton "{size=+8}{font=Classically Typed Stamps.ttf}Keypoint 22: {/font}{/size}" action If(persistent.unlock_tip_22, Jump("tip_22"))

[BáiYù]

Maybe try something like this?

Code: Select all

screen tips(scroll="viewport"):
    
    ## Ensure other screens do not get input while this screen is displayed.
    
    modal True
    
    frame:
        background None
        
        top_margin 150
        bottom_margin 250

        viewport:
            mousewheel True
            draggable True
            scrollbars "vertical"
            
            vbox:
                
                xalign 0.4
                spacing 10
                
                textbutton "{size=+8}{font=Classically Typed Stamps.ttf}Keypoint 1: Games{/font}{/size}" action If(persistent.unlock_tip_1, Jump("keypoint_1"))
        	textbutton "{size=+8}{font=Classically Typed Stamps.ttf}Keypoint 2: Loyality{/font}{/size}" action If(persistent.unlock_tip_2, Jump("keypoint_2"))
       		textbutton "{size=+8}{font=Classically Typed Stamps.ttf}Keypoint 3: {/font}{/size}" action If(persistent.unlock_tip_3, Jump("keypoint_3"))
        	textbutton "{size=+8}{font=Classically Typed Stamps.ttf}Keypoint 4: {/font}{/size}" action If(persistent.unlock_tip_4, Jump("keypoint_4"))
        	textbutton "{size=+8}{font=Classically Typed Stamps.ttf}Keypoint 5: {/font}{/size}" action If(persistent.unlock_tip_5, Jump("keypoint_5"))
        	textbutton "{size=+8}{font=Classically Typed Stamps.ttf}Keypoint 6: {/font}{/size}" action If(persistent.unlock_tip_6, Jump("keypoint_6"))
        	textbutton "{size=+8}{font=Classically Typed Stamps.ttf}Keypoint 7: {/font}{/size}" action If(persistent.unlock_tip_7, Jump("keypoint_7"))
        	textbutton "{size=+8}{font=Classically Typed Stamps.ttf}Keypoint 8: {/font}{/size}" action If(persistent.unlock_tip_8, Jump("keypoint_8"))
        	textbutton "{size=+8}{font=Classically Typed Stamps.ttf}Keypoint 9: {/font}{/size}" action If(persistent.unlock_tip_9, Jump("keypoint_9"))
        	textbutton "{size=+8}{font=Classically Typed Stamps.ttf}Keypoint 10: {/font}{/size}" action If(persistent.unlock_tip_10, Jump("keypoint_10"))
        	textbutton "{size=+8}{font=Classically Typed Stamps.ttf}Keypoint 11: {/font}{/size}" action If(persistent.unlock_tip_11, Jump("keypoint_11"))
        	textbutton "{size=+8}{font=Classically Typed Stamps.ttf}Keypoint 12: {/font}{/size}" action If(persistent.unlock_tip_12, Jump("keypoint_12"))
        	textbutton "{size=+8}{font=Classically Typed Stamps.ttf}Keypoint 13: {/font}{/size}" action If(persistent.unlock_tip_13, Jump("keypoint_13"))
        	textbutton "{size=+8}{font=Classically Typed Stamps.ttf}Keypoint 14: {/font}{/size}" action If(persistent.unlock_tip_14, Jump("keypoint_14"))
        	textbutton "{size=+8}{font=Classically Typed Stamps.ttf}Keypoint 15: {/font}{/size}" action If(persistent.unlock_tip_15, Jump("keypoint_15"))
        	textbutton "{size=+8}{font=Classically Typed Stamps.ttf}Keypoint 16: {/font}{/size}" action If(persistent.unlock_tip_16, Jump("tip_16"))
        	textbutton "{size=+8}{font=Classically Typed Stamps.ttf}Keypoint 17: {/font}{/size}" action If(persistent.unlock_tip_17, Jump("tip_17"))
        	textbutton "{size=+8}{font=Classically Typed Stamps.ttf}Keypoint 18: {/font}{/size}" action If(persistent.unlock_tip_18, Jump("tip_18"))
        	textbutton "{size=+8}{font=Classically Typed Stamps.ttf}Keypoint 19: {/font}{/size}" action If(persistent.unlock_tip_19, Jump("tip_19"))
        	textbutton "{size=+8}{font=Classically Typed Stamps.ttf}Keypoint 20: {/font}{/size}" action If(persistent.unlock_tip_20, Jump("tip_20"))
        	textbutton "{size=+8}{font=Classically Typed Stamps.ttf}Keypoint 21: {/font}{/size}" action If(persistent.unlock_tip_21, Jump("tip_21"))
        	textbutton "{size=+8}{font=Classically Typed Stamps.ttf}Keypoint 22: {/font}{/size}" action If(persistent.unlock_tip_22, Jump("tip_22"))
        	
    label _("Keypoints"):
        xalign 0.5
        yalign 0.26

Alternatively, you can dig into the tutorial game that comes with Ren'py and adapt that code to work for you.

[SpicyMayo1429]

Thanks so much for the suggestion and the example code! It works and I've gotten my menu to become scrollable!