Group textbuttons with same background and aligned

[johandark]

Well... Watching the screens.rpy I managed to be able to do something like this:

With backgrounds it comes like this:

But I would really something like this:

Also I would like to reduce the size of the labels Prelim. Vagancia and Anol... (Curious names eh?).

Here is the code I´ve used:

Code: Select all

label start:
   
    jump tips

# Jump to this label from the main menu with Start("tips")
label tips:
    call screen tips

init python:
    # Styles for the tips screen
    style.didac_button.xminimum = 0
    style.didac_button_text.color="#ff0"
    style.didac_button_text.hover_color = "#060F2C"
    style.didac_button_text.font="Comic Book.otf"
    style.didac_button.background=None
    style.didac_button_text.size=12
    style.didac_button_text.hover_size=14
    style.didac_button_text.outlines=[(3, "993399", 0,0)]
    style.didac_button_text.selected_color="#fff"
    style.didac_button_text.spacing = 200
    
    
# Tips screen
screen tips():
    
    tag menu
    
    # Include the navigation.
    use navigation
    
    # Show the tips background
    add "#2C060F"
    
screen tips():

    #tag menu

    ## Include the navigation. I don´t really understand the use of tag menu and navigation...
    #use navigation

    # Put the navigation columns in a three-wide grid.
    grid 2 1:
        style_group "didac"
        xalign 1.0
        yalign 0.1

        # The left column.
        vbox:
            frame:
                background None
                style_group "didac"
                has vbox

                label _("Prelim.")
                
                textbutton "Beso" action If(persistent.unlock_tip_1, Jump("tip_1"))
                textbutton "Pektos" action If(persistent.unlock_tip_2, Jump("tip_2"))
                textbutton "Peñones" action If(persistent.unlock_tip_1, Jump("tip_1"))
                textbutton "Muslos" action If(persistent.unlock_tip_1, Jump("tip_1"))
                textbutton "klitor" action If(persistent.unlock_tip_2, Jump("tip_2"))


        vbox:
            frame:
                background None
                style_group "didac"
                has vbox
                
                textbutton "Quitar Manos" action If(persistent.unlock_tip_2, Jump("tip_2"))
                textbutton "Beso Francés" action If(persistent.unlock_tip_1, Jump("tip_1"))
                textbutton "Azotarlos" action If(persistent.unlock_tip_2, Jump("tip_2"))
                textbutton "Pellizcarlos" action If(persistent.unlock_tip_1, Jump("tip_1"))
                textbutton "Azotarlos" action If(persistent.unlock_tip_2, Jump("tip_2"))
                textbutton "Pellizcarlo" action If(persistent.unlock_tip_2, Jump("tip_2"))
                
    grid 3 2:
        style_group "didac"
        xalign 1.0
        yalign .55

        vbox:
            frame:
                background None
                style_group "didac"
                has vbox

                label _("Vagancia")
                
                textbutton "Dedos" action Jump ("tip_2")
                textbutton "Lento" action If(persistent.unlock_tip_1, Jump("tip_1"))
                textbutton "Rápido" action If(persistent.unlock_tip_2, Jump("tip_2"))
                
        vbox:
            frame:
                background None
                style_group "didac"
                has vbox

                label _("")
                
                textbutton "pora" action If(persistent.unlock_tip_2, Jump("tip_2"))
                textbutton "Lento" action If(persistent.unlock_tip_1, Jump("tip_1"))
                textbutton "Rápido" action If(persistent.unlock_tip_2, Jump("tip_2"))
                
        vbox:
            frame:
                background None
                style_group "didac"
                has vbox

                label _("")
                
                textbutton "Entera" action If(persistent.unlock_tip_2, Jump("tip_2"))
                textbutton "Lento" action If(persistent.unlock_tip_1, Jump("tip_1"))
                textbutton "Rápido" action If(persistent.unlock_tip_2, Jump("tip_2"))
                

                
        vbox:
            frame:
                background None
                style_group "didac"
                has vbox

                label _("Anol")
                
                textbutton "Dedos" action If(persistent.unlock_tip_2, Jump("tip_2"))
                textbutton "Lento" action If(persistent.unlock_tip_1, Jump("tip_1"))
                textbutton "Rápido" action If(persistent.unlock_tip_2, Jump("tip_2"))
                
        vbox:
            frame:
                background None
                style_group "didac"
                has vbox

                label _("")
                
                textbutton "pora" action If(persistent.unlock_tip_2, Jump("tip_2"))
                textbutton "Lento" action If(persistent.unlock_tip_1, Jump("tip_1"))
                textbutton "Rápido" action If(persistent.unlock_tip_2, Jump("tip_2"))
                
        vbox:
            frame:
                background None
                style_group "didac"
                has vbox

                label _("")
                
                textbutton "Entera" action If(persistent.unlock_tip_2, Jump("tip_2"))
                textbutton "Lento" action If(persistent.unlock_tip_1, Jump("tip_1"))
                textbutton "Rápido" action If(persistent.unlock_tip_2, Jump("tip_2"))
        


label end_tips:
    return

