[SOLVED] Splitting up choice boxes vertically rather than horizontally?

[sasquatchii]

Hi, I have designed and unconventional choice box layout, and would like to split them up into columns of 3 rather than rows as is the default for Ren'Py.

Here is an example of the mockup I made & what I am trying to achieve:



I understand how to customize Ren'Py textboxes, but I have no idea how to code it so that the textboxes are aligned the way they are in my mockup. Does anyone have any ideas for what the best way to do this might be?

Any help is always much appreciated!

[RicharDann]

You might want to use a 3x2 grid.

https://www.renpy.org/doc/html/screens.html#grid

[mikolajspy]

I didn't test it, but I think something like this might work:

Code: Select all

screen choice(items):
    $ verticalnb = 0
    $ horizontalnb = 0
    $ i = 1
    style_prefix "choice"

    while i < 6  #as long as we have menu options
    hbox: #make horizontal box
        while verticalnb <= 3: #did we reach 3 horizontal boxes?
            while horizontalnb <=2: #did we fill 2 vertical boxes?
                vbox: #do vertical box
                   textbutton i.caption action i.action #add button
                   $ i =+ 1 #increase counter
                $verticalbumber =+ 1 #move to next column

Probably also pack everything into 'frame' function and specify location and dimensions there.
https://www.renpy.org/doc/html/screens.html#frame
Or, if you will ALWAYS have 6 options, you might try "grid" function. I think it would be more coding to make it more scalabe, but it's also something worth looking into.
https://www.renpy.org/doc/html/screens.html#grid

[sasquatchii]

Mikola, thank you. When I tried your code I got this error:

Code: Select all

I'm sorry, but errors were detected in your script. Please correct the
errors listed below, and try again.


File "game/screens.rpy", line 212: u'while' is not a keyword argument or valid child for the screen statement.
    while i < 6  
         ^

Ren'Py Version: Ren'Py 6.99.12.4.2187

[RicharDann]

Mikola, thank you. When I tried your code I got this error:

Code: Select all

I'm sorry, but errors were detected in your script. Please correct the
errors listed below, and try again.


File "game/screens.rpy", line 212: u'while' is not a keyword argument or valid child for the screen statement.
    while i < 6  
         ^

Ren'Py Version: Ren'Py 6.99.12.4.2187

I think that's because screens do not support while statement. Try replacing 'while' with 'if' instead. That said I hope I'm wrong but I think that code might not entirely work without a little editing.

[sasquatchii]

I also tried the 3 x 2 grid using the code that Richar Dan suggested, but am stumped as to how to get the textbox features into the grid. Also, it's not always going to need to be a 2 x 3 grid - sometimes there will be 4 options, sometimes 2, sometimes 5, etc. Here's what I've got so far:



The grid @ the top is text only. The choices @ the center are the actual choices & are functional and fully work (but they are not laid out how I'd like them to be - as shown by my earlier mockup.

I've also uploaded the game folder to google drive if anyone wants to crack it open and take a look: https://drive.google.com/open?id=0Bzpuc ... mJSYUIxd1U

Thank you Mikola & RicharDann for your help thus far! I really appreciate it.

[sasquatchii]

Mikola, thank you. When I tried your code I got this error:

Code: Select all

I'm sorry, but errors were detected in your script. Please correct the
errors listed below, and try again.


File "game/screens.rpy", line 212: u'while' is not a keyword argument or valid child for the screen statement.
    while i < 6  
         ^

Ren'Py Version: Ren'Py 6.99.12.4.2187

I think that's because screens do not support while statement. Try replacing 'while' with 'if' instead. That said I hope I'm wrong but I think that code might not entirely work without a little editing.

Thank you! I tried 'if' instead and here's the error I got:

Code: Select all

[code]
I'm sorry, but errors were detected in your script. Please correct the
errors listed below, and try again.


File "game/screens.rpy", line 211: reached end of line when expecting ':'.
    if i < 6  
              ^

Ren'Py Version: Ren'Py 6.99.12.4.2187

So my guess is that's probably going to be way over my head, not really sure what to do with either of those. I'll keep tinkering with it and see what else I can do with the grid for now!

[mikolajspy]

Code: Select all

File "game/screens.rpy", line 211: reached end of line when expecting ':'.
    if i < 6  
              ^

The error even explains what's wrong, you're missing an ':' at the end, try this:

Code: Select all

if i < 6 :
  #.. rest of code
  

But honestly I think "if" statement is not good, since it's not repeating itself to fill scalable grid...

EDIT: I think I got this, still not tested:

Code: Select all

screen choice(items):
    style_prefix "choice"

    for i in items:  #as long as we have something in menu options
    hbox: #make horizontal box
        for vnb in range(1,3): #did we reach 3 horizontal boxes?
            for hnb in range(1,2): #did we fill 2 vertical boxes?
                vbox: #do vertical box
                   textbutton i.caption action i.action #add button
     

Still needs work, but I don't have time at the moment, but I think it's a good base.

[RicharDann]

But honestly I think "if" statement is not good, since it's not repeating itself to fill scalable grid...

You're right, I didn't realize it before. However I did test it right now and while didn't work, it seems like it's not supported by screens, oddly enough.

What sasquatchii could do is setup the screen so it checks how many choices there are, and change the layout accordingly. Something like:

Code: Select all

screen choice(items):

    style_prefix "choice"

    if len(items) == 6:  #If there are 6 choices, use a 3x2 grid
        grid 3 2:
            xalign .5 yalign .5
            for i in items:
                textbutton i.caption action i.action
                
    elif len(items) in range(1,3):
        vbox:
            xalign .5 yalign .5
            for i in items:
                textbutton i.caption action i.action

What's missing here is a way to lay out the choices when there are 4 and 5. With 4 we could use a 2x2 grid but for 5, I can't really think of anything right now. Hope someone does have a better solution.

[mikolajspy]

I think something more scalable would be better than checking number of choices each time (what if there will be 8? 9? 22?).
For scalability I'd use my suggestion, I edited last post replacing "while" with "for x in range(X,Y)" if Ren'Py supports this Python expression in screens, that should work.
This expression should work almost as while and do the job.

I'd need more time to think about it, but probably checking lenght, then checking if it can be fit in square, and filling grid size with generated variables could also be interesting.
For numbers like 5, 7, the lower line could be centered somehow.

[Scribbles]

so this works... just looks awful lol

Code: Select all

screen choice(items):
    style_prefix "choice"
    $ x = 2
    $ y = (len(items) / 2)
            
    grid x y:
        xalign 0.5 
        yalign 0.5
        
        for i in items:
            textbutton i.caption action i.action

the buttons bleed out of the screen- there is probably a fix BUT i've gotta run > < I'll look it over more later

ETA: it crashes if the grid is "overfull", and probably has a ton of other errors I'll look at it more later!

[Divona]

Here is my take using "vpgrid":

Code: Select all

screen choice(items):
    style_prefix "choice"

    vpgrid:
        cols 3
        spacing 40

        xalign 0.5
        yalign 0.8

        for i in items:
            textbutton i.caption action i.action

gui.rpy

Code: Select all

define gui.choice_button_width = 570
define gui.choice_button_text_idle_color = "#000000"

[sasquatchii]

Thank you both so much!! Both your solutions totally work, and I really appreciate all your help with this. You have saved me a ton of time, and I really appreciate it I doubt I would have been able to come up with this solution without your help!