Spacing/Positioning Problem (Solved)

[screamingpenguin]

I've been at this for six hours now, and everything I try is just getting me nowhere and getting me more frustrated. I'm tired and no longer have the patience to play around with coding.

I've got an added screen onto the game menu for the character's profiles, and what I'm trying to achieve is placing viewports/vboxes on particular areas to have them appear above the boxes on the background image. However, nothing appears to be working so this is where I'm currently at:

https://orig00.deviantart.net/c882/f/20 ... cfg7w2.png

This is the background image and you can see what I'm trying to accomplish. The only box appearing there beneath the character's name is still incorrect, but using ymaximum and/or ysize does not appear to change the height of that box; it won't go any higher than that for some reason. I'm not sure where the other two boxes are, probably off screen somewhere. I've got the dimensions figured out, but again, I'm at a loss. If anyone could please help, it would be much appreciated.
Below is the current code:

Code: Select all

screen mitsunari_profile():
    tag menu
    use game_menu(_("Profiles"), scroll="viewport"):
        image "profiles/profile mitsunari.png"
        viewport: #description
            xpos 675
            ypos -606
            xmaximum 585
            ymaximum 250
            ysize 250
            mousewheel True
            scrollbars "vertical"
            vbox:
                text "- Description item here."
                text "- Description item here."
        viewport: #favourites
            xpos 675
            ypos -288
            xmaximum 285
            ymaximum 260
            mousewheel True
            scrollbars "vertical"
            vbox: 
                text "Item #1"
                text "Item #2"
        viewport: #dislikes
            xpos 1011
            ypos -288
            xmaximum 250
            ymaximum 260
            mousewheel True
            scrollbars "vertical"
            vbox: 
                text "Item #1"
                text "Item #2"

[kivik]

In the example code in the docs, PyTom uses side to set the area size before putting the viewport inside - so I've always stuck to using that and it seems to work for me: https://www.renpy.org/doc/html/screens.html#viewport

Code: Select all

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

         viewport id "vp":
             draggable True

             add "washington.jpg"

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

Try modifying your code to put your viewports inside the side elements and see if it works.

[screamingpenguin]

I seem to have achieved the exact same problem again. Only one box appears and the scrollbar does not match the length of the set height of it. I don't know what I'm doing wrong, nor do I fully understand it.

https://orig00.deviantart.net/749a/f/20 ... cfipen.png

Code: Select all

screen mitsunari_profile():
    tag menu
    use game_menu(_("Profiles"), scroll="viewport"):
        image "profiles/profile mitsunari.png"
        side "c tr":
            area (665, -606, 605, 240)
            viewport id "desc": #description
                yminimum 240
                draggable True
                mousewheel True
                scrollbars "vertical"
                vbox:
                    yminimum 235
                    ymaximum 235
                    text "- Description item here."
                    text "- Description item here."
                    text "- Description item here."
                    text "- Description item here."
                    text "- Description item here."
                    text "- Description item here."
            vbar value YScrollValue("desc")
        
        side "c bl":
            area (665, -288, 285, 260)
            viewport id "fav": #favourites
                yminimum 260
                draggable True
                mousewheel True
                scrollbars "vertical"
                vbox: 
                    text "Item #1"
                    text "Item #2"
                    text "Item #3"
                    text "Item #4"
                    text "Item #5"
                    text "Item #6"
                    text "Item #7"
                    text "Item #8"
            vbar value YScrollValue("fav")

        side "c br":
            area (1010, -288, 250, 260)
            viewport id "dis": #dislikes
                yminimum 260
                draggable True
                mousewheel True
                scrollbars "vertical"
                vbox: 
                    text "Item #1"
                    text "Item #2"
                    text "Item #3"
                    text "Item #4"
                    text "Item #5"
                    text "Item #6"
                    text "Item #7"
                    text "Item #8"
            vbar value YScrollValue("dis")

Honestly, I'm stumped. I must be doing something wrong, but not understanding it doesn't help. Any ideas?

[kivik]

I think you've misunderstood what to put in side - you should use "c r" for all of them in your code (I think): basically the two letters determines where the elements are aligned underneath - so viewport would be assigned to center, vbar to the right.

Also I think you need to position your side elements with xpos ypos (positive values starting from top left corner, your areas should have (0, 0, width, height) instead.

To help you figure out what's going on, start by replacing your viewport with frames and give them different colour backgrounds, then you can see where they are and which is which easily. Then position them where you want them before converting them to viewports.

[screamingpenguin]

I tried doing as you suggested, changing the sides to "c r" and removing the viewports to replace them with different coloured frames, but I still had the exact same problem; only the top box was visible and the scrollbar didn't match the length of the frame or vbox inside of it. I tried adding xpos and ypos to the side elements and adjusted the areas, but it seemed to have made no difference.

What I did do, however, was scrap the entire thing. I rewrote the whole code from scratch again, this time placing viewports inside of vboxes, and adding the xpos ypos to them. It worked, at least, and I'm glad it did because I was ready to throw in the towel haha. So in the end, I can't explain why the sides didn't work, but I found an alternative method that does the trick. All is working now. Thank you for your help though! It's much appreciated!

End result:

https://orig00.deviantart.net/302e/f/20 ... cfm1s2.png

Code: Select all

screen mitsunariprofile:
        tag menu
        use game_menu("Profiles"):
            image "profiles/profile mitsunari.png"
            frame:
                background None
                xpos 689
                ypos 125
                vbox:
                    
                    viewport id "desc":
                        ymaximum 232
                        xmaximum 588
                        mousewheel True
                        scrollbars "vertical"
                        vbox:
                            text "- Description item here." color "#c36653" size 26
                            text "- Description item here." color "#c36653" size 26
                            

            vbox:
                xpos 689
                ypos 424
                viewport:
                    mousewheel True
                    scrollbars "vertical"
                    ymaximum 270
                    xmaximum 280
                    vbox: 
                        if persistent.known_mitsunarifav_rvodka:
                            text "{image=items/rvodka_thumbnail.png} Raspberry Vodka" color "#c36653" size 22
                        
            vbox:
                xpos 1019
                ypos 424
                viewport:
                    mousewheel True
                    scrollbars "vertical"
                    ymaximum 270
                    xmaximum 250
                    vbox: 
                        if persistent.known_mitsunarihate_cig:
                            text "{image=items/cig_thumbnail.png} Cigarettes" color "#c36653" size 22

            textbutton "Back" action ShowMenu('profiles') xalign 0.5 yalign 0.98