label tip_1:
    "Perhaps you should have checked to see if that was a carton of oatmeal,
     or a carton of rat poison."

    jump tips

label tip_2:
    "She's a TRAP!"

    jump tips

I´ve discovered this after print the images:

Code: Select all

    tag menu
    
    # Include the navigation.
    use navigation

Avoiding "use naviation" makes background transparent.

But I still don´t understand what "tag menu" does...

Apart from that... I saw buttons are always "CENTERED"... I would like to know how left aligned or right aligned them.

Probably too many questions... But I guess these litle last ones are not so complicated...

Probably I´m wrong.

Thanks for your help!

[johandark]

...mmmm... Is it so complicated what I´m asking here?

[Iylae]

It's just a case of how you're applying the layout through a grid. I wouldn't use a grid in this case:

First use a frame for the dark grey background in your picture.

Then split that frame into three vboxes (technically five, two are for your titles, see below)

Then put your hboxes of buttons inside those vboxes.

So your structure should look like this:

Code: Select all

frame:

  vbox:  #row 1
    hbox:  #col 1
      label "Prelim"
      textbutton "Beso" 
    hbox:  #col 2
      textbutton "Quitar Manos"
      textbutton "Beso Francés"
  
  vbox:  #row 2 title
    hbox:
      label "Vagancia"
      
  vbox:  #row 2
    hbox:  #col 1
      textbutton "Dedos" 
    hbox:  #col 2
      textbutton "Pora"
    hbox:  #col 3
      textbutton "Entera"
  
  vbox:  #row 3 title
    hbox:
      label "Anol"
      
  vbox:  #row 3
    hbox:  #col 1
      textbutton "Dedos" 
    hbox:  #col 2
      textbutton "Pora"
    hbox:  #col 3
      textbutton "Entera"

I haven't given you the full thing, but hopefully you can see what I'm doing here and apply it yourself.

Note that in the your Prlim label is in-line but your Vagancia and Anol labels are in their own seperate rows, so see how I've done that differently in the example code.

As usual I haven't tested the code, that'd take more time than I have right now.

[johandark]

I´ve tried your way, without grid and this is the result:

here is the code:

Code: Select all

screen tips():
        
    frame:
        
        style_group "didac"

        vbox:  #row 1
            xalign 0.99
            yalign 0.01
            hbox:  #col 1
                label "Prelim"
                textbutton "Beso" action Jump("tip_1") 
            hbox:  #col 2
                textbutton "Quitar Manos" action Jump("tip_1")
                textbutton "Beso Francés" action Jump("tip_1") 
                
        vbox:  #row 2
            xalign 0.99
            yalign 0.2
            hbox:  #col 1
                label "Anol"
                textbutton "Kiss" action Jump("tip_1") 
            hbox:  #col 2
                textbutton "Hands Off" action Jump("tip_1")
                textbutton "French Kiss" action Jump("tip_1")
                textbutton "Bitchy" action Jump("tip_1")  

The first problem is I can´t use "background None" to avoid the background.

The second problem is lines are not aligned, so when I add a third word, the whole square gets out of line...

So... What Can I do?

Thanks!

[Iylae]

With backgrounds you have two options to make them transparent: 1 remove the frame, 2 set the background to "#00000001"

Let me strip this down further so you can understand the base principles going on here:

Code: Select all

screen tips():
    vbox:  
        hbox: #box 1
            vbox:  #row 1
                label "label instead of tb" xminimum 100   #  This is a lable instead of a textbutton
                # note with the label above that it's too wide and throws the grid formatting out
                textbutton "1_2"  xminimum 100
                textbutton "1_3"  xminimum 100
                textbutton "1_4"  xminimum 100
            vbox:  #row 2
                textbutton "2_1"  xminimum 100
                textbutton "2_2"  xminimum 100
                textbutton "2_3"  xminimum 100
                textbutton "2_4"  xminimum 100
            vbox:  #row 3
                textbutton "3_1"  xminimum 100
                textbutton "3_2"  xminimum 100
                textbutton "3_3"  xminimum 100
                textbutton "3_4"  xminimum 100
        hbox: #box 2
            vbox:                                                       # These lines are what
                label "label alll the way across the box" xminimum 400  # give you a horizontal
                hbox:                                                   # label instead of a textbutton
                    vbox:  #row 1
                        textbutton "1_1"  xminimum 100
                        textbutton "1_2"  xminimum 100
                        textbutton "1_3"  xminimum 100
                        textbutton "1_4"  xminimum 100
                    vbox:  #row 2
                        textbutton "2_1"  xminimum 100
                        textbutton "2_2"  xminimum 100
                        textbutton "2_3"  xminimum 100
                        textbutton "2_4"  xminimum 100
                    vbox:  #row 3
                        textbutton "3_1"  xminimum 100
                        textbutton "3_2"  xminimum 100
                        textbutton "3_3"  xminimum 100
                        textbutton "3_4"  xminimum 100
           

          
label start:
    call screen tips

xminimum helps you to keep the "grid" style you want.

This is stand alone code so if you create a new project and paste this code in you'll see how it displays then hopefully you can apply it to the layout you want.