viewport and vpgrid?

[tofuuu]

I'm sorry if i'm asking too much >< i have so many questions so maybe this won't be my last question in this forum

In screen.rpy there's viewport and vpgrid which i don't know what's the difference. I've read https://www.renpy.org/doc/html/screens.html#vpgrid and https://www.renpy.org/doc/html/screens.html#viewport but my brain still can't proceed it T_T

Can you help explain to me what's the difference between viewport and vpgrid? or maybe you can give it example too so i can understand it? Thank you in advance

[Alex]

Khm, the documentation is rather clear about them...
"A viewport is area of the screen that can be scrolled by dragging, with the mouse wheel, or with scrollbars. It can be used to display part of something that is bigger than the screen." If you need an area with scrollbars in your GUI design - viewport is your best bet.

"Grid. This displays its children in a grid. Each child is given an area of the same size, the size of the largest child." So, if you want to make an inventory, just put all the items in a grid. One note: all the cells in a grid must be filled (even if it's the null displayable).

"A vpgrid (viewport grid) combines a viewport and grid into a single displayable. The vpgrid takes multiple children (like a grid) and is optimized so that only the children being displayed within the viewport are rendered." So, if your inventory is big enought and don't fit the screen, try the vpgrid for it.

[xavimat]

Another advantage of vpgrid: you don't need to fill all spaces. Can give only a number of columns and the number of rows will be automatic, from the number of children.

[tofuuu]

Thank you for the answers and sorry for being a troublesome

[Alex]

Thank you for the answers and sorry for being a troublesome

Not a trouble at all, just try to be more specific with questions (show the code you have, describe/show the result it gave, tell what's wrong with the result and what you try to achieve).

Here is a kind of code sample

Code: Select all

screen some_data_screen():
    
    ####
    # viewport
    ####
    
    side "c b r":
         area (200, 100, 400, 200)

         viewport id "vp":
             draggable True
             mousewheel True

             vbox:
                 
                 text "Line of text 1"
                 text "Line of text 2"
                 text "Line of text 3"
                 text "Looooooo~~~~~~~~~~ooooong line of text ............................" layout "nobreak"
                 text "Line of text 5"
                 text "Line of text 6"
                 text "Line of text 7"
                 text "Line of text 8"
                 text "Line of text 9"
                 text "Line of text 10"
                 text "Line of text 11"
             

         bar value XScrollValue("vp")
         vbar value YScrollValue("vp")
         
    ####
    # grid
    ####
    
    frame:
        pos (800, 100)
        
        grid 2 3:
         text "Top-Left" # an item in a grid cell (for now it's a text, but can be an image or a button)
         text "Top-Right"

         text "Center-Left"
         null # empty cell (instead of text "Center-Right")

         text "Bottom-Left"
         text "Bottom-Right"
         
    ####
    # vpgrid
    ####
    
    frame:
        align (0.5, 0.6)
        
        vpgrid:

            cols 4
            spacing 5
            draggable True
            mousewheel True
            ysize 100

            scrollbars "vertical"

            # Since we have scrollbars, we have to position the side, rather
            # than the vpgrid proper.
            side_xalign 0.5

            for i in range(1, 11):

                textbutton "Button [i]":
                    xysize (200, 50)
                    action Return(i)


label start:
    "..."
    show screen some_data_screen
    $ renpy.pause()
    "?"

[tofuuu]

Thank you! It made me easier to understand with your code! Btw, this is a lil bit out of context, but in your code there's

Code: Select all

for i in range(1, 11):

                textbutton "Button [i]":
                    xysize (200, 50)
                    action Return(i)

Where did the i return to? And is there a way so we can show the i value in start, something like

Code: Select all

label start:
            "[i]"

i know it won't work with my code tho

[Alex]

Try

Code: Select all

label start:
    "..."
    call screen some_data_screen
    $ res = _return
    "i = [res]"
    "?"

https://www.renpy.org/doc/html/screens.html#call-screen

[tofuuu]

it didn't work. i got this error

Try

Code: Select all

label start:
    "..."
    call screen some_data_screen
    $ res = _return
    "i = [res]"
    "?"

https://www.renpy.org/doc/html/screens.html#call-screen

[tofuuu]

I've figured it out! Thank you!