Ren'Py Why is all items in top left corner?

[Avalonica]

Hello, writing code in Renpy is not like writing text in a word-processor. I am currently a bit "at a loss" when this happens to me:

screen wiki_index():
    tag menu
    use game_menu(_("Wiki Index"), scroll="viewport"):
        style_prefix "wiki"
        frame:
            vbox:
                hbox:
                    spacing 15 at center
                    text _p("""
                    • {a=wiki_test1}test 1{/a}{p}
                    • {a=wiki_test2}test 2{/a}{p}
                    • {a=wiki_test3}test 3{/a}{p}
                    • {a=wiki_test4}test 4{/a}{p}
                    • {a=wiki_test5}test 5{/a}{p}
                    """)
                    text _p("""
                    • {a=wiki_test1}test 1{/a}{p}
                    • {a=wiki_test2}test 2{/a}{p}
                    • {a=wiki_test3}test 3{/a}{p}
                    • {a=wiki_test4}test 4{/a}{p}
                    • {a=wiki_test5}test 5{/a}{p}
                    """)
                    text _p("""
                    • {a=wiki_test1}test 1{/a}{p}
                    • {a=wiki_test2}test 2{/a}{p}
                    • {a=wiki_test3}test 3{/a}{p}
                    • {a=wiki_test4}test 4{/a}{p}
                    • {a=wiki_test5}test 5{/a}{p}
                    """)

            vbox:
                grid 2 3:
                    text "Top-Left"
                    text "Top-Right"

                    text "Center-Left"
                    text "Center-Right"

                    text "Bottom-Left"
                    text "Bottom-Right"

            vbox:
                text "Why me?"

Here are the styles I use:

style wiki_frame:
    xpadding 100
    ypadding 100

style wiki_text:
    justify True
    drop_shadow [(1, 1)]

I would love to have "each item" following each other on the page as I write the up more or less, not bundle up in a party at the top left corner. Any example code on how to somehow fix this would be great.

Another thing that irritate me a tiny bit is that I would have the page start at "max" width, but when I order it to do that in a style with "xfill True" it also fills the entire "bottom" which I did not ask for at all. I just want the "frame" to fill up the max "width" nothing more.

Once I have learned to master "these" problems in Renpy I can more or less finally handle the basics. I have made nice progress of the game so far... this is just a temporary roadblock

 

[the66]

screen wiki_index():
    tag menu
    use game_menu(_("Wiki Index"), scroll="viewport"):
        style_prefix "wiki"
        frame:
            vbox: # <- !!!
                xfill True # <- !!!
                vbox:
                    hbox:
                        spacing 15 at center
                        text _p("""
                        • {a=wiki_test1}test 1{/a}{p}
                        • {a=wiki_test2}test 2{/a}{p}
                        • {a=wiki_test3}test 3{/a}{p}
                        • {a=wiki_test4}test 4{/a}{p}
                        • {a=wiki_test5}test 5{/a}{p}
                        """)
                        text _p("""
                        • {a=wiki_test1}test 1{/a}{p}
                        • {a=wiki_test2}test 2{/a}{p}
                        • {a=wiki_test3}test 3{/a}{p}
                        • {a=wiki_test4}test 4{/a}{p}
                        • {a=wiki_test5}test 5{/a}{p}
                        """)
                        text _p("""
                        • {a=wiki_test1}test 1{/a}{p}
                        • {a=wiki_test2}test 2{/a}{p}
                        • {a=wiki_test3}test 3{/a}{p}
                        • {a=wiki_test4}test 4{/a}{p}
                        • {a=wiki_test5}test 5{/a}{p}
                        """)

                vbox xalign .5:
                    grid 2 3:
                        text "Top-Left"
                        text "Top-Right"

                        text "Center-Left"
                        text "Center-Right"

                        text "Bottom-Left"
                        text "Bottom-Right"

                vbox xalign 1.:
                    text "Why me?"

 

[Avalonica]

Before I try my own stunts and really mess up, it's way better to learn from the experts. How would you do to have every table perfectly lined up versus the other on all rows. The wiki made my mind dizzy, that's why I ask here.

