Imagebuttons in viewport disappear when ScrollValue added

[Tetsune]

I know I must be doing this wrong, as I'm really new to Ren'Py. I've looked at many tutorials and other options but I cannot for the life of me figure out what I'm doing wrong.
Messy Image Mock-Up

Current Code:

Code: Select all

define character_img = "player"

screen character_customization_screen2:
    tag menu

    add "gui/creator/cc_menu_ground.png"

    frame:
        side "c r":
            area (0, 97, 696, 720)
            viewport id "main":
                draggable True
                mousewheel True
                yfill True

                vbox:
                    hbox:
                        #Gender Select Buttons
                        imagebutton auto "gui/creator/symbol_female_%s.png" xpos 25 ypos 0 focus_mask True action SetVariable('gender', 'female') at config_eff hovered [ Play ("test_one", "sfx/click.wav"), Show("gui_tooltip", my_picture="gui/tooltip_config_windowed.png", my_tt_xpos=46, my_tt_ypos=518) ] unhovered [Hide("gui_tooltip")]
                        imagebutton auto "gui/creator/symbol_male_%s.png" xpos 25 ypos 0 focus_mask True action SetVariable('gender', 'male') at config_eff hovered [ Play ("test_two", "sfx/click.wav"), Show("gui_tooltip", my_picture="gui/tooltip_config_fullscreen.png", my_tt_xpos=46, my_tt_ypos=518) ] unhovered [Hide("gui_tooltip")]

                hbox:
                    #Body Select Buttons
                    imagebutton auto "gui/creator/placeholder_button_%s.png" xpos 300 ypos 0 focus_mask True action SetVariable( "bodytype", "average") at config_eff hovered [ Play ("test_one", "sfx/click.wav"), Show("gui_tooltip", my_picture="gui/tooltip_config_windowed.png", my_tt_xpos=46, my_tt_ypos=518) ] unhovered [Hide("gui_tooltip")]
                    imagebutton auto "gui/creator/placeholder_button_%s.png" xpos 300 ypos 0 focus_mask True action SetVariable( "bodytype", "small") at config_eff hovered [ Play ("test_two", "sfx/click.wav"), Show("gui_tooltip", my_picture="gui/tooltip_config_windowed.png", my_tt_xpos=46, my_tt_ypos=518) ] unhovered [Hide("gui_tooltip")]
                    imagebutton auto "gui/creator/placeholder_button_%s.png" xpos 300 ypos 0 focus_mask True action SetVariable( "bodytype", "large") at config_eff hovered [ Play ("test_three", "sfx/click.wav"), Show("gui_tooltip", my_picture="gui/tooltip_config_windowed.png", my_tt_xpos=46, my_tt_ypos=518) ] unhovered [Hide("gui_tooltip")]

                hbox:
                    #Skin Color Selection
                    imagebutton auto "gui/creator/palette_skin_1_%s.png" xpos 160 ypos 130 focus_mask True action SetVariable( "skintone", "skin_1") at config_eff hovered [ Play ("test_one", "sfx/click.wav"), Show("gui_tooltip", my_picture="gui/tooltip_config_windowed.png", my_tt_xpos=46, my_tt_ypos=518) ] unhovered [Hide("gui_tooltip")]
                    imagebutton auto "gui/creator/palette_skin_2_%s.png" xpos 120 ypos 130 focus_mask True action SetVariable( "skintone", "skin_2") at config_eff hovered [ Play ("test_one", "sfx/click.wav"), Show("gui_tooltip", my_picture="gui/tooltip_config_windowed.png", my_tt_xpos=46, my_tt_ypos=518) ] unhovered [Hide("gui_tooltip")]
                    imagebutton auto "gui/creator/palette_skin_3_%s.png" xpos 80 ypos 130 focus_mask True action SetVariable( "skintone", "skin_3") at config_eff hovered [ Play ("test_one", "sfx/click.wav"), Show("gui_tooltip", my_picture="gui/tooltip_config_windowed.png", my_tt_xpos=46, my_tt_ypos=518) ] unhovered [Hide("gui_tooltip")]
                    imagebutton auto "gui/creator/palette_skin_4_%s.png" xpos 40 ypos 130 focus_mask True action SetVariable( "skintone", "skin_4") at config_eff hovered [ Play ("test_one", "sfx/click.wav"), Show("gui_tooltip", my_picture="gui/tooltip_config_windowed.png", my_tt_xpos=46, my_tt_ypos=518) ] unhovered [Hide("gui_tooltip")]
                    imagebutton auto "gui/creator/palette_skin_5_%s.png" xpos 0 ypos 130 focus_mask True action SetVariable( "skintone", "skin_5") at config_eff hovered [ Play ("test_one", "sfx/click.wav"), Show("gui_tooltip", my_picture="gui/tooltip_config_windowed.png", my_tt_xpos=46, my_tt_ypos=518) ] unhovered [Hide("gui_tooltip")]
                    imagebutton auto "gui/creator/palette_skin_6_%s.png" xpos -40 ypos 130 focus_mask True action SetVariable( "skintone", "skin_6") at config_eff hovered [ Play ("test_one", "sfx/click.wav"), Show("gui_tooltip", my_picture="gui/tooltip_config_windowed.png", my_tt_xpos=46, my_tt_ypos=518) ] unhovered [Hide("gui_tooltip")]
                    imagebutton auto "gui/creator/palette_skin_7_%s.png" xpos -80 ypos 130 focus_mask True action SetVariable( "skintone", "skin_7") at config_eff hovered [ Play ("test_one", "sfx/click.wav"), Show("gui_tooltip", my_picture="gui/tooltip_config_windowed.png", my_tt_xpos=46, my_tt_ypos=518) ] unhovered [Hide("gui_tooltip")]

                hbox:
                    #Eye Selection
                    imagebutton auto "gui/creator/placeholder_button_%s.png" xpos 140 ypos 210 focus_mask True action SetVariable( "eyeshape", "eyeshape_1") at config_eff hovered [ Play ("test_one", "sfx/click.wav"), Show("gui_tooltip", my_picture="gui/tooltip_config_windowed.png", my_tt_xpos=46, my_tt_ypos=518) ] unhovered [Hide("gui_tooltip")]
                    imagebutton auto "gui/creator/placeholder_button_%s.png" xpos 120 ypos 210 focus_mask True action SetVariable( "eyeshape", "eyeshape_2") at config_eff hovered [ Play ("test_one", "sfx/click.wav"), Show("gui_tooltip", my_picture="gui/tooltip_config_windowed.png", my_tt_xpos=46, my_tt_ypos=518) ] unhovered [Hide("gui_tooltip")]
                    imagebutton auto "gui/creator/placeholder_button_%s.png" xpos 100 ypos 210 focus_mask True action SetVariable( "eyeshape", "eyeshape_3") at config_eff hovered [ Play ("test_one", "sfx/click.wav"), Show("gui_tooltip", my_picture="gui/tooltip_config_windowed.png", my_tt_xpos=46, my_tt_ypos=518) ] unhovered [Hide("gui_tooltip")]
                    imagebutton auto "gui/creator/placeholder_button_%s.png" xpos 80 ypos 210 focus_mask True action SetVariable( "eyeshape", "eyeshape_4") at config_eff hovered [ Play ("test_one", "sfx/click.wav"), Show("gui_tooltip", my_picture="gui/tooltip_config_windowed.png", my_tt_xpos=46, my_tt_ypos=518) ] unhovered [Hide("gui_tooltip")]
                    imagebutton auto "gui/creator/placeholder_button_%s.png" xpos 60 ypos 210 focus_mask True action SetVariable( "eyeshape", "eyeshape_5") at config_eff hovered [ Play ("test_one", "sfx/click.wav"), Show("gui_tooltip", my_picture="gui/tooltip_config_windowed.png", my_tt_xpos=46, my_tt_ypos=518) ] unhovered [Hide("gui_tooltip")]

                #Hair Selection

                #Page? Outfit & Accessories

                vbox:
                    text "scroll down"
                    text "scroll down"
                    text "scroll down"

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


    add character_img:
        pos (600,50)

Anyway, what I'm hoping to achieve is a scrollbar on the side of the white area.
What I get is the blank image without any of my imagebuttons or vboxes on screen...

Even if I put "scrollbar "vertical"" it will do the same thing.

[MaydohMaydoh]

Try limiting the width of the vbar with xsize 20 or something.

[Tetsune]

Try limiting the width of the vbar with xsize 20 or something.

Sweet jesus, that worked. Now it shows everything again, but there's no scrollbar and it doesn't scroll.