screen wiki_index():
    tag menu
    use game_menu(_("Wiki Index"), scroll="viewport"):
        style_prefix "wiki"
        frame:
            vbox: # <- !!!
                xfill True # <- !!!
                vbox xalign .5:
                    hbox:
                        spacing 50 at center
                        text _p("""
                        {b}Player Characters{/b}

                        • {a=wiki_test1}test 1{/a}{p}
                        • {a=wiki_test2}test 2{/a}{p}
                        • {a=wiki_test3}test 3{/a}{p}
                        • {a=wiki_test4}test 4{/a}{p}
                        • {a=wiki_test5}test 5{/a}{p}
                        """)
                        text _p("""
                        {b}Player Enemies{/b}

                        • {a=wiki_test1}test 1{/a}{p}
                        • {a=wiki_test2}test 2{/a}{p}
                        • {a=wiki_test3}test 3{/a}{p}
                        • {a=wiki_test4}test 4{/a}{p}
                        • {a=wiki_test5}test 5{/a}{p}
                        """)
                        text _p("""
                        {b}Player Friends (sometimes){/b}

                        • {a=wiki_test1}test 1{/a}{p}
                        • {a=wiki_test2}test 2{/a}{p}
                        • {a=wiki_test3}test 3{/a}{p}
                        • {a=wiki_test4}test 4{/a}{p}
                        • {a=wiki_test5}test 5{/a}{p}
                        """)
                        text _p("""
                        {b}Player Lovers{/b}

                        • {a=wiki_test1}test 1{/a}{p}
                        • {a=wiki_test2}test 2{/a}{p}
                        • {a=wiki_test3}test 3{/a}{p}
                        • {a=wiki_test4}test 4{/a}{p}
                        • {a=wiki_test5}test 5{/a}{p}
                        """)
# Next table

                vbox xalign .5:
                    hbox:
                        spacing 50 at center
                        text _p("""
                        {b}Player Something{/b}

                        • {a=wiki_test1}test 1{/a}{p}
                        • {a=wiki_test2}test 2{/a}{p}
                        • {a=wiki_test3}test 3{/a}{p}
                        • {a=wiki_test4}test 4{/a}{p}
                        • {a=wiki_test5}test 5{/a}{p}
                        """)
                        text _p("""
                        {b}Player Pets{/b}

                        • {a=wiki_test1}test 1{/a}{p}
                        • {a=wiki_test2}test 2{/a}{p}
                        • {a=wiki_test3}test 3{/a}{p}
                        • {a=wiki_test4}test 4{/a}{p}
                        • {a=wiki_test5}test 5{/a}{p}
                        """)
                        text _p("""
                        {b}Player Food{/b}

                        • {a=wiki_test1}test 1{/a}{p}
                        • {a=wiki_test2}test 2{/a}{p}
                        • {a=wiki_test3}test 3{/a}{p}
                        • {a=wiki_test4}test 4{/a}{p}
                        • {a=wiki_test5}test 5{/a}{p}
                        """)
                        text _p("""
                        {b}Player Angry Lovers{/b}

                        • {a=wiki_test1}test 1{/a}{p}
                        • {a=wiki_test2}test 2{/a}{p}
                        • {a=wiki_test3}test 3{/a}{p}
                        • {a=wiki_test4}test 4{/a}{p}
                        • {a=wiki_test5}test 5{/a}{p}
                        """)

# Next table

# Next table

                vbox xalign .5:
                    hbox:
                        spacing 50 at center
                        text _p("""
                        {b}Player Help Me{/b}

                        • {a=wiki_test1}test 1{/a}{p}
                        • {a=wiki_test2}test 2{/a}{p}
                        • {a=wiki_test3}test 3{/a}{p}
                        • {a=wiki_test4}test 4{/a}{p}
                        • {a=wiki_test5}test 5{/a}{p}
                        """)
                        text _p("""
                        {b}Player Non-Pets{/b}

                        • {a=wiki_test1}test 1{/a}{p}
                        • {a=wiki_test2}test 2{/a}{p}
                        • {a=wiki_test3}test 3{/a}{p}
                        • {a=wiki_test4}test 4{/a}{p}
                        • {a=wiki_test5}test 5{/a}{p}
                        """)
                        text _p("""
                        {b}Player is happy{/b}

                        • {a=wiki_test1}test 1{/a}{p}
                        • {a=wiki_test2}test 2{/a}{p}
                        • {a=wiki_test3}test 3{/a}{p}
                        • {a=wiki_test4}test 4{/a}{p}
                        • {a=wiki_test5}test 5{/a}{p}
                        """)
                        text _p("""
                        {b}Player Sad Lovers{/b}

                        • {a=wiki_test1}test 1{/a}{p}
                        • {a=wiki_test2}test 2{/a}{p}
                        • {a=wiki_test3}test 3{/a}{p}
                        • {a=wiki_test4}test 4{/a}{p}
                        • {a=wiki_test5}test 5{/a}{p}
                        """)

 

[anne O'nymous]

You can also use a

You must be registered to see the links

to align everything more accurately :


[Note: I'll not change the indentation for the text, but they don't need to be this indented.]

screen wiki_index():
    tag menu
    use game_menu(_("Wiki Index"), scroll="viewport"):
        style_prefix "wiki"

        grid 4 3:
                        text _p("""
                        {b}Player Characters{/b}

                        • {a=wiki_test1}test 1{/a}{p}
                        • {a=wiki_test2}test 2{/a}{p}
                        • {a=wiki_test3}test 3{/a}{p}
                        • {a=wiki_test4}test 4{/a}{p}
                        • {a=wiki_test5}test 5{/a}{p}
                        """)

                        text _p("""
                        {b}Player Enemies{/b}

                        • {a=wiki_test1}test 1{/a}{p}
                        • {a=wiki_test2}test 2{/a}{p}
                        • {a=wiki_test3}test 3{/a}{p}
                        • {a=wiki_test4}test 4{/a}{p}
                        • {a=wiki_test5}test 5{/a}{p}
                        """)

                        text _p("""
                        {b}Player Friends (sometimes){/b}

                        • {a=wiki_test1}test 1{/a}{p}
                        • {a=wiki_test2}test 2{/a}{p}
                        • {a=wiki_test3}test 3{/a}{p}
                        • {a=wiki_test4}test 4{/a}{p}
                        • {a=wiki_test5}test 5{/a}{p}
                        """)

                        text _p("""
                        {b}Player Lovers{/b}

                        • {a=wiki_test1}test 1{/a}{p}
                        • {a=wiki_test2}test 2{/a}{p}
                        • {a=wiki_test3}test 3{/a}{p}
                        • {a=wiki_test4}test 4{/a}{p}
                        • {a=wiki_test5}test 5{/a}{p}
                        """)

# Second row
                        text _p("""
                        {b}Player Something{/b}

                        • {a=wiki_test1}test 1{/a}{p}
                        • {a=wiki_test2}test 2{/a}{p}
                        • {a=wiki_test3}test 3{/a}{p}
                        • {a=wiki_test4}test 4{/a}{p}
                        • {a=wiki_test5}test 5{/a}{p}
                        """)

                        text _p("""
                        {b}Player Pets{/b}

                        • {a=wiki_test1}test 1{/a}{p}
                        • {a=wiki_test2}test 2{/a}{p}
                        • {a=wiki_test3}test 3{/a}{p}
                        • {a=wiki_test4}test 4{/a}{p}
                        • {a=wiki_test5}test 5{/a}{p}
                        """)

                        text _p("""
                        {b}Player Food{/b}

                        • {a=wiki_test1}test 1{/a}{p}
                        • {a=wiki_test2}test 2{/a}{p}
                        • {a=wiki_test3}test 3{/a}{p}
                        • {a=wiki_test4}test 4{/a}{p}
                        • {a=wiki_test5}test 5{/a}{p}
                        """)

                        text _p("""
                        {b}Player Angry Lovers{/b}

                        • {a=wiki_test1}test 1{/a}{p}
                        • {a=wiki_test2}test 2{/a}{p}
                        • {a=wiki_test3}test 3{/a}{p}
                        • {a=wiki_test4}test 4{/a}{p}
                        • {a=wiki_test5}test 5{/a}{p}
                        """)

# third row
                        text _p("""
                        {b}Player Help Me{/b}

                        • {a=wiki_test1}test 1{/a}{p}
                        • {a=wiki_test2}test 2{/a}{p}
                        • {a=wiki_test3}test 3{/a}{p}
                        • {a=wiki_test4}test 4{/a}{p}
                        • {a=wiki_test5}test 5{/a}{p}
                        """)

                        text _p("""
                        {b}Player Non-Pets{/b}

                        • {a=wiki_test1}test 1{/a}{p}
                        • {a=wiki_test2}test 2{/a}{p}
                        • {a=wiki_test3}test 3{/a}{p}
                        • {a=wiki_test4}test 4{/a}{p}
                        • {a=wiki_test5}test 5{/a}{p}
                        """)

                        text _p("""
                        {b}Player is happy{/b}

                        • {a=wiki_test1}test 1{/a}{p}
                        • {a=wiki_test2}test 2{/a}{p}
                        • {a=wiki_test3}test 3{/a}{p}
                        • {a=wiki_test4}test 4{/a}{p}
                        • {a=wiki_test5}test 5{/a}{p}
                        """)

                        text _p("""
                        {b}Player Sad Lovers{/b}

                        • {a=wiki_test1}test 1{/a}{p}
                        • {a=wiki_test2}test 2{/a}{p}
                        • {a=wiki_test3}test 3{/a}{p}
                        • {a=wiki_test4}test 4{/a}{p}
                        • {a=wiki_test5}test 5{/a}{p}
                        """)

If you plan to not have significant difference in the number of entries for each elements, a better approach would be to put all of them in a

You must be registered to see the links

. It will permit to have more coherence for each element of the grid, while still offering the access to all the elements.
[Note: Once again I kept the original indent of the /text/, you don't need to effectively indent this much.]

screen wiki_index():
    tag menu
    use game_menu(_("Wiki Index"), scroll="viewport"):
        style_prefix "wiki"

        grid 4 3:
                    viewport:
                        ysize 200   #  This is mandatory, else /grid/ can have hard 
                                         #  time to find the more accurate height. But the 
                                         # value can be whatever you want, not just "200".
                        scrollbars "vertical"

                        text _p("""
                        {b}Player Characters{/b}

                        • {a=wiki_test1}test 1{/a}{p}
                        • {a=wiki_test2}test 2{/a}{p}
                        • {a=wiki_test3}test 3{/a}{p}
                        • {a=wiki_test4}test 4{/a}{p}
                        • {a=wiki_test5}test 5{/a}{p}
                        • {a=wiki_test6}test 6{/a}{p}
                        • {a=wiki_test7}test 7{/a}{p}
                        • {a=wiki_test8}test 8{/a}{p}
                        • {a=wiki_test9}test 9{/a}{p}
                        • {a=wiki_test10}test 10{/a}{p}
                        • {a=wiki_test11}test 11{/a}{p}
                        • {a=wiki_test12}test 12{/a}{p}
                        • {a=wiki_test13}test 13{/a}{p}
                        • {a=wiki_test14}test 14{/a}{p}
                        • {a=wiki_test15}test 15{/a}{p}
                        """)

                    viewport:
                        ysize 200
                        scrollbars "vertical"
                        text _p("""
                        {b}Player Enemies{/b}

                        • {a=wiki_test1}test 1{/a}{p}
                        • {a=wiki_test2}test 2{/a}{p}
                        • {a=wiki_test3}test 3{/a}{p}
                        • {a=wiki_test4}test 4{/a}{p}
                        • {a=wiki_test5}test 5{/a}{p}
                        """)

                    viewport:
                        ysize 200
                        scrollbars "vertical"
                        text _p("""
                        {b}Player Friends (sometimes){/b}

                        • {a=wiki_test1}test 1{/a}{p}
                        • {a=wiki_test2}test 2{/a}{p}
                        • {a=wiki_test3}test 3{/a}{p}
                        • {a=wiki_test4}test 4{/a}{p}
                        • {a=wiki_test5}test 5{/a}{p}
                        """)

                    viewport:
                        ysize 200
                        scrollbars "vertical"
                        text _p("""
                        {b}Player Lovers{/b}

                        • {a=wiki_test1}test 1{/a}{p}
                        • {a=wiki_test2}test 2{/a}{p}
                        • {a=wiki_test3}test 3{/a}{p}
                        • {a=wiki_test4}test 4{/a}{p}
                        • {a=wiki_test5}test 5{/a}{p}
                        """)

# Second row
                    viewport:
                        ysize 200
                        scrollbars "vertical"
                        text _p("""
                        {b}Player Something{/b}

                        • {a=wiki_test1}test 1{/a}{p}
                        • {a=wiki_test2}test 2{/a}{p}
                        • {a=wiki_test3}test 3{/a}{p}
                        • {a=wiki_test4}test 4{/a}{p}
                        • {a=wiki_test5}test 5{/a}{p}
                        """)

                    viewport:
                        ysize 200
                        scrollbars "vertical"
                        text _p("""
                        {b}Player Pets{/b}

                        • {a=wiki_test1}test 1{/a}{p}
                        • {a=wiki_test2}test 2{/a}{p}
                        • {a=wiki_test3}test 3{/a}{p}
                        • {a=wiki_test4}test 4{/a}{p}
                        • {a=wiki_test5}test 5{/a}{p}
                        """)

                    viewport:
                        ysize 200
                        scrollbars "vertical"
                        text _p("""
                        {b}Player Food{/b}

                        • {a=wiki_test1}test 1{/a}{p}
                        • {a=wiki_test2}test 2{/a}{p}
                        • {a=wiki_test3}test 3{/a}{p}
                        • {a=wiki_test4}test 4{/a}{p}
                        • {a=wiki_test5}test 5{/a}{p}
                        """)

                    viewport:
                        ysize 200
                        scrollbars "vertical"
                        text _p("""
                        {b}Player Angry Lovers{/b}

                        • {a=wiki_test1}test 1{/a}{p}
                        • {a=wiki_test2}test 2{/a}{p}
                        • {a=wiki_test3}test 3{/a}{p}
                        • {a=wiki_test4}test 4{/a}{p}
                        • {a=wiki_test5}test 5{/a}{p}
                        """)

# third row
                    viewport:
                        ysize 200
                        scrollbars "vertical"
                        text _p("""
                        {b}Player Help Me{/b}

                        • {a=wiki_test1}test 1{/a}{p}
                        • {a=wiki_test2}test 2{/a}{p}
                        • {a=wiki_test3}test 3{/a}{p}
                        • {a=wiki_test4}test 4{/a}{p}
                        • {a=wiki_test5}test 5{/a}{p}
                        """)

                    viewport:
                        ysize 200
                        scrollbars "vertical"
                        text _p("""
                        {b}Player Non-Pets{/b}

                        • {a=wiki_test1}test 1{/a}{p}
                        • {a=wiki_test2}test 2{/a}{p}
                        • {a=wiki_test3}test 3{/a}{p}
                        • {a=wiki_test4}test 4{/a}{p}
                        • {a=wiki_test5}test 5{/a}{p}
                        """)

                    viewport:
                        ysize 200
                        scrollbars "vertical"
                        text _p("""
                        {b}Player is happy{/b}

                        • {a=wiki_test1}test 1{/a}{p}
                        • {a=wiki_test2}test 2{/a}{p}
                        • {a=wiki_test3}test 3{/a}{p}
                        • {a=wiki_test4}test 4{/a}{p}
                        • {a=wiki_test5}test 5{/a}{p}
                        """)

                    viewport:
                        ysize 200
                        scrollbars "vertical"
                        text _p("""
                        {b}Player Sad Lovers{/b}

                        • {a=wiki_test1}test 1{/a}{p}
                        • {a=wiki_test2}test 2{/a}{p}
                        • {a=wiki_test3}test 3{/a}{p}
                        • {a=wiki_test4}test 4{/a}{p}
                        • {a=wiki_test5}test 5{/a}{p}
                        """)

 

[Avalonica]

Thanks so very much for teaching me this.

 

[Avalonica]

Is there any nice trick to restrict what happens in this image:

                grid 4 2:
                        xspacing 80 yspacing None
                        #spacing 10
                        text _p("""
                        {b}Player Characters{/b}

                        • {a=wiki_test1}test 1{/a}{p}
                        • {a=wiki_test2}test 2{/a}{p}

It's quite clear that when "Player Characters" have lots of posts, there is a HUGE "gap" between third row and second row... That is an eyesore that I would love to crush with the proper command. (if possible)

 

[anne O'nymous]

Is there any nice trick to restrict what happens in this image:

Yes, the viewport I talked about...